{% extends "base.html" %}
{% load static travel_images %}

{% block title %}Aarya Holidays & Cabs | Premium Holidays and Cab Services{% endblock %}

{% block hero_preload %}
<link rel="preload" as="image" href="{% static 'images/andaman-6-640.webp' %}" type="image/webp" imagesrcset="{% static_webp_srcset 'images/andaman-6.png' %}" imagesizes="100vw" fetchpriority="high">
{% endblock %}

{% block content %}
<section class="hero-section hero-slider-section" data-hero-slider>
    <div class="hero-slide is-active">
        <picture>
            <source type="image/webp" srcset="{% static_webp_srcset 'images/andaman-6.png' %}" sizes="100vw">
            <img class="hero-slide-image" src="{% static 'images/andaman-6.png' %}" alt="" aria-hidden="true" width="1350" height="900" loading="eager" fetchpriority="high" decoding="async">
        </picture>
    </div>
    <div class="hero-slide">
        <picture>
            <source type="image/webp" data-lazy-srcset="{% static_webp_srcset 'images/bali-11.jpg' %}" data-lazy-sizes="100vw">
            <img class="hero-slide-image" data-lazy-src="{% static 'images/bali-11.jpg' %}" alt="" aria-hidden="true" width="599" height="900" decoding="async">
        </picture>
    </div>
    <div class="hero-slide">
        <picture>
            <source type="image/webp" data-lazy-srcset="{% static_webp_srcset 'images/Buthan-5.png' %}" data-lazy-sizes="100vw">
            <img class="hero-slide-image" data-lazy-src="{% static 'images/Buthan-5.png' %}" alt="" aria-hidden="true" width="1350" height="900" decoding="async">
        </picture>
    </div>
    <div class="hero-slide">
        <picture>
            <source type="image/webp" data-lazy-srcset="{% static_webp_srcset 'images/kerala-6.jpg' %}" data-lazy-sizes="100vw">
            <img class="hero-slide-image" data-lazy-src="{% static 'images/kerala-6.jpg' %}" alt="" aria-hidden="true" width="695" height="900" decoding="async">
        </picture>
    </div>
    <div class="hero-slide">
        <picture>
            <source type="image/webp" data-lazy-srcset="{% static_webp_srcset 'images/singapore-10.jpg' %}" data-lazy-sizes="100vw">
            <img class="hero-slide-image" data-lazy-src="{% static 'images/singapore-10.jpg' %}" alt="" aria-hidden="true" width="1350" height="900" decoding="async">
        </picture>
    </div>
    <div class="hero-slide">
        <picture>
            <source type="image/webp" data-lazy-srcset="{% static_webp_srcset 'images/kashmir-6.jpg' %}" data-lazy-sizes="100vw">
            <img class="hero-slide-image" data-lazy-src="{% static 'images/kashmir-6.jpg' %}" alt="" aria-hidden="true" width="1359" height="900" decoding="async">
        </picture>
    </div>
    <div class="hero-shade"></div>
    <div class="container position-relative">
        <div class="row align-items-center min-vh-hero">
            <div class="col-lg-7">
                <div class="hero-kicker">
                    <i data-lucide="sparkles" aria-hidden="true"></i>
                    Premium holidays and cab travel
                </div>
                <h1>Travel beautifully with Aarya Holidays &amp; Cabs.</h1>
                <p class="hero-lead">{{ company_info.tagline }}</p>
                <div class="hero-actions">
                    <a class="btn btn-primary btn-lg" href="{% url 'travel:contact' %}">
                        <i data-lucide="send" aria-hidden="true"></i>
                        Enquire Now
                    </a>
                    <a class="btn btn-light btn-lg" href="{% url 'travel:packages' %}">
                        <i data-lucide="map" aria-hidden="true"></i>
                        View Packages
                    </a>
                    <button class="btn btn-outline-primary btn-lg" type="button" data-bs-toggle="modal" data-bs-target="#writeReviewModal">
                        <i data-lucide="star" aria-hidden="true"></i>
                        Write a Review
                    </button>
                </div>
                <div class="hero-metrics" aria-label="Travel highlights">
                    <div>
                        <strong>{{ visitor_count }}</strong>
                        <span>Visitors</span>
                    </div>
                    <div>
                        <strong>24/7</strong>
                        <span>Trip support</span>
                    </div>
                    <div>
                        <strong>8+</strong>
                        <span>Cab categories</span>
                    </div>
                    <div>
                        <strong>100%</strong>
                        <span>Custom planning</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-pad intro-section image-backed-section">
    <div class="container">
        <div class="row g-4 align-items-center">
            <div class="col-lg-6">
                <span class="eyebrow">Company Introduction</span>
                <h2>Holiday planning and cab coordination under one polished roof.</h2>
                <p class="section-lead">{{ company_info.introduction }}</p>
            </div>
            <div class="col-lg-6">
                <div class="feature-grid">
                    <div class="feature-tile">
                        <i data-lucide="route"></i>
                        <h3>Planned Routes</h3>
                        <p>Itineraries shaped around timing, comfort, and the kind of pace your group prefers.</p>
                    </div>
                    <div class="feature-tile">
                        <i data-lucide="car-front"></i>
                        <h3>Reliable Cabs</h3>
                        <p>Airport transfers, local runs, outstation trips, corporate movement, and event travel.</p>
                    </div>
                    <div class="feature-tile">
                        <i data-lucide="wallet-cards"></i>
                        <h3>Clear Pricing</h3>
                        <p>Simple estimates, practical inclusions, and guidance before you confirm the booking.</p>
                    </div>
                    <div class="feature-tile">
                        <i data-lucide="headphones"></i>
                        <h3>Human Support</h3>
                        <p>Responsive coordination before, during, and after your holiday or cab journey.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-pad journey-showcase">
    <div class="container">
        <div class="row g-4 align-items-center journey-row">
            <div class="col-lg-6">
                <img class="journey-image" src="{% static 'images/kerala-2.jpg' %}" alt="Scenic Kerala backwater holiday" loading="lazy">
            </div>
            <div class="col-lg-6">
                <div class="journey-copy">
                    <span class="eyebrow">Curated Travel</span>
                    <h2>Planned routes shaped around your pace.</h2>
                    <p class="section-lead">Itineraries shaped around timing, comfort, and the kind of pace your group prefers.</p>
                </div>
            </div>
        </div>
        <div class="row g-4 align-items-center journey-row flex-lg-row-reverse">
            <div class="col-lg-6">
                <img class="journey-image" src="{% static 'images/singapore-5.jpg' %}" alt="Bright city travel route" loading="lazy">
            </div>
            <div class="col-lg-6">
                <div class="journey-copy">
                    <span class="eyebrow">Cab Comfort</span>
                    <h2>Reliable rides for airport, local, and outstation plans.</h2>
                    <p class="section-lead">Airport transfers, local runs, outstation trips, corporate movement, and event travel.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-pad muted-band value-image-band">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">Why Choose Us</span>
            <h2>Every journey gets thoughtful attention.</h2>
            <p>{{ company_info.why_choose_text }}</p>
        </div>
        <div class="row g-3">
            <div class="col-md-6 col-xl-3">
                <div class="value-card">
                    <i data-lucide="shield-check"></i>
                    <h3>Trusted Coordination</h3>
                    <p>One team handles trip details, cab timing, and follow-up communication.</p>
                </div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="value-card">
                    <i data-lucide="map-pinned"></i>
                    <h3>Local Insight</h3>
                    <p>Routes and stays are suggested with practical knowledge of popular destinations.</p>
                </div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="value-card">
                    <i data-lucide="timer"></i>
                    <h3>On-time Travel</h3>
                    <p>Pickup, drop, and itinerary schedules are planned with realistic buffers.</p>
                </div>
            </div>
            <div class="col-md-6 col-xl-3">
                <div class="value-card">
                    <i data-lucide="smile"></i>
                    <h3>Easy Experience</h3>
                    <p>Friendly service, clean communication, and travel choices that fit your group.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-pad package-image-band">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <span class="eyebrow">Popular Holiday Packages</span>
                <h2>Ready-made ideas, customized around you.</h2>
            </div>
            <a class="btn btn-outline-primary" href="{% url 'travel:packages' %}">
                <i data-lucide="arrow-right" aria-hidden="true"></i>
                All Packages
            </a>
        </div>
        <div class="row g-4">
            {% for package in featured_itineraries %}
                <div class="col-md-6 col-xl-4">
                    <article class="travel-card" id="{{ package.slug }}">
                        <img src="{{ package.image_url }}" alt="{{ package.title }}" loading="lazy">
                        <div class="travel-card-body">
                            <div class="card-topline">
                                <span class="pill">{{ package.duration }}</span>
                                <span class="price">{{ package.theme }}</span>
                            </div>
                            <h3>{{ package.title }}</h3>
                            <p class="card-meta"><i data-lucide="map-pin"></i>{{ package.location }}</p>
                            <p>{{ package.summary }}</p>
                            <a class="btn btn-sm btn-primary" href="{% url 'travel:package_detail' package.slug %}">
                                <i data-lucide="route" aria-hidden="true"></i>
                                View Itinerary
                            </a>
                        </div>
                    </article>
                </div>
            {% empty %}
                <div class="col-12">
                    <div class="empty-state">Holiday packages will appear here after they are added to the itinerary collection.</div>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="section-pad muted-band cab-image-band">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <span class="eyebrow">Cab Services</span>
                <h2>Comfortable rides for every travel plan.</h2>
            </div>
            <a class="btn btn-outline-primary" href="{% url 'travel:cab_services' %}">
                <i data-lucide="arrow-right" aria-hidden="true"></i>
                View Cab Services
            </a>
        </div>
        <div class="row g-4">
            {% for service in featured_cabs %}
                <div class="col-md-6 col-xl-3">
                    <article class="service-card image-service-card" id="{{ service.slug }}">
                        {% cycle 'images/kerala-6.jpg' 'images/kashmir-6.jpg' 'images/bali-11.jpg' 'images/andaman-6.png' as place_image silent %}
                        <img src="{% static place_image %}" alt="{{ service.title }} destination" loading="lazy">
                        <i data-lucide="car"></i>
                        <h3>{{ service.title }}</h3>
                        <p>{{ service.description|truncatewords:18 }}</p>
                        <a href="{% url 'travel:contact' %}?requirement=cab_service">
                            Enquire
                            <i data-lucide="arrow-right" aria-hidden="true"></i>
                        </a>
                    </article>
                </div>
            {% empty %}
                <div class="col-12">
                    <div class="empty-state">Cab services will appear here after they are added from the admin panel.</div>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="section-pad destination-image-band">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <span class="eyebrow">Featured Destinations</span>
                <h2>Short breaks, long escapes, and beautiful routes.</h2>
            </div>
            <a class="btn btn-outline-primary" href="{% url 'travel:destinations' %}">
                <i data-lucide="arrow-right" aria-hidden="true"></i>
                All Destinations
            </a>
        </div>
        <div class="destination-strip">
            {% for destination in featured_destinations %}
                <article class="destination-card image-toggle-card" id="{{ destination.slug }}" role="button" tabindex="0" aria-expanded="false" data-toggle-card>
                    {% travel_image destination as destination_image %}
                    <div class="destination-image-wrap">
                        <img src="{{ destination_image }}" alt="{{ destination.name }}" loading="lazy">
                        <span>{{ destination.name }}</span>
                    </div>
                    <div class="destination-card-copy">
                        <h3>{{ destination.name }}</h3>
                        <p>{{ destination.description|truncatewords:16 }}</p>
                    </div>
                </article>
            {% empty %}
                <div class="empty-state">Featured destinations will appear here after they are added from the admin panel.</div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="section-pad service-band" id="services">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">Our Services</span>
            <h2>Travel support from enquiry to arrival.</h2>
        </div>
        <div class="row g-3">
            <div class="col-md-6 col-xl-3"><div class="compact-service"><i data-lucide="plane-landing"></i>Airport Pickup</div></div>
            <div class="col-md-6 col-xl-3"><div class="compact-service"><i data-lucide="plane-takeoff"></i>Airport Drop</div></div>
            <div class="col-md-6 col-xl-3"><div class="compact-service"><i data-lucide="building-2"></i>Corporate Travel</div></div>
            <div class="col-md-6 col-xl-3"><div class="compact-service"><i data-lucide="party-popper"></i>Wedding Travel</div></div>
        </div>
    </div>
