@extends('layouts.app')

@section('title', $seo->meta_title ?? 'Kevron Suites and Apartments Locations | Luxury Serviced Apartments')
@section('meta_description', $seo->meta_description ?? 'Explore Kevron Suites and Apartments locations, starting with Adeniyi Jones, Ikeja, Lagos. View luxury 1, 2, 3 and 4 bedroom serviced apartments with 24-hour power, Wi-Fi, smart security and airport access.')

@push('scripts')
@if($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="section-soft-blue py-16 relative overflow-hidden">
    <div class="absolute inset-0 opacity-10 bg-radial-at-t from-[#2B3192] to-transparent"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            <div class="lg:col-span-7 space-y-6">
                <span class="text-xs uppercase tracking-[0.25em] text-[#D6A84F] font-bold block">Exclusive Directory</span>
                <h1 class="text-slate-900 dark:text-white leading-tight">Kevron Suites and Apartments Locations</h1>
                <p class="text-xs sm:text-sm text-slate-500 dark:text-slate-400 max-w-2xl leading-relaxed">
                    Explore Kevron Suites and Apartments locations, starting with our luxury serviced apartments in Adeniyi Jones, Ikeja, Lagos. Each location is designed for comfort, privacy, smart living, airport access and premium short or extended stays.
                </p>
                
                <!-- Action Buttons -->
                <div class="flex flex-wrap gap-4 pt-2">
                    <a href="{{ url('/locations/ikeja-adeniyi-jones-lagos') }}" class="btn-pill btn-primary">
                        View Ikeja Location
                    </a>
                    <a href="{{ url('/booking') }}" class="btn-pill btn-outline-gold">
                        Check Availability
                    </a>
                    <a href="{{ url('/contact') }}" class="btn-pill border border-slate-300 dark:border-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 text-center font-bold">
                        Contact Us
                    </a>
                </div>

                <!-- Trust Chips -->
                <div class="pt-6 border-t border-slate-200 dark:border-slate-800/80">
                    <div class="flex flex-wrap gap-x-6 gap-y-3 text-xs font-semibold text-slate-600 dark:text-slate-400">
                        <span class="flex items-center gap-1.5">
                            <svg class="w-4 h-4 text-[#2B3192]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            Ikeja, Lagos
                        </span>
                        <span class="flex items-center gap-1.5">
                            <svg class="w-4 h-4 text-[#D6A84F]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            From ₦150,000/night
                        </span>
                        <span class="flex items-center gap-1.5">
                            <svg class="w-4 h-4 text-[#1FADEA]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                            1–4 Bedroom Apartments
                        </span>
                        <span class="flex items-center gap-1.5">
                            <svg class="w-4 h-4 text-[#16A34A]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                            Smart Security
                        </span>
                    </div>
                </div>
            </div>
            
            <!-- Hero Visual: Clean Map Graphic Showcase -->
            <div class="lg:col-span-5 relative flex justify-center items-center">
                <div class="relative w-72 h-80 sm:w-80 sm:h-96 shadow-2xl border border-slate-200/50 dark:border-slate-800/80 bg-white dark:bg-slate-900 p-2.5 flex flex-col justify-between" style="border-radius: 0.1rem;">
                    <div class="relative flex-grow overflow-hidden" style="border-radius: 0.1rem;">
                        <img src="{{ asset('pictures/living-room.jpg') }}" alt="Kevron Branch Directory" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-slate-950/20"></div>
                        <div class="absolute top-3 left-3 bg-[#2B3192]/95 text-white text-[9px] font-bold uppercase tracking-wider px-2.5 py-1" style="border-radius: 0.1rem;">
                            Lagos Mainland
                        </div>
                    </div>
                    <div class="pt-3 px-1 flex justify-between items-center text-xs">
                        <span class="font-bold text-slate-800 dark:text-white uppercase tracking-wider" style="font-family: var(--font-heading);">Ikeja Branch Active</span>
                        <span class="text-xs font-bold text-[#D6A84F]">₦150k+</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Location Search and Filter Bar -->
<section class="py-6 section-white border-b border-slate-100 dark:border-slate-900" x-data="{
    city: '',
    type: '',
    budget: '',
    reset() {
        this.city = '';
        this.type = '';
        this.budget = '';
    }
}">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 shadow-sm" style="border-radius: 0.1rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
            <div class="flex flex-col lg:flex-row gap-4 items-center">
                <!-- Dropdown 1: City/State -->
                <div class="w-full lg:w-1/4">
                    <label class="block text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">City / State</label>
                    <select x-model="city" class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 p-2.5 text-xs text-slate-700 dark:text-slate-300 font-semibold focus:outline-none focus:border-[#2B3192]" style="border-radius: 0.1rem;">
                        <option value="">All Cities</option>
                        <option value="Ikeja">Ikeja, Lagos</option>
                        <option value="Lekki" disabled>Lekki Phase 1 (Coming Soon)</option>
                    </select>
                </div>

                <!-- Dropdown 2: Apartment Type -->
                <div class="w-full lg:w-1/4">
                    <label class="block text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">Apartment Type</label>
                    <select x-model="type" class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 p-2.5 text-xs text-slate-700 dark:text-slate-300 font-semibold focus:outline-none focus:border-[#2B3192]" style="border-radius: 0.1rem;">
                        <option value="">All Apartment Types</option>
                        <option value="1">1 Bedroom Master Suite</option>
                        <option value="2">2 Bedroom Luxury Apartment</option>
                        <option value="3">3 Bedroom Luxury Apartment</option>
                        <option value="4">4 Bedroom Luxury Apartment</option>
                    </select>
                </div>

                <!-- Dropdown 3: Budget Range -->
                <div class="w-full lg:w-1/4">
                    <label class="block text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">Nightly Budget</label>
                    <select x-model="budget" class="w-full bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 p-2.5 text-xs text-slate-700 dark:text-slate-300 font-semibold focus:outline-none focus:border-[#2B3192]" style="border-radius: 0.1rem;">
                        <option value="">All Budgets</option>
                        <option value="150">₦150,000 - ₦200,000</option>
                        <option value="250">₦250,000 - ₦300,000</option>
                    </select>
                </div>

                <!-- Active Indicator / Action Button -->
                <div class="w-full lg:w-1/4 flex flex-col justify-end h-full">
                    <label class="hidden lg:block text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-1.5">Reset</label>
                    <button type="button" @click="reset" class="w-full btn-pill border border-slate-200 dark:border-slate-800 py-2.5 text-xs font-semibold text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 text-center" style="border-radius: 0.1rem;">
                        Clear Filters
                    </button>
                </div>
            </div>
            
            <!-- Launch Notification Status -->
            <div class="mt-4 pt-3 border-t border-slate-200/60 dark:border-slate-800/80 flex items-center justify-between text-[11px] font-bold text-slate-500 dark:text-slate-400">
                <span class="flex items-center gap-1.5">
                    <span class="w-2 h-2 rounded-full bg-[#16A34A] animate-pulse"></span>
                    Showing our launch location in Ikeja, Lagos.
                </span>
                <span x-show="city || type || budget" class="text-[#D6A84F]" x-transition>Active filters applied</span>
            </div>
        </div>
    </div>
</section>

<!-- Dynamic Location Cards Grid -->
<section 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="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            @foreach($locations as $loc)
            @php
                $img = 'pictures/living-room.jpg';
                // Fallback details if database properties are empty
                $proximityText = 'Approximately 8 minutes to MM1/MM2 local airports and 15 minutes to MMIA international terminal, Adeniyi Jones, Ikeja Lagos.';
            @endphp
            <div class="card-luxury bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 flex flex-col hover:shadow-lg transition-all duration-300" style="border-radius: 0.1rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
                <div class="h-64 relative overflow-hidden" style="border-radius: 0.1rem;">
                    <img src="{{ asset($img) }}" alt="{{ $loc->name }}" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700">
                    <div class="absolute top-4 left-4 bg-[#2B3192] text-white font-bold text-[9px] uppercase tracking-wider px-3 py-1" style="border-radius: 0.1rem;">
                        Active Branch
                    </div>
                    <div class="absolute bottom-4 right-4 bg-slate-900/90 text-white font-bold text-[10px] px-3 py-1" style="border-radius: 0.1rem;">
                        From ₦150,000 / night
                    </div>
                </div>
                <div class="p-6 flex-grow flex flex-col justify-between space-y-4">
                    <div class="space-y-2">
                        <div class="flex justify-between items-center gap-2 border-b border-slate-100 dark:border-slate-800 pb-2">
                            <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider" style="font-family: var(--font-heading);">
                                {{ $loc->name }}
                            </h3>
                        </div>
                        
                        <p class="text-[11px] font-bold text-slate-700 dark:text-slate-300 leading-normal flex items-start gap-1">
                            <svg class="w-4 h-4 text-[#D6A84F] flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            {{ $loc->address }}
                        </p>
                        
                        <p class="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed pt-2 font-medium">
                            {{ $loc->description }}
                        </p>
                        
                        <!-- Proximity bullet points -->
                        <div class="pt-3 space-y-1.5 text-[10px] font-bold text-slate-600 dark:text-slate-400">
                            <span class="flex items-center gap-1.5">
                                <svg class="w-3.5 h-3.5 text-[#2B3192]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                                </svg>
                                Approx. 8 mins to local airport MM1 / MM2
                            </span>
                            <span class="flex items-center gap-1.5">
                                <svg class="w-3.5 h-3.5 text-[#1FADEA]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                                </svg>
                                Approx. 15 mins to international airport (MMIA)
                            </span>
                        </div>
                    </div>

                    <div class="pt-4 border-t border-slate-100 dark:border-slate-800/80">
                        <div class="grid grid-cols-2 gap-3 mb-2">
                            <a href="{{ url('/locations/' . $loc->slug) }}" class="btn-pill border border-slate-200 dark:border-slate-800 py-2.5 text-[10px] font-bold text-slate-700 dark:text-slate-300 text-center">
                                View Details & Guide
                            </a>
                            <a href="{{ url('/booking?location=' . $loc->slug) }}" class="btn-pill btn-primary py-2.5 text-[10px] font-bold text-center">
                                Book Now
                            </a>
                        </div>
                        <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hello%20Kevron%20Suites,%20I%20am%20interested%20in%20booking%20the%20{{ urlencode($loc->name) }}%20location.%20Please%20confirm%20availability." target="_blank" rel="noopener noreferrer" class="btn-pill bg-[#16A34A] text-white hover:bg-green-700 py-2 text-[10px] font-bold text-center flex items-center justify-center gap-1">
                            <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 Enquiry
                        </a>
                    </div>
                </div>
            </div>
            @endforeach

            <!-- Coming Soon Placeholder Location Card (For scalable directory support) -->
            <div class="card-luxury bg-white dark:bg-slate-900 border border-dashed border-slate-200 dark:border-slate-800 p-6 flex flex-col justify-between items-center text-center relative opacity-80" style="border-radius: 0.1rem; min-height: 480px;">
                <div class="my-auto space-y-4">
                    <span class="inline-block bg-[#D6A84F]/10 text-[#D6A84F] text-[9px] font-bold uppercase tracking-widest px-3 py-1" style="border-radius: 0.1rem;">
                        Coming Q4 2026
                    </span>
                    <h3 class="text-sm font-bold text-slate-800 dark:text-white uppercase tracking-wider" style="font-family: var(--font-heading);">Lekki Phase 1, Lagos</h3>
                    <p class="text-[11px] text-slate-400 max-w-xs mx-auto leading-relaxed font-medium">
                        Our next premier smart living serviced apartment building is currently under development. Featuring executive waterfront penthouses, Snooker, PS5, and keyless gates inside the heart of Lekki Phase 1, Lagos.
                    </p>
                    
                    <!-- Signup for notification -->
                    <div class="pt-4 max-w-xs mx-auto">
                        <form @submit.prevent="showToastNotification('Interest logged! We will keep you updated.', 'success')" class="flex gap-2">
                            <input type="email" required placeholder="Enter email for launch updates" class="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 px-3 py-2 text-[10px] text-slate-800 dark:text-slate-300 focus:outline-none flex-grow" style="border-radius: 0.1rem;">
                            <button type="submit" class="btn-pill btn-primary text-[9px] py-1.5 px-3 whitespace-nowrap">Notify Me</button>
                        </form>
                    </div>
                </div>
                <div class="text-[10px] text-slate-400 font-bold uppercase tracking-wider border-t border-slate-100 dark:border-slate-800 w-full pt-4">Future Branch Expand</div>
            </div>
        </div>
    </div>
</section>

<!-- Map Preview Section (Leaflet dynamic on-demand map container) -->
<section class="py-16 section-soft-blue border-b border-slate-100 dark:border-slate-900" x-data="locationsMap()">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
            
            <!-- Map text side details -->
            <div class="lg:col-span-5 space-y-6">
                <span class="text-xs uppercase tracking-[0.25em] text-[#2B3192] font-bold block">Interactive Map</span>
                <h2>Find Our Properties</h2>
                <p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed">
                    Kevron serviced residences are strategically positioned in central business districts and secure residential enclaves to ensure maximum security, connectivity, and airport access.
                </p>
                
                <!-- Text-based address list for accessibility -->
                <div class="space-y-4 pt-4 border-t border-slate-200 dark:border-slate-800">
                    <div class="flex gap-3 text-xs">
                        <svg class="w-5 h-5 text-[#D6A84F] flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                        <div>
                            <span class="font-bold text-slate-800 dark:text-white block uppercase tracking-wider text-[10px]" style="font-family: var(--font-heading);">Ikeja Branch (Active)</span>
                            <span class="text-[11px] text-slate-500 dark:text-slate-400 block mt-0.5">7B Regina Coker Street, Adeniyi Jones, Ikeja, Lagos, Nigeria.</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Map View Box -->
            <div class="lg:col-span-7 h-[380px] bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 relative overflow-hidden shadow-sm" style="border-radius: 0.1rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;">
                
                <!-- Interactive Map Overlay Loader (Guarantees script loads only on request / demand) -->
                <div x-show="!mapLoaded" class="absolute inset-0 bg-slate-900/10 dark:bg-slate-950/20 backdrop-blur-xs z-20 flex flex-col items-center justify-center p-6 text-center space-y-4">
                    <span class="text-[10px] font-bold text-slate-800 dark:text-slate-300 uppercase tracking-widest block mb-2">Interactive Map Loading On Demand</span>
                    <button type="button" @click="initMap" class="btn-pill btn-primary bg-[#D6A84F] hover:bg-[#b88c3a] text-slate-950 font-bold px-6 py-2.5">
                        Load Interactive Map
                    </button>
                    <span class="text-[9px] text-slate-400 block pt-1">Downloads OpenStreetMap Leaflet scripts securely on click.</span>
                </div>

                <!-- Skeleton Loader while scripts are downloading -->
                <div x-show="loadingScripts" class="absolute inset-0 bg-slate-100 dark:bg-slate-900 z-10 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-200 dark:border-slate-800"></div>
                        <div class="absolute inset-0 rounded-full border-4 border-[#2B3192] dark:border-[#1FADEA] border-t-transparent animate-spin"></div>
                    </div>
                    <span class="text-[10px] font-bold text-slate-600 dark:text-slate-400 uppercase tracking-widest animate-pulse">Initializing map layers...</span>
                </div>

                <!-- Leaflet Mount Point -->
                <div id="location-map" class="w-full h-full z-0"></div>
            </div>

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

<!-- Why Choose Our Locations Section -->
<section 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">
            <span class="text-xs uppercase tracking-[0.25em] text-[#D6A84F] font-bold block mb-2">Branch Advantage</span>
            <h2>Why Choose Our Locations</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-sm mx-auto pt-2">
                We select premium central residential neighborhoods to support maximum corporate and holiday comforts.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- 1. Airport Access -->
            <div class="bg-slate-50 dark:bg-slate-900/50 border border-slate-200/50 dark:border-slate-800/80 p-6 hover:bg-white dark:hover:bg-slate-900 transition-all duration-300" style="border-radius: 0.1rem;">
                <div class="text-[#2B3192] w-8 h-8 mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                    </svg>
                </div>
                <h3 class="text-xs font-bold text-slate-800 dark:text-white uppercase tracking-wider mb-2">Airport Access</h3>
                <p class="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed font-medium">
                    Located only 8 minutes to local terminals (MM1/MM2) and 15 minutes to international MMIA, ensuring stress-free transits.
                </p>
            </div>

            <!-- 2. Smart Living -->
            <div class="bg-slate-50 dark:bg-slate-900/50 border border-slate-200/50 dark:border-slate-800/80 p-6 hover:bg-white dark:hover:bg-slate-900 transition-all duration-300" style="border-radius: 0.1rem;">
                <div class="text-[#1FADEA] w-8 h-8 mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                    </svg>
                </div>
                <h3 class="text-xs font-bold text-slate-800 dark:text-white uppercase tracking-wider mb-2">Smart Living</h3>
                <p class="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed font-medium">
                    Integrated keyless locks, video doorbells, smart visitor entries, and full CCTV setups coordinates total secure peace of mind.
                </p>
            </div>

            <!-- 3. Work and Connectivity -->
            <div class="bg-slate-50 dark:bg-slate-900/50 border border-slate-200/50 dark:border-slate-800/80 p-6 hover:bg-white dark:hover:bg-slate-900 transition-all duration-300" style="border-radius: 0.1rem;">
                <div class="text-[#D6A84F] w-8 h-8 mb-4">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071a10.5 10.5 0 0114.142 0M1.364 8.05a16 16 0 0121.272 0" />
                    </svg>
                </div>
                <h3 class="text-xs font-bold text-slate-800 dark:text-white uppercase tracking-wider mb-2">Work & Connectivity</h3>
                <p class="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed font-medium">
                    Stable 24-hour power supply supported by automatic generator backups alongside corporate-grade unlimited broadband Wi-Fi.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Locations FAQ Section (Manageable locations FAQs dynamically pulled) -->
<section class="py-16 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">
        <div class="text-center mb-12">
            <span class="text-xs uppercase tracking-[0.25em] text-[#D6A84F] font-bold block mb-2">Local Knowledge</span>
            <h2>Locations FAQs</h2>
            <p class="text-xs text-slate-500 dark:text-slate-400 max-w-sm mx-auto pt-2">
                Frequently asked queries regarding our property locations, transits, and multibranch expansions.
            </p>
        </div>

        <div class="space-y-4" x-data="{ activeFaq: null }">
            @foreach($faqs as $faq)
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 shadow-sm hover:bg-slate-50/50 dark:hover:bg-slate-800/20 transition-colors duration-200" style="border-radius: 0.1rem;">
                <button @click="activeFaq = activeFaq === {{ $faq->id }} ? null : {{ $faq->id }}" 
                        class="w-full flex items-center justify-between text-left focus:outline-none text-xs sm:text-sm font-bold text-slate-800 dark:text-white hover:text-[#2B3192] dark:hover:text-[#1FADEA] transition-colors">
                    <span>{{ $faq->question }}</span>
                    <svg class="w-4 h-4 transform transition-transform duration-200" :class="{'rotate-180': activeFaq === {{ $faq->id }}}" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                    </svg>
                </button>
                
                <div x-show="activeFaq === {{ $faq->id }}" 
                     x-transition:enter="transition ease-out duration-200"
                     class="mt-3 text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-medium pl-1">
                    {{ $faq->answer }}
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Final CTA Section (Dark luxury section styling) -->
<section class="section-navy py-16 relative overflow-hidden">
    <div class="absolute inset-0 opacity-10 bg-radial-at-t from-[#1FADEA] to-transparent"></div>
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10 space-y-6">
        <h2 class="text-white">Start Your Stay at Kevron Suites and Apartments, Ikeja</h2>
        <p class="text-xs sm:text-sm text-slate-300 max-w-2xl mx-auto leading-relaxed">
            Explore our launch location in Adeniyi Jones, Ikeja and choose from premium 1, 2, 3 and 4 bedroom serviced apartments.
        </p>
        
        <div class="flex flex-wrap justify-center gap-4 pt-4">
            <a href="{{ url('/locations/ikeja-adeniyi-jones-lagos') }}" class="btn-pill btn-primary bg-[#D6A84F] hover:bg-[#b88c3a] text-slate-900 hover:text-white">
                View Ikeja Location
            </a>
            <a href="{{ url('/booking') }}" class="btn-pill border border-[#D6A84F] text-white hover:bg-white hover:text-slate-900">
                Check Availability
            </a>
            <a href="{{ \App\Models\SiteSetting::getVal('whatsapp_url', 'https://wa.me/2348082131985') }}?text=Hello%20Kevron%20Suites,%20I'm%20on%20the%20Locations%20directory%20and%20would%20like%20to%20enquire%20about%20booking%20your%20serviced%20apartments%20in%20Ikeja." target="_blank" rel="noopener noreferrer" class="btn-pill bg-[#16A34A] text-white hover:bg-green-700 flex items-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>

<!-- Custom Toast Notification trigger script -->
<script>
    function showToastNotification(message, type = 'success') {
        const container = document.getElementById('toast-container');
        if (!container) return;

        const toast = document.createElement('div');
        toast.className = `p-4 mb-2 flex items-center justify-between text-xs font-bold text-white shadow-xl pointer-events-auto transform translate-y-2 opacity-0 transition-all duration-300 ${
            type === 'success' ? 'bg-[#16A34A]' : 'bg-[#DC2626]'
        }`;
        toast.style.borderRadius = '0.1rem';
        toast.style.boxShadow = 'rgba(0, 0, 0, 0.1) 0px 4px 12px';
        toast.style.minWidth = '280px';
        
        const content = document.createElement('span');
        content.innerText = message;
        toast.appendChild(content);

        const closeBtn = document.createElement('button');
        closeBtn.className = 'ml-3 focus:outline-none';
        closeBtn.innerHTML = `
            <svg class="w-4 h-4 stroke-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
        `;
        closeBtn.onclick = () => {
            toast.classList.add('opacity-0', 'translate-y-2');
            setTimeout(() => toast.remove(), 300);
        };
        toast.appendChild(closeBtn);

        container.appendChild(toast);

        // Animate in
        setTimeout(() => {
            toast.classList.remove('opacity-0', 'translate-y-2');
            toast.classList.add('opacity-100', 'translate-y-0');
        }, 10);

        // Auto remove
        setTimeout(() => {
            toast.classList.add('opacity-0', 'translate-y-2');
            setTimeout(() => toast.remove(), 300);
        }, 5000);
    }
</script>

<!-- Alpine.js dynamic on-demand map loader -->
<script>
    function locationsMap() {
        return {
            mapLoaded: false,
            loadingScripts: false,

            initMap() {
                if (this.mapLoaded || this.loadingScripts) return;
                this.loadingScripts = true;

                // 1. Inject Leaflet CSS
                const link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
                link.crossOrigin = '';
                document.head.appendChild(link);

                // 2. Inject Leaflet JS
                const script = document.createElement('script');
                script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
                script.crossOrigin = '';
                script.onload = () => {
                    this.loadingScripts = false;
                    this.mapLoaded = true;
                    this.$nextTick(() => {
                        this.renderMap();
                    });
                };
                script.onerror = () => {
                    this.loadingScripts = false;
                    showToastNotification('Failed to initialize map scripts. Check connection.', 'error');
                };
                document.head.appendChild(script);
            },

            renderMap() {
                // Set default coordinate bounds (Adeniyi Jones, Ikeja: 6.601234, 3.351234)
                const lat = 6.601234;
                const lng = 3.351234;
                
                const map = L.map('location-map', {
                    scrollWheelZoom: false
                }).setView([lat, lng], 13);

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '© OpenStreetMap contributors'
                }).addTo(map);

                // Add active branch markers
                @foreach($locations as $loc)
                L.marker([{{ $loc->latitude ?? '6.601234' }}, {{ $loc->longitude ?? '3.351234' }}])
                    .addTo(map)
                    .bindPopup(`
                        <div class="p-1 font-sans text-xs">
                            <span class="font-bold text-slate-900 block">{{ $loc->name }}</span>
                            <span class="text-slate-500 block mt-1">{{ $loc->address }}</span>
                            <a href="{{ url('/locations/' . $loc->slug) }}" class="inline-block mt-2 font-bold text-[#2B3192] hover:underline">View Location Details</a>
                        </div>
                    `);
                @endforeach
            }
        }
    }
</script>
@endsection