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

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

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

{% block content %}
<section class="page-hero compact-hero international-tours-hero">
    <div class="page-hero-media">
        <img class="page-hero-image" src="{% static 'images/singapore-10.jpg' %}" alt="International tours" width="1600" height="900" loading="eager" fetchpriority="high" decoding="async">
    </div>
    <div class="container">
        <span class="eyebrow">International Tours</span>
        <h1>Discover curated global holiday packages.</h1>
        <p>From Bali and Singapore to Europe and beyond, find international tours built for comfortable 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">International Packages</span>
                <h2>Refined overseas tour packages with premium support.</h2>
            </div>
            <p>Choose from international destinations with expert planning, airport transfers, and itinerary comfort.</p>
        </div>

        <div class="row g-4">
            {% for package in international_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 Itinerary
                            </a>
                        </div>
                    </article>
                </div>
            {% empty %}
                <div class="col-12">
                    <div class="empty-state">No international 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">International Travel Comfort</span>
            <h2>Our travel team takes care of planning, transfers, and itinerary support.</h2>
            <p>Every overseas package is offered with guidance on visas, local transfers, and private cab support where available.</p>
        </div>
        <div class="row g-4">
            <div class="col-lg-6">
                <article class="travel-card">
                    <img src="{% static 'images/singapore-10.jpg' %}" alt="International travel planning" loading="lazy" decoding="async" width="800" height="600" onerror="this.onerror=null;this.src='/static/images/travel-placeholder.svg';">
                    <div class="travel-card-body">
                        <span class="eyebrow">Travel Planning</span>
                        <h2>Seamless booking support</h2>
                        <p>We help with package planning, airport pickups, and local sightseeing coordination for international tours.</p>
                    </div>
                </article>
            </div>
            <div class="col-lg-6">
                <article class="travel-card">
                    <img src="{% static 'images/erurope-2.jpg' %}" alt="Europe travel" loading="lazy" decoding="async" width="800" height="600" onerror="this.onerror=null;this.src='/static/images/travel-placeholder.svg';">
                    <div class="travel-card-body">
                        <span class="eyebrow">Global Destinations</span>
                        <h2>Popular overseas routes</h2>
                        <p>Choose from holiday plans in Bali, Singapore, Europe, and other destinations designed to be effortless.</p>
                    </div>
                </article>
            </div>
        </div>
    </div>
</section>
{% endblock %}