</section>

{% include "travel/includes/community_reviews_section.html" %}

<section class="cta-band">
    <div class="container">
        <div class="cta-inner">
            <div>
                <span class="eyebrow">Call to Action</span>
                <h2>Start with a destination, a date, or just an idea.</h2>
            </div>
            <a class="btn btn-light btn-lg" href="{% url 'travel:contact' %}">
                <i data-lucide="calendar-check" aria-hidden="true"></i>
                Plan My Trip
            </a>
        </div>
    </div>
</section>

<section class="section-pad contact-section contact-image-band" id="contact">
    <div class="container">
        <div class="home-enquiry-shell text-center">
            <span class="eyebrow justify-content-center">Plan Your Journey</span>
            <h2>Tell us the trip you want, without clutter on the page.</h2>
            <p class="section-lead">Open the premium enquiry popup, share your travel details, and our team will get back with the right plan.</p>
            <button
                class="btn btn-primary btn-lg trip-planner-trigger"
                type="button"
                data-bs-toggle="modal"
                data-bs-target="#homeEnquiryModal"
            >
                <i data-lucide="map" aria-hidden="true"></i>
                Plan My Trip
            </button>
        </div>

        <div class="modal fade trip-enquiry-modal" id="homeEnquiryModal" tabindex="-1" aria-labelledby="homeEnquiryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
                <div class="modal-content">
                    <div class="modal-header border-0 pb-0">
                        <div>
                            <span class="eyebrow">Travel Enquiry</span>
                            <h3 class="modal-title" id="homeEnquiryModalLabel">Share your complete travel requirement</h3>
                            <p class="modal-subtitle">Tell us your destination, dates, stay preference, and any special requests.</p>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body pt-3">
                        <form class="enquiry-form enquiry-form-modal" method="post" action="{% url 'travel:home' %}#contact" novalidate>
                            {% csrf_token %}
                            {% include "travel/includes/contact_form_fields.html" with enquiry_variant="modal" %}
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% if form.errors %}
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var modalElement = document.getElementById("homeEnquiryModal");
        if (!modalElement || !window.bootstrap) {
            return;
        }

        var enquiryModal = new window.bootstrap.Modal(modalElement);
        enquiryModal.show();
    });
</script>
{% endif %}
{% endblock %}