<?php
/**
 * Template Name: TravelVedika Premium Homepage
 * Description: High-fidelity home template pre-styled with tailwind tags and customizable ACF query loops.
 */

get_header();

// Fetch contact details from Customizer or Options Panel
$phone_number = get_theme_mod('travelvedika_phone', '+91 86868 71375');
$phone_link   = str_replace(' ', '', $phone_number);
$email_addr   = get_theme_mod('travelvedika_email', 'travelvedika@gmail.com');
?>

<!-- Premium High-Fidelity Hero Slider -->
<section id="hero-section" class="relative h-[530px] md:h-[580px] lg:h-[620px] overflow-hidden bg-[#0D2B2E] text-white">
    <div class="absolute inset-0 z-0">
        <?php 
        $hero_bg = get_field('hero_background_image') ?: 'https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9?auto=format&fit=crop&w=1800&q=80';
        ?>
        <img src="<?php echo esc_url($hero_bg); ?>" alt="Hero Scenery background" class="w-full h-full object-cover kb-zoom opacity-70">
        <div class="absolute inset-0 bg-gradient-to-r from-[#0D2B2E]/95 via-[#0D2B2E]/80 to-transparent"></div>
    </div>

    <div class="absolute inset-0 z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col justify-center text-left py-12">
        <div class="max-w-3xl space-y-6">
            <h1 class="text-4xl sm:text-5xl lg:text-7xl font-serif font-black tracking-tight leading-tight text-white">
                <?php echo esc_html(get_field('hero_main_title') ?: 'Explore the World In Style & Comfort'); ?>
            </h1>

            <p class="text-base sm:text-xl font-medium tracking-wide text-gray-300 font-sans">
                <?php echo esc_html(get_field('hero_sub_bullet_text') ?: 'Flights • Hotels • Tours • Visa Assistance'); ?>
            </p>

            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 pt-2">
                <div class="flex items-center gap-2">
                    <span class="text-[#C9A227] bg-[#C9A227]/10 p-1.5 rounded-full text-xs">💲</span>
                    <span class="text-xs font-bold text-gray-200">Best Price Guarantee</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-[#C9A227] bg-[#C9A227]/10 p-1.5 rounded-full text-xs">🎧</span>
                    <span class="text-xs font-bold text-gray-200">24/7 Customer Support</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-[#C9A227] bg-[#C9A227]/10 p-1.5 rounded-full text-xs">🏔️</span>
                    <span class="text-xs font-bold text-gray-200">Domestic & International</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-[#C9A227] bg-[#C9A227]/10 p-1.5 rounded-full text-xs">🛡️</span>
                    <span class="text-xs font-bold text-gray-200">Secure Booking</span>
                </div>
            </div>

            <div class="flex flex-wrap items-center gap-4 pt-4">
                <a href="#contact-section" class="px-7 py-3.5 bg-[#C9A227] hover:bg-amber-600 text-slate-950 rounded-xl text-sm font-black uppercase tracking-wider transition-all duration-300 shadow-lg">
                    <?php _e('Get Free Quote ➔', 'travelvedika'); ?>
                </a>
                <a href="https://api.whatsapp.com/send?phone=<?php echo esc_attr($phone_link); ?>" target="_blank" class="px-7 py-3.5 bg-transparent border-2 border-emerald-500 text-emerald-400 hover:bg-emerald-500 hover:text-white rounded-xl text-sm font-bold transition-all duration-300 flex items-center gap-2">
                    💬 Chat on WhatsApp
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Floating MakeMyTrip Style Search widget -->
<section id="search-section" class="relative -mt-16 sm:-mt-20 lg:-mt-24 z-30 max-w-6xl mx-auto px-4">
    <div class="bg-white rounded-3xl shadow-2xl p-5 sm:p-7 border border-gray-100 text-left">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-5 items-center">
            <div class="lg:col-span-4 border-b sm:border-b-0 sm:border-r border-gray-100 pb-3 pr-4">
                <span class="block text-[11px] font-bold text-gray-400 uppercase tracking-widest mb-1">Where do you want to go?</span>
                <div class="relative flex items-center gap-2">
                    <span class="text-[#C9A227] text-lg">📍</span>
                    <input type="text" id="destination-query" onkeyup="filterMockupPackages()" placeholder="Enter Destination (e.g., Kashmir)" class="w-full bg-transparent border-0 text-sm font-bold text-brand-dark focus:outline-none">