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

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

{% block hero_preload %}
<link rel="preload" as="image" href="{% static 'images/Kukke Subramanya.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/Kukke Subramanya.jpeg' %}" alt="Karnataka temple tours" width="1600" height="900" loading="eager" fetchpriority="high" decoding="async">
    </div>
    <div class="container">
        <span class="eyebrow">Karnataka Temple Tours</span>
        <h1>Premium temple journeys across Karnataka.</h1>
        <p>Experience sacred routes in Kukke, Murudeshwar, Horanadu, Badami, Shravanabelagola, and Sringeri with premium cab support and easy planning.</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:karnataka_tours' %}">
                <i data-lucide="map" aria-hidden="true"></i>
                Explore Karnataka 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">Temple Tour Collection</span>
                <h2>Six premium temple routes curated for comfort, devotion, and smooth travel.</h2>
            </div>
            <p>Each itinerary is planned for easy transfers, calm pacing, and private cab convenience so your spiritual journey feels restorative.</p>
        </div>

        <div class="row g-4">
            {% for package in temple_tour_packages %}
                <div class="col-md-6 col-xl-4">
                    <article class="package-detail-card">
                        <a class="package-card-media" href="{% url 'travel:karnataka_temple_tour_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:karnataka_temple_tour_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 Our Temple Tours</span>
            <h2>Carefully planned temple routes with private transport and easy pacing.</h2>
            <p>From hill temples to coastal shrines and heritage circuits, every package is crafted for comfort, accessibility, and meaningful travel.</p>
        </div>
        <div class="row g-4">
            <div class="col-lg-6">
                <article class="travel-card">
                    <img src="{% static 'images/Horanadu.jpeg' %}" alt="Horanadu temple tour" loading="lazy" onerror="this.onerror=null;this.src='/static/images/travel-placeholder.svg';">
                    <div class="travel-card-body">
                        <span class="eyebrow">Pilgrimage Comfort</span>
                        <h2>Well-managed temple visits</h2>
                        <p>Enjoy easy pickup, private cab movement, and calm daily plans designed around temple timings and comfort.</p>
                    </div>
                </article>
            </div>
            <div class="col-lg-6">
                <article class="travel-card">
                    <img src="{% static 'images/Badami.jpeg' %}" alt="Badami temple route" loading="lazy" onerror="this.onerror=null;this.src='/static/images/travel-placeholder.svg';">
                    <div class="travel-card-body">
                        <span class="eyebrow">Cultural Depth</span>
                        <h2>Temple heritage beyond the shrine</h2>
                        <p>Our routes also include architecture, history, and scenic landscapes so the journey feels both sacred and memorable.</p>
                    </div>
                </article>
            </div>
        </div>
    </div>
</section>
{% endblock %}