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

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

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

{% block content %}
<section class="page-hero compact-hero karnataka-tours-hero">
    <div class="page-hero-media">
        <img class="page-hero-image" src="{% static 'images/mysore-hero.jpeg' %}" alt="Karnataka tours" width="1600" height="900" loading="eager" fetchpriority="high" decoding="async">
    </div>
    <div class="container">
        <span class="eyebrow">Karnataka Tours</span>
        <h1>Dedicated tour experiences in Karnataka.</h1>
        <p>From heritage and hills to wildlife and beaches, explore Karnataka through our curated local packages.</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>
            <a class="btn btn-outline-light btn-lg" href="{% url 'travel:karnataka_temple_tours' %}">
                <i data-lucide="sparkles" aria-hidden="true"></i>
                Explore Temple Tours
            </a>
        </div>
    </div>
</section>

<section class="section-pad curated-package-band">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <span class="eyebrow">Karnataka Packages</span>
                <h2>Focused tours that highlight Karnataka&apos;s best destinations.</h2>
            </div>
            <p>Explore walkable heritage cities, misty hill stations, scenic pilgrimage routes, and flexible private cab packages.</p>
        </div>

        <div class="row g-4">
            {% for package in karnataka_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" onerror="this.onerror=null;this.src='/static/images/travel-placeholder.svg';">
                            <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 Package
                            </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">Why Choose Karnataka Tours</span>
            <h2>Private cab support, heritage circuits, and flexible regional itineraries.</h2>
            <p>Our Karnataka packages are crafted for relaxed travel across the state with expert routing and local service.</p>
        </div>
        <div class="row g-4">
            <div class="col-lg-6">
                <article class="travel-card">
                    <img src="{% static 'images/mysore-hero.jpeg' %}" alt="Karnataka travel" loading="lazy" onerror="this.onerror=null;this.src='/static/images/travel-placeholder.svg';">
                    <div class="travel-card-body">
                        <span class="eyebrow">Karnataka Focus</span>
                        <h2>Complete local experiences</h2>
                        <p>These packages cover the state's best cultural, hill, and nature highlights in an easy-to-book format.</p>
                    </div>
                </article>
            </div>
            <div class="col-lg-6">
                <article class="travel-card">
                    <img src="{% static 'images/Chikkamagaluru.jpeg' %}" alt="Chikmagalur tours" loading="lazy" onerror="this.onerror=null;this.src='/static/images/travel-placeholder.svg';">
                    <div class="travel-card-body">
                        <span class="eyebrow">Hills & Heritage</span>
                        <h2>Curated Karnataka highlights</h2>
                        <p>From Mysore palaces to Chikmagalur coffee hills, enjoy routes designed for relaxed, scenic travel.</p>
                    </div>
                </article>
            </div>
        </div>
    </div>
</section>
{% endblock %}