@extends('layouts.app')

@section('title', $seo->meta_title ?? '3D Virtual Tour of Luxury Serviced Apartments in Ikeja')
@section('meta_description', $seo->meta_description ?? 'Explore Kevron Suites and Apartments in Adeniyi Jones, Ikeja through a 3D/360 virtual tour. Preview luxury apartment interiors, bedrooms, kitchen, balconies, PS5, snooker, smart security and guest amenities before booking.')

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

@section('content')
<!-- Hero Section -->
<section class="relative min-h-[55vh] flex items-center justify-center bg-[#080D2B] text-white overflow-hidden py-16">
    <div class="absolute inset-0 bg-cover bg-center opacity-25" style="background-image: url('{{ asset('pictures/living-room.jpg') }}');"></div>
    <div class="absolute inset-0 bg-gradient-to-b from-[#080D2B]/95 via-[#080D2B]/60 to-[#080D2B]"></div>

    <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6 pt-10">
        <span class="text-xs uppercase tracking-[0.25em] text-[#D6A84F] font-bold block">Exclusive Walkthrough</span>
        <h1 class="text-white font-serif mb-2 leading-tight" style="color: #d1d5dc !important;">Explore Kevron Suites and Apartments in 3D</h1>
        <p class="text-xs sm:text-sm text-slate-300 max-w-3xl mx-auto leading-relaxed">
            Take a virtual look inside Kevron Suites and Apartments, Adeniyi Jones, Ikeja. Explore the apartment interiors, bedrooms, kitchen, balconies, seat-out area, PS5, snooker, smart security and guest comfort features before booking your stay.
        </p>

        <!-- Hero CTAs -->
        <div class="flex flex-wrap justify-center gap-4 pt-2">
            <a href="#tour-viewer-section" class="btn-pill btn-primary bg-[#D6A84F] hover:bg-[#b88c3a] text-slate-950 hover:text-white font-bold">
                Start Virtual Tour
            </a>
            <a href="#apartment-choices" class="btn-pill border border-[#D6A84F] text-white hover:bg-white hover:text-slate-900 font-bold">
                View Apartments
            </a>
            <a href="{{ url('/booking') }}" class="btn-pill btn-luxury text-white hover:opacity-90 font-bold">
                Book Stay Now
            </a>
        </div>

        <!-- Trust Chips -->
        <div class="pt-6 border-t border-slate-700/60 max-w-2xl mx-auto">
            <div class="flex flex-wrap justify-center gap-x-6 gap-y-3 text-xs font-semibold text-slate-300">
                <span class="flex items-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-[#D6A84F]"></span>
                    1–4 Bedroom Residences
                </span>
                <span class="flex items-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span>
                    24-Hour Power Assurance
                </span>
                <span class="flex items-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span>
                    High-Speed Wi-Fi
                </span>
                <span class="flex items-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-[#16A34A]"></span>
                    Smart Intercom Security
                </span>
                <span class="flex items-center gap-1.5">
                    <span class="w-1.5 h-1.5 rounded-full bg-[#16A34A]"></span>
                    Airport Pickup Available
                </span>
            </div>
        </div>
    </div>
</section>

