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

{% block title %}Contact | Aarya Holidays & Cabs{% endblock %}

{% block hero_preload %}
<link rel="preload" as="image" href="{% static 'images/singapore-10-640.webp' %}" type="image/webp" imagesrcset="{% static_webp_srcset 'images/singapore-10.jpg' %}" imagesizes="100vw" fetchpriority="high">
{% endblock %}

{% block content %}
<section class="hero-section hero-slider-section" data-hero-slider>
    <div class="hero-slide is-active">
        <picture>
            <source type="image/webp" srcset="{% static_webp_srcset 'images/singapore-10.jpg' %}" sizes="100vw">
            <img class="hero-slide-image" src="{% static 'images/singapore-10.jpg' %}" alt="" aria-hidden="true" width="1350" height="900" loading="eager" fetchpriority="high" decoding="async">
        </picture>
    </div>
    <div class="hero-slide">
        <picture>
            <source type="image/webp" data-lazy-srcset="{% static_webp_srcset 'images/Buthan-5.png' %}" data-lazy-sizes="100vw">
            <img class="hero-slide-image" data-lazy-src="{% static 'images/Buthan-5.png' %}" alt="" aria-hidden="true" width="1350" height="900" decoding="async">
        </picture>
    </div>
    <div class="hero-slide">
        <picture>
            <source type="image/webp" data-lazy-srcset="{% static_webp_srcset 'images/andaman-6.png' %}" data-lazy-sizes="100vw">
            <img class="hero-slide-image" data-lazy-src="{% static 'images/andaman-6.png' %}" alt="" aria-hidden="true" width="1350" height="900" decoding="async">
        </picture>
    </div>
    <div class="hero-slide">
        <picture>
            <source type="image/webp" data-lazy-srcset="{% static_webp_srcset 'images/bali-11.jpg' %}" data-lazy-sizes="100vw">
            <img class="hero-slide-image" data-lazy-src="{% static 'images/bali-11.jpg' %}" alt="" aria-hidden="true" width="599" height="900" decoding="async">
        </picture>
    </div>
    <div class="hero-shade"></div>
    <div class="container position-relative">
        <div class="row align-items-center min-vh-hero">
            <div class="col-lg-8">
                <span class="eyebrow">Contact</span>
                <h1>Share your travel requirement and we will help you plan the next step.</h1>
                <p class="hero-lead">Holiday package, cab booking, destination suggestion, corporate trip, or wedding travel coordination.</p>
            </div>
        </div>
    </div>
</section>

<section class="section-pad contact-page">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-5">
                <div class="contact-info-block">
                    <h2>Contact Information</h2>
                    <ul class="contact-panel">
                        <li><i data-lucide="phone"></i><a href="tel:{{ company_info.phone_number|cut:' ' }}">{{ company_info.phone_number }}</a></li>
                        <li><i data-lucide="message-circle"></i><a href="https://wa.me/{{ company_info.whatsapp_number|cut:' '|cut:'+' }}" target="_blank" rel="noopener">{{ company_info.whatsapp_number }}</a></li>
                        <li><i data-lucide="mail"></i><a href="mailto:{{ company_info.email }}">{{ company_info.email }}</a></li>
                        <li><i data-lucide="map-pin"></i><span>{{ company_info.address }}</span></li>
                        <li><i data-lucide="clock"></i><span>{{ company_info.working_hours }}</span></li>
                    </ul>
                    <div class="contact-actions">
                        <a class="btn btn-success btn-sm" href="https://wa.me/{{ company_info.whatsapp_number|cut:' '|cut:'+' }}" target="_blank" rel="noopener">
                            <i data-lucide="message-circle" aria-hidden="true"></i>
                            WhatsApp Now
                        </a>
                    </div>
                </div>
                {% if company_info.google_map_embed_url %}
                    <div class="map-frame">
                        <iframe title="Aarya Holidays location map" src="{{ company_info.google_map_embed_url }}" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                {% else %}
                    <div class="empty-state">Map details will appear here once the Google Maps embed URL is added in company information.</div>
                {% endif %}
            </div>
            <div class="col-lg-7">
                <form class="enquiry-form" method="post" novalidate>
                    {% csrf_token %}
                    {% include "travel/includes/contact_form_fields.html" %}
                </form>
            </div>
        </div>
    </div>
</section>
{% endblock %}