@extends('layouts.app')

@section('title', $seo ? $seo->meta_title : 'Amenities and Facilities at Kevron Suites and Apartments, Ikeja')
@section('meta_description', $seo ? $seo->meta_description : 'Explore premium amenities at Kevron Suites and Apartments in Adeniyi Jones, Ikeja, Lagos. Enjoy 24-hour backup power, fast Wi-Fi, modern kitchens, private laundry, smart locks, CCTV, PS5, snooker, airport pickups, and dedicated guest concierge.')

@section('content')
<div class="bg-white dark:bg-slate-950 min-h-screen text-slate-700 dark:text-slate-300 antialiased" x-data="{ 
    activeSection: 'comfort', 
    showRequestModal: false, 
    requestType: 'airport_pickup',
    submitting: false,
    toastMessage: '',
    toastType: 'success',
    showToast: false,
    triggerToast(msg, type = 'success') {
        this.toastMessage = msg;
        this.toastType = type;
        this.showToast = true;
        setTimeout(() => { this.showToast = false; }, 4000);
    },
    submitRequest() {
        this.submitting = true;
        const form = document.getElementById('service-request-form');
        const formData = new FormData(form);
        
        fetch('{{ route('amenities.request') }}', {
            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');
                this.showRequestModal = false;
                form.reset();
            } else {
                this.triggerToast('Validation failed. Please check inputs.', 'error');
            }
        })
        .catch(err => {
            this.submitting = false;
            this.triggerToast('An error occurred. Please try again.', 'error');
        });
    },
    logTelemetry(action, key) {
        fetch('{{ route('amenities.log') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ event_type: action, event_key: key })
        });
    }
}">

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

    <!-- 1. HERO SECTION -->
    <header class="relative bg-slate-900 text-white overflow-hidden py-16 lg:py-24">
        <!-- Background Image overlay -->
        <div class="absolute inset-0 opacity-20">
            <img src="{{ asset('pictures/kitchen.jpg') }}" alt="Kevron luxury kitchen suites interior" 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">
                <!-- Hero Content -->
                <div class="lg:col-span-7 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>Executive Serviced Comfort</span>
                    </span>
                    
                    <h1 class="text-white font-normal leading-tight leading-none tracking-tight" style="font-family: 'Marcellus', serif; font-size: clamp(1.45rem, 4vw, 1.8rem);">
                        Amenities & Facilities <span class="text-amber-400 block lg:inline">at Kevron Suites & Apartments</span>
                    </h1>
                    
                    <p class="text-slate-300 leading-relaxed font-medium" style="font-family: 'Inter', sans-serif; font-size: 0.875rem;">
                        Enjoy luxury serviced-apartment living in Adeniyi Jones, Ikeja, with 24-hour power, high-speed Wi-Fi, modern kitchens, laundry facilities, smart security, private balconies, PS5, snooker, airport pickup and guest support on request.
                    </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> 24h Power
                        </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> Wi-Fi
                        </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> Smart security
                        </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> PS5 & snooker
                        </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> Airport pickup
                        </span>
                    </div>

                    <!-- CTAs -->
                    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 pt-4">
                        <a href="/apartments" class="btn-pill btn-primary justify-center sm:justify-start" @click="logTelemetry('click_cta', 'hero_view_apartments')">
                            View Apartments
                        </a>
                        <a href="/booking" 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_check_availability')">
                            Check Availability
                        </a>
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985')) }}" target="_blank" class="inline-flex items-center justify-center space-x-2 text-xs font-semibold text-emerald-400 hover:text-emerald-300 transition-colors py-2" @click="logTelemetry('click_cta', 'hero_whatsapp_enquiry')">
                            <!-- WhatsApp Icon -->
                            <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24">
                                <path d="M12.012 2c-5.506 0-9.989 4.478-9.99 9.984a9.96 9.96 0 001.333 4.993L2 22l5.233-1.371a9.936 9.936 0 004.777 1.224h.005c5.505 0 9.99-4.478 9.99-9.986C22.007 6.478 17.521 2 12.012 2zm5.727 14.153c-.314.881-1.8 1.6-2.457 1.688-.577.079-1.328.146-2.127-.11-1.632-.524-2.884-1.79-3.665-2.846a10.368 10.368 0 01-2.036-3.864c-.21-.812-.023-1.428.196-1.802.164-.28.384-.52.553-.714.14-.16.273-.247.382-.247.11 0 .216.01.309.023.11.016.243-.01.377.314.143.344.49 1.197.533 1.282.043.085.07.185.012.302-.058.117-.118.19-.236.329-.118.139-.247.31-.354.417-.118.118-.242.247-.104.484.137.236.612.998 1.31 1.617.898.796 1.652 1.042 1.887 1.159.236.118.373.1.512-.059.139-.16.592-.688.751-.922.16-.236.319-.196.538-.118.219.078 1.392.656 1.633.777.242.12.404.18.463.282.059.102.059.593-.255 1.474z"/>
                            </svg>
                            <span>WhatsApp Enquiry</span>
                        </a>
                    </div>
                </div>

                <!-- Hero Graphic collage -->
                <div class="lg:col-span-5 relative mt-8 lg:mt-0 flex justify-center">
                    <div class="w-full max-w-sm 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/living-room.jpg') }}" alt="Premium living room amenities" 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">Staycation Comfort</span>
                            <span class="text-white text-xs font-medium">Smart deadbolts, dual screen setups, and luxury seat-outs.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 2. STICKY CATEGORY NAVIGATION BAR -->
    <nav class="sticky top-20 z-30 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 shadow-sm" x-data="{ open: false }">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-14">
                <!-- Mobile Horizontal scroll or list -->
                <div class="flex items-center space-x-1 overflow-x-auto no-scrollbar py-2 w-full select-none">
                    @foreach($categories as $cat)
                        @if($cat->amenities->count() > 0)
                            <a href="#{{ $cat->slug }}" 
                               class="flex-shrink-0 text-xs font-semibold px-4 py-2 rounded-full transition-all duration-300"
                               :class="activeSection === '{{ $cat->slug }}' ? '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="activeSection = '{{ $cat->slug }}'; logTelemetry('click_category_nav', '{{ $cat->slug }}');">
                                {{ $cat->name }}
                            </a>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </nav>

    <!-- 3. AMENITIES VISUAL 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">Exclusive Highlights</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Core Amenities Overview
                </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-4 gap-6">
                <!-- Power 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/80 transition-all duration-300">
                    <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center">
                        <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="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    </div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">24-Hour Power</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">Stable electricity backed by dual industrial auto-changeover generators.</p>
                </div>

                <!-- Wi-Fi 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/80 transition-all duration-300">
                    <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center">
                        <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.111 16.404a5.5 5.5 0 017.778 0M12 20h.01M5.283 13.576a9 9 0 0113.434 0M2.455 10.749a12.5 12.5 0 0119.09 0"/></svg>
                    </div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">High-Speed Wi-Fi</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">Corporate broadband support suitable for video calls and remote work.</p>
                </div>

                <!-- Smart Lock 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/80 transition-all duration-300">
                    <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center">
                        <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 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>
                    </div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">Smart Locks</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">Secure keyless deadbolt lock code entry to easily access suites.</p>
                </div>

                <!-- CCTV 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/80 transition-all duration-300">
                    <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center">
                        <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                    </div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">24/7 CCTV Surveillance</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">Continuous cameras surveying car park, perimeter and access ways.</p>
                </div>

                <!-- Kitchen 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/80 transition-all duration-300">
                    <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center">
                        <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>
                    </div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">Modern Kitchen</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">Fully equipped cooking hobs, extractors, cookware, fridge and dining setups.</p>
                </div>

                <!-- Laundry 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/80 transition-all duration-300">
                    <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center">
                        <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.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
                    </div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">Washing & Dryer</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">Automatic en-suite front-loading washer and electric tumble dryer.</p>
                </div>

                <!-- Game 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/80 transition-all duration-300">
                    <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center">
                        <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="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/></svg>
                    </div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">PS5 & Snooker</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">Professional slate snooker and PS5 console setup inside executive spaces.</p>
                </div>

                <!-- Transit 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/80 transition-all duration-300">
                    <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center">
                        <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>
                    </div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">Airport Pickup</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">Convenient executive airport pickup and local chauffeur hire on request.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 4. CATEGORIZED DETAILED SECTIONS -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 space-y-24">
        @foreach($categories as $category)
            @if($category->amenities->count() > 0)
                <section id="{{ $category->slug }}" class="scroll-mt-36" x-intersect="activeSection = '{{ $category->slug }}'">
                    <!-- Section Header -->
                    <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-4 mb-8">
                        <div class="flex items-center space-x-3">
                            <div class="text-amber-500 bg-amber-500/10 p-2.5 rounded-[0.1rem]">
                                <!-- Dynamic Icon Loader based on slug -->
                                @if($category->slug === 'comfort')
                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                                @elseif($category->slug === 'power-internet')
                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                @elseif($category->slug === 'kitchen-laundry')
                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
                                @elseif($category->slug === 'entertainment')
                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/></svg>
                                @elseif($category->slug === 'security')
                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                                @elseif($category->slug === 'transport')
                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7v4m8-4v4M3 10h18M5 16h14M3 12l2-5h14l2 5M5 19h14"/></svg>
                                @elseif($category->slug === 'location')
                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                @elseif($category->slug === 'sustainability')
                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
                                @else
                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                                @endif
                            </div>
                            <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                                {{ $category->name }}
                            </h2>
                        </div>
                        
                        <!-- Work-friendly note or brief label -->
                        <span class="hidden md:inline text-xs font-semibold text-slate-400 dark:text-slate-500">
                            @if($category->slug === 'power-internet')
                                Work-friendly Business Mappings
                            @elseif($category->slug === 'security')
                                24/7 Supervised Secure Access
                            @elseif($category->slug === 'sustainability')
                                Responsible Smart Utility Use
                            @else
                                Kevron Premium Standards
                            @endif
                        </span>
                    </div>

                    <!-- Category Content Grid -->
                    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                        <!-- Left Side: Copy/Features cards -->
                        <div class="lg:col-span-7 space-y-6">
                            @if($category->slug === 'power-internet')
                                <div class="bg-blue-50 dark:bg-slate-900 border-l-4 border-blue-500 p-4 rounded-[0.1rem] text-xs font-medium text-blue-900 dark:text-blue-200">
                                    Power and internet support make Kevron Suites and Apartments suitable for business travellers, remote work, communication and entertainment.
                                </div>
                            @elseif($category->slug === 'security')
                                <div class="bg-blue-50 dark:bg-slate-900 border-l-4 border-blue-500 p-4 rounded-[0.1rem] text-xs font-medium text-blue-900 dark:text-blue-200">
                                    Security-controlled access, smart locks, CCTV coverage and visitor management support a more controlled guest environment.
                                </div>
                            @endif

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                @foreach($category->amenities as $amenity)
                                    <div class="bg-white 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] hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-300 flex flex-col justify-between">
                                        <div>
                                            <div class="flex items-center space-x-2 text-amber-500 mb-3">
                                                <span class="bg-amber-500/10 p-1.5 rounded-[0.1rem]">
                                                    @if($amenity->icon_name === 'bed')
                                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v2H5V5zM21 12a9 9 0 01-9 9m9-9H3m18 0a9 9 0 00-9-9m0 18a9 9 0 01-9-9m0 0h18"/></svg>
                                                    @elseif($amenity->icon_name === 'zap')
                                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                                    @elseif($amenity->icon_name === 'wifi')
                                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01M5.283 13.576a9 9 0 0113.434 0"/></svg>
                                                    @elseif($amenity->icon_name === 'soup')
                                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3"/></svg>
                                                    @elseif($amenity->icon_name === 'gamepad-2')
                                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12h4m-2-2v4m10-2h.01M14 12h.01"/></svg>
                                                    @elseif($amenity->icon_name === 'key-round')
                                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><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 2z"/></svg>
                                                    @elseif($amenity->icon_name === 'plane-takeoff')
                                                        <svg class="w-4 h-4" 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($amenity->icon_name === 'car')
                                                        <svg class="w-4 h-4" 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($amenity->icon_name === 'map-pin')
                                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/></svg>
                                                    @elseif($amenity->icon_name === 'leaf')
                                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364"/></svg>
                                                    @else
                                                        <svg class="w-4 h-4" 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>
                                                    @endif
                                                </span>
                                                <h4 class="text-xs font-bold text-slate-900 dark:text-white" style="font-family: 'Inter', sans-serif;">
                                                    {{ $amenity->name }}
                                                </h4>
                                            </div>
                                            <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed mb-4">
                                                {{ $amenity->short_description }}
                                            </p>
                                        </div>

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

                                            <!-- Contextual request buttons -->
                                            @if($category->slug === 'transport' || $amenity->slug === 'airport-pickup' || $amenity->slug === 'rented-car')
                                                <button class="text-xs font-semibold text-amber-500 hover:text-amber-600 transition-colors"
                                                        @click="requestType = '{{ $amenity->slug === 'rented-car' ? 'car_rental' : 'airport_pickup' }}'; showRequestModal = true; logTelemetry('open_request_modal', '{{ $amenity->slug }}')">
                                                    Request Service →
                                                </button>
                                            @elseif($category->slug === 'guest-support' || $amenity->slug === 'housekeeping-request')
                                                <button class="text-xs font-semibold text-amber-500 hover:text-amber-600 transition-colors"
                                                        @click="requestType = 'housekeeping'; showRequestModal = true; logTelemetry('open_request_modal', '{{ $amenity->slug }}')">
                                                    Order Cleaning →
                                                </button>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            @if($category->slug === 'kitchen-laundry')
                                <div class="flex items-center space-x-4 pt-2">
                                    <a href="/long-stay" class="btn-pill btn-primary text-xs" @click="logTelemetry('click_cta', 'kitchen_view_long_stay')">View Long Stay Options</a>
                                    <a href="/apartments" class="btn-pill btn-outline-gold text-xs" @click="logTelemetry('click_cta', 'kitchen_view_apartments')">View Apartments</a>
                                </div>
                            @elseif($category->slug === 'transport')
                                <div class="flex items-center space-x-4 pt-2">
                                    <button class="btn-pill btn-primary text-xs" @click="requestType = 'airport_pickup'; showRequestModal = true; logTelemetry('open_request_modal', 'transport_airport')">Request Airport Pickup</button>
                                    <button class="btn-pill btn-outline-gold text-xs" @click="requestType = 'car_rental'; showRequestModal = true; logTelemetry('open_request_modal', 'transport_car')">Request Car Rental</button>
                                </div>
                            @elseif($category->slug === 'guest-support')
                                <div class="flex items-center space-x-4 pt-2">
                                    <button class="btn-pill btn-primary text-xs" @click="requestType = 'special'; showRequestModal = true; logTelemetry('open_request_modal', 'support_concierge')">Contact Guest Support</button>
                                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985')) }}" target="_blank" class="btn-pill btn-outline-gold text-xs" @click="logTelemetry('click_cta', 'support_whatsapp')">WhatsApp Us</a>
                                </div>
                            @elseif($category->slug === 'location')
                                <div class="pt-2">
                                    <a href="/locations/ikeja-adeniyi-jones-lagos" class="btn-pill btn-primary text-xs" @click="logTelemetry('click_cta', 'location_view_ikeja')">View Ikeja Location</a>
                                </div>
                            @endif
                        </div>

                        <!-- Right Side: Section Photo visual wrapper -->
                        <div class="lg:col-span-5 relative mt-4 lg:mt-0 flex justify-center">
                            <div class="w-full max-w-md aspect-[4/3] bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] overflow-hidden relative group">
                                @if($category->slug === 'comfort')
                                    <img src="{{ asset('pictures/bedroom.jpg') }}" alt="Kevron luxury bedroom details" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                @elseif($category->slug === 'power-internet')
                                    <img src="{{ asset('pictures/master-bedroom.jpg') }}" alt="High-speed internet lounge remote workspace" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                @elseif($category->slug === 'kitchen-laundry')
                                    <img src="{{ asset('pictures/kitchen-amenities.jpg') }}" alt="Fully equipped modern kitchen setups" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                @elseif($category->slug === 'entertainment')
                                    <img src="{{ asset('pictures/snooker-amenities.jpg') }}" alt="In-suite slate snooker board and PS5 setup" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                @elseif($category->slug === 'security')
                                    <img src="{{ asset('pictures/no-smoking-rules.jpeg') }}" alt="Keyless digital security entry systems" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                @elseif($category->slug === 'transport')
                                    <img src="{{ asset('pictures/staircase.jpg') }}" alt="Executive airport pickup transit solutions" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                @elseif($category->slug === 'location')
                                    <img src="{{ asset('pictures/living-room-dining.jpg') }}" alt="Ikeja local neighborhood guide" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                @elseif($category->slug === 'sustainability')
                                    <img src="{{ asset('pictures/staircase-2.jpg') }}" alt="Energy-efficient systems and lighting details" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                @else
                                    <img src="{{ asset('pictures/lounge.jpg') }}" alt="On-site guest reception concierge staff support" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                @endif
                                <div class="absolute bottom-4 left-4 bg-slate-950/80 backdrop-blur-md px-3 py-1.5 rounded-[0.1rem] border border-white/10">
                                    <span class="text-white text-xs font-bold tracking-wider">PREVIEW</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @endif
        @endforeach
    </main>

    <!-- 5. APARTMENT AMENITY COMPARISON SECTION -->
    <section class="py-20 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">Compare Amenities</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Apartment Amenity Comparison
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- Desktop View: Grid Table -->
            <div class="hidden md:block overflow-x-auto border border-slate-200 dark:border-slate-800 rounded-[0.1rem] shadow-sm bg-white dark:bg-slate-900">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-100 dark:bg-slate-800/80 border-b border-slate-200 dark:border-slate-800">
                            <th class="p-4 text-xs font-bold uppercase tracking-wider text-slate-600 dark:text-slate-400">Amenities & Features</th>
                            @foreach($apartments as $apt)
                                <th class="p-4 text-xs font-bold uppercase tracking-wider text-slate-900 dark:text-white text-center">
                                    {{ $apt->name }}
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        @php
                            $compFields = \App\Models\ComparisonField::orderBy('order_index')->get();
                        @endphp
                        
                        @foreach($compFields as $field)
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors">
                                <td class="p-4 text-xs font-semibold text-slate-800 dark:text-slate-200">
                                    {{ $field->label }}
                                </td>
                                @foreach($apartments as $apt)
                                    @php
                                        $val = $apt->comparisonFieldValues->where('comparison_field_id', $field->id)->first()?->value ?? 'No';
                                        $isYes = in_array(strtolower($val), ['yes', '1', 'true', 'included', 'on request', 'on-request']);
                                    @endphp
                                    <td class="p-4 text-xs text-center font-medium">
                                        @if($field->type === 'boolean')
                                            @if($isYes)
                                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 text-xs">✔</span>
                                            @else
                                                <span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-400 text-xs">—</span>
                                            @endif
                                        @else
                                            <span class="text-slate-900 dark:text-slate-200 font-semibold">{{ $val }}</span>
                                        @endif
                                    </td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Mobile View: Stacked Cards Comparison -->
            <div class="block md:hidden space-y-8">
                @foreach($apartments as $apt)
                    <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] overflow-hidden">
                        <div class="bg-slate-100 dark:bg-slate-800 p-4 border-b border-slate-200 dark:border-slate-800">
                            <h3 class="text-xs font-bold text-slate-900 dark:text-white">{{ $apt->name }}</h3>
                        </div>
                        <div class="p-4 space-y-3">
                            @foreach($compFields as $field)
                                @php
                                    $val = $apt->comparisonFieldValues->where('comparison_field_id', $field->id)->first()?->value ?? 'No';
                                    $isYes = in_array(strtolower($val), ['yes', '1', 'true', 'included', 'on request', 'on-request']);
                                @endphp
                                <div class="flex items-center justify-between text-xs border-b border-slate-100 dark:border-slate-800/40 pb-2">
                                    <span class="text-slate-500 dark:text-slate-400 font-semibold">{{ $field->label }}</span>
                                    <span class="font-bold text-slate-900 dark:text-white">
                                        @if($field->type === 'boolean')
                                            @if($isYes)
                                                <span class="text-emerald-600 dark:text-emerald-400">Yes</span>
                                            @else
                                                <span class="text-slate-400">—</span>
                                            @endif
                                        @else
                                            {{ $val }}
                                        @endif
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Comparison CTAs -->
            <div class="flex flex-wrap items-center justify-center gap-4 pt-10">
                <a href="/apartments" class="btn-pill btn-primary text-xs" @click="logTelemetry('click_cta', 'comparison_view_all_apartments')">Compare Apartments</a>
                <a href="/booking" class="btn-pill btn-outline-gold text-xs" @click="logTelemetry('click_cta', 'comparison_book_now')">Book Now</a>
            </div>
        </div>
    </section>

    <!-- 6. VISUAL AMENITY GALLERY PREVIEW -->
    <section class="py-20">
        <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">Visual Gallery</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Explore Our Spaces
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- Category Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Bedrooms Gallery Card -->
                <a href="/gallery?category=bedrooms" class="relative group block overflow-hidden rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] aspect-[4/3] bg-slate-900" @click="logTelemetry('click_gallery_preview', 'bedrooms')">
                    <img src="{{ asset('pictures/bedroom.jpg') }}" alt="En-suite Bedroom" class="w-full h-full object-cover opacity-80 group-hover:scale-105 group-hover:opacity-60 transition-all duration-500">
                    <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/45 to-transparent"></div>
                    <div class="absolute bottom-4 left-4 right-4">
                        <span class="text-xs font-bold text-amber-400 block mb-1">Luxury Private Spaces</span>
                        <h4 class="text-white text-xs font-bold tracking-tight">Bedrooms & Comfort</h4>
                    </div>
                </a>

                <!-- Kitchen Gallery Card -->
                <a href="/gallery?category=kitchens" class="relative group block overflow-hidden rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] aspect-[4/3] bg-slate-900" @click="logTelemetry('click_gallery_preview', 'kitchens')">
                    <img src="{{ asset('pictures/kitchen.jpg') }}" alt="Modern Kitchen" class="w-full h-full object-cover opacity-80 group-hover:scale-105 group-hover:opacity-60 transition-all duration-500">
                    <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/45 to-transparent"></div>
                    <div class="absolute bottom-4 left-4 right-4">
                        <span class="text-xs font-bold text-amber-400 block mb-1">Culinary Equipment</span>
                        <h4 class="text-white text-xs font-bold tracking-tight">Kitchen & Dining</h4>
                    </div>
                </a>

                <!-- Entertainment Gallery Card -->
                <a href="/gallery?category=entertainment" class="relative group block overflow-hidden rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] aspect-[4/3] bg-slate-900" @click="logTelemetry('click_gallery_preview', 'entertainment')">
                    <img src="{{ asset('pictures/snooker-amenities.jpg') }}" alt="Snooker & PS5 Room" class="w-full h-full object-cover opacity-80 group-hover:scale-105 group-hover:opacity-60 transition-all duration-500">
                    <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/45 to-transparent"></div>
                    <div class="absolute bottom-4 left-4 right-4">
                        <span class="text-xs font-bold text-amber-400 block mb-1">Recreation & Relaxation</span>
                        <h4 class="text-white text-xs font-bold tracking-tight">Entertainment Zones</h4>
                    </div>
                </a>
            </div>

            <div class="text-center pt-10">
                <a href="/gallery" class="btn-pill btn-primary text-xs" @click="logTelemetry('click_cta', 'view_full_gallery')">Launch Full Gallery</a>
            </div>
        </div>
    </section>

    <!-- 7. SEO/GEO FACTS BLOCK -->
    <section class="py-12 bg-slate-50 dark:bg-slate-900/20 border-y border-slate-100 dark:border-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h3 class="sr-only">Kevron Suites SEO Fact Block</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 luxury serviced-apartment amenities in Adeniyi Jones, Ikeja, Lagos, including 24-hour power, Wi-Fi, high-speed internet, modern kitchens, laundry facilities, air conditioning, balconies, PS5, snooker, smart locks, CCTV, intercom/video doorbells, visitor management, airport pickup and rented car support on request. Perfect for solo executives, remote work, business trips, families, corporate retreats, staycations, or transit stays near Murtala Muhammed International Airport (MMIA), MM1/MM2 local airports, Ikeja City Mall (Shoprite), premium eateries, event centers, and Memabod Police Station.
            </p>
        </div>
    </section>

    <!-- 8. DYNAMIC FAQ ACCORDION -->
    <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);">
                    Amenities & Services FAQs
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- Accordion Drawer (Preline UI / Alpine integration) -->
            <div class="space-y-4" x-data="{ activeFaq: null }">
                @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>

    <!-- 9. FINAL CTA SECTION (MIDNIGHT NAVY) -->
    <section class="section-navy py-20 text-center relative overflow-hidden bg-slate-950 text-white">
        <!-- Subtle overlay -->
        <div class="absolute inset-0 opacity-10">
            <img src="{{ asset('pictures/master-bedroom.jpg') }}" alt="Master bedroom en-suite" 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);">
                Enjoy Comfort, Convenience and Smart Living in Ikeja
            </h2>
            <p class="text-slate-300 max-w-2xl mx-auto font-medium" style="font-family: 'Inter', sans-serif; font-size: 0.875rem;">
                Choose from luxury 1, 2, 3 and 4 bedroom serviced apartments with amenities designed for comfort, work, relaxation and secure guest access.
            </p>

            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
                <a href="/apartments" class="btn-pill btn-primary text-xs !bg-amber-500 hover:!bg-amber-600 !text-slate-950 font-bold" @click="logTelemetry('click_cta', 'footer_view_apartments')">
                    View Apartments
                </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_check_availability')">
                    Check Availability
                </a>
                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985')) }}" 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 Us
                </a>
            </div>
        </div>
    </section>

    <!-- ==================== MODAL FORM & TOASTS ==================== -->

    <!-- Interactive Concierge Service Request Modal -->
    <div class="fixed inset-0 z-50 overflow-y-auto flex items-center justify-center p-4" 
         x-show="showRequestModal" 
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         x-cloak>
        <!-- Overlay backdrop -->
        <div class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm" @click="showRequestModal = false"></div>

        <!-- Modal Wrapper -->
        <div class="relative bg-white dark:bg-slate-900 w-full max-w-lg p-6 rounded-[0.1rem] shadow-xl border border-slate-200 dark:border-slate-800 z-10">
            <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-3 mb-4">
                <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider" style="font-family: 'Inter', sans-serif;">
                    Concierge Service Request
                </h3>
                <button class="text-slate-400 hover:text-slate-600 focus:outline-none font-bold text-lg" @click="showRequestModal = false">✕</button>
            </div>

            <!-- Form -->
            <form id="service-request-form" @submit.prevent="submitRequest()">
                @csrf
                <div class="space-y-4">
                    <input type="hidden" name="request_type" :value="requestType">

                    <!-- Guest Details -->
                    <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" 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="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" type="email" id="email" name="email" required>
                        </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="phone">Phone 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" type="tel" id="phone" name="phone" required placeholder="e.g. +234...">
                        </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 (Optional)</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" type="text" id="booking_reference" name="booking_reference" placeholder="e.g. KEV-12345">
                        </div>
                    </div>

                    <!-- Dynamic Details based on Request Type -->
                    <template x-if="requestType === 'airport_pickup'">
                        <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_date">Pickup 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" type="date" id="pickup_date" name="pickup_date" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="pickup_time">Flight 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" type="text" id="pickup_time" name="pickup_time" required placeholder="e.g. 14:30 or 2:30 PM">
                            </div>
                        </div>
                    </template>

                    <template x-if="requestType === 'car_rental'">
                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="rental_days">Rental 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" type="number" id="rental_days" name="rental_days" required min="1" value="1">
                        </div>
                    </template>

                    <!-- Additional Details -->
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="details">Additional Notes / Special 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="details" name="details" placeholder="Please state flight numbers, luggage size, preferred car specifications or support requirements..."></textarea>
                    </div>
                </div>

                <!-- Submit buttons -->
                <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="button" class="btn-pill btn-outline-gold text-xs !py-2.5 !px-5" @click="showRequestModal = false" :disabled="submitting">Cancel</button>
                    <button type="submit" class="btn-pill btn-primary text-xs !py-2.5 !px-5 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>

    <!-- 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>
@endsection