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

{% block title %}Holiday Packages | Aarya Holidays & Cabs{% endblock %}

{% block hero_preload %}
<link rel="preload" as="image" href="{% static 'images/bali-11-640.webp' %}" type="image/webp" imagesrcset="{% static_webp_srcset 'images/bali-11.jpg' %}" 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/bali-11.jpg' %}" sizes="100vw">
            <img class="hero-slide-image" src="{% static 'images/bali-11.jpg' %}" alt="" aria-hidden="true" width="599" 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/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-shade"></div>
    <div class="container position-relative">
        <div class="row align-items-center min-vh-hero">
            <div class="col-lg-8">
                <span class="eyebrow">Holiday Packages</span>
                <h1>Detailed itineraries for beaches, hills, islands, heritage, and royal escapes.</h1>
                <p class="hero-lead">Choose a package to view the complete day-wise plan, inclusions, best season, and enquiry options.</p>
            </div>
        </div>
    </div>
</section>

<section class="section-pad curated-package-band">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <span class="eyebrow">Tour Packages</span>
                <h2>Ready-made ideas, customized around your travel style.</h2>
            </div>
            <p>Every package can be adjusted for family trips, group tours, corporate travel, and private cab plans.</p>
        </div>

        <div class="row g-4">
            {% for package in curated_packages %}
                <div class="col-md-6 col-xl-4">
                    <article class="package-detail-card">
                        <a class="package-card-media" href="{% url 'travel:package_detail' package.slug %}" aria-label="View {{ package.title }}">
                            <img src="{{ package.image_url }}" alt="{{ package.title }}" loading="lazy">
                            <span class="package-card-chip">{{ package.theme }}</span>
                        </a>
                        <div class="package-card-body">
                            <div class="card-topline">
                                <span class="pill">{{ package.duration }}</span>
                                <span class="package-location"><i data-lucide="map-pin" aria-hidden="true"></i>{{ package.location }}</span>
                            </div>
                            <h2>{{ package.title }}</h2>
                            <p>{{ package.summary }}</p>
                            <div class="package-mini-highlights">
                                {% for highlight in package.highlights|slice:":3" %}
                                    <span>{{ highlight.title|default:highlight }}</span>
                                {% endfor %}
                            </div>
                            <a class="btn btn-primary btn-sm" href="{% url 'travel:package_detail' package.slug %}">
                                <i data-lucide="route" aria-hidden="true"></i>
                                View Itinerary
                            </a>
                        </div>
                    </article>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="section-pad package-image-band">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">Featured Tour Prices</span>
            <h2>Popular international package price references.</h2>
            <p>Starting prices are shown with destination images so travellers can compare broader plans quickly.</p>
        </div>
        <div class="row g-4">
            {% for package in old_site_tour_prices %}
                <div class="col-md-6 col-xl-4">
                    <article class="travel-card price-tour-card">
                        <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>
                                <div class="price-block">
                                    <span>Starting From</span>
                                    <strong>&#8377;{{ package.price }}</strong>
                                </div>
                            </div>
                            <h2>{{ package.title }}</h2>
                            <p>{{ package.subtitle }}</p>
                            <a class="btn btn-primary btn-sm" href="{% url 'travel:contact' %}?requirement=holiday_package">
                                <i data-lucide="send" aria-hidden="true"></i>
                                Enquire
                            </a>
                        </div>
                    </article>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="section-pad packages-list-band">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">More Holiday Ideas</span>
            <h2>Domestic trips and flexible travel plans.</h2>
        </div>
        <div class="row g-4">
            {% for package in packages %}
                <div class="col-md-6 col-xl-4">
                    <article class="travel-card" id="{{ package.slug }}">
                        {% travel_image package as package_image %}
                        <img src="{{ package_image }}" alt="{{ package.title }}" loading="lazy">
                        <div class="travel-card-body">
                            {% travel_price package as package_price %}
                            <div class="card-topline">
                                <span class="pill">{{ package.duration }}</span>
                                {% if package.price_from %}
                                    <span class="price">From &#8377;{{ package.price_from|floatformat:0 }}</span>
                                {% endif %}
                                {% if not package.price_from and package_price %}
                                    <div class="price-block">
                                        <span>Starting From</span>
                                        <strong>&#8377;{{ package_price }}</strong>
                                    </div>
                                {% endif %}
                            </div>
                            <h2>{{ package.title }}</h2>
                            <p class="card-meta"><i data-lucide="map-pin"></i>{{ package.location }}</p>
                            <p>{{ package.short_description }}</p>
                            <a class="btn btn-primary btn-sm" href="{% url 'travel:contact' %}?requirement=holiday_package">
                                <i data-lucide="send" aria-hidden="true"></i>
                                Enquire
                            </a>
                        </div>
                    </article>
                </div>
            {% empty %}
                <div class="col-12">
                    <div class="empty-state">Holiday packages will appear here after they are added from the admin panel.</div>
                </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}