@extends('layouts.app')

@section('title', $seo->meta_title ?? 'Luxury Serviced Apartments in Ikeja, Lagos | Kevron Suites')

@section('meta_description', $seo->meta_description ?? 'Experience premium 1, 2, 3 and 4 bedroom luxury serviced apartments at Kevron Suites and Apartments, Adeniyi Jones, Ikeja. Featuring 24h power, Wi-Fi, smart security, PS5, snooker, and airport pickup.')

@section('content')

<!-- Dynamic Hero Section -->
<style>
    @keyframes dynamic-ken-burns {
        0% {
            transform: scale(1.02) translate(0, 0) rotate(0deg);
        }
        25% {
            transform: scale(1.08) translate(1%, -0.5%) rotate(0.1deg);
        }
        50% {
            transform: scale(1.15) translate(-0.5%, 1%) rotate(-0.1deg);
        }
        75% {
            transform: scale(1.08) translate(-1%, -1%) rotate(0.1deg);
        }
        100% {
            transform: scale(1.02) translate(0, 0) rotate(0deg);
        }
    }
    .animate-moving-bg {
        animation: dynamic-ken-burns 36s ease-in-out infinite;
        transform-origin: center center;
    }
    @media (prefers-reduced-motion: reduce) {
        .animate-moving-bg {
            animation: none !important;
            transform: none !important;
        }
    }
