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

{% block title %}{{ package.title }} | Holiday Packages | Aarya Holidays & Cabs{% endblock %}
{% block meta_description %}{{ package.summary }}{% endblock %}

{% block hero_preload %}
<link rel="preload" as="image" href="{{ package.image_url }}" fetchpriority="high">
{% endblock %}

{% block content %}
<section class="page-hero compact-hero package-detail-hero">
    <div class="page-hero-media">
        <img class="page-hero-image" src="{{ package.image_url }}" alt="" aria-hidden="true" width="1600" height="900" loading="eager" fetchpriority="high" decoding="async" onerror="this.onerror=null;this.src='/static/images/travel-placeholder.svg';">
    </div>
    <div class="container">
        <span class="eyebrow">{{ package.theme }}</span>
        <h1>{{ package.title }}</h1>
        <p>{{ package.summary }}</p>
        <div class="hero-actions package-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="https://wa.me/{{ company_info.whatsapp_number|cut:' '|cut:'+' }}" target="_blank" rel="noopener">
                <i data-lucide="message-circle" aria-hidden="true"></i>
                WhatsApp
            </a>
        </div>
    </div>
</section>

<section class="section-pad package-overview-band">
    <div class="container">
        <div class="package-detail-shell">
            <aside class="package-summary-panel">
                <span class="eyebrow">Package Overview</span>
                <h2>{{ package.title }}</h2>
                <div class="package-fact-list">
                    <div>
                        <i data-lucide="calendar-days" aria-hidden="true"></i>
                        <span>Duration</span>
                        <strong>{{ package.duration }}</strong>
                    </div>
                    <div>
                        <i data-lucide="map" aria-hidden="true"></i>
                        <span>Route</span>
                        <strong>{{ package.location }}</strong>
                    </div>
                    <div>
                        <i data-lucide="sun" aria-hidden="true"></i>
                        <span>Best Time</span>
                        <strong>{{ package.best_time }}</strong>
                    </div>
                    <div>
                        <i data-lucide="indian-rupee" aria-hidden="true"></i>
                        <span>Pricing</span>
                        <strong>Custom quote</strong>
                    </div>
                </div>
                <a class="btn btn-outline-primary w-100" href="{% url 'travel:packages' %}">
                    <i data-lucide="arrow-left" aria-hidden="true"></i>
                    Back to Packages
                </a>
            </aside>

            <div class="package-itinerary-panel">
                <div class="section-heading">
                    <span class="eyebrow">Highlights</span>
                    <h2>What this package covers.</h2>
                    <p>{{ package.summary }}</p>
                </div>

                <div class="package-highlight-grid">
                    {% for highlight in package.highlights %}
                        <article class="package-highlight-pill">
                            {% if highlight.icon %}
                                <i class="{{ highlight.icon }}" aria-hidden="true"></i>
                            {% else %}
                                <i data-lucide="sparkles" aria-hidden="true"></i>
                            {% endif %}
                            <h3>{{ highlight.title|default:highlight }}</h3>
                            <p>{{ highlight.description|default:"Curated stop included in this package itinerary." }}</p>
                        </article>
                    {% endfor %}
                </div>

                <div class="section-heading itinerary-heading">
                    <span class="eyebrow">Day Wise Plan</span>
                    <h2>Comfortable pacing, clear routes, and easy coordination.</h2>
                </div>

                <div class="itinerary-timeline">
                    {% for day in package.itinerary %}
                        <article class="itinerary-day">
                            <span>{{ day.day }}</span>
                            <div>
                                <h3>{{ day.title }}</h3>
                                <p>{{ day.plan }}</p>
                            </div>
                        </article>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-pad package-includes-band">
    <div class="container">
        <div class="section-heading split-heading">
            <div>
                <span class="eyebrow">Inclusions</span>
                <h2>Know what is covered before you confirm.</h2>
            </div>
            <p>Final inclusions can change based on hotel category, season, route, and group size.</p>
        </div>

        <div class="includes-grid">
            <article class="include-card">
                <i data-lucide="badge-check" aria-hidden="true"></i>
                <h3>Package Includes</h3>
                <ul>
                    {% for item in package_includes %}
                        <li>{{ item }}</li>
                    {% endfor %}
                </ul>
            </article>
            <article class="include-card exclude-card">
                <i data-lucide="circle-slash" aria-hidden="true"></i>
                <h3>Package Excludes</h3>
                <ul>
                    {% for item in package_excludes %}
                        <li>{{ item }}</li>
                    {% endfor %}
                </ul>
            </article>
        </div>
    </div>
</section>

<section class="section-pad package-faq-band">
    <div class="container">
        <div class="package-cta-panel">
            <span class="eyebrow">Plan This Trip</span>
            <h2>Want this {{ package.title }} customized?</h2>
            <p>Share your travel date, pickup city, number of guests, preferred hotel type, and cab requirement. The team will shape the quote around your exact plan.</p>
            <div class="hero-actions">
                <a class="btn btn-primary" href="{% url 'travel:contact' %}?requirement=holiday_package">
                    <i data-lucide="send" aria-hidden="true"></i>
                    Send Enquiry
                </a>
                <a class="btn btn-light" href="https://wa.me/{{ company_info.whatsapp_number|cut:' '|cut:'+' }}" target="_blank" rel="noopener">
                    <i data-lucide="message-circle" aria-hidden="true"></i>
                    Chat on WhatsApp
                </a>
            </div>
        </div>

        <div class="faq-grid">
            <article class="faq-card">
                <h3>Can this package be customized?</h3>
                <p>Yes. Duration, hotels, cab type, pickup point, sightseeing pace, and route can be adjusted.</p>
            </article>
            <article class="faq-card">
                <h3>Is private cab travel available?</h3>
                <p>Yes. Aarya Holidays & Cabs can coordinate private cab travel for local, outstation, airport, and group movement.</p>
            </article>
            <article class="faq-card">
                <h3>When should I book?</h3>
                <p>Booking early is recommended during weekends, holidays, long weekends, and peak travel seasons.</p>
            </article>
        </div>

        {% if related_packages %}
            <div class="related-package-strip">
                <div class="section-heading">
                    <span class="eyebrow">Related Packages</span>
                    <h2>More destinations you may like.</h2>
                </div>
                <div class="row g-4">
                    {% for item in related_packages %}
                        <div class="col-md-4">
                            <a class="related-package-card" href="{% url 'travel:package_detail' item.slug %}">
                                <img src="{{ item.image_url }}" alt="{{ item.title }}" loading="lazy" onerror="this.onerror=null;this.src='/static/images/travel-placeholder.svg';">
                                <span>{{ item.title }}</span>
                            </a>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>
</section>
{% endblock %}