@extends('layouts.app')

@section('title', $seo ? $seo->meta_title : 'Airport Pickup and Car Rental in Ikeja | Kevron Suites')
@section('meta_description', $seo ? $seo->meta_description : 'Request airport pickup from MM1, MM2 or Murtala Muhammed International Airport and car-rental support for your stay at Kevron Suites and Apartments, Adeniyi Jones, Ikeja, Lagos.')

@section('content')
<div class="bg-white dark:bg-slate-950 min-h-screen text-slate-700 dark:text-slate-300 antialiased" x-data="{
    activeForm: 'pickup', // pickup or rental
    submitting: false,
    toastMessage: '',
    toastType: 'success',
    showToast: false,
    activeFaq: null,

    triggerToast(msg, type = 'success') {
        this.toastMessage = msg;
        this.toastType = type;
        this.showToast = true;
        setTimeout(() => { this.showToast = false; }, 4000);
    },

    selectForm(type) {
        this.activeForm = type;
        document.getElementById('transport-form-hub').scrollIntoView({ behavior: 'smooth', block: 'start' });
    },

    submitPickupForm() {
        this.submitting = true;
        const form = document.getElementById('pickup-request-form');
        const formData = new FormData(form);

        fetch('{{ route('transport.pickup') }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            this.submitting = false;
            if (data.success) {
                this.triggerToast(data.message, 'success');
                form.reset();
            } else {
                this.triggerToast('Validation failed. Please check required fields.', 'error');
            }
        })
        .catch(err => {
            this.submitting = false;
            this.triggerToast('A connection error occurred. Please try again.', 'error');
        });
    },

    submitRentalForm() {
        this.submitting = true;
        const form = document.getElementById('rental-request-form');
        const formData = new FormData(form);

        fetch('{{ route('transport.rental') }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            this.submitting = false;
            if (data.success) {
                this.triggerToast(data.message, 'success');
                form.reset();
            } else {
                this.triggerToast('Validation failed. Please check required fields.', 'error');
            }
        })
        .catch(err => {
            this.submitting = false;
            this.triggerToast('A connection error occurred. Please try again.', 'error');
        });
    },

    logTelemetry(action, key) {
        fetch('{{ route('transport.log') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ event_type: action, event_key: key })
        });
    }
}">

    <!-- Dynamic Telemetry Load Hook -->
    <div x-init="logTelemetry('page_view', 'transport_page_load')"></div>

    <!-- 1. HERO SECTION -->
    <header class="relative bg-slate-900 text-white overflow-hidden py-16 lg:py-24">
        <div class="absolute inset-0 opacity-15">
            <img src="{{ asset('pictures/lounge.jpg') }}" alt="Luxury lobby reception at Kevron Suites" class="w-full h-full object-cover">
        </div>
        <div class="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-900 to-transparent"></div>
        
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
                <div class="lg:col-span-8 space-y-6">
                    <span class="inline-flex items-center space-x-2 bg-amber-500/20 text-amber-400 text-xs px-3 py-1 rounded-full font-bold uppercase tracking-wider">
                        <span class="w-2 h-2 rounded-full bg-amber-500 animate-ping"></span>
                        <span>Vetted Executive Airport Transit</span>
                    </span>
                    
                    <h1 class="text-white font-normal leading-tight tracking-tight" style="font-family: 'Marcellus', serif; font-size: clamp(1.45rem, 4vw, 1.8rem);">
                        Airport Pickup and Car Rental <span class="text-amber-400 block lg:inline">in Ikeja, Lagos</span>
                    </h1>
                    
                    <p class="text-slate-300 leading-relaxed font-medium" style="font-family: 'Inter', sans-serif; font-size: 0.875rem;">
                        Request airport pickup from MM1, MM2 or Murtala Muhammed International Airport, or arrange rented car support for your stay at Kevron Suites and Apartments, Adeniyi Jones, Ikeja.
                    </p>
                    
                    <!-- Trust Chips -->
                    <div class="flex flex-wrap gap-2 pt-2">
                        <span class="inline-flex items-center space-x-1.5 bg-white/10 text-white text-xs px-3 py-1.5 rounded-[0.1rem] border border-white/5 font-semibold">
                            <span class="text-amber-400">●</span> MM1 / MM2 Pickup
                        </span>
                        <span class="inline-flex items-center space-x-1.5 bg-white/10 text-white text-xs px-3 py-1.5 rounded-[0.1rem] border border-white/5 font-semibold">
                            <span class="text-amber-400">●</span> International Terminal
                        </span>
                        <span class="inline-flex items-center space-x-1.5 bg-white/10 text-white text-xs px-3 py-1.5 rounded-[0.1rem] border border-white/5 font-semibold">
                            <span class="text-amber-400">●</span> Executive Car Hire
                        </span>
                        <span class="inline-flex items-center space-x-1.5 bg-white/10 text-white text-xs px-3 py-1.5 rounded-[0.1rem] border border-white/5 font-semibold">
                            <span class="text-amber-400">●</span> 24/7 WhatsApp Help
                        </span>
                        <span class="inline-flex items-center space-x-1.5 bg-white/10 text-white text-xs px-3 py-1.5 rounded-[0.1rem] border border-white/5 font-semibold">
                            <span class="text-amber-400">●</span> Competitive Pricing
                        </span>
                    </div>

                    <!-- CTAs -->
                    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 pt-4">
                        <button class="btn-pill btn-primary justify-center sm:justify-start" @click="selectForm('pickup'); logTelemetry('click_cta', 'hero_request_pickup');">
                            Request Airport Pickup
                        </button>
                        <button class="btn-pill btn-outline-gold justify-center sm:justify-start !border-white !text-white hover:!bg-white hover:!text-slate-900" @click="selectForm('rental'); logTelemetry('click_cta', 'hero_request_rental');">
                            Request Car Rental
                        </button>
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985')) }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20I%20would%20like%20assistance%20with%20airport%20transit%20arrangements%20for%20my%20stay%20in%20Ikeja." 
                           target="_blank" 
                           class="inline-flex items-center justify-center space-x-2 text-xs font-semibold text-amber-400 hover:text-amber-300 transition-colors py-2" 
                           @click="logTelemetry('click_cta', 'hero_whatsapp_link')">
                            <span>WhatsApp Support &rarr;</span>
                        </a>
                    </div>
                </div>

                <div class="lg:col-span-4 relative mt-8 lg:mt-0 flex justify-center">
                    <div class="w-full max-w-xs aspect-square bg-slate-800 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] overflow-hidden relative">
                        <img src="{{ asset('pictures/other-lounge.jpg') }}" alt="Luxury arrival lobby" class="w-full h-full object-cover">
                        <div class="absolute bottom-4 left-4 right-4 bg-slate-950/80 backdrop-blur-md p-4 rounded-[0.1rem] border border-white/10">
                            <span class="text-amber-400 text-xs font-bold uppercase tracking-wider block mb-1">Smooth Arrivals</span>
                            <span class="text-white text-xs font-medium">Safe executive transport direct to Regina Coker or Ogunlowo blocks.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 2. AIRPORT COVERAGE SECTION -->
    <section class="py-16 bg-slate-50 dark:bg-slate-900/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Terminals We Serve</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Lagos Airport Coverage
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- Coverage Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- MM1 Card -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-300 flex flex-col justify-between">
                    <div>
                        <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm">
                            MM1
                        </div>
                        <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">MM1 Local Airport</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed mb-4">
                            Serving domestic flights within Nigeria. We coordinate drivers to meet you at the local arrival terminal exit gates.
                        </p>
                        <ul class="text-[10px] space-y-1.5 text-slate-400 font-medium list-none mb-4">
                            <li><span class="text-amber-500">✔</span> Vetted security driver</li>
                            <li><span class="text-amber-500">✔</span> Approx. 8 minutes to Ikeja suites</li>
                            <li><span class="text-amber-500">✔</span> Luggage assistance included</li>
                        </ul>
                    </div>
                    <button class="w-full text-center text-xs font-bold bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200 py-2.5 rounded-full hover:bg-amber-500 hover:text-slate-950 transition-colors duration-300"
                            @click="selectForm('pickup'); logTelemetry('click_card_cta', 'mm1_pickup');">
                        Request Pickup
                    </button>
                </div>

                <!-- MM2 Card -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-300 flex flex-col justify-between">
                    <div>
                        <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm">
                            MM2
                        </div>
                        <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">MM2 Local Airport</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed mb-4">
                            The primary modern terminal for local executive carriers. Executive pickups mapped cleanly direct from the interior lounge arrivals.
                        </p>
                        <ul class="text-[10px] space-y-1.5 text-slate-400 font-medium list-none mb-4">
                            <li><span class="text-amber-500">✔</span> Chauffeur terminal parking</li>
                            <li><span class="text-amber-500">✔</span> Flight delay synchronization</li>
                            <li><span class="text-amber-500">✔</span> Clean air-conditioned sedan</li>
                        </ul>
                    </div>
                    <button class="w-full text-center text-xs font-bold bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200 py-2.5 rounded-full hover:bg-amber-500 hover:text-slate-950 transition-colors duration-300"
                            @click="selectForm('pickup'); logTelemetry('click_card_cta', 'mm2_pickup');">
                        Request Pickup
                    </button>
                </div>

                <!-- International Card -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-300 flex flex-col justify-between">
                    <div>
                        <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm">
                            INT
                        </div>
                        <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">Murtala Muhammed International Airport</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed mb-4">
                            Lagos Primary International Hub. Safe executive SUV pickup transit coordination direct to your en-suite apartments.
                        </p>
                        <ul class="text-[10px] space-y-1.5 text-slate-400 font-medium list-none mb-4">
                            <li><span class="text-amber-500">✔</span> Nameboard paging at arrival exit</li>
                            <li><span class="text-amber-500">✔</span> Approx. 15 minutes to Ikeja branch</li>
                            <li><span class="text-amber-500">✔</span> Vetted local route routing</li>
                        </ul>
                    </div>
                    <button class="w-full text-center text-xs font-bold bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200 py-2.5 rounded-full hover:bg-amber-500 hover:text-slate-950 transition-colors duration-300"
                            @click="selectForm('pickup'); logTelemetry('click_card_cta', 'intl_pickup');">
                        Request Pickup
                    </button>
                </div>
            </div>

            <!-- Reassurance Statement -->
            <div class="mt-12 bg-blue-50/50 dark:bg-slate-900 border border-blue-100 dark:border-slate-800 p-6 rounded-[0.1rem] text-center max-w-4xl mx-auto">
                <p class="text-slate-600 dark:text-slate-400 leading-relaxed" style="font-family: 'Inter', sans-serif; font-size: 0.875rem;">
                    Kevron Suites and Apartments is located in Adeniyi Jones, Ikeja, with convenient access to Lagos airport routes. Airport pickup can be requested before arrival to support a smoother guest check-in experience.
                </p>
            </div>
        </div>
    </section>

    <!-- 3. HOW IT WORKS SECTION -->
    <section class="py-16 bg-white dark:bg-slate-950">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Our Process</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    How Transport Coordination Works
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
                <!-- Step 1 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] flex flex-col justify-between hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-3">01. Submit Request</span>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        Submit your airport pickup or car-rental request using the forms below.
                    </p>
                </div>

                <!-- Step 2 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] flex flex-col justify-between hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-3">02. Share Details</span>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        Provide flight, arrival, luggage or vehicle preference parameters cleanly.
                    </p>
                </div>

                <!-- Step 3 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] flex flex-col justify-between hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-3">03. Team Review</span>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        The Kevron front-desk and concierge logistics team reviews your request.
                    </p>
                </div>

                <!-- Step 4 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] flex flex-col justify-between hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-3">04. Pricing Quote</span>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        You receive a dynamic availability check and tailored pricing confirmation.
                    </p>
                </div>

                <!-- Step 5 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] flex flex-col justify-between hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-3">05. Confirmed Transit</span>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        Chauffeur detail tracking triggers and service confirms after final checks.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 4. CENTRAL INTERACTIVE REQUEST HUB SECTION -->
    <section id="transport-form-hub" class="py-20 bg-slate-50 dark:bg-slate-900/50 scroll-mt-24">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] shadow-lg p-6 sm:p-8">
                
                <!-- Toggle Tab Headers -->
                <div class="flex border-b border-slate-100 dark:border-slate-800 pb-4 mb-6 justify-between items-center">
                    <div class="flex space-x-1 bg-slate-100 dark:bg-slate-800 p-1 rounded-full select-none">
                        <button class="text-xs font-semibold px-5 py-2 rounded-full transition-all duration-300 focus:outline-none"
                                :class="activeForm === 'pickup' ? 'bg-blue-900 text-white dark:bg-amber-500 dark:text-slate-950' : 'text-slate-600 hover:text-blue-950 dark:text-slate-400 dark:hover:text-white'"
                                @click="activeForm = 'pickup'; logTelemetry('click_tab', 'switch_pickup');">
                            Airport Pickup Form
                        </button>
                        <button class="text-xs font-semibold px-5 py-2 rounded-full transition-all duration-300 focus:outline-none"
                                :class="activeForm === 'rental' ? 'bg-blue-900 text-white dark:bg-amber-500 dark:text-slate-950' : 'text-slate-600 hover:text-blue-950 dark:text-slate-400 dark:hover:text-white'"
                                @click="activeForm = 'rental'; logTelemetry('click_tab', 'switch_rental');">
                            Car Rental Form
                        </button>
                    </div>

                    <span class="hidden sm:inline-block text-[10px] uppercase tracking-wider font-bold text-amber-500">
                        ● Direct Concierge Integration
                    </span>
                </div>

                <!-- 4A. AIRPORT PICKUP REQUEST FORM -->
                <form id="pickup-request-form" x-show="activeForm === 'pickup'" @submit.prevent="submitPickupForm()">
                    @csrf
                    <div class="space-y-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="guest_name">Full Name</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="text" id="guest_name" name="guest_name" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="phone">Phone / WhatsApp</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="tel" id="phone" name="phone" required placeholder="e.g. +234...">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="email">Email Address</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="email" id="email" name="email" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="booking_reference">Booking Reference <span class="text-[9px] text-slate-400 font-normal">(Optional)</span></label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="text" id="booking_reference" name="booking_reference" placeholder="e.g. KEV-88377">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="pickup_airport">Airport Terminal</label>
                                <select class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-semibold" id="pickup_airport" name="pickup_airport">
                                    @foreach($airports as $ap)
                                        <option value="{{ $ap->name }}">{{ $ap->name }} ({{ $ap->code }})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="flight_number">Flight Number</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="text" id="flight_number" name="flight_number" placeholder="e.g. EK 783">
                            </div>
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="airline">Airline <span class="text-[9px] text-slate-400 font-normal">(Optional)</span></label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="text" id="airline" name="airline" placeholder="e.g. Emirates">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="arrival_date">Arrival Date</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="date" id="arrival_date" name="arrival_date" required>
                            </div>
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="arrival_time">Landing Time</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="time" id="arrival_time" name="arrival_time" required>
                            </div>
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="guests_count">Passengers</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="number" id="guests_count" name="guests_count" min="1" max="10" value="1" required>
                            </div>
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="luggage_count">Luggage Pieces</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="number" id="luggage_count" name="luggage_count" min="0" max="30" value="2" required>
                            </div>
                        </div>

                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="pickup_vehicle">Vehicle Preference</label>
                            <select class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-semibold" id="pickup_vehicle" name="vehicle_preference">
                                <option value="standard">Standard Executive Sedan</option>
                                <option value="SUV">Luxury SUV</option>
                                <option value="van">Executive Coach/Van</option>
                                <option value="not_sure">Not sure (Coordinate with team)</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="special_instructions">Special Instructions</label>
                            <textarea class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white h-24 resize-none" id="special_instructions" name="special_instructions" placeholder="Flight delays notes, child seat needs, security escort queries, or bulky cargo specifications..."></textarea>
                        </div>

                        <div class="flex items-start">
                            <input class="mt-1 mr-2 rounded-[0.1rem] border-slate-200 text-amber-500 focus:ring-amber-500" type="checkbox" id="pickup_consent" required>
                            <label class="text-[10px] text-slate-500 dark:text-slate-400 font-medium" for="pickup_consent">
                                I agree to the privacy policy. I understand airport pickup rates are competitive, pricing is subject to terminal selection, and arrangements are confirmed only after Kevron concierge validation.
                            </label>
                        </div>

                        <button class="w-full btn-pill btn-primary justify-center py-3.5" type="submit" :disabled="submitting" @click="logTelemetry('submit_form', 'airport_pickup_submit')">
                            <span x-show="!submitting">Submit Airport Pickup Request</span>
                            <span x-show="submitting" class="flex items-center space-x-2">
                                <svg class="animate-spin h-4 w-4 text-slate-900" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                                <span>Verifying Parameters...</span>
                            </span>
                        </button>
                    </div>
                </form>

                <!-- 4B. CAR RENTAL REQUEST FORM -->
                <form id="rental-request-form" x-show="activeForm === 'rental'" @submit.prevent="submitRentalForm()">
                    @csrf
                    <div class="space-y-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="rental_name">Full Name</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="text" id="rental_name" name="guest_name" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="rental_phone">Phone / WhatsApp</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="tel" id="rental_phone" name="phone" required placeholder="e.g. +234...">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="rental_email">Email Address</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="email" id="rental_email" name="email" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="rental_booking_reference">Booking Reference <span class="text-[9px] text-slate-400 font-normal">(Optional)</span></label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="text" id="rental_booking_reference" name="booking_reference" placeholder="e.g. KEV-88377">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="rental_date">Start Hire Date</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="date" id="rental_date" name="rental_date" required>
                            </div>
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="start_time">Pickup Time</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="time" id="start_time" name="start_time" required>
                            </div>
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="duration_days">Duration (Days)</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="number" id="duration_days" name="duration_days" min="1" max="90" value="1" required>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="car_type">Vehicle Style</label>
                                <select class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-semibold" id="car_type" name="car_type">
                                    @foreach($vehicles as $vh)
                                        <option value="{{ $vh->name }}">{{ $vh->name }}</option>
                                    @endforeach
                                    <option value="not_sure">Not sure (Coordinate with team)</option>
                                </select>
                            </div>
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="driver_option">Driver Option</label>
                                <select class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-semibold" id="driver_option" name="driver_option">
                                    <option value="with_driver">Professional Security Driver Included</option>
                                    <option value="self_drive">Self-Drive Option (Subject to verify)</option>
                                    <option value="not_sure">Not sure / Custom needs</option>
                                </select>
                            </div>
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="number_of_passengers">Passengers</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="number" id="number_of_passengers" name="number_of_passengers" min="1" max="15" value="1">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="pickup_location">Pickup Address</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="text" id="pickup_location" name="pickup_location" required placeholder="e.g. Kevron Apartments or Airport Terminal">
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="dropoff_location">Drop-off Address <span class="text-[9px] text-slate-400 font-normal">(Optional)</span></label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="text" id="dropoff_location" name="dropoff_location" placeholder="Leave blank if local daily hire">
                            </div>
                        </div>

                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="rental_notes">Additional Rental Remarks</label>
                            <textarea class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white h-24 resize-none" id="rental_notes" name="notes" placeholder="Daily travel destination routines, specialized security driver requirements, or extra vehicle preferences..."></textarea>
                        </div>

                        <div class="flex items-start">
                            <input class="mt-1 mr-2 rounded-[0.1rem] border-slate-200 text-amber-500 focus:ring-amber-500" type="checkbox" id="rental_consent" required>
                            <label class="text-[10px] text-slate-500 dark:text-slate-400 font-medium" for="rental_consent">
                                I agree to the privacy policy. I understand car hire availability is subject to verification, terms depend on duration parameters, and rentals are confirmed only after final concierge agreements.
                            </label>
                        </div>

                        <button class="w-full btn-pill btn-primary justify-center py-3.5" type="submit" :disabled="submitting" @click="logTelemetry('submit_form', 'car_rental_submit')">
                            <span x-show="!submitting">Submit Car Rental Request</span>
                            <span x-show="submitting" class="flex items-center space-x-2">
                                <svg class="animate-spin h-4 w-4 text-slate-900" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                                <span>Verifying Parameters...</span>
                            </span>
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </section>

    <!-- 5. PRICING NOTE SECTION -->
    <section class="py-12 bg-white dark:bg-slate-950 border-t border-b border-slate-100 dark:border-slate-800">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-amber-50/50 dark:bg-slate-900/80 border-l-4 border-amber-500 p-6 rounded-[0.1rem] shadow-sm">
                <div class="flex space-x-3 items-start">
                    <span class="text-amber-500 mt-0.5">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </span>
                    <div>
                        <h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider mb-2">Transport Pricing Policy</h4>
                        <p class="text-slate-600 dark:text-slate-400 leading-relaxed" style="font-family: 'Inter', sans-serif; font-size: 0.875rem;">
                            Airport pickup and car-rental support are available on request at competitive prices. Final pricing may depend on airport terminal, arrival time, vehicle type, number of guests, luggage, trip duration and any special requirements. Our team will confirm availability and price before the service is finalised.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 6. GUEST SAFETY AND SERVICE NOTE -->
    <section class="py-16 bg-slate-50 dark:bg-slate-900/50">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Practical Advice</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Guest Safety and Service Note
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 font-medium" style="font-family: 'Inter', sans-serif; font-size: 0.875rem;">
                <div class="space-y-4 text-slate-600 dark:text-slate-400">
                    <p>
                        ● <strong>Submit Early Requests</strong>: To guarantee driver allocations and airport parking clearance, please submit your transit parameter requests at least 24 hours prior to arrival.
                    </p>
                    <p>
                        ● <strong>Flight Tracking Security</strong>: Sharing your exact flight number allows our dispatcher desk to coordinate with terminal trackers, ensuring we plan around delays or early landings.
                    </p>
                    <p>
                        ● <strong>Luggage Limits Checked</strong>: Confirm passenger counts and en-suite baggage pieces in advance. This helps us ensure we do not dispatch vehicles that are too small.
                    </p>
                </div>
                <div class="space-y-4 text-slate-600 dark:text-slate-400">
                    <p>
                        ● <strong>Subject to Checklists</strong>: Pickup confirmations are strictly subject to driver and executive vehicle availability parameters during high-season schedules.
                    </p>
                    <p>
                        ● <strong>Additional Charge Parameters</strong>: Extended waiting hours at exit gates, last-minute terminal changes, custom route changes, or additional mid-way stops may affect the final cost.
                    </p>
                    <p>
                        ● <strong>Data Security Notice</strong>: Do not share sensitive payment credentials, credit card details, or copies of identity documents over unsecured messaging channels.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 7. WHATSAPP QUICK REQUEST SECTION -->
    <section class="py-16 bg-white dark:bg-slate-950 border-t border-slate-100 dark:border-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="text-xs uppercase tracking-[0.2em] text-emerald-500 font-bold block mb-2">Instant Chat Concierge</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    WhatsApp Quick Request
                </h2>
                <div class="h-0.5 w-16 bg-emerald-500 mx-auto mt-4"></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
                <!-- Pickup Chat Card -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-300 flex flex-col justify-between items-center text-center">
                    <div class="mb-4 text-emerald-500 bg-emerald-500/10 p-3 rounded-full">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.717-1.455L0 24zm6.59-4.846c1.6.95 3.197 1.45 4.817 1.45 5.485 0 9.948-4.464 9.95-9.953.002-2.66-1.034-5.159-2.915-7.04C16.622 1.77 14.12 .737 11.46.737c-5.49 0-9.953 4.465-9.956 9.954-.001 1.75.459 3.45 1.332 4.979l-.982 3.585 3.673-.96c1.472.8 3.09 1.233 4.712 1.233z"/></svg>
                    </div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">Airport Pickup Chat</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium mb-4">
                        Click below to instantly chat with our duty coordinator about flight transfers.
                    </p>
                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985')) }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20I%20would%20like%20to%2520request%2520airport%2520pickup%2520for%2520my%2520stay%2520in%2520Ikeja." 
                       target="_blank" 
                       class="btn-pill bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs px-6 py-2.5 flex items-center space-x-2"
                       @click="logTelemetry('click_whatsapp_concierge', 'pickup_quick_request')">
                        <span>Chat Airport Pickup</span>
                    </a>
                </div>

                <!-- Rental Chat Card -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-300 flex flex-col justify-between items-center text-center">
                    <div class="mb-4 text-emerald-500 bg-emerald-500/10 p-3 rounded-full">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.717-1.455L0 24zm6.59-4.846c1.6.95 3.197 1.45 4.817 1.45 5.485 0 9.948-4.464 9.95-9.953.002-2.66-1.034-5.159-2.915-7.04C16.622 1.77 14.12 .737 11.46.737c-5.49 0-9.953 4.465-9.956 9.954-.001 1.75.459 3.45 1.332 4.979l-.982 3.585 3.673-.96c1.472.8 3.09 1.233 4.712 1.233z"/></svg>
                    </div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">Car Rental Chat</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium mb-4">
                        Click below to instantly chat with our duty coordinator about car rentals.
                    </p>
                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985')) }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20I%20would%20like%20to%2520request%2520car-rental%2520support%2520for%2520my%2520stay%2520in%2520Ikeja." 
                       target="_blank" 
                       class="btn-pill bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs px-6 py-2.5 flex items-center space-x-2"
                       @click="logTelemetry('click_whatsapp_concierge', 'rental_quick_request')">
                        <span>Chat Car Rental</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 8. RELATED SERVICES SECTION -->
    <section class="py-16 bg-slate-50 dark:bg-slate-900/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Explore Stays</span>
            <h2 class="text-slate-900 dark:text-white mb-8" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                Related Serviced Options
            </h2>
            <div class="flex flex-wrap justify-center gap-4 text-xs font-semibold" style="font-family: 'Inter', sans-serif;">
                <a class="bg-white dark:bg-slate-900 px-5 py-2.5 rounded-[0.1rem] border border-slate-200 dark:border-slate-800 shadow-sm text-slate-800 dark:text-slate-200 hover:text-amber-500 transition-colors" href="/guest-services">Guest Services Hub</a>
                <a class="bg-white dark:bg-slate-900 px-5 py-2.5 rounded-[0.1rem] border border-slate-200 dark:border-slate-800 shadow-sm text-slate-800 dark:text-slate-200 hover:text-amber-500 transition-colors" href="/booking">Book Your Stay</a>
                <a class="bg-white dark:bg-slate-900 px-5 py-2.5 rounded-[0.1rem] border border-slate-200 dark:border-slate-800 shadow-sm text-slate-800 dark:text-slate-200 hover:text-amber-500 transition-colors" href="/locations/ikeja-adeniyi-jones-lagos">Ikeja Branch Guide</a>
                <a class="bg-white dark:bg-slate-900 px-5 py-2.5 rounded-[0.1rem] border border-slate-200 dark:border-slate-800 shadow-sm text-slate-800 dark:text-slate-200 hover:text-amber-500 transition-colors" href="/apartments">Luxury Apartments</a>
                <a class="bg-white dark:bg-slate-900 px-5 py-2.5 rounded-[0.1rem] border border-slate-200 dark:border-slate-800 shadow-sm text-slate-800 dark:text-slate-200 hover:text-amber-500 transition-colors" href="/contact">Concierge Desk</a>
            </div>
        </div>
    </section>

    <!-- 9. FAQ SECTION -->
    <section class="py-16 bg-white dark:bg-slate-950">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Got Questions?</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Transport FAQ Help
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- FAQs Accordion -->
            <div class="space-y-4 select-none">
                @foreach($faqs as $fq)
                    <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] overflow-hidden" 
                         x-data="{ open: false }">
                        <button class="w-full text-left p-5 focus:outline-none flex justify-between items-center transition-colors"
                                :class="open ? 'bg-slate-100 dark:bg-slate-800/80' : ''"
                                @click="open = !open; if(open) { logTelemetry('expand_faq', '{{ Str::slug($fq->question) }}'); }">
                            <span class="text-xs font-bold text-slate-900 dark:text-white">{{ $fq->question }}</span>
                            <span class="text-amber-500 font-bold transition-transform duration-300"
                                  :class="open ? 'rotate-180' : ''">
                                ➔
                            </span>
                        </button>
                        <div class="p-5 border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-medium"
                             x-show="open" 
                             x-cloak
                             x-transition>
                            {{ $fq->answer }}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- 10. FINAL CTA SECTION -->
    <section class="relative bg-slate-950 text-white py-20 text-center overflow-hidden">
        <div class="absolute inset-0 opacity-15">
            <img src="{{ asset('pictures/lounge-2.jpg') }}" alt="Luxury lobby lounge backup scene" class="w-full h-full object-cover">
        </div>
        <div class="absolute inset-0 bg-slate-950/80"></div>
        
        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
            <h2 class="text-white font-normal" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.8vw, 1.6rem);">
                Need Airport Pickup or a Car During Your Stay?
            </h2>
            <p class="text-slate-300 max-w-2xl mx-auto font-medium" style="font-family: 'Inter', sans-serif; font-size: 0.875rem;">
                Share your arrival or vehicle request details and our team will follow up with availability and pricing confirmation.
            </p>
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
                <button class="btn-pill btn-primary justify-center w-full sm:w-auto" @click="selectForm('pickup'); logTelemetry('click_cta', 'final_cta_pickup');">
                    Request Airport Pickup
                </button>
                <button class="btn-pill btn-outline-gold justify-center w-full sm:w-auto !border-white !text-white hover:!bg-white hover:!text-slate-900" @click="selectForm('rental'); logTelemetry('click_cta', 'final_cta_rental');">
                    Request Car Rental
                </button>
                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985')) }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20I%20would%20like%20assistance%20with%20airport%20transit%20arrangements%20for%20my%20stay%20in%20Ikeja." 
                   target="_blank" 
                   class="btn-pill bg-emerald-600 hover:bg-emerald-700 text-white font-bold text-xs px-6 py-2.5 inline-flex items-center justify-center space-x-2"
                   @click="logTelemetry('click_cta', 'final_cta_whatsapp')">
                    <span>WhatsApp Concierge</span>
                </a>
            </div>
        </div>
    </section>

    <!-- Dynamic Toast Confirmation Overlay -->
    <div class="fixed bottom-5 right-5 z-50 transform transition-all duration-500 ease-out select-none"
         x-show="showToast"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 translate-y-2"
         x-cloak>
        <div class="px-5 py-3 rounded-[0.1rem] shadow-xl text-xs font-bold text-white border flex items-center space-x-2"
             :class="{
                 'bg-emerald-600 border-emerald-500': toastType === 'success',
                 'bg-rose-600 border-rose-500': toastType === 'error'
             }">
            <span x-show="toastType === 'success'">✔</span>
            <span x-show="toastType === 'error'">✕</span>
            <span x-text="toastMessage"></span>
        </div>
    </div>

</div>
@endsection