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

{% block title %}Domestic Tours | Aarya Holidays & Cabs{% endblock %}

{% block hero_preload %}
<link rel="preload" as="image" href="{% static 'images/kerala-6.jpg' %}" type="image/jpeg" fetchpriority="high">
{% endblock %}

{% block content %}
<section class="page-hero compact-hero domestic-tours-hero">
    <div class="page-hero-media">
        <img class="page-hero-image" src="{% static 'images/kerala-6.jpg' %}" alt="Domestic tours" width="1600" height="900" loading="eager" fetchpriority="high" decoding="async">
    </div>
    <div class="container">
        <span class="eyebrow">Domestic Tours</span>
        <h1>Explore premium holiday tours across India.</h1>
        <p>Discover curated domestic experiences for hills, beaches, heritage, and family-friendly travel.</p>
        <div class="hero-actions">
            <a class="btn btn-primary btn-lg" href="{% url 'travel:contact' %}?requirement=holiday_package">
                <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="list" aria-hidden="true"></i>
                View All Packages
            </a>
        </div>
    </div>
</section>

<section class="section-pad curated-package-band">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <span class="eyebrow">Domestic Packages</span>
                <h2>Handpicked tours for travel inside India.</h2>
            </div>
            <p>These itineraries are selected for memorable domestic journeys, private cabs, and seamless local travel.</p>
        </div>

        <div class="row g-4">
            {% for package in domestic_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" decoding="async" width="800" height="450">
                            <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>
            {% empty %}
                <div class="col-12">
                    <div class="empty-state">No domestic packages are available at the moment.</div>
                </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="section-pad package-image-band">
    <div class="container">
        <div class="section-heading">
            <span class="eyebrow">Featured Karnataka Tour</span>
            <h2>Learn more about our signature Karnataka tour package.</h2>
            <p>Experience ancient temples, hill stations, and private cab travel with an intelligently paced itinerary.</p>
        </div>
        <div class="row g-4 align-items-center">
            <div class="col-lg-6">
                <article class="travel-card">
                    <img src="{{ karnataka_feature.image_url }}" alt="{{ karnataka_feature.title }}" loading="lazy" decoding="async" width="800" height="450">
                    <div class="travel-card-body">
                        <span class="eyebrow">Featured Package</span>
                        <h2>{{ karnataka_feature.title }}</h2>
                        <p>{{ karnataka_feature.summary }}</p>
                        <a class="btn btn-primary btn-sm" href="{% url 'travel:package_detail' karnataka_feature.slug %}">
                            <i data-lucide="route" aria-hidden="true"></i>
                            View Package
                        </a>
                    </div>
                </article>
            </div>
            <div class="col-lg-6">
                <div class="package-highlight-grid">
                    {% for highlight in karnataka_feature.highlights %}
                        <article class="package-highlight-pill">
                            <i data-lucide="sparkles" aria-hidden="true"></i>
                            <h3>{{ highlight.title|default:highlight }}</h3>
                            <p>{{ highlight.description|default:"Premium Karnataka travel experiences we plan for every guest." }}</p>
                        </article>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}