<!-- Interactive Virtual Tour Engine Section -->
<section id="tour-viewer-section" class="py-16 section-soft-blue border-b border-slate-100 dark:border-slate-900" 
         x-data="virtualTourEngine()">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="text-center mb-10 scroll-animate">
            <span class="text-xs uppercase tracking-[0.25em] text-[#2B3192] font-bold block mb-2">Interactive Sanctuary Viewer</span>
            <h2>Take a Visual Walkthrough</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-md mx-auto pt-2">
                Decide your tour pacing. Toggle between Guided cinematic play, self-guided click exploration, or reduced animation settings.
            </p>
        </div>

        <!-- Mode Selector Panel & Navigation -->
        <div class="flex flex-wrap items-center justify-between gap-4 backdrop-blur-md bg-white/80 dark:bg-slate-900/80 border border-slate-200 dark:border-slate-800/60 p-4 mb-6 shadow-lg rounded-[4px] scroll-animate" style="box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 20px;">
            <div class="flex flex-wrap items-center gap-2">
                <button type="button" @click="setMode('guided')" class="btn-pill text-xs font-bold px-4 py-2"
                        :class="mode === 'guided' ? 'btn-primary' : 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200'">
                    Guided Tour
                </button>
                <button type="button" @click="setMode('self')" class="btn-pill text-xs font-bold px-4 py-2"
                        :class="mode === 'self' ? 'btn-primary' : 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200'">
                    Self-Guided Mode
                </button>
                <button type="button" @click="setMode('apartment')" class="btn-pill text-xs font-bold px-4 py-2"
                        :class="mode === 'apartment' ? 'btn-primary' : 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200'">
                    Apartments Only
                </button>
                <button type="button" @click="setMode('facilities')" class="btn-pill text-xs font-bold px-4 py-2"
                        :class="mode === 'facilities' ? 'btn-primary' : 'bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200'">
                    Facilities Tour
                </button>
            </div>

            <div class="flex flex-wrap items-center gap-6">
                <!-- Day/Night Ambience Control -->
                <div class="flex items-center gap-2 text-xs font-bold text-slate-600 dark:text-slate-400">
                    <span>Ambience</span>
                    <div class="inline-flex rounded-full border border-slate-200 dark:border-slate-800 p-0.5 bg-slate-50 dark:bg-slate-950">
                        <button type="button" @click="setAmbience('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-600 dark:hover:text-slate-300'"
                                aria-label="Toggle Daytime">
                            <svg class="w-3.5 h-3.5" 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="setAmbience('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-600 dark:hover:text-slate-300'"
                                aria-label="Toggle Nighttime">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" 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>
                        </button>
                    </div>
                </div>

                <!-- Accessibility / Reduced Motion Control -->
                <div class="flex items-center gap-2 text-xs font-bold text-slate-600 dark:text-slate-400">
                    <span>Reduced Motion</span>
                    <button type="button" @click="toggleReducedMotion()" 
                            class="relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none"
                            :class="reducedMotion ? 'bg-[#16A34A]' : 'bg-slate-200 dark:bg-slate-700'">
                        <span class="pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                              :class="reducedMotion ? 'translate-x-5' : 'translate-x-0'"></span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Main Media Stage Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch scroll-animate">
            
            <!-- Dynamic 3D / Video Stage Screen -->
            <div class="lg:col-span-8 bg-slate-950 border border-slate-200 dark:border-slate-800 relative overflow-hidden flex flex-col justify-between shadow-sm min-h-[480px] rounded-[4px]" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
                
                <!-- Loading Skeleton -->
                <div x-show="loading" class="absolute inset-0 bg-slate-900/95 z-30 flex flex-col items-center justify-center space-y-4">
                    <div class="relative w-12 h-12">
                        <div class="absolute inset-0 rounded-full border-4 border-slate-800"></div>
                        <div class="absolute inset-0 rounded-full border-4 border-[#D6A84F] border-t-transparent animate-spin"></div>
                    </div>
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest animate-pulse">Initializing Tour Space...</span>
                </div>

                <!-- Guided Tour Mode Stage (Vimeo Landscape Video) -->
                <div x-show="mode === 'guided'" class="w-full h-full flex-grow relative bg-black">
                    <iframe src="https://player.vimeo.com/video/1186235401?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&app_id=58479" 
                            frameborder="0" allow="autoplay; fullscreen; picture-in-picture" 
                            class="w-full h-full absolute inset-0 object-cover min-h-[420px]" title="Kevron Guided Tour"></iframe>
                </div>

                <!-- Self-Guided Mode Stage (Panoramic Switcher & Hotspots Overlays with 3D Parallax Look-Around) -->
                <div x-show="mode === 'self' || mode === 'apartment' || mode === 'facilities'" 
                     @mousemove="handleStageMouseMove($event)"
                     @mouseleave="handleStageMouseLeave()"
                     class="w-full h-full flex-grow relative bg-slate-950 overflow-hidden min-h-[420px] select-none cursor-grab active:cursor-grabbing">
                    
                    <!-- Dynamic Scene Background with lens exposure flash transition & mouse-linked 3D parallax -->
                    <img :src="activeSceneImage" :alt="activeScene.title" 
                         class="w-full h-full object-cover transition-all absolute inset-0 filter pointer-events-none"
                         :style="panStyle"
                         :class="transitioning ? 'scale-[1.18] brightness-150 blur-sm duration-[450ms] ease-in-out' : 'scale-110 brightness-[0.88] blur-none duration-[700ms] ease-out'">

                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/30 pointer-events-none"></div>

                    <!-- 3D Parallax Separated Pulsing Hotspots -->
                    <template x-for="(hotspot, key) in activeScene.hotspots" :key="key">
                        <div class="absolute group/hotspot"
                             :style="getHotspotStyle(hotspot)"
                             style="width: 36px; height: 36px; margin-left: -18px; margin-top: -18px; z-index: 10;">
                            
                            <!-- Outer pulsing ping ring -->
                            <span class="absolute inset-0 rounded-full bg-[#D6A84F]/30 animate-ping opacity-75"></span>
                            
                            <!-- Middle glow ring -->
                            <span class="absolute inset-1 rounded-full bg-[#D6A84F]/20 border border-[#D6A84F]/40 shadow-[0_0_15px_#D6A84F] scale-100 group-hover/hotspot:scale-110 transition-all duration-300"></span>

                            <!-- Center trigger button -->
                            <button type="button" 
                                    @click="triggerHotspot(hotspot)"
                                    class="absolute inset-2 rounded-full bg-slate-950/90 border border-[#D6A84F] text-[#D6A84F] hover:bg-[#D6A84F] hover:text-slate-950 flex items-center justify-center shadow-2xl transition-all duration-300 focus:outline-none cursor-pointer">
                                
                                <template x-if="hotspot.icon === 'wifi'">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856a9.75 9.75 0 0 1 13.788 0M1.924 8.674a14.25 14.25 0 0 1 20.152 0M12.53 18.22a1.5 1.5 0 1 1-1.06-1.06 1.5 1.5 0 0 1 1.06 1.06Z"/></svg>
                                </template>
                                <template x-if="hotspot.icon === 'security'">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/></svg>
                                </template>
                                <template x-if="hotspot.icon === 'tv'">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h14.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"/></svg>
                                </template>
                                <template x-if="hotspot.icon === 'general'">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 21l5.438-2.527L17 21l-.813-5.096c.21-.3.313-.673.313-1.079 0-1.105-.895-2-2-2H9.5c-1.105 0-2 .895-2 2 0 .406.103.779.313 1.079z"/></svg>
                                </template>
                            </button>

                            <!-- Tooltip Text Tag Hover Overlay -->
                            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-slate-950/90 text-[#D6A84F] text-[9px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-[4px] border border-[#D6A84F]/30 opacity-0 pointer-events-none group-hover/hotspot:opacity-100 transition-all duration-300 scale-95 group-hover/hotspot:scale-100 whitespace-nowrap shadow-2xl">
                                <span x-text="hotspot.label"></span>
                            </div>
                        </div>
                    </template>

                    <!-- Dynamic Active Hotspot Info Overlay Modal -->
                    <div x-show="activeHotspot" 
                         x-transition:enter="transition ease-out duration-300 transform"
                         x-transition:enter-start="opacity-0 translate-y-4"
                         x-transition:enter-end="opacity-100 translate-y-0"
                         x-transition:leave="transition ease-in duration-200 transform"
                         x-transition:leave-start="opacity-100 translate-y-0"
                         x-transition:leave-end="opacity-0 translate-y-4"
                         class="absolute bottom-20 left-6 right-6 backdrop-blur-md bg-slate-950/90 border border-[#D6A84F]/40 p-5 z-20 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 text-xs font-semibold rounded-[4px] shadow-[0_15px_40px_rgba(0,0,0,0.4)]"
                         style="display: none;">
                        <div class="space-y-1">
                            <span class="text-[9px] uppercase tracking-widest text-[#D6A84F] font-bold block" x-text="activeHotspot.label"></span>
                            <p class="text-slate-300 font-medium leading-relaxed max-w-xl" x-text="activeHotspot.description"></p>
                        </div>
                        <div class="flex gap-2 shrink-0">
                            <button type="button" @click="activeHotspot = null" class="btn-pill border border-slate-700 text-white px-4 py-2 hover:bg-slate-800 text-[10px]">
                                Close
                            </button>
                            <a :href="'{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hello%20Kevron%20Apartments%2C%20I%27m%20inquiring%20about%20your%20' + encodeURIComponent(activeHotspot.label) + '%20specification.'"
                               target="_blank" rel="noopener noreferrer" class="btn-pill bg-[#16A34A] text-white px-4 py-2 hover:bg-green-700 flex items-center gap-1.5 text-[10px]">
                                Ask Concierge
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Floating Glassmorphism HUD Controller dock inside the stage -->
                <div class="absolute bottom-4 left-4 right-4 z-20 backdrop-blur-md bg-slate-950/70 border border-white/10 p-4 flex flex-wrap justify-between items-center gap-3 shadow-[0_10px_30px_rgba(0,0,0,0.3)] rounded-[4px]">
                    <div>
                        <span class="text-[9px] text-slate-400 block uppercase tracking-widest font-semibold leading-none mb-1">Active Space View</span>
                        <span class="text-xs font-bold text-[#D6A84F] uppercase tracking-wider block leading-none" x-text="activeScene.title"></span>
                    </div>

                    <div class="flex items-center gap-2">
                        <a href="{{ url('/booking') }}" class="btn-pill btn-primary text-[10px] py-2 px-5 font-bold uppercase tracking-wider glow-blue">
                            Book This Apartment
                        </a>
                        <button type="button" @click="toggleFullscreen()" class="btn-pill border border-white/20 text-white hover:bg-white/10 text-[10px] py-2 px-4 font-bold uppercase tracking-wider transition-colors">
                            Toggle Fullscreen
                        </button>
                    </div>
                </div>
            </div>

            <!-- Side Interactive Floor Plan Map Selector Column -->
            <div class="lg:col-span-4 flex flex-col gap-6">
                
                <!-- Floor Plan Panel Card -->
                <div class="card-luxury p-6 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm flex flex-col justify-between rounded-[4px]" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
                    <div>
                        <span class="text-[9px] uppercase tracking-widest text-[#2B3192] font-bold block mb-1">Interactive Map Blueprint</span>
                        <h3 class="text-xs font-bold text-slate-800 dark:text-white uppercase tracking-wider mb-2">Interactive Floor Plan</h3>
                        <p class="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed font-medium mb-4">
                            Click any target structural zone on the en-suite floor plan below to teleport the walkthrough media viewer straight into that room.
                        </p>
                    </div>

                    <!-- Floor Plan blueprint container with glowing active radar sweep -->
                    <div class="relative bg-slate-50 dark:bg-slate-950 p-4 border border-slate-100 dark:border-slate-800 flex items-center justify-center rounded-[4px]" style="min-height: 240px;">
                        <svg class="w-full h-auto max-w-[280px]" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <!-- Background Map Outlines -->
                            <rect x="10" y="10" width="380" height="280" rx="4" stroke="currentColor" class="text-slate-300 dark:text-slate-800" stroke-width="2"/>
                            
                            <!-- Radar pulse radial circle -->
                            <circle cx="200" cy="150" r="100" stroke="#D6A84F" stroke-width="1" class="opacity-15 animate-radar-pulse" fill="none" style="transform-origin: center;"/>

                            <!-- Master Suite Area -->
                            <g class="transition-all duration-500">
                                <rect x="20" y="20" width="160" height="110" 
                                      :stroke="activeSceneKey === 'bedroom' ? '#D6A84F' : 'currentColor'" 
                                      :stroke-width="activeSceneKey === 'bedroom' ? '2.5' : '1.5'"
                                      :class="activeSceneKey === 'bedroom' ? 'text-[#D6A84F]' : 'text-slate-200 dark:text-slate-800'"
                                      class="transition-colors duration-300" fill="none"/>
                                <text x="30" y="40" 
                                      :fill="activeSceneKey === 'bedroom' ? '#D6A84F' : 'currentColor'"
                                      class="text-[9px] font-bold text-slate-400 dark:text-slate-600 transition-colors duration-300">MASTER SUITE</text>
                                <rect @click="swapScene('bedroom')" x="25" y="55" width="150" height="70" 
                                      :class="activeSceneKey === 'bedroom' ? 'fill-[#D6A84F]/15' : 'fill-[#2B3192]/5 hover:fill-[#2B3192]/15'"
                                      class="cursor-pointer transition-all duration-300"/>
                            </g>
                            
                            <!-- Gourmet Kitchen Space -->
                            <g class="transition-all duration-500">
                                <rect x="190" y="20" width="190" height="110" 
                                      :stroke="activeSceneKey === 'kitchen' ? '#D6A84F' : 'currentColor'" 
                                      :stroke-width="activeSceneKey === 'kitchen' ? '2.5' : '1.5'"
                                      :class="activeSceneKey === 'kitchen' ? 'text-[#D6A84F]' : 'text-slate-200 dark:text-slate-800'"
                                      class="transition-colors duration-300" fill="none"/>
                                <text x="200" y="40" 
                                      :fill="activeSceneKey === 'kitchen' ? '#D6A84F' : 'currentColor'"
                                      class="text-[9px] font-bold text-slate-400 dark:text-slate-600 transition-colors duration-300">GOURMET KITCHEN</text>
                                <rect @click="swapScene('kitchen')" x="195" y="55" width="180" height="70" 
                                      :class="activeSceneKey === 'kitchen' ? 'fill-[#D6A84F]/15' : 'fill-[#1FADEA]/5 hover:fill-[#1FADEA]/15'"
                                      class="cursor-pointer transition-all duration-300"/>
                            </g>

                            <!-- Luxury Lounge / Snooker PS5 Space -->
                            <g class="transition-all duration-500">
                                <rect x="20" y="140" width="220" height="140" 
                                      :stroke="activeSceneKey === 'lounge' ? '#D6A84F' : 'currentColor'" 
                                      :stroke-width="activeSceneKey === 'lounge' ? '2.5' : '1.5'"
                                      :class="activeSceneKey === 'lounge' ? 'text-[#D6A84F]' : 'text-slate-200 dark:text-slate-800'"
                                      class="transition-colors duration-300" fill="none"/>
                                <text x="30" y="160" 
                                      :fill="activeSceneKey === 'lounge' ? '#D6A84F' : 'currentColor'"
                                      class="text-[9px] font-bold text-slate-400 dark:text-slate-600 transition-colors duration-300">LUXURY LOUNGE / DECK</text>
                                <rect @click="swapScene('lounge')" x="25" y="175" width="210" height="95" 
                                      :class="activeSceneKey === 'lounge' ? 'fill-[#D6A84F]/15' : 'fill-[#D6A84F]/5 hover:fill-[#D6A84F]/15'"
                                      class="cursor-pointer transition-all duration-300"/>
                            </g>

                            <!-- Balcony Outdoor Space -->
                            <g class="transition-all duration-500">
                                <rect x="250" y="140" width="130" height="140" 
                                      :stroke="activeSceneKey === 'balcony' ? '#D6A84F' : 'currentColor'" 
                                      :stroke-width="activeSceneKey === 'balcony' ? '2.5' : '1.5'"
                                      :class="activeSceneKey === 'balcony' ? 'text-[#D6A84F]' : 'text-slate-200 dark:text-slate-800'"
                                      class="transition-colors duration-300" fill="none"/>
                                <text x="260" y="160" 
                                      :fill="activeSceneKey === 'balcony' ? '#D6A84F' : 'currentColor'"
                                      class="text-[9px] font-bold text-slate-400 dark:text-slate-600 transition-colors duration-300">OUTDOOR BALCONY</text>
                                <rect @click="swapScene('balcony')" x="255" y="175" width="120" height="95" 
                                      :class="activeSceneKey === 'balcony' ? 'fill-[#D6A84F]/15' : 'fill-emerald-500/5 hover:fill-emerald-500/15'"
                                      class="cursor-pointer transition-all duration-300"/>
                            </g>
                        </svg>

                        <div class="absolute bottom-2 right-2 text-[8px] font-bold uppercase tracking-widest text-[#D6A84F] bg-slate-900/90 px-2 py-0.5 rounded-[4px]" style="box-shadow: var(--shadow-line);">
                            Teleport Ready
                        </div>
                    </div>
                </div>

                <!-- Scene Navigation Hotspots List Card -->
                <div class="card-luxury p-5 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm rounded-[4px]" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
                    <span class="text-[9px] uppercase tracking-widest text-slate-400 font-bold block mb-1">Scene Teleporter</span>
                    <h3 class="text-xs font-bold text-slate-800 dark:text-white uppercase tracking-wider mb-3">Jump to Location Scene</h3>

                    <div class="flex flex-col gap-2">
                        <template x-for="(scene, key) in scenes" :key="key">
                            <button type="button" 
                                    @click="swapScene(key)"
                                    class="w-full text-left p-3 border text-xs font-semibold flex items-center justify-between transition-all duration-300 cursor-pointer"
                                    :class="activeSceneKey === key ? 'border-[#D6A84F] bg-[#F4F8FF] dark:bg-slate-800/40 text-slate-950 dark:text-white glow-gold' : 'border-slate-100 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700 text-slate-600 dark:text-slate-400'"
                                    style="border-radius: 0.1rem;">
                                <div class="flex items-center gap-2">
                                    <span class="w-1.5 h-1.5 rounded-full" :class="activeSceneKey === key ? 'bg-[#D6A84F]' : 'bg-slate-300 dark:bg-slate-600'"></span>
                                    <span x-text="scene.title" class="font-bold"></span>
                                </div>
                                <span class="text-[9px] uppercase tracking-wider text-slate-400" x-text="scene.hotspots.length + ' Spots'"></span>
                            </button>
                        </template>
                    </div>
                </div>
            </div>

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

<!-- Apartment Options Selection Grid -->
<section id="apartment-choices" class="py-16 section-white border-b border-slate-100 dark:border-slate-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 scroll-animate">
            <span class="text-xs uppercase tracking-[0.25em] text-[#2B3192] font-bold block mb-2">Sanctuary Suites</span>
            <h2>Select An Apartment To Explore</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-sm mx-auto pt-2">
                Click View Tour / Preview on any of our luxury serviced suites to teleport inside their real-time walkthrough guides.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($apartments as $apt)
            @php
                $img = 'pictures/master-bedroom.jpg';
                $primaryAsset = $apt->mediaAssets->where('pivot.order_index', 1)->first() ?? $apt->mediaAssets->first();
                if ($primaryAsset) {
                    $img = $primaryAsset->file_path;
                }
            @endphp
            <!-- Implemented a gorgeous 3D Tilt Card effect inside Alpine for each card item -->
            <div x-data="{ tiltX: 0, tiltY: 0, hovered: false }"
                 @mousemove="
                     let rect = $el.getBoundingClientRect();
                     let x = ($event.clientX - rect.left) / rect.width - 0.5;
                     let y = ($event.clientY - rect.top) / rect.height - 0.5;
                     tiltX = x * 12; 
                     tiltY = y * -12;
                     hovered = true;
                 "
                 @mouseleave="tiltX = 0; tiltY = 0; hovered = false;"
                 :style="'transform: perspective(1000px) rotateX(' + tiltY + 'deg) rotateY(' + tiltX + 'deg) scale3d(' + (hovered ? 1.03 : 1) + ', ' + (hovered ? 1.03 : 1) + ', ' + (hovered ? 1.03 : 1) + '); transition: transform 250ms ease-out;'"
                 class="card-luxury bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex flex-col justify-between shadow-sm rounded-[4px] scroll-animate" 
                 style="box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; transform-style: preserve-3d; will-change: transform;">
                
                <div class="h-44 relative overflow-hidden rounded-[4px]" style="transform: translateZ(20px);">
                    <img src="{{ asset($img) }}" alt="{{ $apt->name }}" class="w-full h-full object-cover">
                    <div class="absolute top-3 left-3 bg-[#080D2B]/95 text-[#D6A84F] text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-[4px]">
                        ₦{{ number_format($apt->base_price_nightly) }} / night
                    </div>
                    <div class="absolute top-3 right-3 bg-emerald-600 text-white text-[8px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-[4px]">
                        Tour Ready
                    </div>
                </div>

                <div class="p-5 flex-grow flex flex-col justify-between space-y-4" style="transform: translateZ(10px);">
                    <div>
                        <span class="text-[9px] font-bold uppercase tracking-widest text-[#D6A84F] block mb-1">{{ $apt->best_for }}</span>
                        <h3 class="text-slate-900 dark:text-white leading-snug" style="font-family: var(--font-heading); font-size: clamp(1.15rem, 2.2vw, 1.35rem); font-weight: 400;">{{ $apt->name }}</h3>
                    </div>

                    <div class="space-y-2 pt-3 border-t border-slate-100 dark:border-slate-800/80">
                        <div class="grid grid-cols-2 gap-2">
                            <a href="{{ url('/apartments/' . $apt->slug) }}" class="btn-pill border border-slate-200 dark:border-slate-800 text-[10px] font-semibold text-slate-700 dark:text-slate-300 text-center w-full" style="padding: 0.6rem 0.5rem; border-radius: var(--radius-button);">
                                View Details
                            </a>
                            <a href="{{ url('/booking?type=' . $apt->slug) }}" class="btn-pill btn-primary text-[10px] font-bold text-center w-full glow-blue" style="padding: 0.6rem 0.5rem; border-radius: var(--radius-button);">
                                Book Now
                            </a>
                        </div>
                        
                        <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hello%20Kevron%20Suites,%20I%20viewed%20the%20virtual%20tour%20for%20the%20{{ urlencode($apt->name) }}%20and%20would%20like%20to%20enquire%20about%20booking%20this%20suite%20in%20Ikeja." 
                           target="_blank" rel="noopener noreferrer" class="btn-pill bg-[#16A34A] text-white hover:bg-green-700 text-xs font-bold text-center flex items-center justify-center gap-1.5 w-full" style="padding: 0.65rem 0.5rem; border-radius: var(--radius-button);">
                            <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.73-1.455L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.37 9.864-9.799.002-2.63-1.023-5.101-2.885-6.966C16.59 1.978 14.12 1.03 11.5 1.03 6.073 1.03 1.648 5.4 1.643 10.83c-.001 1.705.46 3.37 1.333 4.865L1.972 22l6.239-1.626-.03-.02-.534-.1z" />
                            </svg>
                            WhatsApp Book
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Static Fallback Gallery categorized by Rooms -->
<section class="py-16 section-soft-blue border-b border-slate-100 dark:border-slate-900" x-data="{ activeCategory: 'bedroom' }">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="text-center mb-10 scroll-animate">
            <span class="text-xs uppercase tracking-[0.25em] text-[#2B3192] font-bold block mb-2">High-Fidelity Gallery</span>
            <h2>Tour Fallback Media</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-sm mx-auto pt-2">
                Browse our en-suite room categorizations with verified photography for device configurations that do not load interactive tours.
            </p>
        </div>

        <!-- Room category switch selectors -->
        <div class="flex flex-wrap justify-center gap-2 mb-8 scroll-animate">
            <button type="button" @click="activeCategory = 'bedroom'" class="btn-pill text-[10px] font-bold uppercase tracking-wider px-5 py-2 transition-all cursor-pointer"
                    :class="activeCategory === 'bedroom' ? 'btn-primary' : 'bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-50'">
                Bedroom
            </button>
            <button type="button" @click="activeCategory = 'lounge'" class="btn-pill text-[10px] font-bold uppercase tracking-wider px-5 py-2 transition-all cursor-pointer"
                    :class="activeCategory === 'lounge' ? 'btn-primary' : 'bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-50'">
                Living Room
            </button>
            <button type="button" @click="activeCategory = 'kitchen'" class="btn-pill text-[10px] font-bold uppercase tracking-wider px-5 py-2 transition-all cursor-pointer"
                    :class="activeCategory === 'kitchen' ? 'btn-primary' : 'bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-50'">
                Kitchen
            </button>
            <button type="button" @click="activeCategory = 'amenities'" class="btn-pill text-[10px] font-bold uppercase tracking-wider px-5 py-2 transition-all cursor-pointer"
                    :class="activeCategory === 'amenities' ? 'btn-primary' : 'bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-50'">
                Entertainment & Security
            </button>
        </div>

        <!-- Category Grid Showcase -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            
            <!-- Bedroom Category -->
            <template x-if="activeCategory === 'bedroom'">
                @php
                    $bedroomImgs = ['pictures/bedroom.jpg', 'pictures/bedroom-2.jpg', 'pictures/bedroom-3.jpg', 'pictures/master-bedroom.jpg'];
                @endphp
                <div class="col-span-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($bedroomImgs as $img)
                    <div class="card-luxury overflow-hidden bg-white border border-slate-200 dark:border-slate-800 rounded-[4px] scroll-animate" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
                        <div class="h-48 overflow-hidden">
                            <img src="{{ asset($img) }}" alt="Luxury en-suite bedroom design" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
                        </div>
                    </div>
                    @endforeach
                </div>
            </template>

            <!-- Lounge Category -->
            <template x-if="activeCategory === 'lounge'">
                @php
                    $loungeImgs = ['pictures/living-room.jpg', 'pictures/living-room-2.jpg', 'pictures/living-room-3.jpg', 'pictures/living-room-4.jpg'];
                @endphp
                <div class="col-span-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($loungeImgs as $img)
                    <div class="card-luxury overflow-hidden bg-white border border-slate-200 dark:border-slate-800 rounded-[4px] scroll-animate" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
                        <div class="h-48 overflow-hidden">
                            <img src="{{ asset($img) }}" alt="Luxury open-plan smart lounge space" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
                        </div>
                    </div>
                    @endforeach
                </div>
            </template>

            <!-- Kitchen Category -->
            <template x-if="activeCategory === 'kitchen'">
                @php
                    $kitchenImgs = ['pictures/kitchen.jpg', 'pictures/kitchen-2.jpg', 'pictures/kitchen-3.jpg', 'pictures/kitchen-4.jpg'];
                @endphp
                <div class="col-span-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($kitchenImgs as $img)
                    <div class="card-luxury overflow-hidden bg-white border border-slate-200 dark:border-slate-800 rounded-[4px] scroll-animate" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
                        <div class="h-48 overflow-hidden">
                            <img src="{{ asset($img) }}" alt="Fully en-suite marble top kitchen" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
                        </div>
                    </div>
                    @endforeach
                </div>
            </template>

            <!-- Amenities Category -->
            <template x-if="activeCategory === 'amenities'">
                @php
                    $amenitiesImgs = ['pictures/snooker-amenities.jpg', 'pictures/snooker-amenities-2.jpg', 'pictures/staircase.jpg', 'pictures/lounge.jpg'];
                @endphp
                <div class="col-span-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($amenitiesImgs as $img)
                    <div class="card-luxury overflow-hidden bg-white border border-slate-200 dark:border-slate-800 rounded-[4px] scroll-animate" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
                        <div class="h-48 overflow-hidden">
                            <img src="{{ asset($img) }}" alt="Snooker, PS5, smart lock and secure CCTV systems" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
                        </div>
                    </div>
                    @endforeach
                </div>
            </template>

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

<!-- Unified Booking Actions & Concierge Panel -->
<section class="py-16 section-white border-b border-slate-100 dark:border-slate-900">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-8 scroll-animate">
        <div>
            <span class="text-xs uppercase tracking-[0.25em] text-[#2B3192] font-bold block mb-2">Concierge & BookingDesk</span>
            <h2>Book Your Verified Residence</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-semibold max-w-lg mx-auto pt-2">
                Have you previewed your preferred layout? Request direct reservations, secure airport pickups, or obtain specification spec checks on WhatsApp.
            </p>
        </div>

        <div class="flex flex-wrap justify-center gap-4">
            <a href="{{ url('/booking') }}" class="btn-pill btn-primary px-8 py-3 text-xs uppercase tracking-wider font-bold glow-blue">
                Book This Apartment
            </a>
            <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20I%20viewed%20the%20virtual%20tour%20and%20would%20like%20to%20enquire%20about%20booking%20an%20apartment%20in%20Ikeja."
               target="_blank" rel="noopener noreferrer" class="btn-pill bg-[#16A34A] text-white hover:bg-green-700 px-8 py-3 text-xs uppercase tracking-wider font-bold flex items-center justify-center gap-2">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.73-1.455L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.37 9.864-9.799.002-2.63-1.023-5.101-2.885-6.966C16.59 1.978 14.12 1.03 11.5 1.03 6.073 1.03 1.648 5.4 1.643 10.83c-.001 1.705.46 3.37 1.333 4.865L1.972 22l6.239-1.626-.03-.02-.534-.1z" />
                </svg>
                Enquire on WhatsApp
            </a>
            <a href="{{ url('/compare-apartments') }}" class="btn-pill btn-outline-gold px-8 py-3 text-xs uppercase tracking-wider font-bold glow-gold">
                Compare Apartments
            </a>
        </div>
    </div>
</section>

<!-- Crawlable SEO/GEO Context block -->
<section class="py-12 section-soft-blue border-b border-slate-100 dark:border-slate-900">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-4 scroll-animate">
        <h4 class="text-[10px] font-bold uppercase tracking-widest text-[#2B3192]">Entity and neighbourhood stats</h4>
        <p class="text-[11px] text-slate-500 leading-relaxed font-semibold">
            Explore Kevron Suites and Apartments virtually before booking your stay in Adeniyi Jones, Ikeja, Lagos. The virtual tour experience helps guests preview apartment interiors, bedrooms, kitchen areas, private balconies, seat-out spaces, PS5, snooker, smart security features and guest comfort amenities. Kevron Suites and Apartments offers luxury 1, 2, 3 and 4 bedroom serviced apartments with 24-hour power, high-speed Wi-Fi, modern kitchens, air conditioning, washing machine and dryer, airport pickup and rented car support on request.
        </p>
        <p class="text-[11px] text-slate-500 leading-relaxed font-semibold italic">
            Kevron Suites and Apartments offers a virtual tour experience for its luxury serviced apartments in Adeniyi Jones, Ikeja, Lagos, allowing guests to preview bedrooms, living areas, kitchens, balconies, entertainment spaces, smart security features and guest amenities before booking.
        </p>
    </div>
</section>

<!-- Dynamic Virtual Tour FAQs Accordion -->
<section class="py-16 section-white border-b border-slate-100 dark:border-slate-900">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="text-center mb-12 scroll-animate">
            <span class="text-xs uppercase tracking-[0.25em] text-[#2B3192] font-bold block mb-2">Knowledge Base</span>
            <h2>Virtual Tour FAQs</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-sm mx-auto pt-2">
                Frequently asked queries about our interactive 3D and 360 en-suite walkthrough panels.
            </p>
        </div>

        <div class="space-y-4 scroll-animate" x-data="{ activeFaq: null }">
            @forelse($faqs as $index => $faq)
            <div class="border border-slate-200 dark:border-slate-800 p-4 bg-white dark:bg-slate-900" style="border-radius: 0.1rem;">
                <button type="button" 
                        @click="activeFaq = activeFaq === {{ $index }} ? null : {{ $index }}"
                        class="w-full flex justify-between items-center text-xs font-bold text-slate-800 dark:text-white uppercase tracking-wider text-left focus:outline-none cursor-pointer">
                    <span>{{ $faq->question }}</span>
                    <span class="text-amber-500 text-sm font-sans" x-text="activeFaq === {{ $index }} ? '−' : '+'"></span>
                </button>
                <div x-show="activeFaq === {{ $index }}" x-collapse class="mt-3 text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed font-medium">
                    {{ $faq->answer }}
                </div>
            </div>
            @empty
            <!-- Seeder Fallbacks if Dynamic faqs aren't loaded -->
            @php
                $fallbackFaqs = [
                    ['q' => 'What can I see in the virtual tour?', 'a' => 'You can inspect the entire living area, fully en-suite master bedrooms, and modern kitchens populated with high-end appliances.'],
                    ['q' => 'Can I view a specific apartment type?', 'a' => 'Yes. Simply use our interactive Apartment Selector or click floor plan zones to teleport inside 1, 2, 3, or 4 Bedroom suites.'],
                    ['q' => 'What if the 3D tour does not load on my device?', 'a' => 'We offer verified categorized fallback room galleries displaying authentic bedroom, lounge, and dining space photography.'],
                    ['q' => 'Can I book directly from the virtual tour page?', 'a' => 'Yes, check availability or click Book Stays anytime inside viewer controls to transition directly into our reservation funnel.'],
                ];
            @endphp
            @foreach($fallbackFaqs as $idx => $f)
            <div class="border border-slate-200 dark:border-slate-800 p-4 bg-white dark:bg-slate-900 rounded-[4px]" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
                <button type="button" 
                        @click="activeFaq = activeFaq === {{ $idx }} ? null : {{ $idx }}"
                        class="w-full flex justify-between items-center text-xs font-bold text-slate-800 dark:text-white uppercase tracking-wider text-left focus:outline-none cursor-pointer">
                    <span>{{ $f['q'] }}</span>
                    <span class="text-amber-500 text-sm font-sans" x-text="activeFaq === {{ $idx }} ? '−' : '+'"></span>
                </button>
                <div x-show="activeFaq === {{ $idx }}" x-collapse class="mt-3 text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed font-medium">
                    {{ $f['a'] }}
                </div>
            </div>
            @endforeach
            @endforelse
        </div>
    </div>
</section>

<!-- Final CTA Section with Dark Navy Backdrop -->
<section class="section-navy py-20 relative overflow-hidden" style="background-color: #080D2B;">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6 relative z-10 scroll-animate">
        <span class="text-xs uppercase tracking-[0.25em] text-[#D6A84F] font-bold block">In-Person Hospitality</span>
        <h2 class="text-white font-serif mb-2 leading-tight" style="color: #d1d5dc !important;">Ready to Experience Kevron Suites and Apartments in Person?</h2>
        <p class="text-xs sm:text-sm text-slate-300 max-w-2xl mx-auto leading-relaxed">
            Explore the tour, choose your apartment type and book your stay at our Adeniyi Jones, Ikeja location.
        </p>

        <div class="flex flex-wrap justify-center gap-4 pt-2">
            <a href="{{ url('/booking') }}" class="btn-pill btn-primary font-bold glow-gold">
                Book Stay Now
            </a>
            <a href="#apartment-choices" class="btn-pill border border-slate-700 text-white hover:bg-white hover:text-slate-900 font-bold">
                View Apartments
            </a>
            <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hello%20Kevron%2520Suites,%20I'm%2520inquiring%2520about%2520booking%2520the%2520Adeniyi%2520Jones%2520Ikeja%2520location."
               target="_blank" rel="noopener noreferrer" class="btn-pill bg-[#16A34A] text-white hover:bg-green-700 font-bold flex items-center justify-center gap-1.5">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.73-1.455L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.37 9.864-9.799.002-2.63-1.023-5.101-2.885-6.966C16.59 1.978 14.12 1.03 11.5 1.03 6.073 1.03 1.648 5.4 1.643 10.83c-.001 1.705.46 3.37 1.333 4.865L1.972 22l6.239-1.626-.03-.02-.534-.1z" />
                </svg>
                WhatsApp Us
            </a>
        </div>
    </div>
</section>

<!-- Alpine JS Virtual Tour engine controller definition -->
<script>
function virtualTourEngine() {
    return {
        mode: 'self', // guided, self, apartment, facilities (set default to self for stunning dynamic interactive depth-parallax viewer!)
        reducedMotion: false,
        loading: false,
        transitioning: false,
        activeSceneKey: 'lounge',
        activeHotspot: null,
        panX: 0,
        panY: 0,
        ambience: 'day',
        
        scenes: {
            lounge: {
                title: 'Luxury Lounge & Snooker Area',
                dayImage: '{{ asset('pictures/living-room.jpg') }}',
                nightImage: '{{ asset('pictures/living-room-2.jpg') }}',
                description: 'Explore our spacious open-plan en-suite lounge featuring a standard snooker table and smart home fixtures.',
                hotspots: [
                    { label: 'Snooker Table', x: 25, y: 40, icon: 'general', description: 'Professional tournament grade snooker table for executive guest entertainment.' },
                    { label: 'Smart Security Hub', x: 65, y: 20, icon: 'security', description: 'Dual CCTV cameras and keyless access control linked straight to secure front gate logs.' }
                ]
            },
            kitchen: {
                title: 'Gourmet Quartz Kitchen',
                dayImage: '{{ asset('pictures/kitchen.jpg') }}',
                nightImage: '{{ asset('pictures/kitchen-2.jpg') }}',
                description: 'Fully equipped modern kitchen with premium appliances, fitted laundry wash-and-dry systems, and dining tools.',
                hotspots: [
                    { label: 'Quartz Cooking Island', x: 45, y: 50, icon: 'general', description: 'Custom en-suite layout equipped with high-end extraction and fitted burners.' },
                    { label: 'Dual Wash & Dry Laundry', x: 80, y: 40, icon: 'general', description: 'Fully fitted automatic washer and tumble dryer setups.' }
                ]
            },
            bedroom: {
                title: 'En-Suite Master Bedroom',
                dayImage: '{{ asset('pictures/master-bedroom.jpg') }}',
                nightImage: '{{ asset('pictures/bedroom-2.jpg') }}',
                description: 'Experience pure hotel-grade relaxation in our fully soundproof en-suite bedroom equipped with premium orthopedic sheets.',
                hotspots: [
                    { label: 'Keyless Smart Lock', x: 30, y: 35, icon: 'security', description: 'Self check-in digital lock keypad ensuring complete privacy during your stay.' },
                    { label: 'High-Speed Wi-Fi Router', x: 75, y: 25, icon: 'wifi', description: 'Uncapped gigabit fiber connection delivering 100Mbps download pipelines.' }
                ]
            },
            balcony: {
                title: 'Scenic Outdoor Balcony',
                dayImage: '{{ asset('pictures/staircase.jpg') }}', // staircase placeholder as scenic balcony fallback
                nightImage: '{{ asset('pictures/lounge.jpg') }}',
                description: 'Open-air ventilation balconies offering peaceful garden outlines and fresh air transits.',
                hotspots: [
                    { label: 'Private Seat-Out Area', x: 50, y: 60, icon: 'general', description: 'Fitted chairs and tables ideal for business workspace or morning coffee breaks.' }
                ]
            }
        },

        init() {
            this.logInteraction('view_page', 'page_load');
        },

        get activeScene() {
            return this.scenes[this.activeSceneKey];
        },

        get activeSceneImage() {
            return this.ambience === 'day' ? this.activeScene.dayImage : this.activeScene.nightImage;
        },

        get panStyle() {
            if (this.reducedMotion) return '';
            // crops 1.12x and translates based on mouse sweep for beautiful depth parallax look-around
            return `transform: scale(1.12) translate3d(${this.panX}px, ${this.panY}px, 0);`;
        },

        getHotspotStyle(hotspot) {
            if (this.reducedMotion) {
                return `left: ${hotspot.x}%; top: ${hotspot.y}%;`;
            }
            // Parallax depth separation: hotspots translate slightly differently (0.6x) than the background
            let offsetX = this.panX * 0.6;
            let offsetY = this.panY * 0.6;
            return `left: ${hotspot.x}%; top: ${hotspot.y}%; transform: translate3d(${offsetX}px, ${offsetY}px, 0);`;
        },

        handleStageMouseMove(e) {
            if (this.reducedMotion) return;
            let rect = e.currentTarget.getBoundingClientRect();
            // Calculate cursor offset from center (-0.5 to 0.5)
            let x = (e.clientX - rect.left) / rect.width - 0.5;
            let y = (e.clientY - rect.top) / rect.height - 0.5;
            
            // Limit coordinate sweep
            this.panX = x * -35; 
            this.panY = y * -22; 
        },

        handleStageMouseLeave() {
            // Smoothly reset coordinates to center
            this.panX = 0;
            this.panY = 0;
        },

        playAudioChime(frequency = 523.25, type = 'sine', duration = 0.5) {
            if (this.reducedMotion) return;
            try {
                let AudioContext = window.AudioContext || window.webkitAudioContext;
                if (!AudioContext) return;
                let ctx = new AudioContext();
                
                let osc = ctx.createOscillator();
                let gain = ctx.createGain();
                
                osc.type = type;
                osc.frequency.setValueAtTime(frequency, ctx.currentTime);
                
                // Luxury double-crystal bell decay envelope
                gain.gain.setValueAtTime(0.001, ctx.currentTime);
                gain.gain.linearRampToValueAtTime(0.12, ctx.currentTime + 0.04);
                gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration);
                
                osc.connect(gain);
                gain.connect(ctx.destination);
                
                osc.start(ctx.currentTime);
                osc.stop(ctx.currentTime + duration);
            } catch (e) {
                // Autoplay block handler
            }
        },

        setMode(newMode) {
            this.mode = newMode;
            this.activeHotspot = null;
            this.logInteraction('mode_select', newMode);
            this.playAudioChime(523.25, 'sine', 0.35); // C5 notification chime
        },

        setAmbience(newAmbience) {
            if (this.ambience !== newAmbience) {
                this.transitioning = true;
                this.playAudioChime(newAmbience === 'day' ? 587.33 : 392.00, 'sine', 0.35); // ascending vs descending bell tone
                setTimeout(() => {
                    this.ambience = newAmbience;
                    setTimeout(() => {
                        this.transitioning = false;
                    }, 280);
                }, this.reducedMotion ? 50 : 350);
                this.logInteraction('change_ambience', newAmbience);
            }
        },

        toggleReducedMotion() {
            this.reducedMotion = !this.reducedMotion;
            this.logInteraction('reduced_motion', this.reducedMotion ? 'enabled' : 'disabled');
        },

        swapScene(sceneKey) {
            if (this.scenes[sceneKey] && this.activeSceneKey !== sceneKey) {
                // Play luxury double audio chime (ascending gold tones: A4 -> C#5)
                this.playAudioChime(440, 'sine', 0.5);
                setTimeout(() => {
                    this.playAudioChime(554.37, 'sine', 0.45);
                }, 140);

                this.transitioning = true;
                this.loading = true;
                this.activeHotspot = null;
                
                setTimeout(() => {
                    this.activeSceneKey = sceneKey;
                    setTimeout(() => {
                        this.loading = false;
                        this.transitioning = false;
                    }, 280);
                }, this.reducedMotion ? 50 : 450);
                
                this.logInteraction('change_scene', sceneKey);
            }
        },

        triggerHotspot(hotspot) {
            this.activeHotspot = hotspot;
            this.logInteraction('hotspot_click', hotspot.label);
            
            // Play luxury crystal feedback ping (high G5 chime)
            this.playAudioChime(783.99, 'sine', 0.4);
        },

        toggleFullscreen() {
            let elem = document.getElementById('tour-viewer-section');
            if (!document.fullscreenElement) {
                elem.requestFullscreen().catch(err => {
                    console.log('Error attempting to enable fullscreen:', err.message);
                });
            } else {
                document.exitFullscreen();
            }
            this.logInteraction('fullscreen_toggle', 'toggle');
            this.playAudioChime(440, 'sine', 0.3);
        },

        async logInteraction(type, key) {
            try {
                fetch('{{ route('virtual-tour.log') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        event_type: type,
                        event_key: key,
                        metadata: { scene: this.activeSceneKey }
                    })
                });
            } catch (e) {
                // Silently swallow log errors
            }
        }
    };
}

// Register viewport scroll entrance observer
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.08 });

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