</style>
<section class="relative min-h-[85vh] flex items-center justify-center overflow-hidden bg-[#080D2B] text-white section-navy" x-data="{ 
    activeSlide: 0, 
    slidesCount: {{ $heroSlides->count() ?: 1 }},
    playVideoModal: false,
    activeVideo: 'landscape',
    get vimeoUrl() {
        return this.activeVideo === 'landscape' 
            ? 'https://player.vimeo.com/video/1186235401?autoplay=1' 
            : 'https://player.vimeo.com/video/1169265971?autoplay=1';
    }
}">
    <!-- Sliders Container with independent animated child element to prevent Alpine transition conflicts -->
    <div class="absolute inset-0 overflow-hidden">
        @forelse($heroSlides as $index => $slide)
            <div x-show="activeSlide === {{ $index }}" 
                 x-transition:enter="transition ease-out duration-1000"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition ease-in duration-500"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="absolute inset-0">
                <div class="absolute inset-0 bg-cover bg-center animate-moving-bg"
                     style="background-image: url('{{ asset($slide->image_path ?: 'pictures/master-bedroom.jpg') }}');">
                </div>
            </div>
        @empty
            <div class="absolute inset-0 overflow-hidden">
                <div class="absolute inset-0 bg-cover bg-center animate-moving-bg" style="background-image: url('{{ asset('pictures/master-bedroom.jpg') }}');"></div>
            </div>
        @endforelse
        <!-- Brighter, highly legibility-friendly ambient overlay lets background photo shine clearly -->
        <div class="absolute inset-0 bg-gradient-to-b from-[#080D2B]/75 via-[#080D2B]/40 to-[#080D2B]"></div>
    </div>

    <!-- Hero Content: Re-aligned Centermost Grid for Maximum Impact -->
    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 pb-16">
        <div class="max-w-4xl mx-auto text-center space-y-6">
            <!-- Badge Tagline -->
            @if($sections->has('hero'))
                <span class="text-[10px] sm:text-xs uppercase tracking-[0.3em] text-[#D6A84F] font-bold block" style="font-size: 0.75rem;">
                    {{ $sections->get('hero')->subtitle }}
                </span>
                <h1 class="text-white leading-tight font-serif hero-title" style="font-family: var(--font-heading); font-size: clamp(1.8rem, 4.5vw, 3rem); font-weight: 400;">
                    {{ $sections->get('hero')->title }}
                </h1>
                <p class="text-slate-300 font-medium max-w-2xl mx-auto" style="font-size: clamp(0.875rem, 1.2vw, 1rem); line-height: 1.6;">
                    {{ $sections->get('hero')->content }}
                </p>
            @else
                <span class="text-xs uppercase tracking-[0.3em] text-[#D6A84F] font-bold block" style="font-size: 0.75rem;">
                    A New Standard of Smart Living
                </span>
                <h1 class="text-white leading-tight font-serif hero-title" style="font-family: var(--font-heading); font-size: clamp(1.8rem, 4.5vw, 3rem); font-weight: 400;">
                    Luxury Serviced Apartments in Ikeja, Lagos
                </h1>
                <p class="text-slate-300 font-medium max-w-2xl mx-auto" style="font-size: clamp(0.875rem, 1.2vw, 1rem); line-height: 1.6;">
                    Experience premium 1, 2, 3 and 4 bedroom serviced suites at Kevron Suites and Apartments, Adeniyi Jones, Ikeja — with 24-hour power, high-speed Wi-Fi, smart locks, modern kitchens, private balconies, snooker, and airport pickup.
                </p>
            @endif

            <!-- Action CTAs -->
            <div class="flex flex-wrap items-center justify-center gap-4 pt-4">
                <a href="{{ url('/booking') }}" class="btn-pill btn-primary text-xs uppercase tracking-wider font-semibold min-h-[44px] px-8">
                    Book Dynamic Stay
                </a>
                <button @click="playVideoModal = true; activeVideo = 'landscape'" class="btn-pill btn-outline-gold text-xs uppercase tracking-wider font-semibold text-white hover:text-white min-h-[44px] flex items-center space-x-2 px-8">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z" />
                    </svg>
                    <span>Watch Video Tours</span>
                </button>
                <a href="{{ url('/virtual-tour') }}" class="btn-pill text-xs uppercase tracking-wider font-semibold min-h-[44px] px-8 text-[#080D2B] hover:opacity-90 transition-all hover:scale-105 duration-300" style="background: linear-gradient(135deg, #D6A84F 0%, #F5C05B 50%, #B8860B 100%); box-shadow: 0 4px 15px rgba(214, 168, 79, 0.35);">
                    Launch Virtual Tour
                </a>
            </div>

            <!-- Trust Badges List -->
            <div class="flex flex-wrap items-center justify-center gap-8 text-slate-300 border-t border-slate-800/80 pt-8 mt-6">
                @foreach($badges as $badge)
                    <div class="flex items-center space-x-2 text-[11px] uppercase tracking-wider font-bold">
                        <span class="text-[#D6A84F]">
                            <svg class="w-4.5 h-4.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-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>
                        </span>
                        <span style="font-size: 0.8125rem;">{{ $badge->text }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Slide Indicators Controls -->
    @if($heroSlides->count() > 1)
        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 flex space-x-2">
            @foreach($heroSlides as $index => $slide)
                <button @click="activeSlide = {{ $index }}" 
                        :class="{'bg-[#D6A84F] w-6': activeSlide === {{ $index }}, 'bg-white/40 w-2': activeSlide !== {{ $index }}}"
                        class="h-2 rounded-full transition-all duration-300 focus:outline-none" 
                        aria-label="View Slide {{ $index + 1 }}"></button>
            @endforeach
        </div>
    @endif

    <!-- Video Modal Lightbox Frame -->
    <div x-show="playVideoModal" 
         class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/90 p-4 backdrop-blur-sm"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-250"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="playVideoModal = false">
        <div class="relative w-full max-w-4xl bg-slate-950 rounded-lg overflow-hidden border border-slate-800 flex flex-col shadow-2xl" @click.stop>
            <!-- Top bar with video selector tabs -->
            <div class="flex items-center justify-between bg-slate-900 border-b border-slate-800/80 px-4 sm:px-6 py-3">
                <div class="flex space-x-4 sm:space-x-6">
                    <button @click="activeVideo = 'landscape'" 
                            :class="activeVideo === 'landscape' ? 'text-[#D6A84F] border-[#D6A84F]' : 'text-slate-400 hover:text-white border-transparent'"
                            class="text-[10px] sm:text-xs uppercase tracking-wider font-bold pb-1 border-b-2 transition-all focus:outline-none">
                        Cinematic Landscape Tour
                    </button>
                    <button @click="activeVideo = 'walkthrough'" 
                            :class="activeVideo === 'walkthrough' ? 'text-[#D6A84F] border-[#D6A84F]' : 'text-slate-400 hover:text-white border-transparent'"
                            class="text-[10px] sm:text-xs uppercase tracking-wider font-bold pb-1 border-b-2 transition-all focus:outline-none">
                        Lounge Walkthrough Tour
                    </button>
                </div>
                <button @click="playVideoModal = false" class="text-slate-400 hover:text-red-500 focus:outline-none transition-colors" aria-label="Close Video">
                    <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="M6 18L18 6M6 6l12 12" /></svg>
                </button>
            </div>
            
            <!-- Video Container -->
            <div class="relative w-full aspect-video bg-black">
                <iframe :src="playVideoModal ? vimeoUrl : ''" class="absolute inset-0 w-full h-full" frameborder="0" allow="autoplay; fullscreen; picture-in-picture"></iframe>
            </div>
        </div>
    </div>
</section>

<!-- Dynamic Booking Search Widget -->
<section class="relative z-30 -mt-4 max-w-5xl mx-auto px-4 animate-fade-in" style="font-family: var(--font-body);">
    <!-- Desktop Aman-Style Split Glassmorphic Console -->
    <div class="backdrop-blur-2xl bg-[#090D2A]/95 border border-white/10 shadow-[0_30px_70px_rgba(0,0,0,0.85)] rounded-2xl overflow-hidden hidden md:flex" style="box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9);">
        <!-- Left Accent Column -->
        <div class="w-1/4 bg-gradient-to-br from-[#D6A84F] via-[#F5C05B] to-[#B8860B] p-6 flex flex-col justify-between text-[#080D2B] relative overflow-hidden">
            <!-- Decorative backdrop glow -->
            <div class="absolute -right-10 -bottom-10 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
            <div>
                <span class="text-[9px] uppercase tracking-[0.2em] font-extrabold text-[#080D2B]/75 block mb-1">Kevron Suites</span>
                <h3 class="text-sm font-extrabold uppercase tracking-wider leading-snug">Book Direct Stay</h3>
            </div>
            <div class="mt-4 border-t border-[#080D2B]/10 pt-4">
                <p class="text-[9px] font-semibold leading-relaxed text-[#080D2B]/85">
                    Unlock exclusive VIP privileges, airport transfer options, and verified secure access codes.
                </p>
            </div>
            <div class="mt-4 flex items-center space-x-1.5 text-[8px] font-extrabold uppercase tracking-widest text-[#080D2B]/90">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-700 animate-pulse"></span>
                <span>Best Rates Guaranteed</span>
            </div>
        </div>

        <!-- Right Form Column — unified Alpine scope for live calculator -->
        <div class="w-3/4 p-6 flex flex-col justify-between"
             x-data="{
                checkInValue: '',
                checkOutValue: '',
                selectedSlug: '{{ optional($apartments->firstWhere('slug', '3-bedroom-luxury-apartment-ikeja'))->slug ?? optional($apartments->first())->slug }}',
                selectedName: '{{ optional($apartments->firstWhere('slug', '3-bedroom-luxury-apartment-ikeja'))->name ?? optional($apartments->first())->name ?? '3 Bedroom Luxury Apartment' }}',
                aptPrices: {
                    @foreach($apartments as $apt)
                    '{{ $apt->slug }}': {{ (int)$apt->base_price_nightly }},
                    @endforeach
                },
                aptIds: {
                    @foreach($apartments as $apt)
                    '{{ $apt->slug }}': {{ $apt->id }},
                    @endforeach
                },
                taxRatePercent: {{ (float) \App\Models\Setting::getVal('tax_rate', '7.5') }},
                serviceChargeRatePercent: {{ (float) \App\Models\Setting::getVal('service_charge_rate', '5.0') }},
                pricing: null,
                loading: false,
                get nights() {
                    if (!this.checkInValue || !this.checkOutValue) return 0;
                    const [iy, im, id] = this.checkInValue.split('-').map(Number);
                    const [oy, om, od] = this.checkOutValue.split('-').map(Number);
                    const diff = (new Date(oy, om-1, od) - new Date(iy, im-1, id)) / 86400000;
                    return diff > 0 ? diff : 0;
                },
                get nightlyRate() {
                    return this.aptPrices[this.selectedSlug] || 0;
                },
                get serviceCharge() {
                    return (this.nights * this.nightlyRate) * (this.serviceChargeRatePercent / 100.0);
                },
                get vatAmount() {
                    return ((this.nights * this.nightlyRate) + this.serviceCharge) * (this.taxRatePercent / 100.0);
                },
                get totalRate() {
                    if (this.pricing) {
                        return this.pricing.total_payable - this.pricing.security_deposit;
                    }
                    return (this.nights * this.nightlyRate) + this.serviceCharge + this.vatAmount;
                },
                get showCalc() {
                    return this.nights > 0;
                },
                async fetchEstimate() {
                    if (!this.checkInValue || !this.checkOutValue || this.nights <= 0) {
                        this.pricing = null;
                        return;
                    }
                    this.loading = true;
                    try {
                        let res = await fetch('{{ route('booking.calculate_price') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                apartment_type_id: this.aptIds[this.selectedSlug],
                                check_in: this.checkInValue,
                                check_out: this.checkOutValue
                            })
                        });
                        let data = await res.json();
                        this.pricing = data;
                    } catch (e) {
                        console.error('Failed to fetch pricing estimate:', e);
                    } finally {
                        this.loading = false;
                    }
                },
                init() {
                    this.$watch('checkInValue', () => this.fetchEstimate());
                    this.$watch('checkOutValue', () => this.fetchEstimate());
                    this.$watch('selectedSlug', () => this.fetchEstimate());
                    this.$watch('selectedSlug', (value) => {
                        const aptId = this.aptIds[value];
                        updateBookedDates(aptId, window.checkInPicker, window.checkOutPicker, this, 'checkInValue', 'checkOutValue');
                    });
                    document.addEventListener('DOMContentLoaded', () => {
                        const aptId = this.aptIds[this.selectedSlug];
                        updateBookedDates(aptId, window.checkInPicker, window.checkOutPicker, this, 'checkInValue', 'checkOutValue');
                    });
                },
                fmtDate(v) {
                    if (!v) return 'Select Date';
                    const [y, m, d] = v.split('-').map(Number);
                    return new Date(y, m-1, d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
                },
                fmtMoney(n) {
                    return '\u20a6' + Number(n).toLocaleString('en-US');
                }
             }">
            <!-- Top Tab / Quick Utilities Bar -->
            <div class="flex items-center justify-between border-b border-white/5 pb-3 mb-4">
                <div class="flex items-center space-x-6">
                    <button type="button" class="flex items-center space-x-2 text-[10px] font-bold uppercase tracking-wider text-white border-b-2 border-[#D6A84F] pb-1 cursor-default">
                        <span>Online Reservation</span>
                    </button>
                    <a href="{{ url('/airport-pickup-car-rental') }}" class="text-[10px] font-bold uppercase tracking-wider text-slate-400 hover:text-white transition-colors pb-1">
                        <span>Airport Transfer</span>
                    </a>
                    <a href="{{ url('/virtual-tour') }}" class="text-[10px] font-bold uppercase tracking-wider text-slate-400 hover:text-white transition-colors pb-1">
                        <span>3D Lounge Tour</span>
                    </a>
                </div>
                <span class="text-[9px] text-[#D6A84F] uppercase tracking-widest font-bold flex items-center gap-1">
                    <span class="w-1.5 h-1.5 rounded-full bg-[#D6A84F] animate-ping"></span> Live Availability
                </span>
            </div>

            <form action="{{ route('home.search') }}" method="POST" id="booking-search-form"
                  class="grid grid-cols-4 gap-4 text-xs font-semibold"
                  style="display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 1rem !important; width: 100% !important; text-align: left !important;">
                @csrf
                
                <!-- Check In Pocket -->
                <div class="min-w-0 bg-slate-900/60 hover:bg-slate-900/90 border border-white/5 hover:border-[#D6A84F]/30 p-3 px-4 rounded-xl transition-all duration-300 flex items-center gap-3 text-left relative focus-within:border-[#D6A84F]/40 cursor-pointer"
                     @click="window.checkInPicker && window.checkInPicker.open()">
                    <!-- Native Date Input positioned absolutely over the whole pocket -->
                    <input type="date" id="check_in" name="check_in"
                           x-ref="checkInInput"
                           x-model="checkInValue"
                           class="absolute inset-0 w-full h-full opacity-0 pointer-events-none z-0">
                    
                    <span class="text-[#D6A84F] shrink-0 bg-slate-950/80 p-2 rounded-lg border border-white/5 z-10">
                        <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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    </span>
                    <div class="flex-grow z-10 min-w-0">
                        <label class="block text-[8px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-0.5">Check In</label>
                        <span class="text-xs text-white font-medium block truncate" x-text="fmtDate(checkInValue)"></span>
                    </div>
                </div>
                
                <!-- Check Out Pocket -->
                <div class="min-w-0 bg-slate-900/60 hover:bg-slate-900/90 border border-white/5 hover:border-[#D6A84F]/30 p-3 px-4 rounded-xl transition-all duration-300 flex items-center gap-3 text-left relative focus-within:border-[#D6A84F]/40 cursor-pointer"
                     @click="window.checkOutPicker && window.checkOutPicker.open()">
                    <!-- Native Date Input positioned absolutely over the whole pocket -->
                    <input type="date" id="check_out" name="check_out"
                           x-ref="checkOutInput"
                           x-model="checkOutValue"
                           class="absolute inset-0 w-full h-full opacity-0 pointer-events-none z-0">
                    
                    <span class="text-[#D6A84F] shrink-0 bg-slate-950/80 p-2 rounded-lg border border-white/5 z-10">
                        <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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    </span>
                    <div class="flex-grow z-10 min-w-0">
                        <label class="block text-[8px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-0.5">Check Out</label>
                        <span class="text-xs text-white font-medium block truncate" x-text="fmtDate(checkOutValue)"></span>
                    </div>
                </div>

                <!-- Suite Type Pocket -->
                <div class="min-w-0 bg-slate-900/60 hover:bg-slate-900/90 border border-white/5 hover:border-[#D6A84F]/30 p-3 px-4 rounded-xl transition-all duration-300 flex items-center gap-3 text-left relative focus-within:border-[#D6A84F]/40 cursor-pointer">
                    <!-- Native Select positioned absolutely over the whole pocket -->
                    <select id="type" name="type"
                            x-ref="selectElement"
                            @change="selectedSlug = $el.value; selectedName = $el.options[$el.selectedIndex].text"
                            class="absolute inset-0 w-full h-full opacity-0 z-20 cursor-pointer p-0 m-0 border-none outline-none bg-transparent">
                        @foreach($apartments as $apt)
                            <option value="{{ $apt->slug }}" {{ $apt->slug === '3-bedroom-luxury-apartment-ikeja' ? 'selected' : '' }}>
                                {{ $apt->name }}
                            </option>
                        @endforeach
                    </select>

                    <span class="text-[#D6A84F] shrink-0 bg-slate-950/80 p-2 rounded-lg border border-white/5 z-10">
                        <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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                    </span>
                    <div class="flex-grow z-10 pr-6 min-w-0">
                        <label class="block text-[8px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-0.5">Suite Type</label>
                        <span class="text-xs text-white font-medium block truncate" x-text="selectedName"></span>
                    </div>
                    <span class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400 z-10">
                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                    </span>
                </div>

                <!-- Booking Submit Button CTA -->
                <div class="flex items-end h-full">
                    <button type="submit"
                            id="booking-submit-btn"
                            class="w-full py-4 px-6 rounded-xl text-[10px] uppercase font-bold tracking-widest text-[#080D2B] transition-all hover:scale-[1.02] duration-300 cursor-pointer shadow-md flex items-center justify-center gap-2"
                            style="background: linear-gradient(135deg, #D6A84F 0%, #F5C05B 50%, #B8860B 100%); box-shadow: 0 4px 15px rgba(214, 168, 79, 0.45); min-height: 52px; width: 100%; position: relative; z-index: 30;">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.637 10.637Z" />
                        </svg>
                        <span>Check Rooms</span>
                    </button>
                </div>
            </form>
            <div x-show="showCalc"
                 x-transition:enter="transition ease-out duration-400"
                 x-transition:enter-start="opacity-0 -translate-y-2"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 translate-y-0"
                 x-transition:leave-end="opacity-0 -translate-y-2"
                 class="mt-4 rounded-xl border border-[#D6A84F]/25 bg-gradient-to-r from-[#D6A84F]/10 via-[#F5C05B]/5 to-transparent px-5 py-3 flex items-center justify-between gap-4"
                 style="display: flex !important;">
                
                <!-- Loading State Skeleton -->
                <div x-show="loading" class="flex-grow flex items-center justify-between">
                    <div class="h-4 bg-slate-800 rounded w-1/4 animate-pulse"></div>
                    <div class="h-4 bg-slate-800 rounded w-1/3 animate-pulse"></div>
                    <div class="h-4 bg-slate-800 rounded w-1/5 animate-pulse"></div>
                </div>

                <!-- Pricing Content -->
                <div x-show="!loading" class="flex-grow flex items-center justify-between">
                    <!-- Nights badge -->
                    <div class="flex items-center gap-2 shrink-0">
                        <span class="bg-[#D6A84F]/20 border border-[#D6A84F]/40 text-[#D6A84F] rounded-lg px-3 py-1.5 text-[11px] font-extrabold uppercase tracking-widest flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"/></svg>
                            <span x-text="nights + (nights === 1 ? ' Night' : ' Nights')"></span>
                        </span>
                    </div>
                    <!-- Rate breakdown -->
                    <div class="flex items-center gap-5 text-[10px] font-bold text-slate-300 min-w-0">
                        <div class="flex flex-col items-center">
                            <span class="text-slate-500 uppercase tracking-widest text-[8px]">Nightly Rate</span>
                            <span class="text-white text-[11px]" x-text="pricing ? fmtMoney(pricing.room_total_before_discount / pricing.nights) : fmtMoney(nightlyRate)"></span>
                        </div>
                        <span class="text-slate-600 text-base font-light">&times;</span>
                        <div class="flex flex-col items-center">
                            <span class="text-slate-500 uppercase tracking-widest text-[8px]">Nights</span>
                            <span class="text-white text-[11px]" x-text="nights"></span>
                        </div>
                        <span class="text-slate-600 text-base font-light">=</span>
                    </div>
                    <!-- Total -->
                    <div class="shrink-0 text-right">
                        <span class="text-[9px] text-slate-400 uppercase tracking-widest font-bold block">Est. Total</span>
                        <span class="text-[#D6A84F] font-extrabold tracking-tight leading-none" style="font-size: 1.1rem;" x-text="fmtMoney(totalRate)"></span>
                    </div>
                    <!-- Disclaimer -->
                    <div class="shrink-0 hidden lg:flex items-center gap-1.5 text-[8px] text-slate-500 font-semibold border-l border-white/5 pl-4">
                        <svg class="w-3.5 h-3.5 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/></svg>
                        <span>Incl. <span x-text="taxRatePercent"></span>% VAT &amp; <span x-text="serviceChargeRatePercent"></span>% fee (excl. ₦100,000 refundable security deposit)</span>
                    </div>
                </div>
            </div>      </div>
        </div>
    </div>

    <!-- Mobile Aman-Style Split Glassmorphic Console Fallback -->
    <div class="backdrop-blur-2xl bg-[#090D2A]/95 border border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.65)] rounded-2xl overflow-hidden md:hidden"
         x-data="{
            checkInMobileValue: '',
            checkOutMobileValue: '',
            selectedMobileSlug: '{{ optional($apartments->firstWhere('slug', '3-bedroom-luxury-apartment-ikeja'))->slug ?? optional($apartments->first())->slug }}',
            selectedMobileName: '{{ optional($apartments->firstWhere('slug', '3-bedroom-luxury-apartment-ikeja'))->name ?? optional($apartments->first())->name ?? '3 Bedroom Luxury Apartment' }}',
            aptPricesMobile: {
                @foreach($apartments as $apt)
                '{{ $apt->slug }}': {{ (int)$apt->base_price_nightly }},
                @endforeach
            },
            aptIdsMobile: {
                @foreach($apartments as $apt)
                '{{ $apt->slug }}': {{ $apt->id }},
                @endforeach
            },
            taxRatePercent: {{ (float) \App\Models\Setting::getVal('tax_rate', '7.5') }},
            serviceChargeRatePercent: {{ (float) \App\Models\Setting::getVal('service_charge_rate', '5.0') }},
            pricing: null,
            loading: false,
            get mobileNights() {
                if (!this.checkInMobileValue || !this.checkOutMobileValue) return 0;
                const [iy, im, id] = this.checkInMobileValue.split('-').map(Number);
                const [oy, om, od] = this.checkOutMobileValue.split('-').map(Number);
                const diff = (new Date(oy, om-1, od) - new Date(iy, im-1, id)) / 86400000;
                return diff > 0 ? diff : 0;
            },
            get mobileNightlyRate() {
                return this.aptPricesMobile[this.selectedMobileSlug] || 0;
            },
            get mobileServiceCharge() {
                return (this.mobileNights * this.mobileNightlyRate) * (this.serviceChargeRatePercent / 100.0);
            },
            get mobileVatAmount() {
                return ((this.mobileNights * this.mobileNightlyRate) + this.mobileServiceCharge) * (this.taxRatePercent / 100.0);
            },
            get mobileTotalRate() {
                if (this.pricing) {
                    return this.pricing.total_payable - this.pricing.security_deposit;
                }
                return (this.mobileNights * this.mobileNightlyRate) + this.mobileServiceCharge + this.mobileVatAmount;
            },
            get mobileShowCalc() {
                return this.mobileNights > 0;
            },
            async fetchMobileEstimate() {
                if (!this.checkInMobileValue || !this.checkOutMobileValue || this.mobileNights <= 0) {
                    this.pricing = null;
                    return;
                }
                this.loading = true;
                try {
                    let res = await fetch('{{ route('booking.calculate_price') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            apartment_type_id: this.aptIdsMobile[this.selectedMobileSlug],
                            check_in: this.checkInMobileValue,
                            check_out: this.checkOutMobileValue
                        })
                    });
                    let data = await res.json();
                    this.pricing = data;
                } catch (e) {
                    console.error('Failed to fetch mobile pricing estimate:', e);
                } finally {
                    this.loading = false;
                }
            },
            init() {
                this.$watch('checkInMobileValue', () => this.fetchMobileEstimate());
                this.$watch('checkOutMobileValue', () => this.fetchMobileEstimate());
                this.$watch('selectedMobileSlug', () => this.fetchMobileEstimate());
                this.$watch('selectedMobileSlug', (value) => {
                    const aptId = this.aptIdsMobile[value];
                    updateBookedDates(aptId, window.checkInMobilePicker, window.checkOutMobilePicker, this, 'checkInMobileValue', 'checkOutMobileValue');
                });
                document.addEventListener('DOMContentLoaded', () => {
                    const aptId = this.aptIdsMobile[this.selectedMobileSlug];
                    updateBookedDates(aptId, window.checkInMobilePicker, window.checkOutMobilePicker, this, 'checkInMobileValue', 'checkOutMobileValue');
                });
            },
            fmtMobileDate(v) {
                if (!v) return 'Select Date';
                const [y, m, d] = v.split('-').map(Number);
                return new Date(y, m-1, d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            },
            fmtMobileMoney(n) {
                return '\u20a6' + Number(n).toLocaleString('en-US');
            }
         }">
        <!-- Top Accent bar -->
        <div class="bg-gradient-to-r from-[#D6A84F] via-[#F5C05B] to-[#B8860B] p-4 text-[#080D2B] flex items-center justify-between">
            <div>
                <span class="text-[8px] uppercase tracking-wider font-extrabold text-[#080D2B]/75 block">Kevron Suites</span>
                <h3 class="text-xs font-extrabold uppercase tracking-wider">Book Direct Stay</h3>
            </div>
            <span class="text-[8px] text-[#080D2B] uppercase tracking-widest font-extrabold flex items-center gap-1">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-700 animate-ping"></span> Live Best Rates
            </span>
        </div>

        <div class="p-5">
            <form action="{{ route('home.search') }}" method="POST" id="booking-search-mobile-form" class="grid grid-cols-1 gap-4 text-xs font-semibold">
                @csrf
                
                <!-- Check In Pocket -->
                <div class="min-w-0 bg-slate-900/60 border border-white/5 p-3 px-4 rounded-xl flex items-center gap-3 text-left relative focus-within:border-[#D6A84F]/40 cursor-pointer"
                     @click="window.checkInMobilePicker && window.checkInMobilePicker.open()">
                    <!-- Native Date Input positioned absolutely over the whole pocket -->
                    <input type="date" id="check_in_mobile" name="check_in"
                           x-ref="checkInMobileInput"
                           x-model="checkInMobileValue"
                           class="absolute inset-0 w-full h-full opacity-0 pointer-events-none z-0">
                    <span class="text-[#D6A84F] shrink-0 bg-slate-950/80 p-2 rounded-lg border border-white/5 z-10">
                        <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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    </span>
                    <div class="flex-grow z-10 min-w-0">
                        <label class="block text-[8px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-0.5">Check In</label>
                        <span class="text-xs text-white font-medium block truncate" x-text="fmtMobileDate(checkInMobileValue)"></span>
                    </div>
                </div>

                <!-- Check Out Pocket -->
                <div class="min-w-0 bg-slate-900/60 border border-white/5 p-3 px-4 rounded-xl flex items-center gap-3 text-left relative focus-within:border-[#D6A84F]/40 cursor-pointer"
                     @click="window.checkOutMobilePicker && window.checkOutMobilePicker.open()">
                    <!-- Native Date Input positioned absolutely over the whole pocket -->
                    <input type="date" id="check_out_mobile" name="check_out"
                           x-ref="checkOutMobileInput"
                           x-model="checkOutMobileValue"
                           class="absolute inset-0 w-full h-full opacity-0 pointer-events-none z-0">
                    <span class="text-[#D6A84F] shrink-0 bg-slate-950/80 p-2 rounded-lg border border-white/5 z-10">
                        <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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    </span>
                    <div class="flex-grow z-10 min-w-0">
                        <label class="block text-[8px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-0.5">Check Out</label>
                        <span class="text-xs text-white font-medium block truncate" x-text="fmtMobileDate(checkOutMobileValue)"></span>
                    </div>
                </div>

                <!-- Suite Type Pocket -->
                <div class="min-w-0 bg-slate-900/60 border border-white/5 p-3 px-4 rounded-xl flex items-center gap-3 text-left relative focus-within:border-[#D6A84F]/40 cursor-pointer">
                    <!-- Native Select positioned absolutely over the whole pocket -->
                    <select id="type_mobile" name="type"
                            x-ref="selectMobileElement"
                            @change="selectedMobileSlug = $el.value; selectedMobileName = $el.options[$el.selectedIndex].text"
                            class="absolute inset-0 w-full h-full opacity-0 z-20 cursor-pointer p-0 m-0 border-none outline-none bg-transparent">
                        @foreach($apartments as $apt)
                            <option value="{{ $apt->slug }}" {{ $apt->slug === '3-bedroom-luxury-apartment-ikeja' ? 'selected' : '' }}>
                                {{ $apt->name }}
                            </option>
                        @endforeach
                    </select>

                    <span class="text-[#D6A84F] shrink-0 bg-slate-950/80 p-2 rounded-lg border border-white/5 z-10">
                        <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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                    </span>
                    <div class="flex-grow z-10 pr-6 min-w-0">
                        <label class="block text-[8px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-0.5">Suite Type</label>
                        <span class="text-xs text-white font-medium block truncate" x-text="selectedMobileName"></span>
                    </div>
                    <span class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400 z-10">
                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                    </span>
                </div>

                <!-- ── Mobile Live Rate Calculator Card ── -->
                <div x-show="mobileShowCalc"
                     x-transition:enter="transition ease-out duration-400"
                     x-transition:enter-start="opacity-0 scale-95"
                     x-transition:enter-end="opacity-100 scale-100"
                     x-transition:leave="transition ease-in duration-200"
                     x-transition:leave-start="opacity-100 scale-100"
                     x-transition:leave-end="opacity-0 scale-95"
                     class="rounded-xl border border-[#D6A84F]/30 bg-gradient-to-br from-[#D6A84F]/10 via-[#F5C05B]/5 to-transparent p-4">
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-[9px] uppercase tracking-widest font-extrabold text-[#D6A84F] flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zm0 3h.008v.008H8.25v-.008zm0 3h.008v.008H8.25v-.008zm3-6h.008v.008H11.25v-.008zm0 3h.008v.008H11.25v-.008zm0 3h.008v.008H11.25v-.008zm3-6h.008v.008H14.25v-.008zm0 3h.008v.008H14.25v-.008zm0 3h.008v.008H14.25v-.008z"/></svg>
                            Rate Estimate
                        </span>
                        <span class="bg-[#D6A84F]/20 border border-[#D6A84F]/40 text-[#D6A84F] rounded-full px-2.5 py-0.5 text-[10px] font-extrabold" x-text="mobileNights + (mobileNights === 1 ? ' Night' : ' Nights')"></span>
                    </div>

                    <!-- Loading State Skeleton -->
                    <div x-show="loading" class="space-y-2 animate-pulse">
                        <div class="h-4 bg-slate-800 rounded w-2/3"></div>
                        <div class="h-4 bg-slate-800 rounded w-1/2"></div>
                    </div>

                    <!-- Content -->
                    <div x-show="!loading" class="flex items-end justify-between">
                        <div class="space-y-1 text-[10px] text-slate-400 font-semibold">
                            <div><span class="text-slate-500">Rate/night:</span> <span class="text-white font-bold" x-text="pricing ? fmtMobileMoney(pricing.room_total_before_discount / pricing.nights) : fmtMobileMoney(mobileNightlyRate)"></span></div>
                            <div><span class="text-slate-500">Nights:</span> <span class="text-white font-bold" x-text="mobileNights"></span></div>
                        </div>
                        <div class="text-right">
                            <span class="text-[9px] text-slate-400 uppercase tracking-widest font-bold block">Est. Total</span>
                            <span class="text-[#D6A84F] font-extrabold" style="font-size: 1.25rem; line-height: 1;" x-text="fmtMobileMoney(mobileTotalRate)"></span>
                            <span class="text-[8px] text-slate-550 block mt-0.5 leading-tight">incl. <span x-text="taxRatePercent"></span>% VAT &amp; <span x-text="serviceChargeRatePercent"></span>% fee<br>(excl. ₦100k refundable deposit)</span>
                        </div>
                    </div>
                </div>

                <!-- Booking Submit Button CTA -->
                <div>
                    <button type="submit"
                            id="booking-submit-mobile-btn"
                            class="w-full py-4 px-6 rounded-xl text-[10px] uppercase font-bold tracking-widest text-[#080D2B] transition-all hover:scale-[1.02] duration-300 cursor-pointer shadow-md flex items-center justify-center gap-2"
                            style="background: linear-gradient(135deg, #D6A84F 0%, #F5C05B 50%, #B8860B 100%); position: relative; z-index: 30;">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.637 10.637Z" />
                        </svg>
                        <span>Check Rooms</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>

<!-- Brand Intro Section -->
<section class="section-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            @if($sections->has('brand_intro'))
                <div>
                    <span class="text-xs uppercase tracking-[0.2em] text-[#D6A84F] font-bold block mb-2" style="font-size: 0.75rem;">
                        {{ $sections->get('brand_intro')->subtitle }}
                    </span>
                    <h2 style="font-family: var(--font-heading); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 400;">
                        {{ $sections->get('brand_intro')->title }}
                    </h2>
                    <p class="text-slate-500 dark:text-slate-400 mb-6 leading-relaxed pt-3" style="font-size: clamp(0.8125rem, 1vw, 0.875rem);">
                        {{ $sections->get('brand_intro')->content }}
                    </p>
                </div>
            @else
                <div>
                    <span class="text-xs uppercase tracking-[0.2em] text-[#D6A84F] font-bold block mb-2" style="font-size: 0.75rem;">
                        Strategic Location
                    </span>
                    <h2 style="font-family: var(--font-heading); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 400;">
                        The Kevron Advantage — Adeniyi Jones, Ikeja
                    </h2>
                    <p class="text-slate-500 dark:text-slate-400 mb-6 leading-relaxed pt-3" style="font-size: clamp(0.8125rem, 1vw, 0.875rem);">
                        Kevron Suites and Apartments is nestled within a highly secure residential perimeter on Regina Coker Street/Ogunlowo Street in Adeniyi Jones, Ikeja, Lagos. It offers executive travelers proximity to airports, shopping, dining, and government institutions.
                    </p>
                </div>
            @endif

            <!-- Travel Proximities & Interactive Proximity HUD -->
            <div x-data="{
                activeLandmark: 'landmark_1',
                landmarks: {
                    'landmark_1': { name: 'MMA Local Airport (MM1/MM2)', details: 'Quick, traffic-free bypass (~8-10 mins drive) perfect for catching local flights.', coordinate: 'Airport Road', time: '8 mins' },
                    'landmark_2': { name: 'MMA International Terminal (MMIA)', details: 'Secure direct airport highway route (~15 mins drive) with airport car pick-up service available.', coordinate: 'Ikeja Airport Link', time: '15 mins' },
                    'landmark_3': { name: 'Memabod Police Station', details: 'Secure gated proximity support (~3 mins drive) offering executive safety and complete perimeter peace of mind.', coordinate: 'Adeniyi Jones', time: '3 mins' },
                    'landmark_4': { name: 'Ikeja City Mall', details: 'Direct main road transit (~10 mins) to Shoprite, cinemas, fashion brands and dining hubs.', coordinate: 'Government House Link', time: '10 mins' }
                }
            }">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs font-semibold mb-6">
                    <template x-for="(land, key) in landmarks" :key="key">
                        <button type="button" @click="activeLandmark = key"
                                class="flex items-center justify-between p-3.5 border text-left cursor-pointer transition-all duration-300"
                                :class="activeLandmark === key ? 'border-[#D6A84F] bg-[#F4F8FF] dark:bg-slate-800/40 text-slate-950 dark:text-white glow-gold' : 'border-[#DDE6F3] dark:border-slate-800 text-slate-500 dark:text-slate-400 hover:border-slate-300 dark:hover:border-slate-700'"
                                style="border-radius: 0.1rem;">
                            <span class="font-bold text-[11px]" x-text="land.name"></span>
                            <span class="text-[#D6A84F] font-bold text-[11px] shrink-0" x-text="land.time"></span>
                        </button>
                    </template>
                </div>
                
                <!-- Stylized 3D Proximity Route Card HUD -->
                <div class="bg-slate-900 border border-[#D6A84F]/25 p-4 mb-6 shadow-2xl relative overflow-hidden" style="border-radius: 0.1rem;">
                    <div class="relative z-10 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
                        <div>
                            <span class="text-[9px] uppercase tracking-widest text-[#D6A84F] font-bold block mb-1">Active Landmark Proximity HUD</span>
                            <h4 class="text-xs font-bold uppercase tracking-wider block" style="color: #d1d5dc !important;" x-text="landmarks[activeLandmark].name"></h4>
                            <p class="text-[10px] mt-2 leading-relaxed font-semibold max-w-sm" style="color: #E2E8F0 !important;" x-text="landmarks[activeLandmark].details"></p>
                        </div>
                        <div class="bg-slate-950 border border-slate-800 p-3 text-center shrink-0" style="border-radius: 0.1rem;">
                            <span class="text-[9px] uppercase tracking-widest block font-bold leading-none mb-1" style="color: #94A3B8 !important;">Transit Time</span>
                            <span class="text-xl font-bold text-[#D6A84F]" x-text="landmarks[activeLandmark].time"></span>
                        </div>
                    </div>
                </div>

                <div class="flex flex-wrap gap-3">
                    <a href="{{ url('/neighbourhood') }}" class="btn-pill btn-outline-gold text-xs uppercase tracking-wider font-semibold min-h-[44px]">
                        Neighbourhood Directory Guide
                    </a>
                    <a href="{{ url('/airport-pickup-car-rental') }}" class="btn-pill bg-[#16A34A] text-white hover:bg-green-700 text-xs uppercase tracking-wider font-bold flex items-center gap-1.5 min-h-[44px]">
                        Request Airport Pick-up
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

