@extends('layouts.app')

@section('title', isset($seo) && $seo->meta_title ? $seo->meta_title : $apartment->name . ' in Ikeja, Lagos | Kevron Apartments')

@section('meta_description', isset($seo) && $seo->meta_description ? $seo->meta_description : 'Book ' . $apartment->name . ' at Adeniyi Jones, Ikeja, Lagos. Enjoy 24h power, high-speed Wi-Fi, smart security, kitchen, laundry, and airport transit.')

@section('content')
<main x-data="{ compareModalOpen: false }" class="bg-slate-50 dark:bg-slate-950 min-h-screen text-slate-800 dark:text-slate-200">
    
    <!-- Dynamic Hero Section -->
    <section class="relative min-h-[60vh] flex items-center justify-center bg-[#080D2B] text-white overflow-hidden section-navy">
        @php
            $heroImage = 'pictures/bedroom.jpg';
            if ($apartment->mediaAssets->isNotEmpty()) {
                $heroImage = $apartment->mediaAssets->firstWhere('pivot.order_index', 1)->file_path ?? $apartment->mediaAssets->first()->file_path;
            }
        @endphp
        <div class="absolute inset-0 bg-cover bg-center opacity-40 transition-transform duration-10000 hover:scale-105" 
             style="background-image: url('{{ asset($heroImage) }}');"></div>
        <div class="absolute inset-0 bg-gradient-to-b from-[#080D2B]/80 via-[#080D2B]/50 to-[#080D2B]"></div>

        <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center pt-16 pb-12">
            <!-- Breadcrumbs -->
            <nav class="flex justify-center space-x-2 text-[10px] uppercase tracking-widest text-slate-400 font-bold mb-4" aria-label="Breadcrumb">
                <a href="{{ url('/') }}" class="hover:text-amber-400 transition-colors">Home</a>
                <span>/</span>
                <a href="{{ url('/apartments') }}" class="hover:text-amber-400 transition-colors">Apartments</a>
                <span>/</span>
                <span class="text-amber-400">{{ $apartment->name }}</span>
            </nav>

            <span class="inline-block px-3 py-1 bg-amber-500/10 border border-amber-500/30 text-amber-400 text-[10px] uppercase tracking-[0.2em] font-bold rounded-full mb-4">
                {{ $apartment->best_for }}
            </span>
            
            <h1 class="text-white font-serif mb-4 leading-tight" style="font-size: clamp(1.45rem, 4vw, 1.8rem);">
                {{ $apartment->name }} in Ikeja, Lagos
            </h1>
            
            <p class="text-[12px] sm:text-xs text-slate-300 max-w-2xl mx-auto font-medium mb-6 leading-relaxed">
                Experience executive comfort inside a secure gated perimeter at Adeniyi Jones. Features smart locks, stable power, and airport transit options.
            </p>

            <!-- Pricing Badge -->
            <div class="inline-flex items-baseline bg-white/5 border border-white/10 backdrop-blur-md rounded-full px-5 py-2 mb-8 shadow-sm">
                <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider mr-2">Starting From</span>
                <span class="text-lg font-serif font-bold text-amber-400">₦{{ number_format($apartment->base_price_nightly) }}</span>
                <span class="text-[10px] text-slate-400 font-bold ml-1">/ Night</span>
            </div>

            <!-- Hero CTAs -->
            <div class="flex flex-col sm:flex-row justify-center items-center gap-4">
                <a href="#booking-section" class="btn-pill btn-primary px-8 py-3.5 text-xs font-bold uppercase tracking-wider min-w-[180px]">
                    Book Stay
                </a>
                <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hello%20Kevron%20Apartments%2C%20I%20am%20interested%20in%20booking%20the%20{{ urlencode($apartment->name) }}%20in%20Ikeja.%20Please%20confirm%20availability." 
                   target="_blank" 
                   class="btn-pill btn-outline-gold px-8 py-3.5 text-xs font-bold uppercase tracking-wider min-w-[180px] flex items-center justify-center space-x-2">
                    <svg class="w-4 h-4 text-green-500 fill-current" viewBox="0 0 24 24"><path d="M12.012 2c-5.506 0-9.989 4.478-9.99 9.984a9.96 9.96 0 0 0 1.333 4.993L2 22l5.13-1.347a9.93 9.93 0 0 0 4.887 1.277h.005c5.505 0 9.988-4.478 9.99-9.985a9.98 9.98 0 0 0-3.003-7.062A9.94 9.94 0 0 0 12.012 2zm5.727 14.072c-.252.71-1.463 1.38-2.01 1.437-.478.05-.98.077-1.564-.108-.585-.184-1.274-.423-2.18-.813-3.87-1.66-6.38-5.63-6.574-5.89-.193-.26-1.554-2.064-1.554-3.935 0-1.87 1.002-2.79 1.36-3.167.358-.377.785-.472 1.047-.472.261 0 .522.007.75.014.24.007.48.014.734.606.262.61.9 2.183.978 2.345.078.162.13.35.023.555-.107.206-.16.335-.32.518-.162.183-.34.407-.484.547-.162.158-.33.33-.14.654.19.324.846 1.39 1.812 2.25 1.246 1.108 2.298 1.45 2.628 1.614.33.163.522.137.718-.088.196-.225.845-.98.107-1.244-.13-.047-.784-.33-.88-.37-.098-.04-.162-.06-.23-.01-.067.045-.262.33-.32.4-.06.07-.12.08-.25.03-.13-.05-.55-.2-.95-.56-.312-.278-.523-.623-.584-.728-.06-.105-.006-.162.046-.214.047-.047.105-.12.158-.182.053-.06.072-.105.108-.176.036-.07.018-.13-.009-.183-.027-.054-.262-.634-.36-.87-.095-.23-.192-.2-.263-.203h-.225c-.078 0-.203.03-.31.147-.107.118-.41.402-.41.98s.42 1.14.478 1.22c.058.077.828 1.265 2.006 1.772.28.12.5.19.67.24.28.09.537.078.74.048.225-.03.785-.32.895-.63.11-.31.11-.577.08-.63-.03-.053-.11-.088-.23-.143z"/></svg>
                    <span>WhatsApp Inquiry</span>
                </a>
            </div>

            <!-- Trust Chips -->
            <div class="mt-12 flex flex-wrap justify-center gap-6 text-[10px] font-bold text-slate-400 uppercase tracking-widest">
                <span class="flex items-center space-x-1.5"><span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span><span>24h Power Supply</span></span>
                <span class="flex items-center space-x-1.5"><span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span><span>High-Speed Wi-Fi</span></span>
                <span class="flex items-center space-x-1.5"><span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span><span>Smart Keyless Locks</span></span>
                <span class="flex items-center space-x-1.5"><span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span><span>Airport Pickups</span></span>
            </div>
        </div>
    </section>

    <!-- Main Content Section -->
    <section class="py-12" id="booking-section">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
                
                <!-- Left 2/3 Columns: Content Blocks -->
                <div class="lg:col-span-2 space-y-12">
                    
                    <!-- Overview -->
                    <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-6 shadow-sm" 
                         style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                        <h2 class="mb-4">Suite Overview</h2>
                        <p class="text-xs sm:text-sm text-slate-500 dark:text-slate-400 leading-relaxed font-medium mb-6">
                            {{ $apartment->description }}
                        </p>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-slate-100 dark:border-slate-800 text-xs font-bold uppercase tracking-widest text-slate-400">
                            <div>
                                <span class="block text-[9px] mb-1">Capacity</span>
                                <span class="text-slate-900 dark:text-white">{{ $apartment->capacity_adults + $apartment->capacity_children }} Guests Max</span>
                            </div>
                            <div>
                                <span class="block text-[9px] mb-1">Bedrooms</span>
                                <span class="text-slate-900 dark:text-white">{{ $apartment->bedrooms_count }} Executive {{ Str::plural('Bedroom', $apartment->bedrooms_count) }}</span>
                            </div>
                            <div>
                                <span class="block text-[9px] mb-1">Location</span>
                                <span class="text-slate-900 dark:text-white">Adeniyi Jones, Ikeja</span>
                            </div>
                        </div>
                    </div>

                    <!-- Photo Gallery with Tab Filters & Lightbox -->
                    <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-6 shadow-sm"
                         style="border-radius: 0.1rem; box-shadow: var(--shadow-line);"
                         x-data="{
                             activeTab: 'all',
                             lightboxOpen: false,
                             lightboxIndex: 0,
                             media: [
                                 @foreach($apartment->mediaAssets as $asset)
                                 {
                                     url: '{{ asset($asset->file_path) }}',
                                     alt: '{{ $asset->alt_text }}',
                                     category: '{{ Str::contains($asset->file_path, 'bedroom') ? 'bedroom' : (Str::contains($asset->file_path, 'living') || Str::contains($asset->file_path, 'lounge') ? 'living' : (Str::contains($asset->file_path, 'kitchen') ? 'kitchen' : 'amenities')) }}'
                                 },
                                 @endforeach
                             ],
                             get filteredMedia() {
                                 if (this.activeTab === 'all') return this.media;
                                 return this.media.filter(m => m.category === this.activeTab);
                             },
                             openLightbox(index) {
                                 this.lightboxIndex = index;
                                 this.lightboxOpen = true;
                             },
                             nextMedia() {
                                 this.lightboxIndex = (this.lightboxIndex + 1) % this.filteredMedia.length;
                             },
                             prevMedia() {
                                 this.lightboxIndex = (this.lightboxIndex - 1 + this.filteredMedia.length) % this.filteredMedia.length;
                             }
                         }">
                        
                        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
                            <h2>Photo Showcase</h2>
                            <!-- Tab controls -->
                            <div class="flex flex-wrap gap-2 text-[10px] uppercase font-bold tracking-wider">
                                <button @click="activeTab = 'all'" :class="{'bg-blue-900 text-white': activeTab === 'all', 'bg-slate-100 dark:bg-slate-800 text-slate-500': activeTab !== 'all'}" class="px-3 py-1.5 rounded transition-colors duration-200">All</button>
                                <button @click="activeTab = 'bedroom'" :class="{'bg-blue-900 text-white': activeTab === 'bedroom', 'bg-slate-100 dark:bg-slate-800 text-slate-500': activeTab !== 'bedroom'}" class="px-3 py-1.5 rounded transition-colors duration-200">Bedrooms</button>
                                <button @click="activeTab = 'living'" :class="{'bg-blue-900 text-white': activeTab === 'living', 'bg-slate-100 dark:bg-slate-800 text-slate-500': activeTab !== 'living'}" class="px-3 py-1.5 rounded transition-colors duration-200">Living Area</button>
                                <button @click="activeTab = 'kitchen'" :class="{'bg-blue-900 text-white': activeTab === 'kitchen', 'bg-slate-100 dark:bg-slate-800 text-slate-500': activeTab !== 'kitchen'}" class="px-3 py-1.5 rounded transition-colors duration-200">Kitchen</button>
                                <button @click="activeTab = 'amenities'" :class="{'bg-blue-900 text-white': activeTab === 'amenities', 'bg-slate-100 dark:bg-slate-800 text-slate-500': activeTab !== 'amenities'}" class="px-3 py-1.5 rounded transition-colors duration-200">Amenities</button>
                            </div>
                        </div>

                        <!-- Gallery Grid -->
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                            <template x-for="(m, idx) in filteredMedia" :key="idx">
                                <div class="group relative overflow-hidden bg-slate-900 cursor-pointer aspect-video" 
                                     style="border-radius: 0.1rem;"
                                     @click="openLightbox(idx)">
                                    <img :src="m.url" :alt="m.alt" loading="lazy" class="w-full h-full object-cover opacity-90 transition-transform duration-500 group-hover:scale-105">
                                    <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-6 h-6 text-white"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.637 10.637z"/></svg>
                                    </div>
                                </div>
                            </template>
                        </div>

                        <!-- Lightbox Overlay -->
                        <div x-show="lightboxOpen" 
                             class="fixed inset-0 z-50 bg-black/95 flex flex-col justify-between p-4"
                             x-transition:enter="transition ease-out duration-300"
                             x-transition:leave="transition ease-in duration-200"
                             @keydown.window.escape="lightboxOpen = false"
                             @keydown.window.right="nextMedia()"
                             @keydown.window.left="prevMedia()"
                             style="display: none;">
                            
                            <!-- Close header -->
                            <div class="flex justify-between items-center text-white text-xs font-bold uppercase tracking-wider py-2">
                                <span x-text="`${lightboxIndex + 1} / ${filteredMedia.length}`"></span>
                                <button @click="lightboxOpen = false" class="hover:text-amber-400 focus:outline-none flex items-center space-x-1" aria-label="Close Lightbox">
                                    <span>Close</span>
                                    <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>

                            <!-- Main content image -->
                            <div class="flex-1 flex items-center justify-center relative my-4">
                                <button @click.stop="prevMedia()" class="absolute left-2 bg-white/10 hover:bg-white/20 text-white rounded-full p-2.5 transition-colors focus:outline-none" aria-label="Previous Slide">
                                    <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="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
                                </button>
                                
                                <img :src="filteredMedia[lightboxIndex]?.url" :alt="filteredMedia[lightboxIndex]?.alt" class="max-w-full max-h-[75vh] object-contain shadow-2xl">

                                <button @click.stop="nextMedia()" class="absolute right-2 bg-white/10 hover:bg-white/20 text-white rounded-full p-2.5 transition-colors focus:outline-none" aria-label="Next Slide">
                                    <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="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
                                </button>
                            </div>

                            <!-- Image caption -->
                            <div class="text-center text-slate-400 text-xs py-2 bg-black/60 backdrop-blur-md rounded max-w-xl mx-auto px-4 w-full">
                                <p x-text="filteredMedia[lightboxIndex]?.alt" class="font-medium"></p>
                            </div>
                        </div>

                    </div>

                    <!-- Plyr Video Walkthrough -->
                    <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-6 shadow-sm"
                         style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                        <h2 class="mb-4">Cinematic Suite Tour</h2>
                        <div class="relative overflow-hidden aspect-video bg-black" style="border-radius: 0.1rem;">
                            <!-- Video Embed using Landscape Walkthrough from videos.txt -->
                            <iframe src="https://player.vimeo.com/video/1186235401?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0" 
                                    class="absolute inset-0 w-full h-full"
                                    frameborder="0" 
                                    allow="autoplay; fullscreen; picture-in-picture" 
                                    title="Kevron Apartment Landscape Tour"></iframe>
                        </div>
                        <p class="text-[10px] text-slate-400 font-semibold mt-3 flex items-center space-x-1">
                            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><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>Live cinematic inspection walkthrough of our standard en-suite configurations.</span>
                        </p>
                    </div>

                    <!-- 3D Lounge / 360° Virtual Tour -->
                    <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-6 shadow-sm"
                         style="border-radius: 0.1rem; box-shadow: var(--shadow-line);"
                         x-data="{ tourActive: false }">
                        <div class="flex justify-between items-center mb-4">
                            <h2>3D Room Walkthrough</h2>
                            <span class="px-2 py-0.5 bg-[#1FADEA]/10 border border-[#1FADEA]/30 text-[#1FADEA] text-[9px] uppercase tracking-wider font-bold rounded">360° Interactive</span>
                        </div>
                        
                        <!-- Simulated 3D lounge view or trigger -->
                        <div class="relative overflow-hidden aspect-video bg-slate-950 flex items-center justify-center text-center p-6 group" 
                             style="border-radius: 0.1rem;">
                            
                            <!-- Static fallback background -->
                            <div class="absolute inset-0 bg-cover bg-center opacity-30 transition-transform duration-1000 group-hover:scale-105" 
                                 style="background-image: url('{{ asset('pictures/living-room-3.jpg') }}');"></div>
                            
                            <div class="relative z-10 space-y-4 max-w-sm" x-show="!tourActive">
                                <div class="w-12 h-12 rounded-full border border-white flex items-center justify-center mx-auto text-white animate-pulse">
                                    <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" /></svg>
                                </div>
                                <h3 class="text-white text-xs font-serif font-bold uppercase tracking-wider">Launch Interactive 3D Lounge VR</h3>
                                <p class="text-[10px] text-slate-400 leading-normal">
                                    Explore en-suite kitchen islands, snooker boards, and gaming setups directly in virtual space.
                                </p>
                                <button @click="tourActive = true" class="btn-pill btn-luxury text-[10px] px-6 py-2.5 font-bold uppercase">
                                    Start Virtual Tour
                                </button>
                            </div>

                            <!-- If Tour is Active, render simulated VR component using Alpine -->
                            <div x-show="tourActive" class="absolute inset-0 bg-slate-900 flex flex-col justify-between" style="display: none;">
                                <!-- Simple interactive hotspots simulator -->
                                <div class="relative w-full h-full bg-cover bg-center flex items-center justify-center" 
                                     style="background-image: url('{{ asset('pictures/living-room.jpg') }}');">
                                    <div class="absolute inset-0 bg-black/25"></div>

                                    <!-- Hotspot 1: Kitchen -->
                                    <div x-data="{ open: false }" class="absolute top-[30%] left-[20%] z-20">
                                        <button @click="open = !open" class="w-6 h-6 rounded-full bg-amber-500 border-2 border-white text-white flex items-center justify-center hover:scale-110 transition-transform">
                                            <span class="w-1.5 h-1.5 rounded-full bg-white animate-ping"></span>
                                        </button>
                                        <div x-show="open" @click.away="open = false" class="absolute left-8 bottom-0 bg-slate-900 border border-slate-800 text-left p-3 rounded shadow-xl w-48 text-[10px] text-slate-300">
                                            <span class="font-bold text-white block mb-0.5">Gourmet Kitchen</span>
                                            Fully fitted space equipped with premium gas cooker, fridge, and heat-extractors.
                                        </div>
                                    </div>

                                    <!-- Hotspot 2: Entertainment (PS5/Snooker) -->
                                    @if($apartment->bedrooms_count >= 3)
                                    <div x-data="{ open: false }" class="absolute top-[60%] left-[55%] z-20">
                                        <button @click="open = !open" class="w-6 h-6 rounded-full bg-[#1FADEA] border-2 border-white text-white flex items-center justify-center hover:scale-110 transition-transform">
                                            <span class="w-1.5 h-1.5 rounded-full bg-white animate-ping"></span>
                                        </button>
                                        <div x-show="open" @click.away="open = false" class="absolute left-8 bottom-0 bg-slate-900 border border-slate-800 text-left p-3 rounded shadow-xl w-48 text-[10px] text-slate-300">
                                            <span class="font-bold text-white block mb-0.5">Snooker & Gaming Deck</span>
                                            Includes professional slate-bed snooker table and PlayStation 5 Console.
                                        </div>
                                    </div>
                                    @endif

                                    <span class="absolute bottom-4 left-4 bg-slate-900/80 backdrop-blur text-[9px] font-bold text-white px-2.5 py-1 rounded">
                                        Drag / Click Hotspots to inspect
                                    </span>
                                    
                                    <button @click="tourActive = false" class="absolute top-4 right-4 bg-black/60 hover:bg-black text-white px-3 py-1.5 rounded text-[9px] font-bold uppercase tracking-wider">
                                        Exit Tour
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>

                    <!-- Floor Plan Section -->
                    <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-6 shadow-sm"
                         style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                        <h2>Suite Floor Layout</h2>
                        <p class="text-xs text-slate-400 font-semibold mb-6">Explore the architecturally optimized spacious en-suite spacing.</p>
                        
                        <div class="bg-slate-50 dark:bg-slate-950 p-6 rounded border border-slate-200 dark:border-slate-850 flex items-center justify-center">
                            <!-- Simulated Premium Blueprint Layout Details -->
                            <div class="w-full max-w-md border border-dashed border-slate-300 dark:border-slate-800 p-6 text-center text-xs font-semibold text-slate-400 space-y-4">
                                <div class="font-serif text-slate-800 dark:text-white uppercase tracking-wider text-sm">
                                    {{ $apartment->bedrooms_count }} Bedroom En-Suite Floor Layout
                                </div>
                                <div class="grid grid-cols-2 gap-4 text-left border-y border-slate-200 dark:border-slate-800 py-3 text-[10px] uppercase font-bold text-slate-500">
                                    <div>Living Room: <span class="text-slate-850 dark:text-slate-200">Yes</span></div>
                                    <div>Kitchen Island: <span class="text-slate-850 dark:text-slate-200">Yes</span></div>
                                    <div>Private Terrace: <span class="text-slate-850 dark:text-slate-200">Yes</span></div>
                                    <div>Utility / Laundry: <span class="text-slate-850 dark:text-slate-200">Yes</span></div>
                                </div>
                                <p class="text-[10px] text-slate-400">
                                    Need a high-resolution PDF architectural blueprint layout for corporate reviews? Contact our operations desk.
                                </p>
                                <a href="{{ url('/contact?inquiry=floorplan&suite=' . $apartment->slug) }}" class="btn-pill btn-outline-gold px-6 py-2.5 text-[10px] font-bold uppercase inline-block">
                                    Request Layout Blueprint
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Category Grouped Amenities List -->
                    <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-6 shadow-sm"
                         style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                        <h2 class="mb-6">Suite Amenities & Specifications</h2>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 text-xs font-semibold leading-relaxed">
                            
                            <!-- Comfort & Convenience -->
                            <div>
                                <h3 class="text-[10px] font-bold text-amber-500 uppercase tracking-widest border-b border-slate-100 dark:border-slate-850 pb-2 mb-3">Comfort & Convenience</h3>
                                <ul class="space-y-2 text-slate-600 dark:text-slate-400">
                                    <li class="flex items-center space-x-2"><span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span><span>Air Conditioning in all rooms</span></li>
                                    <li class="flex items-center space-x-2"><span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span><span>Spacious Lounge Sofa Seating</span></li>
                                    <li class="flex items-center space-x-2"><span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span><span>Private balconies with seat-out area</span></li>
                                </ul>
                            </div>

                            <!-- Power & Internet -->
                            <div>
                                <h3 class="text-[10px] font-bold text-[#2B3192] dark:text-cyan-400 uppercase tracking-widest border-b border-slate-100 dark:border-slate-850 pb-2 mb-3">Power & Connection</h3>
                                <ul class="space-y-2 text-slate-600 dark:text-slate-400">
                                    <li class="flex items-center space-x-2"><span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span><span>Stable 24-Hour Power Supply</span></li>
                                    <li class="flex items-center space-x-2"><span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span><span>High-Speed Wi-Fi network</span></li>
                                    <li class="flex items-center space-x-2"><span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span><span>Work-friendly desks / workspaces</span></li>
                                </ul>
                            </div>

                            <!-- Kitchen & Laundry -->
                            <div>
                                <h3 class="text-[10px] font-bold text-[#2B3192] dark:text-cyan-400 uppercase tracking-widest border-b border-slate-100 dark:border-slate-850 pb-2 mb-3">Kitchen & Laundry</h3>
                                <ul class="space-y-2 text-slate-600 dark:text-slate-400">
                                    <li class="flex items-center space-x-2"><span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span><span>Fully Equipped Gourmet Kitchen</span></li>
                                    <li class="flex items-center space-x-2"><span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span><span>Washing Machine & Dryer combo</span></li>
                                    <li class="flex items-center space-x-2"><span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span><span>Energy-efficient refrigerators & microwaves</span></li>
                                </ul>
                            </div>

                            <!-- Security & Smart locks -->
                            <div>
                                <h3 class="text-[10px] font-bold text-red-500 uppercase tracking-widest border-b border-slate-100 dark:border-slate-850 pb-2 mb-3">Smart Living & Security</h3>
                                <ul class="space-y-2 text-slate-600 dark:text-slate-400">
                                    <li class="flex items-center space-x-2"><span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span><span>Keyless Smart Lock entry codes</span></li>
                                    <li class="flex items-center space-x-2"><span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span><span>24/7 CCTV external coverage</span></li>
                                    <li class="flex items-center space-x-2"><span class="w-1.5 h-1.5 rounded-full bg-[#1FADEA]"></span><span>Intercom Doorbell Video monitor</span></li>
                                </ul>
                            </div>

                        </div>
                    </div>

                    <!-- Targeted Copy Sections Grid -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-left">
                        <!-- Power & Internet block -->
                        <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-5 shadow-sm" style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                            <h3 class="text-xs font-bold text-blue-900 dark:text-cyan-400 uppercase tracking-wider mb-2 flex items-center space-x-1.5">
                                <svg class="w-4 h-4 text-amber-500 fill-current" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 8z"/></svg>
                                <span>Power & Internet Assurance</span>
                            </h3>
                            <p class="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed font-medium">
                                Enjoy stable, uninterrupted **24-hour power supply** managed by dual auto-generator backups. Stay connected with unlimited, corporate-grade **high-speed Wi-Fi** configured inside your en-suite space.
                            </p>
                        </div>

                        <!-- Kitchen & Laundry block -->
                        <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-5 shadow-sm" style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                            <h3 class="text-xs font-bold text-blue-900 dark:text-cyan-400 uppercase tracking-wider mb-2 flex items-center space-x-1.5">
                                <svg class="w-4 h-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
                                <span>Kitchen & Laundry deck</span>
                            </h3>
                            <p class="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed font-medium">
                                Ideal for extended, family, and corporate stays. Cook home meals inside the fitted modern kitchen equipped with heat extractor, cookers, and fridge. Wash and dry garments via the automatic in-unit **washing machine & dryer**.
                            </p>
                        </div>

                        <!-- Security block -->
                        <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-5 shadow-sm" style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                            <h3 class="text-xs font-bold text-red-500 uppercase tracking-wider mb-2 flex items-center space-x-1.5">
                                <svg class="w-4 h-4 text-red-500" 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>Keyless & Smart Security</span>
                            </h3>
                            <p class="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed font-medium">
                                Features keyless smart locks, CCTV perimeter coverage, visitor verification, and intercom doorbells. We are approximately **3 minutes from Memabod Police Station** (subject to traffic, no absolute guarantees).
                            </p>
                        </div>

                        <!-- Entertainment block -->
                        <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-5 shadow-sm" style="border-radius: 0.1rem; box-shadow: var(--shadow-line);">
                            <h3 class="text-xs font-bold text-blue-900 dark:text-cyan-400 uppercase tracking-wider mb-2 flex items-center space-x-1.5">
                                <svg class="w-4 h-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 5v2m0 4v2m0 4v2M4 5h16a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1z" /></svg>
                                <span>Premium Entertainment Deck</span>
                            </h3>
                            <p class="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed font-medium">
                                @if($apartment->bedrooms_count >= 3)
                                Includes in-suite **PlayStation 5 Console** with games and access to a professional slate-bed **Snooker board** deck for corporate recreation and luxury relaxation.
                                @else
                                Relax with en-suite **Ultra HD Smart TVs** loaded with streaming services, premium workspaces, and private balconies in a luxury serviced setting.
                                @endif
                            </p>
                        </div>
                    </div>

                    <!-- Policies Accordion List -->
                    <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-6 shadow-sm"
                         style="border-radius: 0.1rem; box-shadow: var(--shadow-line);"
                         x-data="{ activePolicy: null }">
                        <h2 class="mb-6">Stay Policies & Rules</h2>
                        
                        <div class="space-y-3">
                            @foreach($policies as $policy)
                            <div class="border border-slate-100 dark:border-slate-800" style="border-radius: 0.1rem;">
                                <button @click="activePolicy = (activePolicy === '{{ $policy->slug }}' ? null : '{{ $policy->slug }}')"
                                        class="w-full flex justify-between items-center px-4 py-3 bg-slate-50 dark:bg-slate-900/60 text-left font-serif font-bold text-xs uppercase tracking-wider transition-colors duration-200 hover:bg-slate-100 dark:hover:bg-slate-800">
                                    <span class="text-slate-900 dark:text-white">{{ $policy->title }}</span>
                                    <svg class="w-4 h-4 transition-transform duration-300" :class="{'rotate-180': activePolicy === '{{ $policy->slug }}'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                                </button>
                                <div x-show="activePolicy === '{{ $policy->slug }}'" 
                                     x-transition:enter="transition ease-out duration-200"
                                     class="p-4 text-xs font-semibold leading-relaxed text-slate-500 dark:text-slate-400 border-t border-slate-100 dark:border-slate-800"
                                     style="display: none;">
                                    {!! nl2br(e($policy->content)) !!}
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- FAQs Section -->
                    <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-6 shadow-sm"
                         style="border-radius: 0.1rem; box-shadow: var(--shadow-line);"
                         x-data="{ activeFaq: null }">
                        <h2 class="mb-6">Frequently Asked Questions</h2>
                        
                        <div class="space-y-3">
                            @foreach($faqs as $faq)
                            <div class="border border-slate-100 dark:border-slate-800" style="border-radius: 0.1rem;">
                                <button @click="activeFaq = (activeFaq === {{ $faq->id }} ? null : {{ $faq->id }})"
                                        class="w-full flex justify-between items-center px-4 py-3.5 bg-slate-50 dark:bg-slate-900/60 text-left font-serif font-bold text-xs transition-colors duration-200 hover:bg-slate-100 dark:hover:bg-slate-800">
                                    <span class="text-slate-900 dark:text-white">{{ $faq->question }}</span>
                                    <svg class="w-4 h-4 transition-transform duration-300" :class="{'rotate-180': activeFaq === {{ $faq->id }}}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
                                </button>
                                <div x-show="activeFaq === {{ $faq->id }}" 
                                     x-transition:enter="transition ease-out duration-200"
                                     class="p-4 text-xs font-semibold leading-relaxed text-slate-500 dark:text-slate-400 border-t border-slate-100 dark:border-slate-800"
                                     style="display: none;">
                                    {{ $faq->answer }}
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>

                </div>

                <!-- Right 1/3 Column: Sticky Availability Widget -->
                <div>
                    <div class="bg-white dark:bg-slate-900 border border-[#DDE6F3] dark:border-slate-800 p-6 shadow-sm sticky top-24 space-y-6"
                         style="border-radius: 0.1rem; box-shadow: var(--shadow-line);"
                         x-data="{
                             checkIn: '',
                             checkOut: '',
                             guests: 2,
                             errorMessage: '',
                             today: new Date().toISOString().split('T')[0],
                             
                             get minCheckOut() {
                                 if (!this.checkIn) return this.today;
                                 const d = new Date(this.checkIn);
                                 d.setDate(d.getDate() + 1);
                                 return d.toISOString().split('T')[0];
                             },
                             
                             validate() {
                                 if (!this.checkIn || !this.checkOut) {
                                     this.errorMessage = 'Please choose check-in and check-out dates.';
                                     return false;
                                 }
                                 if (this.checkIn >= this.checkOut) {
                                     this.errorMessage = 'Check-out must be after check-in date.';
                                     return false;
                                 }
                                 this.errorMessage = '';
                                 return true;
                             },
                             
                             submitBooking() {
                                 if (!this.validate()) return;
                                 
                                 // Redirect to booking page with parameters
                                 const params = new URLSearchParams({
                                     type: '{{ $apartment->slug }}',
                                     check_in: this.checkIn,
                                     check_out: this.checkOut,
                                     guests: this.guests
                                 });
                                 window.location.href = '{{ url('/booking') }}?' + params.toString();
                             }
                         }">
                        
                        <div>
                            <h3 class="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1">Nightly Price</h3>
                            <div class="flex items-baseline">
                                <span class="text-lg font-serif font-bold text-slate-900 dark:text-white">₦{{ number_format($apartment->base_price_nightly) }}</span>
                                <span class="text-[10px] text-slate-400 ml-1 font-bold">/ night</span>
                            </div>
                        </div>

                        <!-- Check Availability Widget Form -->
                        <form @submit.prevent="submitBooking()" class="space-y-4 text-xs font-semibold text-left">
                            
                            <!-- Error block -->
                            <div x-show="errorMessage" class="p-3 bg-red-500/10 border border-red-500/30 text-red-500 text-[11px] rounded" style="display: none;">
                                <span x-text="errorMessage"></span>
                            </div>

                            <!-- Check In -->
                            <div>
                                <label for="widget_check_in" class="block text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1.5">Check In</label>
                                <input type="date" id="widget_check_in" x-model="checkIn" :min="today" @change="if(checkIn && checkOut && checkOut <= checkIn) { checkOut = minCheckOut }"
                                       class="w-full bg-slate-50 dark:bg-slate-800 border border-[#DDE6F3] dark:border-slate-700 rounded px-3 py-2 text-slate-800 dark:text-white focus:outline-none focus:border-[#2B3192]">
                            </div>

                            <!-- Check Out -->
                            <div>
                                <label for="widget_check_out" class="block text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1.5">Check Out</label>
                                <input type="date" id="widget_check_out" x-model="checkOut" :min="minCheckOut"
                                       class="w-full bg-slate-50 dark:bg-slate-800 border border-[#DDE6F3] dark:border-slate-700 rounded px-3 py-2 text-slate-800 dark:text-white focus:outline-none focus:border-[#2B3192]">
                            </div>

                            <!-- Guests Dropdown -->
                            <div>
                                <label for="widget_guests" class="block text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1.5">Guests</label>
                                <select id="widget_guests" x-model="guests"
                                        class="w-full bg-slate-50 dark:bg-slate-800 border border-[#DDE6F3] dark:border-slate-700 rounded px-3 py-2 text-slate-800 dark:text-white focus:outline-none focus:border-[#2B3192]">
                                    <option value="1">1 Guest</option>
                                    <option value="2">2 Guests</option>
                                    <option value="3">3 Guests</option>
                                    @if($apartment->bedrooms_count >= 2)
                                    <option value="4">4 Guests</option>
                                    @endif
                                    @if($apartment->bedrooms_count >= 3)
                                    <option value="6">6 Guests</option>
                                    @endif
                                    @if($apartment->bedrooms_count >= 4)
                                    <option value="8">8 Guests</option>
                                    @endif
                                </select>
                            </div>

                            <!-- Extras list info -->
                            <div class="pt-2 text-[10px] text-slate-400 font-semibold space-y-1.5 border-t border-slate-100 dark:border-slate-800">
                                <div class="flex justify-between"><span>Airport Pickup</span><span class="text-amber-500 font-bold">On Request</span></div>
                                <div class="flex justify-between"><span>Security Deposit</span><span class="text-amber-500 font-bold">₦100,000</span></div>
                                <div class="flex justify-between"><span>Cleaning & Utility</span><span class="text-green-600 font-bold">Included</span></div>
                            </div>

                            <!-- Action button -->
                            <button type="submit" class="btn-pill btn-primary w-full py-3.5 uppercase tracking-wider font-bold text-xs mt-4">
                                Book Selection
                            </button>

                            <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hello%20Kevron%20Apartments%2C%20I%20am%20interested%20in%20the%20{{ urlencode($apartment->name) }}.%20Please%20confirm%20rates."
                               target="_blank"
                               class="btn-pill btn-outline-gold w-full py-3 text-center uppercase tracking-wider font-bold text-[10px] flex items-center justify-center space-x-1">
                                <svg class="w-3.5 h-3.5 fill-current text-green-500" viewBox="0 0 24 24"><path d="M12.012 2c-5.506 0-9.989 4.478-9.99 9.984a9.96 9.96 0 0 0 1.333 4.993L2 22l5.13-1.347a9.93 9.93 0 0 0 4.887 1.277h.005c5.505 0 9.988-4.478 9.99-9.985a9.98 9.98 0 0 0-3.003-7.062A9.94 9.94 0 0 0 12.012 2zm5.727 14.072c-.252.71-1.463 1.38-2.01 1.437-.478.05-.98.077-1.564-.108-.585-.184-1.274-.423-2.18-.813-3.87-1.66-6.38-5.63-6.574-5.89-.193-.26-1.554-2.064-1.554-3.935 0-1.87 1.002-2.79 1.36-3.167.358-.377.785-.472 1.047-.472.261 0 .522.007.75.014.24.007.48.014.734.606.262.61.9 2.183.978 2.345.078.162.13.35.023.555-.107.206-.16.335-.32.518-.162.183-.34.407-.484.547-.162.158-.33.33-.14.654.19.324.846 1.39 1.812 2.25 1.246 1.108 2.298 1.45 2.628 1.614.33.163.522.137.718-.088.196-.225.845-.98.107-1.244-.13-.047-.784-.33-.88-.37-.098-.04-.162-.06-.23-.01-.067.045-.262.33-.32.4-.06.07-.12.08-.25.03-.13-.05-.55-.2-.95-.56-.312-.278-.523-.623-.584-.728-.06-.105-.006-.162.046-.214.047-.047.105-.12.158-.182.053-.06.072-.105.108-.176.036-.07.018-.13-.009-.183-.027-.054-.262-.634-.36-.87-.095-.23-.192-.2-.263-.203h-.225c-.078 0-.203.03-.31.147-.107.118-.41.402-.41.98s.42 1.14.478 1.22c.058.077.828 1.265 2.006 1.772.28.12.5.19.67.24.28.09.537.078.74.048.225-.03.785-.32.895-.63.11-.31.11-.577.08-.63-.03-.053-.11-.088-.23-.143z"/></svg>
                                <span>WhatsApp Booking Desk</span>
                            </a>

                        </form>

                    </div>
                </div>

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

    <!-- Explore Similar Apartments Section -->
    <section class="section-soft-blue py-16 border-t border-[#DDE6F3] dark:border-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="mb-8">Explore Other Luxury Suites</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                @foreach($similar->take(3) as $sim)
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"
                     style="border-radius: 0.1rem;">
                    
                    <div class="h-48 bg-slate-900 overflow-hidden">
                        @php
                            $simImg = 'pictures/bedroom.jpg';
                            if ($sim->mediaAssets->isNotEmpty()) {
                                $simImg = $sim->mediaAssets->firstWhere('pivot.order_index', 1)->file_path ?? $sim->mediaAssets->first()->file_path;
                            }
                        @endphp
                        <img src="{{ asset($simImg) }}" alt="{{ $sim->name }}" loading="lazy" class="w-full h-full object-cover opacity-90 hover:scale-105 transition-transform duration-500">
                    </div>
                    
                    <div class="p-5 text-left text-xs font-semibold">
                        <span class="inline-block text-[9px] uppercase tracking-wider text-amber-500 font-bold mb-1">{{ $sim->best_for }}</span>
                        <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-1.5">{{ $sim->name }}</h3>
                        <div class="text-[11px] text-amber-500 font-bold mb-4">₦{{ number_format($sim->base_price_nightly) }} / Night</div>
                        
                        <div class="flex space-x-2">
                            <a href="{{ url('/apartments/' . $sim->slug) }}" class="btn-pill btn-outline-gold text-[10px] py-2 flex-1 text-center font-bold">
                                View Details
                            </a>
                            <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hello%20Kevron%20Apartments%2C%20I%20am%20interested%20in%20booking%20the%20{{ urlencode($sim->name) }}."
                               target="_blank"
                               class="btn-pill btn-primary text-[10px] py-2 px-3 flex items-center justify-center"
                               aria-label="Book on WhatsApp">
                                <svg class="w-4 h-4 fill-current text-white" viewBox="0 0 24 24"><path d="M12.012 2c-5.506 0-9.989 4.478-9.99 9.984a9.96 9.96 0 0 0 1.333 4.993L2 22l5.13-1.347a9.93 9.93 0 0 0 4.887 1.277h.005c5.505 0 9.988-4.478 9.99-9.985a9.98 9.98 0 0 0-3.003-7.062A9.94 9.94 0 0 0 12.012 2zm5.727 14.072c-.252.71-1.463 1.38-2.01 1.437-.478.05-.98.077-1.564-.108-.585-.184-1.274-.423-2.18-.813-3.87-1.66-6.38-5.63-6.574-5.89-.193-.26-1.554-2.064-1.554-3.935 0-1.87 1.002-2.79 1.36-3.167.358-.377.785-.472 1.047-.472.261 0 .522.007.75.014.24.007.48.014.734.606.262.61.9 2.183.978 2.345.078.162.13.35.023.555-.107.206-.16.335-.32.518-.162.183-.34.407-.484.547-.162.158-.33.33-.14.654.19.324.846 1.39 1.812 2.25 1.246 1.108 2.298 1.45 2.628 1.614.33.163.522.137.718-.088.196-.225.845-.98.107-1.244-.13-.047-.784-.33-.88-.37-.098-.04-.162-.06-.23-.01-.067.045-.262.33-.32.4-.06.07-.12.08-.25.03-.13-.05-.55-.2-.95-.56-.312-.278-.523-.623-.584-.728-.06-.105-.006-.162.046-.214.047-.047.105-.12.158-.182.053-.06.072-.105.108-.176.036-.07.018-.13-.009-.183-.027-.054-.262-.634-.36-.87-.095-.23-.192-.2-.263-.203h-.225c-.078 0-.203.03-.31.147-.107.118-.41.402-.41.98s.42 1.14.478 1.22c.058.077.828 1.265 2.006 1.772.28.12.5.19.67.24.28.09.537.078.74.048.225-.03.785-.32.895-.63.11-.31.11-.577.08-.63-.03-.053-.11-.088-.23-.143z"/></svg>
                            </a>
                        </div>
                    </div>
                    
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Final CTA Section -->
    <section class="section-gradient-cta py-16 text-center text-white relative overflow-hidden">
        <div class="absolute inset-0 bg-[#080D2B]/90"></div>
        <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
            <h2 class="text-white font-serif" style="font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                Ready to Experience the {{ $apartment->name }}?
            </h2>
            <p class="text-xs text-slate-300 max-w-md mx-auto leading-relaxed">
                Book your executive stay directly today and secure dynamic access to premium 24h power, high-speed internet, and customized services.
            </p>
            <div class="flex flex-col sm:flex-row justify-center items-center gap-4 pt-2">
                <a href="#booking-section" class="btn-pill btn-primary px-8 py-3 text-xs font-bold uppercase tracking-wider min-w-[160px]" style="background-color: var(--color-accent-gold); color: var(--color-primary-dark);">
                    Book Now
                </a>
                <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hello%20Kevron%20Apartments%2C%20I%20am%20ready%20to%20book%20the%20{{ urlencode($apartment->name) }}."
                   target="_blank"
                   class="btn-pill btn-outline-gold px-8 py-3 text-xs font-bold uppercase tracking-wider min-w-[160px] flex items-center justify-center space-x-1.5">
                    <svg class="w-4 h-4 fill-current text-green-500" viewBox="0 0 24 24"><path d="M12.012 2c-5.506 0-9.989 4.478-9.99 9.984a9.96 9.96 0 0 0 1.333 4.993L2 22l5.13-1.347a9.93 9.93 0 0 0 4.887 1.277h.005c5.505 0 9.988-4.478 9.99-9.985a9.98 9.98 0 0 0-3.003-7.062A9.94 9.94 0 0 0 12.012 2zm5.727 14.072c-.252.71-1.463 1.38-2.01 1.437-.478.05-.98.077-1.564-.108-.585-.184-1.274-.423-2.18-.813-3.87-1.66-6.38-5.63-6.574-5.89-.193-.26-1.554-2.064-1.554-3.935 0-1.87 1.002-2.79 1.36-3.167.358-.377.785-.472 1.047-.472.261 0 .522.007.75.014.24.007.48.014.734.606.262.61.9 2.183.978 2.345.078.162.13.35.023.555-.107.206-.16.335-.32.518-.162.183-.34.407-.484.547-.162.158-.33.33-.14.654.19.324.846 1.39 1.812 2.25 1.246 1.108 2.298 1.45 2.628 1.614.33.163.522.137.718-.088.196-.225.845-.98.107-1.244-.13-.047-.784-.33-.88-.37-.098-.04-.162-.06-.23-.01-.067.045-.262.33-.32.4-.06.07-.12.08-.25.03-.13-.05-.55-.2-.95-.56-.312-.278-.523-.623-.584-.728-.06-.105-.006-.162.046-.214.047-.047.105-.12.158-.182.053-.06.072-.105.108-.176.036-.07.018-.13-.009-.183-.027-.054-.262-.634-.36-.87-.095-.23-.192-.2-.263-.203h-.225c-.078 0-.203.03-.31.147-.107.118-.41.402-.41.98s.42 1.14.478 1.22c.058.077.828 1.265 2.006 1.772.28.12.5.19.67.24.28.09.537.078.74.048.225-.03.785-.32.895-.63.11-.31.11-.577.08-.63-.03-.053-.11-.088-.23-.143z"/></svg>
                    <span>Inquire on WhatsApp</span>
                </a>
            </div>
        </div>
    </section>

