@extends('layouts.app')

@section('title', $seo ? $seo->meta_title : 'Guest Services at Kevron Suites and Apartments, Ikeja')
@section('meta_description', $seo ? $seo->meta_description : 'Request guest services at Kevron Suites and Apartments in Adeniyi Jones, Ikeja, including airport pickup, rented car support, WhatsApp concierge, digital check-in, housekeeping, maintenance support, guest manual and repeat-stay offers.')

@section('content')
<div class="bg-white dark:bg-slate-950 min-h-screen text-slate-700 dark:text-slate-300 antialiased" x-data="{
    currentTab: 'all',
    selectedService: 'pickup',
    selectedTitle: 'Airport Pickup',
    showForm: true,
    submitting: false,
    toastMessage: '',
    toastType: 'success',
    showToast: false,
    activeFaq: null,
    
    // Gated Guest Manual State
    bookingRefInput: '',
    manualUnlocked: false,
    unlockingManual: false,
    unlockedManuals: [],

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

    selectService(type, title) {
        this.selectedService = type;
        this.selectedTitle = title;
        this.showForm = true;
        // Scroll smoothly to form container
        document.getElementById('service-request-hub').scrollIntoView({ behavior: 'smooth', block: 'start' });
    },

    submitHubRequest() {
        this.submitting = true;
        const form = document.getElementById('hub-service-form');
        const formData = new FormData(form);
        
        let endpoint = '{{ route('guest-services.pickup') }}';
        if (this.selectedService === 'rental') endpoint = '{{ route('guest-services.rental') }}';
        else if (this.selectedService === 'checkin') endpoint = '{{ route('guest-services.checkin') }}';
        else if (this.selectedService === 'arrival') endpoint = '{{ route('guest-services.arrival') }}';
        else if (this.selectedService === 'special') endpoint = '{{ route('guest-services.special') }}';
        else if (this.selectedService === 'housekeeping') endpoint = '{{ route('guest-services.housekeeping') }}';
        else if (this.selectedService === 'maintenance') endpoint = '{{ route('guest-services.maintenance') }}';
        else if (this.selectedService === 'review') endpoint = '{{ route('guest-services.review') }}';
        else if (this.selectedService === 'repeat') endpoint = '{{ route('guest-services.repeat') }}';

        fetch(endpoint, {
            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 verify inputs.', 'error');
            }
        })
        .catch(err => {
            this.submitting = false;
            this.triggerToast('An error occurred. Please try again.', 'error');
        });
    },

    verifyBookingManual() {
        if (!this.bookingRefInput.trim()) {
            this.triggerToast('Please input booking reference first.', 'error');
            return;
        }
        this.unlockingManual = true;

        fetch('{{ route('guest-services.manual.unlock') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ booking_reference: this.bookingRefInput })
        })
        .then(res => res.json())
        .then(data => {
            this.unlockingManual = false;
            if (data.success) {
                this.manualUnlocked = true;
                this.unlockedManuals = data.manuals;
                this.triggerToast(data.message, 'success');
            } else {
                this.triggerToast(data.message, 'error');
            }
        })
        .catch(err => {
            this.unlockingManual = false;
            this.triggerToast('Connection error. Please try again.', 'error');
        });
    },

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

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

    <!-- 1. HERO / INTRO 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="Kevron guest service lounge reception" 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>24/7 Digital Concierge Support</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);">
                        Guest Services <span class="text-amber-400 block lg:inline">at Kevron Suites and Apartments</span>
                    </h1>
                    
                    <p class="text-slate-300 leading-relaxed font-medium" style="font-family: 'Inter', sans-serif; font-size: 0.875rem;">
                        Enjoy a smoother stay at Kevron Suites and Apartments, Adeniyi Jones, Ikeja, with airport pickup, rented car support, WhatsApp concierge, digital check-in, housekeeping requests, maintenance support, guest manual access and post-stay feedback options.
                    </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> Airport pickup on request
                        </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> WhatsApp support
                        </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> Digital check-in
                        </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> Housekeeping request
                        </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> Guest manual
                        </span>
                    </div>

                    <!-- CTAs -->
                    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 pt-4">
                        <a href="#service-request-hub" class="btn-pill btn-primary justify-center sm:justify-start" @click="logTelemetry('click_cta', 'hero_request_service')">
                            Request a Service
                        </a>
                        <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%20guest%20services%20for%20my%20stay%20in%20Ikeja." target="_blank" class="btn-pill btn-outline-gold justify-center sm:justify-start !border-white !text-white hover:!bg-white hover:!text-slate-900" @click="logTelemetry('click_cta', 'hero_whatsapp_concierge')">
                            WhatsApp Concierge
                        </a>
                        <a href="/booking" 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_book_stay')">
                            <span>Book Your Stay &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 lobby lounge" 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">On-Site Concierge</span>
                            <span class="text-white text-xs font-medium">Luggage assistance, airport pickups and specialized requests.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 2. GUEST JOURNEY NAVIGATION PILLS -->
    <nav class="sticky top-20 z-30 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-14">
                <div class="flex items-center space-x-1 overflow-x-auto no-scrollbar py-2 w-full select-none">
                    <button class="flex-shrink-0 text-xs font-semibold px-5 py-2 rounded-full transition-all duration-300"
                            :class="currentTab === 'all' ? '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="currentTab = 'all'; logTelemetry('click_tab', 'all')">
                        All Stay Services
                    </button>
                    <button class="flex-shrink-0 text-xs font-semibold px-5 py-2 rounded-full transition-all duration-300"
                            :class="currentTab === 'before' ? '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="currentTab = 'before'; logTelemetry('click_tab', 'before')">
                        Before Arrival
                    </button>
                    <button class="flex-shrink-0 text-xs font-semibold px-5 py-2 rounded-full transition-all duration-300"
                            :class="currentTab === 'during' ? '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="currentTab = 'during'; logTelemetry('click_tab', 'during')">
                        During Stay
                    </button>
                    <button class="flex-shrink-0 text-xs font-semibold px-5 py-2 rounded-full transition-all duration-300"
                            :class="currentTab === 'after' ? '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="currentTab = 'after'; logTelemetry('click_tab', 'after')">
                        After Stay
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 3. SERVICE OVERVIEW GRID -->
    <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">Service Portfolio</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Explore Guest Services
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- Grid mapping dynamic services -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($services as $svc)
                    <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"
                         x-show="currentTab === 'all' || 
                                 (currentTab === 'before' && ['pickup', 'rental', 'checkin', 'arrival', 'special'].includes('{{ $svc->form_type }}')) ||
                                 (currentTab === 'during' && ['direct_link', 'housekeeping', 'maintenance', 'none'].includes('{{ $svc->form_type }}') && '{{ $svc->slug }}' !== 'review-request' && '{{ $svc->slug }}' !== 'repeat-stay') ||
                                 (currentTab === 'after' && ['review', 'repeat'].includes('{{ $svc->form_type }}'))"
                         x-transition>
                        
                        <div>
                            <!-- Icon header -->
                            <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center">
                                @if($svc->icon === 'plane-takeoff')
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                                @elseif($svc->icon === 'car')
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7v4m8-4v4M3 10h18M5 16h14"/></svg>
                                @elseif($svc->icon === 'message-square')
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                                @elseif($svc->icon === 'user-check')
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                @elseif($svc->icon === 'clock')
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                @elseif($svc->icon === 'sparkles')
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
                                @elseif($svc->icon === 'brush')
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                                @elseif($svc->icon === 'settings')
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                @elseif($svc->icon === 'book-open')
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                                @elseif($svc->icon === 'star')
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.907c.969 0 1.371 1.24.588 1.81l-3.97 2.88a1 1 0 00-.364 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.97-2.88a1 1 0 00-1.176 0l-3.97 2.88c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.364-1.118l-3.97-2.88c-.783-.57-.38-1.81.588-1.81h4.906a1 1 0 00.95-.69l1.519-4.674z"/></svg>
                                @else
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                                @endif
                            </div>
                            
                            <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">{{ $svc->title }}</h3>
                            <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed mb-4">
                                {{ $svc->short_description }}
                            </p>
                        </div>

                        <div class="flex items-center justify-between border-t border-slate-100 dark:border-slate-800 pt-3 mt-4">
                            <!-- Availability Tag -->
                            <span class="inline-flex items-center text-[10px] uppercase tracking-wider font-bold"
                                  :class="{
                                      'text-emerald-600 dark:text-emerald-400': '{{ $svc->availability }}' === 'included',
                                      'text-amber-600 dark:text-amber-400': '{{ $svc->availability }}' === 'on_request',
                                      'text-blue-600 dark:text-blue-400': '{{ $svc->availability }}' === 'price_on_request'
                                  }">
                                @if($svc->availability === 'included')
                                    ● Included
                                @elseif($svc->availability === 'on_request')
                                    ● On Request
                                @else
                                    ● Price on Request
                                @endif
                            </span>

                            <!-- Trigger link/forms -->
                            @if($svc->form_type === 'direct_link')
                                <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%20guest%20services%20for%20my%20stay%20in%20Ikeja." 
                                   target="_blank" 
                                   class="text-xs font-bold text-emerald-500 hover:text-emerald-600 transition-colors"
                                   @click="logTelemetry('click_whatsapp_concierge', 'grid')">
                                    Chat Now &rarr;
                                </a>
                            @elseif($svc->form_type !== 'none')
                                <button class="text-xs font-bold text-amber-500 hover:text-amber-600 transition-colors focus:outline-none"
                                        @click="selectService('{{ $svc->form_type }}', '{{ $svc->title }}'); logTelemetry('select_service_form', '{{ $svc->slug }}');">
                                    Open Form &rarr;
                                </button>
                            @elseif($svc->slug === 'guest-manual')
                                <a href="#guest-manual-anchor" class="text-xs font-bold text-amber-500 hover:text-amber-600 transition-colors">
                                    View Manual &rarr;
                                </a>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- 4. DYNAMIC CENTRAL SERVICE REQUEST HUB -->
    <section id="service-request-hub" class="py-20 bg-white dark:bg-slate-950 scroll-mt-24" x-show="showForm">
        <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">
                <!-- Header -->
                <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-4 mb-6">
                    <div class="flex items-center space-x-3">
                        <span class="text-amber-500 bg-amber-500/10 p-2 rounded-[0.1rem]">
                            <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                        </span>
                        <div>
                            <h2 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider" style="font-family: 'Inter', sans-serif;">
                                Request Panel
                            </h2>
                            <p class="text-[10px] text-slate-400 font-medium">Selected Service: <span class="text-amber-500 font-bold" x-text="selectedTitle"></span></p>
                        </div>
                    </div>
                    
                    <!-- Quick service dropdown switch -->
                    <select class="text-xs p-2 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"
                            x-model="selectedService"
                            @change="selectedTitle = $el.options[$el.selectedIndex].text; logTelemetry('switch_service_select', selectedService)">
                        <option value="pickup">Airport Pickup</option>
                        <option value="rental">Rented Car</option>
                        <option value="checkin">Digital Check-In</option>
                        <option value="arrival">Arrival Time Form</option>
                        <option value="special">Special Stay Request</option>
                        <option value="housekeeping">Housekeeping Request</option>
                        <option value="maintenance">Maintenance Request</option>
                        <option value="review">Leave a Review</option>
                        <option value="repeat">Repeat-Stay Offer</option>
                    </select>
                </div>

                <!-- Form Hub Panel -->
                <form id="hub-service-form" @submit.prevent="submitHubRequest()" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="space-y-6">
                        <!-- Common Guest parameters -->
                        <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">
                                    <span x-text="selectedService === 'repeat' ? 'Previous Booking Ref' : 'Booking Reference'"></span>
                                    <span class="text-[9px] text-slate-400" x-show="['pickup', 'rental', 'special'].includes(selectedService)">(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="selectedService === 'repeat' ? 'previous_booking_reference' : 'booking_reference'"
                                       :required="['checkin', 'arrival', 'housekeeping', 'maintenance', 'review', 'repeat'].includes(selectedService)"
                                       placeholder="e.g. KEV-27833">
                            </div>
                        </div>

                        <!-- 1. Airport Pickup specifics -->
                        <div x-show="selectedService === 'pickup'" x-cloak class="space-y-4">
                            <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_airport">Arrival 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">
                                        <option value="Murtala Muhammed International Airport">Murtala Muhammed International Airport (MMIA)</option>
                                        <option value="MM1 (Local Terminal)">MM1 (Local Terminal)</option>
                                        <option value="MM2 (Local Terminal)">MM2 (Local Terminal)</option>
                                    </select>
                                </div>
                                <div>
                                    <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>

                            <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="arrival_time">Expected Landing DateTime</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="datetime-local" id="arrival_time" name="arrival_time">
                                </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">
                                </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 Count</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">
                                </div>
                            </div>

                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="special_instructions">Additional 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 requirements, or bulky cargo descriptions..."></textarea>
                            </div>
                        </div>

                        <!-- 2. Car Rental specifics -->
                        <div x-show="selectedService === 'rental'" x-cloak class="space-y-4">
                            <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 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="car_type" name="car_type">
                                        <option value="Sedan">Executive Sedan</option>
                                        <option value="SUV">Luxury SUV</option>
                                        <option value="Van">Executive Coach/Van</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="start_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="start_date" name="start_date">
                                </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">
                                </div>
                            </div>
                        </div>

                        <!-- 3. Digital Check-In specifics -->
                        <div x-show="selectedService === 'checkin'" x-cloak class="space-y-4">
                            <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="checkin_arrival">Expected Arrival 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="text" id="checkin_arrival" name="arrival_time" placeholder="e.g. 14:00 or 4:00 PM">
                                </div>
                                <div>
                                    <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="guest_count">Occupants Count</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="guest_count" name="guest_count" min="1" max="10" value="1">
                                </div>
                            </div>

                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="id_document">Upload ID Credential (PDF, JPG, PNG)</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-semibold" type="file" id="id_document" name="id_document">
                                <span class="text-[9px] text-slate-400 mt-1 block">Security Guarantee: Identity credentials are stored securely and never accessible publicly.</span>
                            </div>

                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="special_notes">Special check-in requests</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_notes" name="special_notes" placeholder="Specify early-access preferences, dynamic lock code layouts, or specific room guides..."></textarea>
                            </div>
                        </div>

                        <!-- 4. Arrival Time specifics -->
                        <div x-show="selectedService === 'arrival'" x-cloak class="space-y-4">
                            <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="arrival_time_hour">Arrival Hour</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="arrival_time_hour" name="arrival_time" placeholder="e.g. 15:30 or 3:30 PM">
                                </div>
                                <div>
                                    <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="travel_mode">Travel Mode</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="travel_mode" name="travel_mode">
                                        <option value="flight">Flight</option>
                                        <option value="road">Road</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="landmark">Landmark / Evacuation Reference</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="landmark" name="landmark" placeholder="Specify airline name or local street approach...">
                            </div>

                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="arrival_notes">Additional arrival 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="arrival_notes" name="notes" placeholder="Notes for front-desk preparation..."></textarea>
                            </div>
                        </div>

                        <!-- 5. Special Request specifics -->
                        <div x-show="selectedService === 'special'" x-cloak class="space-y-4">
                            <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="special_type">Stay Category</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="special_type" name="request_type">
                                        <option value="birthday">Birthday Setup</option>
                                        <option value="anniversary">Anniversary Setup</option>
                                        <option value="family_stay">Family Stay Setup</option>
                                        <option value="business">Business Support Suite</option>
                                        <option value="other">Other custom request</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="preferred_date">Event 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="preferred_date" name="preferred_date">
                                </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="preferred_time">Preferred 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="text" id="preferred_time" name="preferred_time" placeholder="e.g. 19:00 or Evening">
                                </div>
                            </div>

                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="special_details">Request specifics</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_details" name="details" placeholder="Describe decor requirements, gift items, or corporate equipment setups..."></textarea>
                            </div>
                        </div>

                        <!-- 6. Housekeeping Request specifics -->
                        <div x-show="selectedService === 'housekeeping'" x-cloak class="space-y-4">
                            <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="housekeeping_type">Cleaning Requirement</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="housekeeping_type" name="request_type">
                                        <option value="cleaning">Full Sweeping Cleaning</option>
                                        <option value="towels">Fresh Towels Replenish</option>
                                        <option value="linen_change">Crisp Linen Change</option>
                                        <option value="toiletries">Toiletries Refill</option>
                                        <option value="waste_removal">Trash / Waste Removal</option>
                                        <option value="other">Other support request</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="housekeeping_date">Clean 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="housekeeping_date" name="preferred_date">
                                </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="housekeeping_time">Preferred Hour</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="housekeeping_time" name="preferred_time" placeholder="e.g. 10:00 AM">
                                </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="apartment_unit">Apartment / Unit number (if known)</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="apartment_unit" name="apartment_unit" placeholder="e.g. Penthouse 401">
                                </div>
                                <div>
                                    <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="housekeeping_notes">Cleaner instructions</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="housekeeping_notes" name="notes" placeholder="e.g. Knock before entering, focus on towel replenishment...">
                                </div>
                            </div>
                        </div>

                        <!-- 7. Maintenance Request specifics -->
                        <div x-show="selectedService === 'maintenance'" x-cloak class="space-y-4">
                            <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="issue_category">Issue Category</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="issue_category" name="issue_category">
                                        <option value="power_electrical">Power / Electrical fault</option>
                                        <option value="plumbing">Plumbing / Water issue</option>
                                        <option value="internet">Wi-Fi / Internet drops</option>
                                        <option value="appliance">Kitchen Appliance issue</option>
                                        <option value="smart_lock">Keyless Smart Lock issue</option>
                                        <option value="air_conditioning">Air Conditioning leak/fault</option>
                                        <option value="other">Other maintenance issue</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="urgency">Urgency Level</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="urgency" name="urgency">
                                        <option value="low">Low (Discretionary sweep)</option>
                                        <option value="medium">Medium (Standard technician visit)</option>
                                        <option value="high">High (Needs same-day response)</option>
                                        <option value="urgent">Urgent (Immediate threat/fault)</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="maintenance_unit">Suite / Unit 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="maintenance_unit" name="apartment_unit" placeholder="e.g. Apartment 202">
                            </div>

                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="issue_description">Describe the issue</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="issue_description" name="description" placeholder="Provide as much detail as possible to help our engineers bring the right tools..."></textarea>
                            </div>
                        </div>

                        <!-- 8. Leave a Review specifics -->
                        <div x-show="selectedService === 'review'" x-cloak class="space-y-4">
                            <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="rating">Star Rating</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="rating" name="rating">
                                        <option value="5">★★★★★ (5 - Breathtaking Stays)</option>
                                        <option value="4">★★★★☆ (4 - Excellent Stays)</option>
                                        <option value="3">★★★☆☆ (3 - Standard Stays)</option>
                                        <option value="2">★★☆☆☆ (2 - Sub-standard Stays)</option>
                                        <option value="1">★☆☆☆☆ (1 - Poor Stays)</option>
                                    </select>
                                </div>
                            </div>

                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="review_text">Review text</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="review_text" name="review" placeholder="Describe cleanliness, security, staff behaviors, or dining proximity..."></textarea>
                            </div>
                        </div>

                        <!-- 9. Repeat-Stay specifics -->
                        <div x-show="selectedService === 'repeat'" x-cloak class="space-y-4">
                            <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="intended_dates">Intended Dates / Month</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="intended_dates" name="intended_dates" placeholder="e.g. December 2026 or Corporate stays next month">
                                </div>
                                <div>
                                    <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="apartment_preference">Preferred Suite size</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="apartment_preference" name="apartment_preference">
                                        <option value="1 Bedroom Master Suite">1 Bedroom Master Suite</option>
                                        <option value="2 Bedroom Luxury Apartment">2 Bedroom Luxury Apartment</option>
                                        <option value="3 Bedroom Luxury Apartment">3 Bedroom Luxury Apartment</option>
                                        <option value="4 Bedroom Luxury Apartment">4 Bedroom Luxury Apartment</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="repeat_notes">Notes for discount</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="repeat_notes" name="notes" placeholder="List any special corporate discount codes or group booking needs..."></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Submit action button -->
                    <div class="flex items-center justify-end space-x-3 pt-6 border-t border-slate-100 dark:border-slate-800 mt-6">
                        <button type="submit" class="btn-pill btn-primary text-xs !py-3 !px-6 flex items-center justify-center space-x-2" :disabled="submitting">
                            <template x-if="submitting">
                                <span class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
                            </template>
                            <span x-text="submitting ? 'Submitting...' : 'Submit Request'"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- 5. GATED GUEST MANUAL ACCORDION SECTION -->
    <section id="guest-manual-anchor" class="py-20 bg-slate-50 dark:bg-slate-900/50">
        <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">Instructions</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Guest Manual & Guidelines
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- Public Safe Manual Sections -->
            <div class="space-y-4 mb-8">
                @foreach($manualSections as $idx => $man)
                    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] shadow-sm">
                        <button class="w-full text-left p-5 flex items-center justify-between font-semibold text-xs text-slate-900 dark:text-white hover:text-amber-500 dark:hover:text-amber-400 transition-colors focus:outline-none"
                                @click="activeFaq = (activeFaq === 'man_{{ $idx }}' ? null : 'man_{{ $idx }}')">
                            <span class="flex items-center space-x-2">
                                <span class="text-amber-500 font-bold">●</span>
                                <span>{{ $man->title }}</span>
                            </span>
                            <span class="text-amber-500 transition-transform duration-300" :class="activeFaq === 'man_{{ $idx }}' ? 'rotate-180' : ''">▼</span>
                        </button>
                        <div class="px-5 pb-5 transition-all duration-300 text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-medium whitespace-pre-line"
                             x-show="activeFaq === 'man_{{ $idx }}'" x-collapse x-cloak>
                            {{ $man->content }}
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Locked Private Instructions Gated Panel -->
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] shadow-md p-6">
                <!-- Lock header -->
                <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-slate-100 dark:border-slate-800 pb-4 mb-6">
                    <div class="flex items-center space-x-3">
                        <span class="text-amber-500 bg-amber-500/10 p-2.5 rounded-[0.1rem]">
                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" x-show="!manualUnlocked"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                            <svg class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" x-show="manualUnlocked" x-cloak><path stroke-linecap="round" stroke-linejoin="round" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"/></svg>
                        </span>
                        <div>
                            <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider">
                                Smart Locks, Wi-Fi & Concierge Hotlines
                            </h3>
                            <p class="text-[10px] text-slate-400 font-medium">Verify your active booking reference to unlock private en-suite instructions.</p>
                        </div>
                    </div>
                </div>

                <!-- Lock Code verify form -->
                <div x-show="!manualUnlocked" class="space-y-4">
                    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
                        <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" 
                               placeholder="Input Booking Reference (e.g. KEV-12345)"
                               x-model="bookingRefInput"
                               @keydown.enter.prevent="verifyBookingManual()">
                        <button class="btn-pill btn-primary text-xs !py-3 !px-6 flex items-center justify-center space-x-2"
                                @click="verifyBookingManual()"
                                :disabled="unlockingManual">
                            <template x-if="unlockingManual">
                                <span class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
                            </template>
                            <span x-text="unlockingManual ? 'Verifying...' : 'Unlock Guidelines'"></span>
                        </button>
                    </div>
                    <span class="text-[9px] text-slate-400 block font-medium">Privacy note: Wi-Fi passwords and secure deadbolt lock bypass guidelines are protected for guest security.</span>
                </div>

                <!-- Unlocked guides view -->
                <div x-show="manualUnlocked" x-cloak class="space-y-4">
                    <div class="bg-emerald-50 dark:bg-emerald-950/20 border-l-4 border-emerald-500 p-4 rounded-[0.1rem] text-xs font-medium text-emerald-900 dark:text-emerald-300 mb-4">
                        Active stay verified. Secure guidelines unlocked successfully.
                    </div>

                    <div class="space-y-4">
                        <template x-for="(man, idx) in unlockedManuals" :key="idx">
                            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] shadow-sm">
                                <button type="button" class="w-full text-left p-5 flex items-center justify-between font-semibold text-xs text-slate-900 dark:text-white hover:text-amber-500 dark:hover:text-amber-400 transition-colors focus:outline-none"
                                        @click="activeFaq = (activeFaq === 'unl_' + idx ? null : 'unl_' + idx)">
                                    <span class="flex items-center space-x-2">
                                        <span class="text-emerald-500 font-bold">●</span>
                                        <span x-text="man.title"></span>
                                    </span>
                                    <span class="text-amber-500 transition-transform duration-300" :class="activeFaq === 'unl_' + idx ? 'rotate-180' : ''">▼</span>
                                </button>
                                <div class="px-5 pb-5 transition-all duration-300 text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-medium whitespace-pre-line"
                                     x-show="activeFaq === 'unl_' + idx">
                                    <span x-text="man.content"></span>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 6. SEO/GEO Facts block -->
    <section class="py-12 bg-white border-y border-slate-100 dark:border-slate-800 dark:bg-slate-950">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h3 class="sr-only font-normal">Kevron guest services crawlers factual parameters</h3>
            <p class="text-slate-400 dark:text-slate-500 font-medium text-justify" style="font-family: 'Inter', sans-serif; font-size: 0.75rem; line-height: 1.8;">
                Kevron Suites and Apartments provides guest services for its Adeniyi Jones, Ikeja location, including airport pickup on request, rented car support, WhatsApp concierge, digital check-in, arrival time submission, special request handling, housekeeping requests, maintenance reporting, guest manual access, post-stay review collection and repeat-stay offer requests. Perfectly situated for transit to Murtala Muhammed International Airport (MMIA), MM1 and MM2 local terminals, Ikeja City Mall, local eateries, police perimeters and event centers on Regina Coker Street/Ogunlowo Street.
            </p>
        </div>
    </section>

    <!-- 7. GUEST SERVICES FAQs -->
    <section class="py-20 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">Frequently Asked Questions</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Concierge FAQs
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- Accordion Drawer FAQs -->
            <div class="space-y-4">
                @foreach($faqs as $idx => $faq)
                    <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] shadow-sm">
                        <button class="w-full text-left p-5 flex items-center justify-between font-semibold text-xs text-slate-900 dark:text-white hover:text-amber-500 dark:hover:text-amber-400 transition-colors focus:outline-none"
                                @click="activeFaq = (activeFaq === {{ $idx }} ? null : {{ $idx }}); logTelemetry('expand_faq', 'faq_{{ $idx }}')">
                            <span>{{ $faq->question }}</span>
                            <span class="text-amber-500 transition-transform duration-300" :class="activeFaq === {{ $idx }} ? 'rotate-180' : ''">▼</span>
                        </button>
                        <div class="px-5 pb-5 transition-all duration-300 text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-medium"
                             x-show="activeFaq === {{ $idx }}" x-collapse x-cloak>
                            {{ $faq->answer }}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- 8. FINAL CTA NAVY SECTION -->
    <section class="section-navy py-20 text-center relative overflow-hidden bg-slate-950 text-white">
        <div class="absolute inset-0 opacity-10">
            <img src="{{ asset('pictures/lounge-2.jpg') }}" alt="Evacuation guide reception" class="w-full h-full object-cover">
        </div>
        
        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
            <h2 class="text-white text-center font-normal leading-tight tracking-tight" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                Need Help Before or 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;">
                Use our guest services to request airport pickup, car rental, check-in support, housekeeping, maintenance assistance or WhatsApp concierge support.
            </p>

            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
                <a href="#service-request-hub" class="btn-pill btn-primary text-xs !bg-amber-500 hover:!bg-amber-600 !text-slate-950 font-bold" @click="logTelemetry('click_cta', 'footer_request_service')">
                    Request a Service
                </a>
                <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%20guest%20services%20for%20my%20stay%20in%20Ikeja." target="_blank" class="btn-pill btn-outline-gold text-xs !border-emerald-500 !text-emerald-400 hover:!bg-emerald-500 hover:!text-white" @click="logTelemetry('click_cta', 'footer_whatsapp')">
                    WhatsApp Concierge
                </a>
                <a href="/booking" class="btn-pill btn-outline-gold text-xs !border-white !text-white hover:!bg-white hover:!text-slate-950" @click="logTelemetry('click_cta', 'footer_book_stay')">
                    Book Your Stay
                </a>
            </div>
        </div>
    </section>

    <!-- ==================== TELEMETRY TOAST POPUP ==================== -->
    <div class="fixed top-4 right-4 z-50 bg-slate-900 border border-slate-800 text-white rounded-[0.1rem] px-4 py-3 shadow-lg flex items-center space-x-3 text-xs font-semibold"
         x-show="showToast" 
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-2 sm:translate-y-0 sm:translate-x-2"
         x-transition:enter-end="opacity-100 translate-y-0 sm:translate-x-0"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         x-cloak>
        <span :class="toastType === 'success' ? 'text-emerald-500' : 'text-rose-500'">●</span>
        <span x-text="toastMessage"></span>
    </div>

</div>

<!-- Secure manual lock details script tags -->
@if($schema && isset($schema->schema_json))
    @push('scripts')
        <script type="application/ld+json">
            {!! json_encode($schema->schema_json) !!}
        </script>
    @endpush
@endif

@endsection