@php
$storySteps = [
    [ 'title' => 'Exterior Approach', 'desc' => 'Secure dual-generator gated residency located on 7B Regina Coker Street / No. 8 Ogunlowo Street, Adeniyi Jones, Ikeja, Lagos.', 'image' => asset('pictures/master-bedroom.jpg') ],
    [ 'title' => 'Smart Entrance', 'desc' => 'Secure keyless locks and real-time visitor lobby check-ins backed by police proximity.', 'image' => asset('pictures/bedroom.jpg') ],
    [ 'title' => 'Luxury Lounge', 'desc' => 'Spacious open-plan living rooms outfitted with dynamic tournament slate snooker tables and PS5 entertainment setups.', 'image' => asset('pictures/living-room.jpg') ],
    [ 'title' => 'Gourmet Kitchen', 'desc' => 'Clean quartz islands, premium built-in ovens, and automatic washing machine / dryer systems.', 'image' => asset('pictures/kitchen.jpg') ],
    [ 'title' => 'En-Suite Bedrooms', 'desc' => 'Fully soundproof hotel-grade enclaves fitted with orthopedic mattress layouts.', 'image' => asset('pictures/master-bedroom.jpg') ],
    [ 'title' => 'Direct Booking Desk', 'desc' => 'Reserve your verified smart short-let stay dynamically in seconds.', 'image' => asset('pictures/living-room-2.jpg') ]
];
@endphp