</main>
@endsection

@push('scripts')
<script type="application/ld+json">
{!! json_encode([
  '@@context' => 'https://schema.org',
  '@@type' => 'Accommodation',
  'name' => $apartment->name,
  'description' => $apartment->description,
  'image' => asset($heroImage),
  'address' => [
    '@@type' => 'PostalAddress',
    'streetAddress' => '7B Regina Coker Street, Adeniyi Jones, Ikeja',
    'addressLocality' => 'Ikeja',
    'addressRegion' => 'Lagos',
    'addressCountry' => 'NG'
  ],
  'offers' => [
    '@@type' => 'Offer',
    'price' => $apartment->base_price_nightly,
    'priceCurrency' => 'NGN',
    'availability' => 'https://schema.org/InStock',
    'validFrom' => now()->format('Y-m-d')
  ]
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
</script>
@if(isset($schemas))
    @foreach($schemas as $sch)
        <script type="application/ld+json">
        {!! json_encode($sch->schema_json, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
        </script>
    @endforeach
@endif

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

            const 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 }));
                }
            });

            // Fetch booked dates for this apartment
            const apartmentTypeId = {{ $apartment->id }};
            const url = "{{ route('api.apartments.booked-dates', ['id' => '__ID__']) }}".replace('__ID__', apartmentTypeId);
            fetch(url)
                .then(res => res.json())
                .then(data => {
                    const bookedDates = data.booked_dates || [];
                    checkInPicker.set('disable', bookedDates);
                    checkOutPicker.set('disable', bookedDates);
                })
                .catch(err => console.error('Error fetching booked dates:', err));
        }
    });
</script>
@endpush