<!-- Interactive Parallax Storytelling Segment -->
<section class="section-navy py-20 relative overflow-hidden" style="background-color: #080D2B;" x-data="{ activeStep: 0 }">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 scroll-animate">
        <div class="text-center mb-12">
            <span class="text-xs uppercase tracking-[0.2em] text-[#D6A84F] font-bold block mb-2" style="font-size: 0.75rem;">Your Immersive Journey</span>
            <h2 class="text-white" style="font-family: var(--font-heading); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 400;">Explore the Stay Experience Flow</h2>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            <!-- Left Side: Interactive Step Selector & Info bubbles -->
            <div class="lg:col-span-5 space-y-4">
                @foreach($storySteps as $index => $step)
                    <button type="button" @click="activeStep = {{ $index }}"
                            class="w-full text-left p-4 border text-xs font-bold transition-all duration-300 cursor-pointer flex items-center justify-between"
                            :class="activeStep === {{ $index }} ? 'border-[#D6A84F] bg-slate-900/80 text-white' : 'border-slate-800 text-slate-400 hover:border-slate-700'"
                            style="border-radius: 0.1rem;">
                        <div class="flex items-center gap-3">
                            <span class="text-[#D6A84F] font-serif">0{{ $index + 1 }}.</span>
                            <span class="uppercase tracking-wider">{{ $step['title'] }}</span>
                        </div>
                        <svg class="w-4 h-4 transition-transform duration-300" :class="activeStep === {{ $index }} ? 'translate-x-1 text-[#D6A84F]' : 'text-slate-600'" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg>
                    </button>
                @endforeach
            </div>

            <!-- Right Side: Parallax depth image container that shifts on select -->
            <div class="lg:col-span-7 relative h-[420px] bg-slate-900 border border-slate-800 p-2 shadow-2xl overflow-hidden" style="border-radius: 0.1rem;">
                @foreach($storySteps as $index => $step)
                    <div x-show="activeStep === {{ $index }}"
                         x-transition:enter="transition ease-out duration-700 transform"
                         x-transition:enter-start="opacity-0 scale-105 translate-y-4"
                         x-transition:enter-end="opacity-100 scale-100 translate-y-0"
                         x-transition:leave="transition ease-in duration-500 transform"
                         x-transition:leave-start="opacity-100 scale-100 translate-y-0"
                         x-transition:leave-end="opacity-0 scale-105 translate-y-4"
                         class="absolute inset-0 overflow-hidden flex flex-col justify-between">
                         
                        <!-- Image with subtle automatic zoom parallax zoom -->
                        <img src="{{ $step['image'] }}" alt="{{ $step['title'] }}" class="absolute inset-0 w-full h-full object-cover opacity-60 scale-110 hover:scale-100 transition-transform duration-[8000ms]">
                        
                        <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent"></div>
                        
                        <!-- Overlay Text Description -->
                        <div class="relative z-10 p-6 mt-auto text-left space-y-2">
                            <span class="text-[9px] uppercase tracking-[0.2em] text-[#D6A84F] font-bold block">Checkpoint 0{{ $index + 1 }}</span>
                            <h3 class="text-white font-serif" style="color: #d1d5dc !important; font-size: 1.25rem;">{{ $step['title'] }}</h3>
                            <p class="text-[11px] text-slate-300 leading-relaxed font-semibold max-w-lg">{{ $step['desc'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

<!-- Featured Residences Section -->

<section class="section-soft-blue 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-[#D6A84F] font-bold block mb-2" style="font-size: 0.75rem;">Our Premium Suites</span>
            <h2 style="font-family: var(--font-heading); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 400;">Residences & Apartments</h2>
            <p class="text-slate-500 dark:text-slate-400 max-w-md mx-auto pt-2" style="font-size: 0.8125rem;">Explore our curated selection of luxury en-suite apartments, offering smart amenities, snooker, and PS5 accessories.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @forelse($apartments as $apt)
                <!-- Individual Residence Card -->
                <div class="card-luxury flex flex-col justify-between" style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                    <div>
                        <!-- Thumbnail Frame -->
                        <div class="relative h-48 bg-slate-900 overflow-hidden group">
                            @php
                                $imgName = 'bedroom.jpg';
                                if (str_contains($apt->slug, '2-bedroom')) $imgName = 'bedroom-2.jpg';
                                if (str_contains($apt->slug, '3-bedroom')) $imgName = 'bedroom-3.jpg';
                                if (str_contains($apt->slug, '4-bedroom')) $imgName = 'bedroom-4.jpg';
                            @endphp
                            <img src="{{ asset('pictures/' . $imgName) }}" alt="{{ $apt->name }}" class="w-full h-full object-cover opacity-90 transition-transform duration-700 group-hover:scale-105">
                            <div class="absolute top-3 right-3 bg-[#080D2B]/95 text-white text-[10px] font-bold px-3 py-1 rounded-full border border-slate-700" style="font-size: 0.75rem;">
                                ₦{{ number_format($apt->base_price_nightly) }}/night
                            </div>
                        </div>

                        <!-- Card Body -->
                        <div class="p-5">
                            <h3 class="text-sm font-bold text-slate-900 dark:text-white mb-2" style="font-size: 0.875rem;">
                                {{ $apt->name }}
                            </h3>
                            <p class="text-slate-500 dark:text-slate-400 line-clamp-3 mb-4" style="font-size: 0.8125rem;">
                                {{ $apt->description }}
                            </p>
                        </div>
                    </div>

                    <!-- Card Footer Actions -->
                    <div class="px-5 pb-5">
                        <div class="flex items-center justify-between text-slate-400 border-t border-[#DDE6F3] dark:border-slate-800 pt-3 mb-4" style="font-size: 0.75rem; font-weight: 700;">
                            <span>{{ $apt->bedrooms_count }} Bed</span>
                            <span>{{ $apt->capacity_adults }} Guests</span>
                        </div>
                        <div class="flex flex-col space-y-2">
                            <div class="flex space-x-2">
                                <a href="{{ route('apartments.show', ['slug' => $apt->slug]) }}" class="btn-pill btn-outline-gold text-[10px] py-2 w-1/2 text-center" style="font-size: 0.75rem; padding: 0.5rem 0.75rem;">
                                    View Details
                                </a>
                                <a href="{{ url('/booking?type=' . $apt->slug) }}" class="btn-pill btn-primary text-[10px] py-2 w-1/2 text-center" style="font-size: 0.75rem; padding: 0.5rem 0.75rem;">
                                    Book Now
                                </a>
                            </div>
                            <a href="{{ url('/apartments/compare') }}" class="text-[10px] text-center text-[#2B3192] dark:text-cyan-400 font-bold hover:underline" style="font-size: 0.75rem;">
                                Compare vs Other Suites
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-span-4 text-center text-slate-500 py-12">No residences configured. Please check seeders.</div>
            @endforelse
        </div>
    </div>
</section>

<!-- Dynamic Why Stay Grid Section -->
<section class="section-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            @if($sections->has('features'))
                <span class="text-xs uppercase tracking-[0.2em] text-[#D6A84F] font-bold block mb-2" style="font-size: 0.75rem;">
                    {{ $sections->get('features')->subtitle }}
                </span>
                <h2 style="font-family: var(--font-heading); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 400;">
                    {{ $sections->get('features')->title }}
                </h2>
                <p class="text-slate-500 dark:text-slate-400 max-w-md mx-auto pt-2" style="font-size: 0.8125rem;">
                    {{ $sections->get('features')->content }}
                </p>
            @else
                <span class="text-xs uppercase tracking-[0.2em] text-[#D6A84F] font-bold block mb-2" style="font-size: 0.75rem;">
                    Designed for Comfort
                </span>
                <h2 style="font-family: var(--font-heading); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 400;">
                    Premium Amenities & Facilities
                </h2>
                <p class="text-slate-500 dark:text-slate-400 max-w-md mx-auto pt-2" style="font-size: 0.8125rem;">
                    Every suite features smart features and amenities configured to deliver a beautiful, modern stay.
                </p>
            @endif
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach($featureCards as $card)
                <!-- Dynamic Feature Card Item -->
                <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-6 flex flex-col justify-between" style="border-radius: 0.1rem; box-shadow: var(--shadow-line); transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);">
                    <div class="flex items-start space-x-4">
                        <div class="text-[#D6A84F] w-8 h-8 flex-shrink-0 pt-1">
                            @if($card->icon === 'zap')
                                <svg 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($card->icon === 'wifi')
                                <svg 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 0 1 7.778 0M12 20h.01m-7.08-7.071a10 10 0 0 1 14.14 0M1.343 5.857a16 16 0 0 1 21.314 0"/></svg>
                            @elseif($card->icon === 'key-round')
                                <svg 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 0 0 2-2v-6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2zm10-10V7a4 4 0 0 0-8 0v4h8z"/></svg>
                            @else
                                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4"/></svg>
                            @endif
                        </div>
                        <div>
                            <h4 class="text-sm font-bold text-slate-800 dark:text-white" style="font-size: 0.875rem;">
                                {{ $card->title }}
                            </h4>
                            <p class="text-slate-500 dark:text-slate-400 mt-2 leading-relaxed" style="font-size: 0.8125rem;">
                                {{ $card->description }}
                            </p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Premium Security & Smart Living Spotlight Segment -->
<section class="section-navy py-20 relative overflow-hidden" style="background-color: #080d2b; border-top: 1px solid rgba(214, 168, 79, 0.25); border-bottom: 1px solid rgba(214, 168, 79, 0.25);">
    <!-- Ambient gold background glows -->
    <div class="absolute -left-40 -top-40 w-96 h-96 bg-[#D6A84F]/5 rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute -right-40 -bottom-40 w-96 h-96 bg-[#1FADEA]/5 rounded-full blur-3xl pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 scroll-animate">
        <div class="text-center mb-16">
            <span class="text-xs uppercase tracking-[0.2em] text-[#D6A84F] font-bold block mb-2" style="font-size: 0.75rem;">Your Safe Haven</span>
            <h2 class="font-serif" style="font-family: var(--font-heading); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 400; color: #d1d5dc;">Dual-Tier Safety & Digital Trust Protocols</h2>
            <p class="text-slate-400 max-w-xl mx-auto pt-3" style="font-size: 0.8125rem;">We blend state-of-the-art physical protection with advanced cyber security layers to guarantee absolute tranquility during your stay.</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Left Card: Physical Security -->
            <div class="bg-slate-900/40 backdrop-blur-md border border-slate-800/80 p-8 rounded-2xl flex flex-col justify-between hover:border-[#D6A84F]/40 transition-all duration-500 group shadow-xl">
                <div>
                    <div class="flex items-center space-x-3 mb-6">
                        <span class="text-[#D6A84F] bg-[#D6A84F]/10 p-2.5 rounded-lg">
                            <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>
                        </span>
                        <h3 class="font-serif text-lg font-bold" style="color: #d1d5dc !important;">Physical Safekeeping</h3>
                    </div>
                    
                    <ul class="space-y-4">
                        <li class="flex items-start space-x-3">
                            <span class="text-emerald-500 mt-1 shrink-0">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            </span>
                            <div>
                                <h4 class="text-xs font-bold text-slate-200">Keyless Access Codes</h4>
                                <p class="text-[11px] text-slate-400 leading-relaxed mt-0.5">Custom digital door passcodes generated per guest stay, automatically deactivating on checkout.</p>
                            </div>
                        </li>
                        <li class="flex items-start space-x-3">
                            <span class="text-emerald-500 mt-1 shrink-0">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            </span>
                            <div>
                                <h4 class="text-xs font-bold text-slate-200">Common Area CCTV Perimeters</h4>
                                <p class="text-[11px] text-slate-400 leading-relaxed mt-0.5">Continuous outer gatehouse and perimeter monitoring. CCTV is strictly excluded from private suite interiors.</p>
                            </div>
                        </li>
                        <li class="flex items-start space-x-3">
                            <span class="text-emerald-500 mt-1 shrink-0">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            </span>
                            <div>
                                <h4 class="text-xs font-bold text-slate-200">Visitor Verification Protocol</h4>
                                <p class="text-[11px] text-slate-400 leading-relaxed mt-0.5">Rigorous pre-registration at the main security gates to guarantee harmony and noise-free residencies.</p>
                            </div>
                        </li>
                        <li class="flex items-start space-x-3">
                            <span class="text-emerald-500 mt-1 shrink-0">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            </span>
                            <div>
                                <h4 class="text-xs font-bold text-slate-200">3-Min Police Proximity</h4>
                                <p class="text-[11px] text-slate-400 leading-relaxed mt-0.5">Positioned minutes from local police stations to coordinate rapid response services in case of emergency.</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Right Card: Digital Security -->
            <div class="bg-slate-900/40 backdrop-blur-md border border-slate-800/80 p-8 rounded-2xl flex flex-col justify-between hover:border-[#1FADEA]/40 transition-all duration-500 group shadow-xl">
                <div>
                    <div class="flex items-center space-x-3 mb-6">
                        <span class="text-[#1FADEA] bg-[#1FADEA]/10 p-2.5 rounded-lg">
                            <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="M12 15v2m-6 4h12a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2zm10-10V7a4 4 0 0 0-8 0v4h8z"/>
                            </svg>
                        </span>
                        <h3 class="font-serif text-lg font-bold" style="color: #d1d5dc !important;">Digital Trust & Cyber Security</h3>
                    </div>
                    
                    <ul class="space-y-4">
                        <li class="flex items-start space-x-3">
                            <span class="text-emerald-500 mt-1 shrink-0">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            </span>
                            <div>
                                <h4 class="text-xs font-bold text-slate-200">End-to-End SSL Encryption</h4>
                                <p class="text-[11px] text-slate-400 leading-relaxed mt-0.5">All booking entries, communication forms, and data transfers are protected by 256-bit SSL encryption protocols.</p>
                            </div>
                        </li>
                        <li class="flex items-start space-x-3">
                            <span class="text-emerald-500 mt-1 shrink-0">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            </span>
                            <div>
                                <h4 class="text-xs font-bold text-slate-200">PCI-DSS Tokenized Checkout</h4>
                                <p class="text-[11px] text-slate-400 leading-relaxed mt-0.5">Secure payment processing with 3D-Secure verification. We never store raw card numbers on our servers.</p>
                            </div>
                        </li>
                        <li class="flex items-start space-x-3">
                            <span class="text-emerald-500 mt-1 shrink-0">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            </span>
                            <div>
                                <h4 class="text-xs font-bold text-slate-200">GDPR & NDPA Privacy Compliance</h4>
                                <p class="text-[11px] text-slate-400 leading-relaxed mt-0.5">Granular cookie choices and strict data processing agreements respecting your data footprint.</p>
                            </div>
                        </li>
                        <li class="flex items-start space-x-3">
                            <span class="text-emerald-500 mt-1 shrink-0">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                            </span>
                            <div>
                                <h4 class="text-xs font-bold text-slate-200">Automated Security Audits</h4>
                                <p class="text-[11px] text-slate-400 leading-relaxed mt-0.5">Daily vulnerability checks, rate-limiting API endpoints, and server log threat monitors.</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="mt-12 text-center">
            <a href="{{ url('/security-smart-living') }}" class="btn-pill btn-luxury text-xs uppercase tracking-wider font-semibold min-h-[44px]">
                Read Security & Smart Living Details
            </a>
        </div>
    </div>
</section>

<!-- 3D Lounge Hot-spots interactive simulation widget -->
<section class="section-navy py-20 relative overflow-hidden" style="background-color: #080D2B;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            
            <!-- Information Panel Left -->
            <div class="lg:col-span-5 text-left">
                <span class="text-xs uppercase tracking-[0.2em] text-[#D6A84F] font-bold block mb-2" style="font-size: 0.75rem;">Immersive Walkthrough</span>
                <h2 class="text-white" style="font-family: var(--font-heading); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 400;">
                    3D Virtual Lounge & Suite Preview
                </h2>
                <p class="text-slate-300 mt-4 leading-relaxed" style="font-size: clamp(0.8125rem, 1vw, 0.875rem);">
                    Explore the spacious configuration of our luxury suites. Interact with key hotspots below to learn about snooker zones, PS5 setups, and high-end marble kitchen spaces.
                </p>
                <div class="mt-6 flex flex-col space-y-3">
                    <div class="flex items-center space-x-3 text-slate-300">
                        <span class="w-2.5 h-2.5 bg-amber-500 rounded-full animate-ping"></span>
                        <span style="font-size: 0.8125rem;">Click hotspots on the 3D frame to interact.</span>
                    </div>
                    <div class="flex items-center space-x-3 text-slate-300">
                        <span class="text-[#D6A84F]"><svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg></span>
                        <span style="font-size: 0.8125rem;">Equipped with high-fidelity textures.</span>
                    </div>
                </div>
                <div class="mt-8">
                    <a href="{{ url('/virtual-tour') }}" class="btn-pill btn-luxury text-xs uppercase tracking-wider font-semibold min-h-[44px]">
                        Launch Full Screen 3D Viewer
                    </a>
                </div>
            </div>

            <!-- Three.js / CSS Interactive Hotspots Viewport Right -->
            <div class="lg:col-span-7 relative bg-slate-900 border border-slate-800 shadow-2xl p-1" style="border-radius: 0.1rem; box-shadow: var(--shadow-line);" x-data="{
                activeHotspot: null,
                ambience: 'day',
                showFloorPlan: false,
                hotspots: {
                    'hotspot_1': { 
                        label: 'Snooker Area', 
                        dayDesc: 'A professional-grade championship snooker table flooded with morning natural daylight.', 
                        nightDesc: 'Cozy twilight snooker table equipped with warm en-suite spotlights, perfect for evening play.',
                        x: '25%', y: '40%' 
                    },
                    'hotspot_2': { 
                        label: 'PS5 Console Zone', 
                        dayDesc: 'High-speed gaming hub with a 4K monitor, ideal for daytime downtime.', 
                        nightDesc: 'Midnight lounge gaming theater backed by accent neon strips and dual generator stable power.',
                        x: '65%', y: '30%' 
                    },
                    'hotspot_3': { 
                        label: 'Marble Dining Space', 
                        dayDesc: 'Brilliant en-suite kitchen counter with organic skylights.', 
                        nightDesc: 'Premium quartz dinner bar fitted with luxury hanging pendant task lights.',
                        x: '45%', y: '70%' 
                    }
                }
            }">
                <div class="relative w-full aspect-video overflow-hidden">
                    <!-- Interactive Lounge Background Image (Cross-Fade Day/Night) -->
                    <img src="{{ asset('pictures/living-room.jpg') }}" alt="3D Lounge Day" class="w-full h-full object-cover select-none pointer-events-none transition-all duration-700 absolute inset-0"
                         :class="ambience === 'day' ? 'opacity-80 scale-105' : 'opacity-0 scale-100'">
                         
                    <img src="{{ asset('pictures/living-room-2.jpg') }}" alt="3D Lounge Night" class="w-full h-full object-cover select-none pointer-events-none transition-all duration-700 absolute inset-0"
                         :class="ambience === 'night' ? 'opacity-85 scale-105' : 'opacity-0 scale-100'">
                    
                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none"></div>

                    <!-- Interactive Vector Floor Plan Overlay (Slides in from left) -->
                    <div x-show="showFloorPlan" 
                         x-transition:enter="transition ease-out duration-500 transform"
                         x-transition:enter-start="-translate-x-full opacity-0"
                         x-transition:enter-end="translate-x-0 opacity-100"
                         x-transition:leave="transition ease-in duration-400 transform"
                         x-transition:leave-start="translate-x-0 opacity-100"
                         x-transition:leave-end="-translate-x-full opacity-0"
                         class="absolute inset-0 bg-slate-950/90 z-20 p-6 flex flex-col justify-between"
                         style="display: none;">
                        
                        <div class="flex items-center justify-between border-b border-slate-800 pb-2">
                            <span class="text-[9px] uppercase tracking-widest text-[#D6A84F] font-bold">Suite Blueprint Map</span>
                            <button type="button" @click="showFloorPlan = false" class="text-xs text-white hover:text-red-500 font-bold focus:outline-none">Close X</button>
                        </div>
                        
                        <div class="flex-grow flex items-center justify-center p-2">
                            <svg class="w-auto h-full max-h-48" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <rect x="10" y="10" width="380" height="280" rx="4" stroke="#D6A84F" stroke-width="1.5" fill="none"/>
                                <!-- Living Room Area -->
                                <g @click="showFloorPlan = false; activeHotspot = 'hotspot_1'" class="cursor-pointer group">
                                    <rect x="25" y="25" width="220" height="110" class="fill-[#D6A84F]/5 group-hover:fill-[#D6A84F]/20 stroke-slate-800 transition-all"/>
                                    <text x="35" y="45" class="text-[9px] font-bold fill-[#D6A84F]">LOUNGE (SNOOKER / PS5)</text>
                                </g>
                                <!-- Kitchen Counter -->
                                <g @click="showFloorPlan = false; activeHotspot = 'hotspot_3'" class="cursor-pointer group">
                                    <rect x="260" y="25" width="115" height="110" class="fill-slate-800/10 group-hover:fill-slate-800/35 stroke-slate-800 transition-all"/>
                                    <text x="270" y="45" class="text-[9px] font-bold fill-slate-400">KITCHEN</text>
                                </g>
                                <!-- Bedrooms -->
                                <g @click="showFloorPlan = false; activeHotspot = 'hotspot_2'" class="cursor-pointer group">
                                    <rect x="25" y="150" width="350" height="120" class="fill-slate-800/10 group-hover:fill-slate-800/35 stroke-slate-800 transition-all"/>
                                    <text x="35" y="170" class="text-[9px] font-bold fill-slate-400">BEDROOM SUITES</text>
                                </g>
                            </svg>
                        </div>
                        
                        <span class="text-[8px] uppercase tracking-widest text-slate-500 font-bold text-center block">Click any zone to close blueprint and zoom in</span>
                    </div>

                    <!-- Hotspots Points Overlays -->
                    <template x-for="(hot, key) in hotspots" :key="key">
                        <div class="absolute group" :style="{ left: hot.x, top: hot.y }">
                            <button @click="activeHotspot = activeHotspot === key ? null : key"
                                    class="w-6 h-6 bg-[#D6A84F] hover:bg-[#1FADEA] text-white flex items-center justify-center rounded-full shadow-lg border border-white focus:outline-none transition-all duration-300 transform hover:scale-125 animate-pulse"
                                    aria-label="View hotspot detail">
                                <span class="text-[10px] font-bold">+</span>
                            </button>
                            <!-- Tooltip Modal popup absolute -->
                            <div x-show="activeHotspot === key"
                                 class="absolute z-30 bottom-8 left-1/2 -translate-x-1/2 w-52 bg-[#080D2B]/95 border border-[#DDE6F3] p-3 text-white rounded shadow-2xl transition-all duration-300 text-left"
                                 style="font-size: 0.75rem; border-radius: 0.1rem;"
                                 @click.away="if (activeHotspot === key) activeHotspot = null">
                                <h4 class="font-bold text-[#D6A84F] uppercase tracking-wider mb-1" x-text="hot.label" style="font-size: 0.75rem;"></h4>
                                <p class="text-[10px] text-slate-300 leading-relaxed" x-text="ambience === 'day' ? hot.dayDesc : hot.nightDesc" style="font-size: 0.6875rem;"></p>
                            </div>
                        </div>
                    </template>

                    <!-- Overlay Mode Controls (Day/Night & Blueprint buttons) inside the Viewport -->
                    <div class="absolute top-4 left-4 z-10 flex gap-2">
                        <!-- Ambiance switcher group -->
                        <div class="inline-flex rounded-full border border-slate-800 p-0.5 bg-slate-950/80 backdrop-blur-md">
                            <button type="button" @click="ambience = 'day'" 
                                    class="rounded-full p-1.5 transition-colors focus:outline-none cursor-pointer"
                                    :class="ambience === 'day' ? 'bg-[#D6A84F] text-slate-950' : 'text-slate-400 hover:text-slate-200'"
                                    aria-label="Toggle Daytime">
                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"/></svg>
                            </button>
                            <button type="button" @click="ambience = 'night'" 
                                    class="rounded-full p-1.5 transition-colors focus:outline-none cursor-pointer"
                                    :class="ambience === 'night' ? 'bg-[#2B3192] text-white' : 'text-slate-400 hover:text-slate-200'"
                                    aria-label="Toggle Nighttime">
                                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24"><path d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"/></svg>
                            </button>
                        </div>

                        <!-- Floor plan trigger -->
                        <button type="button" @click="showFloorPlan = !showFloorPlan"
                                class="bg-slate-950/80 backdrop-blur-md hover:bg-slate-900 border border-slate-800 text-[8px] font-bold uppercase tracking-wider text-slate-300 px-3 py-1.5 rounded-full transition-all focus:outline-none flex items-center gap-1 cursor-pointer">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 20.247 12 18l3 2.247m-6-15 6-4.5 6 4.5m-12 15V5.75c0-.621.504-1.125 1.125-1.125h9.75c.621 0 1.125.504 1.125 1.125v14.497M3.75 18h16.5M4.5 9h15M4.5 13.5h15"/></svg>
                            <span x-text="showFloorPlan ? 'Hide Floor Plan' : 'View Floor Plan'"></span>
                        </button>
                    </div>

                    <!-- WebGL Interactive Overlay Label -->
                    <div class="absolute bottom-4 left-4 bg-slate-950/80 px-3.5 py-1.5 border border-slate-800 text-[9px] uppercase tracking-wider font-bold text-slate-300" style="font-size: 0.6875rem;">
                        Interactive WebGL Hotspot Viewport
                    </div>
                </div>
            </div>

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

<!-- Dynamic Guest Reviews feed -->
<section class="section-soft-blue py-20">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="text-xs uppercase tracking-[0.2em] text-[#D6A84F] font-bold block mb-2" style="font-size: 0.75rem;">Verified Stay Feedbacks</span>
            <h2 style="font-family: var(--font-heading); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 400;">What Our Guests Say</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            @foreach($reviews as $review)
                <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-6 flex flex-col justify-between" style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                    <div>
                        <!-- Rating Stars -->
                        <div class="flex items-center space-x-1 text-amber-400 mb-3.5">
                            @for($i = 0; $i < $review->overall_rating; $i++)
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                            @endfor
                        </div>
                        <p class="text-slate-600 dark:text-slate-300 italic mb-4 leading-relaxed" style="font-size: 0.8125rem;">
                            "{{ $review->review_comment }}"
                        </p>
                    </div>
                    <div class="font-bold text-slate-800 dark:text-white border-t border-[#DDE6F3] dark:border-slate-800 pt-3" style="font-size: 0.75rem;">
                        — {{ $review->guest_name }}
                    </div>
                </div>
            @endforeach
        </div>
        <div class="text-center mt-10">
            <a href="{{ url('/reviews') }}" class="text-xs font-bold text-[#2B3192] dark:text-cyan-400 hover:underline uppercase tracking-wider" style="font-size: 0.75rem;">
                Browse All Customer Feedbacks
            </a>
        </div>
    </div>
</section>

<!-- Dynamic FAQ Accordion Section -->
<section class="section-white py-20 border-t border-[#DDE6F3] dark:border-slate-800">
    <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-[#D6A84F] font-bold block mb-2" style="font-size: 0.75rem;">FAQ</span>
            <h2 style="font-family: var(--font-heading); font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 400;">Common Stay Queries</h2>
        </div>

        <div class="space-y-4" x-data="{ activeAccordion: null }">
            @foreach($faqs as $index => $faq)
                <div class="border border-[#DDE6F3] dark:border-slate-800 overflow-hidden" style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                    <button @click="activeAccordion = activeAccordion === {{ $index }} ? null : {{ $index }}"
                            class="w-full flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-900 text-left font-bold text-slate-800 dark:text-white transition-colors duration-300 focus:outline-none"
                            style="font-size: 0.8125rem;">
                        <span>{{ $faq->question }}</span>
                        <svg class="w-4 h-4 transition-transform duration-200" :class="{'rotate-180': activeAccordion === {{ $index }}}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                        </svg>
                    </button>
                    <div x-show="activeAccordion === {{ $index }}" 
                         x-transition:enter="transition ease-out duration-200"
                         class="p-4 bg-white dark:bg-slate-950 border-t border-[#DDE6F3] dark:border-slate-800">
                        <p class="text-slate-500 dark:text-slate-400 leading-relaxed" style="font-size: 0.8125rem;">
                            {{ $faq->answer }}
                        </p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- SEO & GEO Entity Description Block (AI-Crawlable) -->
<section class="section-soft-blue py-12 border-t border-[#DDE6F3] dark:border-slate-800">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h4 class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-4" style="font-size: 0.75rem;">About Kevron Suites & Apartments</h4>
        <p class="leading-relaxed max-w-3xl mx-auto text-slate-500 dark:text-slate-400" style="font-size: 0.8125rem;">
            Kevron Suites and Apartments is a luxury serviced-apartment brand in Lagos, Nigeria. Our first location is in Adeniyi Jones, Ikeja, at 7B Regina Coker Street and No. 8 Ogunlowo Street, Lagos 100271. The property offers 1, 2, 3 and 4 bedroom serviced apartments with 24-hour power supply, high-speed Wi-Fi, modern kitchens, air conditioning, washing machine and dryer, private balconies, smart locks, CCTV, smart intercoms, visitor management, snooker, PS5, airport pickup and car-rental support on request.
        </p>
    </div>
</section>

<!-- JSON-LD Structured Data Schema for LodgingBusiness -->
<script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@type": "LodgingBusiness",
  "name": "Kevron Suites and Apartments",
  "image": "{{ asset('pictures/master-bedroom.jpg') }}",
  "@id": "https://kevronapartments.com",
  "url": "https://kevronapartments.com",
  "telephone": "{{ str_replace(' ', '', \App\Models\SiteSetting::getVal('contact_phone', '+234 813 163 2926')) }}",
  "priceRange": "₦150,000 - ₦300,000",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "7B Regina Coker Street, Adeniyi Jones, Ikeja / No. 8 Ogunlowo Street",
    "addressLocality": "Ikeja, Lagos",
    "postalCode": "100271",
    "addressCountry": "NG"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": 6.601234,
    "longitude": 3.351234
  },
  "amenityFeature": [
    {
      "@type": "LocationFeatureSpecification",
      "name": "24-Hour Power Supply",
      "value": true
    },
    {
      "@type": "LocationFeatureSpecification",
      "name": "High-Speed Wi-Fi",
      "value": true
    },
    {
      "@type": "LocationFeatureSpecification",
      "name": "Smart Locks",
      "value": true
    },
    {
      "@type": "LocationFeatureSpecification",
      "name": "PlayStation 5 Console",
      "value": true
    },
    {
      "@type": "LocationFeatureSpecification",
      "name": "Professional Snooker Table",
      "value": true
    }
  ]
}
</script>

<!-- FAQPage Schema for Search Crawlers -->
<script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    @foreach($faqs as $index => $faq)
    {
      "@type": "Question",
      "name": "{{ $faq->question }}",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "{{ $faq->answer }}"
      }
    }{{ !$loop->last ? ',' : '' }}
    @endforeach
  ]
}
</script>

@if($schema)
<script type="application/ld+json">
{!! json_encode($schema->schema_json, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) !!}
</script>
@endif

@endsection

@push('scripts')
<script>
    async function updateBookedDates(apartmentTypeId, checkInPicker, checkOutPicker, alpineContext, checkInKey, checkOutKey) {
        if (!apartmentTypeId) return;
        try {
            const url = "{{ route('api.apartments.booked-dates', ['id' => '__ID__']) }}".replace('__ID__', apartmentTypeId);
            const response = await fetch(url);
            const data = await response.json();
            const bookedDates = data.booked_dates || [];
            
            if (checkInPicker) {
                checkInPicker.set('disable', bookedDates);
            }
            if (checkOutPicker) {
                checkOutPicker.set('disable', bookedDates);
            }

            // If currently selected check-in date is booked, clear it
            if (alpineContext && checkInKey && alpineContext[checkInKey]) {
                if (bookedDates.includes(alpineContext[checkInKey])) {
                    alpineContext[checkInKey] = '';
                    if (checkInPicker) checkInPicker.clear();
                }
            }
            // If currently selected check-out date is booked, clear it
            if (alpineContext && checkOutKey && alpineContext[checkOutKey]) {
                if (bookedDates.includes(alpineContext[checkOutKey])) {
                    alpineContext[checkOutKey] = '';
                    if (checkOutPicker) checkOutPicker.clear();
                }
            }
        } catch (e) {
            console.error('Failed to fetch booked dates:', e);
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        // Initialize Desktop Pickers
        const checkInEl = document.getElementById('check_in');
        const checkOutEl = document.getElementById('check_out');
        
        if (checkInEl && checkOutEl) {
            window.checkInPicker = flatpickr(checkInEl, {
                dateFormat: "Y-m-d",
                minDate: "today",
                theme: "dark",
                onChange: function(selectedDates, dateStr, instance) {
                    instance.element.dispatchEvent(new Event('input', { bubbles: true }));
                    instance.element.dispatchEvent(new Event('change', { bubbles: true }));
                    
                    if (window.checkOutPicker) {
                        if (selectedDates.length > 0) {
                            const minOut = new Date(selectedDates[0]);
                            minOut.setDate(minOut.getDate() + 1);
                            window.checkOutPicker.set('minDate', minOut);
                        } else {
                            window.checkOutPicker.set('minDate', 'today');
                        }
                    }
                }
            });

            window.checkOutPicker = flatpickr(checkOutEl, {
                dateFormat: "Y-m-d",
                minDate: "today",
                theme: "dark",
                onChange: function(selectedDates, dateStr, instance) {
                    instance.element.dispatchEvent(new Event('input', { bubbles: true }));
                    instance.element.dispatchEvent(new Event('change', { bubbles: true }));
                }
            });
        }

        // Initialize Mobile Pickers
        const checkInMobileEl = document.getElementById('check_in_mobile');
        const checkOutMobileEl = document.getElementById('check_out_mobile');
        
        if (checkInMobileEl && checkOutMobileEl) {
            window.checkInMobilePicker = flatpickr(checkInMobileEl, {
                dateFormat: "Y-m-d",
                minDate: "today",
                theme: "dark",
                onChange: function(selectedDates, dateStr, instance) {
                    instance.element.dispatchEvent(new Event('input', { bubbles: true }));
                    instance.element.dispatchEvent(new Event('change', { bubbles: true }));
                    
                    if (window.checkOutMobilePicker) {
                        if (selectedDates.length > 0) {
                            const minOut = new Date(selectedDates[0]);
                            minOut.setDate(minOut.getDate() + 1);
                            window.checkOutMobilePicker.set('minDate', minOut);
                        } else {
                            window.checkOutMobilePicker.set('minDate', 'today');
                        }
                    }
                }
            });

            window.checkOutMobilePicker = flatpickr(checkOutMobileEl, {
                dateFormat: "Y-m-d",
                minDate: "today",
                theme: "dark",
                onChange: function(selectedDates, dateStr, instance) {
                    instance.element.dispatchEvent(new Event('input', { bubbles: true }));
                    instance.element.dispatchEvent(new Event('change', { bubbles: true }));
                }
            });
        }
    });

    // Register viewport scroll entrance observer for home sections
    document.addEventListener('DOMContentLoaded', () => {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('translate-y-0', 'opacity-100');
                    entry.target.classList.remove('translate-y-8', 'opacity-0');
                }
            });
        }, { threshold: 0.05 });

        document.querySelectorAll('.scroll-animate').forEach(el => {
            el.classList.add('transition-all', 'duration-[850ms]', 'ease-out', 'transform', 'translate-y-8', 'opacity-0');
            observer.observe(el);
        });
    });
</script>
@endpush