@extends('layouts.app')

@section('title', $seo ? $seo->meta_title : 'Long-Stay Serviced Apartments in Ikeja | Kevron Suites')
@section('meta_description', $seo ? $seo->meta_description : 'Request weekly or monthly serviced apartments at Kevron Suites and Apartments, Adeniyi Jones, Ikeja. Suitable for business travellers, relocating families, consultants, expatriates and project teams, with kitchen, laundry, Wi-Fi, 24-hour power and smart security.')

@section('content')
<div class="bg-white dark:bg-slate-950 min-h-screen text-slate-700 dark:text-slate-300 antialiased" x-data="{
    submitting: false,
    toastMessage: '',
    toastType: 'success',
    showToast: false,
    activeFaq: null,

    triggerToast(msg, type = 'success') {
        this.toastMessage = msg;
        this.toastType = type;
        this.showToast = true;
        setTimeout(() => { this.showToast = false; }, 4000);
    },

    submitEnquiryForm() {
        this.submitting = true;
        const form = document.getElementById('longstay-enquiry-form');
        const formData = new FormData(form);

        fetch('{{ route('long-stay.enquiry') }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            this.submitting = false;
            if (data.success) {
                this.triggerToast(data.message, 'success');
                form.reset();
            } else {
                this.triggerToast('Validation failed. Please verify required fields and file size limits.', 'error');
            }
        })
        .catch(err => {
            this.submitting = false;
            this.triggerToast('An error occurred during submission. Please check connections.', 'error');
        });
    },

    scrollToForm() {
        document.getElementById('longstay-form-section').scrollIntoView({ behavior: 'smooth', block: 'start' });
    },

    logTelemetry(action, key) {
        fetch('{{ route('long-stay.log') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ event_type: action, event_key: key })
        });
    }
}">

    <!-- Telemetry Log Hook -->
    <div x-init="logTelemetry('page_view', 'long_stay_load')"></div>

    <!-- 1. HERO SECTION -->
    <header class="relative bg-slate-900 text-white overflow-hidden py-16 lg:py-24">
        <div class="absolute inset-0 opacity-15">
            <img src="{{ asset('pictures/master-bedroom.jpg') }}" alt="Relocation family serviced apartment bedroom" class="w-full h-full object-cover">
        </div>
        <div class="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-900 to-transparent"></div>
        
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
                <div class="lg:col-span-8 space-y-6">
                    <span class="inline-flex items-center space-x-2 bg-amber-500/20 text-amber-400 text-xs px-3 py-1 rounded-full font-bold uppercase tracking-wider">
                        <span class="w-2 h-2 rounded-full bg-amber-500 animate-ping"></span>
                        <span>Extended & Relocation Serviced Stays</span>
                    </span>
                    
                    <h1 class="text-white font-normal leading-tight tracking-tight" style="font-family: 'Marcellus', serif; font-size: clamp(1.45rem, 4vw, 1.8rem);">
                        Long-Stay Serviced Apartments in Ikeja, Lagos
                    </h1>
                    
                    <p class="text-slate-300 leading-relaxed font-medium" style="font-family: 'Inter', sans-serif; font-size: 0.875rem;">
                        Enjoy weekly, monthly or extended accommodation at Kevron Suites and Apartments, Adeniyi Jones, Ikeja, with luxury 1, 2, 3 and 4 bedroom options, 24-hour power, high-speed Wi-Fi, modern kitchens, laundry facilities, smart security and airport access.
                    </p>
                    
                    <!-- Trust Chips -->
                    <div class="flex flex-wrap gap-2 pt-2">
                        <span class="inline-flex items-center space-x-1.5 bg-white/10 text-white text-xs px-3 py-1.5 rounded-[0.1rem] border border-white/5 font-semibold">
                            <span class="text-amber-400">●</span> Weekly/monthly stays
                        </span>
                        <span class="inline-flex items-center space-x-1.5 bg-white/10 text-white text-xs px-3 py-1.5 rounded-[0.1rem] border border-white/5 font-semibold">
                            <span class="text-amber-400">●</span> 1–4 bedroom options
                        </span>
                        <span class="inline-flex items-center space-x-1.5 bg-white/10 text-white text-xs px-3 py-1.5 rounded-[0.1rem] border border-white/5 font-semibold">
                            <span class="text-amber-400">●</span> Kitchen and laundry
                        </span>
                        <span class="inline-flex items-center space-x-1.5 bg-white/10 text-white text-xs px-3 py-1.5 rounded-[0.1rem] border border-white/5 font-semibold">
                            <span class="text-amber-400">●</span> Wi-Fi
                        </span>
                        <span class="inline-flex items-center space-x-1.5 bg-white/10 text-white text-xs px-3 py-1.5 rounded-[0.1rem] border border-white/5 font-semibold">
                            <span class="text-amber-400">●</span> Smart security
                        </span>
                    </div>

                    <!-- CTAs -->
                    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 pt-4">
                        <button class="btn-pill btn-primary justify-center sm:justify-start" @click="scrollToForm(); logTelemetry('click_cta', 'hero_request_quote');">
                            Request Long-Stay Quote
                        </button>
                        <a href="#available-suites" class="btn-pill btn-outline-gold justify-center sm:justify-start !border-white !text-white hover:!bg-white hover:!text-slate-900 py-3 px-6 text-center text-xs uppercase tracking-wider font-bold" @click="logTelemetry('click_cta', 'hero_view_options')">
                            View Apartment Options
                        </a>
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985')) }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20we%20are%20inquiring%20about%20booking%20weekly%20or%20monthly%20extended%20accommodations%20at%20Adeniyi%20Jones%2C%20Ikeja." 
                           target="_blank" 
                           class="inline-flex items-center justify-center space-x-2 text-xs font-semibold text-amber-400 hover:text-amber-300 transition-colors py-2" 
                           @click="logTelemetry('click_cta', 'hero_whatsapp_support')">
                            <span>WhatsApp Long-Stay Support &rarr;</span>
                        </a>
                    </div>
                </div>

                <div class="lg:col-span-4 relative mt-8 lg:mt-0 flex justify-center">
                    <div class="w-full max-w-xs aspect-square bg-slate-800 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] overflow-hidden relative">
                        <img src="{{ asset('pictures/living-room.jpg') }}" alt="Work-friendly extended stay lounge" class="w-full h-full object-cover">
                        <div class="absolute bottom-4 left-4 right-4 bg-slate-950/80 backdrop-blur-md p-4 rounded-[0.1rem] border border-white/10">
                            <span class="text-amber-400 text-xs font-bold uppercase tracking-wider block mb-1">Extended Comfort</span>
                            <span class="text-white text-xs font-medium">Spacious environments tailored for extended relocation and business stays.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 2. INTRODUCTION BLOCK -->
    <section class="py-12 bg-slate-50 dark:bg-slate-900/40">
        <div class="max-w-4xl mx-auto px-4 text-center space-y-4">
            <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block">Serviced Serviced Apartments</span>
            <p class="text-slate-800 dark:text-slate-200 leading-relaxed font-semibold" style="font-family: 'Inter', sans-serif; font-size: 0.95rem;">
                Kevron Suites and Apartments provides long-stay serviced apartments in Adeniyi Jones, Ikeja for guests who need more than a few nights. Whether you are relocating, working on a project, travelling for business, staying with family or managing a corporate accommodation need, our 1, 2, 3 and 4 bedroom apartment options provide a more private, flexible and home-style alternative to a standard hotel room.
            </p>
            <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
        </div>
    </section>

    <!-- 3. BENEFITS SECTION -->
    <section class="py-16 bg-white dark:bg-slate-950">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Long-Stay Advantages</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Why Choose Kevron for Extended Stays?
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- Benefit Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Card 1 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-300">
                    <div class="text-amber-500 text-lg mb-3">🏡</div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase mb-2">More Space & Freedom</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        Spacious lounge rooms, large master bedrooms, balconies, seat-out areas, and dedicated workspaces to enjoy room to move.
                    </p>
                </div>
                <!-- Card 2 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-300">
                    <div class="text-amber-500 text-lg mb-3">🍳</div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase mb-2">Fully-Equipped Kitchen</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        Prepare healthy home-cooked meals easily. Includes premium refrigerators, gas hobs, microwaves, blenders, and cookware.
                    </p>
                </div>
                <!-- Card 3 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-300">
                    <div class="text-amber-500 text-lg mb-3">🧺</div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase mb-2">In-Suite Laundry</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        Avoid high laundry costs. Each long-stay suite features an in-suite washing machine and clothes dryer for complete ease.
                    </p>
                </div>
                <!-- Card 4 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-300">
                    <div class="text-amber-500 text-lg mb-3">⚡</div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase mb-2">24-Hour Guaranteed Power</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        Enjoy constant cooling and internet stability. Maintained by grid electricity and dual heavy-duty backup power generators.
                    </p>
                </div>
                <!-- Card 5 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-300">
                    <div class="text-amber-500 text-lg mb-3">📶</div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase mb-2">High-Speed broadband Wi-Fi</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        Dual high-bandwidth fiber connections supply rapid downloads and stable video calling for all remote work needs.
                    </p>
                </div>
                <!-- Card 6 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-300">
                    <div class="text-amber-500 text-lg mb-3">🛡</div>
                    <h3 class="text-xs font-bold text-slate-900 dark:text-white uppercase mb-2">Smart Secure Living</h3>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        Protected by smart digital door locks, intercoms, CCTV perimeters, and 24/7 localized estate gate securities.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 4. IDEAL FOR SECTION -->
    <section class="py-16 bg-slate-50 dark:bg-slate-900/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Perfect For</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Who Stays With Us Long Term?
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- User 1 -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] flex flex-col justify-between">
                    <div>
                        <span class="text-amber-500 font-bold text-xs uppercase block mb-1">👔 Business Travellers & Consultants</span>
                        <p class="text-slate-500 dark:text-slate-400 text-xs leading-relaxed mb-4">
                            Stay productive with high-speed internet, silent spaces, and rapid office transit links.
                        </p>
                        <span class="text-[10px] text-slate-400 block mb-4">Suggested: 1 Bedroom Master Suite</span>
                    </div>
                    <button class="w-full btn-pill btn-outline-gold py-2.5 text-xs text-center justify-center font-bold" @click="scrollToForm(); logTelemetry('click_ideal_cta', 'consultant')">
                        Request Quote
                    </button>
                </div>
                <!-- User 2 -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] flex flex-col justify-between">
                    <div>
                        <span class="text-amber-500 font-bold text-xs uppercase block mb-1">🏠 Expatriates & Relocating Families</span>
                        <p class="text-slate-500 dark:text-slate-400 text-xs leading-relaxed mb-4">
                            A comfortable luxury staging pad while searching for permanent houses or coordinating corporate transfers.
                        </p>
                        <span class="text-[10px] text-slate-400 block mb-4">Suggested: 2 or 3 Bedroom Luxury</span>
                    </div>
                    <button class="w-full btn-pill btn-outline-gold py-2.5 text-xs text-center justify-center font-bold" @click="scrollToForm(); logTelemetry('click_ideal_cta', 'relocation')">
                        Request Quote
                    </button>
                </div>
                <!-- User 3 -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] flex flex-col justify-between">
                    <div>
                        <span class="text-amber-500 font-bold text-xs uppercase block mb-1">👥 Collaborative Project Teams</span>
                        <p class="text-slate-500 dark:text-slate-400 text-xs leading-relaxed mb-4">
                            Keep your engineering, audit or training groups housed inside a single secure residential block.
                        </p>
                        <span class="text-[10px] text-slate-400 block mb-4">Suggested: 3 or 4 Bedroom Luxury</span>
                    </div>
                    <button class="w-full btn-pill btn-outline-gold py-2.5 text-xs text-center justify-center font-bold" @click="scrollToForm(); logTelemetry('click_ideal_cta', 'project_team')">
                        Request Quote
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- 5. AVAILABLE APARTMENT TYPES SECTION -->
    <section id="available-suites" class="py-16 bg-white dark:bg-slate-950">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Extended Living Options</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Apartment Options & Nightly Base Rates
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- Apartment Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($apartments as $apt)
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] overflow-hidden flex flex-col justify-between">
                    <div>
                        <!-- Primary Image Fallbacks -->
                        <div class="h-44 bg-slate-200 dark:bg-slate-800 relative">
                            @if($apt->slug === '1-bedroom-master-suite-ikeja')
                            <img src="{{ asset('pictures/bedroom.jpg') }}" alt="{{ $apt->name }}" class="w-full h-full object-cover">
                            @elseif($apt->slug === '2-bedroom-luxury-apartment-ikeja')
                            <img src="{{ asset('pictures/bedroom-2.jpg') }}" alt="{{ $apt->name }}" class="w-full h-full object-cover">
                            @elseif($apt->slug === '3-bedroom-luxury-apartment-ikeja')
                            <img src="{{ asset('pictures/bedroom-3.jpg') }}" alt="{{ $apt->name }}" class="w-full h-full object-cover">
                            @else
                            <img src="{{ asset('pictures/bedroom-4.jpg') }}" alt="{{ $apt->name }}" class="w-full h-full object-cover">
                            @endif
                            <div class="absolute top-2 right-2 bg-slate-950/80 text-white text-[10px] px-2 py-0.5 rounded-[0.1rem] font-bold">
                                ₦{{ number_format($apt->base_price_nightly) }}/night
                            </div>
                        </div>

                        <div class="p-5 space-y-3">
                            <h3 class="text-xs font-bold text-slate-900 dark:text-white">{{ $apt->name }}</h3>
                            <p class="text-slate-500 dark:text-slate-400 text-[11px] leading-relaxed font-medium">
                                {{ Str::limit($apt->description, 100) }}
                            </p>
                            
                            <!-- Badges -->
                            <div class="flex flex-wrap gap-1 pt-1">
                                <span class="bg-blue-50 dark:bg-slate-800 text-blue-900 dark:text-blue-300 text-[9px] px-2 py-0.5 rounded-[0.1rem] font-semibold">
                                    {{ $apt->best_for }}
                                </span>
                                <span class="bg-amber-50 dark:bg-slate-800 text-amber-900 dark:text-amber-400 text-[9px] px-2 py-0.5 rounded-[0.1rem] font-semibold">
                                    Weekly/Monthly discount
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="p-5 border-t border-slate-100 dark:border-slate-800 space-y-2">
                        <div class="grid grid-cols-2 gap-2">
                            <button class="w-full text-center text-[10px] font-bold bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200 py-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
                                    @click="scrollToForm(); logTelemetry('click_apt_cta', 'enquire_' + '{{ $apt->slug }}');">
                                Request Quote
                            </button>
                            <a href="{{ route('booking.index') }}" class="w-full text-center text-[10px] font-bold bg-blue-950 text-white py-2 rounded-full hover:bg-amber-500 hover:text-slate-950 transition-colors"
                               @click="logTelemetry('click_apt_cta', 'book_' + '{{ $apt->slug }}')">
                                Book Now
                            </a>
                        </div>
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985')) }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20I%20would%20like%20to%20negotiate%20weekly%20or%20monthly%20serviced%20apartment%20rates%20for%20the%20{{ urlencode($apt->name) }}%20in%20Ikeja." 
                           target="_blank" 
                           class="block text-center text-[10px] font-bold text-amber-500 hover:text-amber-400 transition-colors"
                           @click="logTelemetry('click_apt_cta', 'whatsapp_' + '{{ $apt->slug }}')">
                            WhatsApp Stays Support
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- 6. WEEKLY / MONTHLY RATES SECTION -->
    <section class="py-16 bg-slate-50 dark:bg-slate-900/50">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-8 rounded-[0.1rem] shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] text-center space-y-6">
                <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block">Approved Dynamic Rates</span>
                
                @if(count($rateRules) > 0)
                <div class="overflow-x-auto">
                    <table class="w-full text-xs font-semibold text-slate-800 dark:text-slate-200 text-left border-collapse">
                        <thead>
                            <tr class="border-b border-slate-200 dark:border-slate-800 text-[10px] text-slate-400 uppercase tracking-wider">
                                <th class="py-3 px-4">Apartment Type</th>
                                <th class="py-3 px-4">Weekly Rate</th>
                                <th class="py-3 px-4">Monthly Rate</th>
                                <th class="py-3 px-4">Min Stay</th>
                                <th class="py-3 px-4">Discount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($apartments as $apt)
                                @if(isset($rateRules[$apt->id]))
                                <tr class="border-b border-slate-100 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800/40">
                                    <td class="py-3 px-4 font-bold text-slate-900 dark:text-white">{{ $apt->name }}</td>
                                    <td class="py-3 px-4 text-emerald-600 dark:text-emerald-400">
                                        {{ $rateRules[$apt->id]->weekly_rate ? '₦'.number_format($rateRules[$apt->id]->weekly_rate) : 'On request' }}
                                    </td>
                                    <td class="py-3 px-4 text-emerald-600 dark:text-emerald-400">
                                        {{ $rateRules[$apt->id]->monthly_rate ? '₦'.number_format($rateRules[$apt->id]->monthly_rate) : 'On request' }}
                                    </td>
                                    <td class="py-3 px-4">{{ $rateRules[$apt->id]->minimum_stay_days }} Days</td>
                                    <td class="py-3 px-4 text-amber-500">
                                        {{ $rateRules[$apt->id]->discount_percentage > 0 ? (float)$rateRules[$apt->id]->discount_percentage.'%' : 'On request' }}
                                    </td>
                                </tr>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <p class="text-slate-500 dark:text-slate-400 text-xs font-semibold leading-relaxed max-w-2xl mx-auto">
                    Weekly and monthly rates are available on request. Final long-stay pricing may depend on apartment type, stay duration, number of guests, season, corporate arrangement, add-on services and payment terms.
                </p>
                @endif
                
                <div class="pt-4">
                    <button class="btn-pill btn-primary" @click="scrollToForm()">Request Custom Rates Plan</button>
                </div>
            </div>
        </div>
    </section>

    <!-- 7. INCLUDED AMENITIES SECTION -->
    <section class="py-16 bg-white dark:bg-slate-950">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Ultimate Amenities</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    What is Included in Your Extended Stay?
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- Categories -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Power & internet -->
                <div class="space-y-4">
                    <h3 class="text-xs font-bold text-amber-500 uppercase tracking-wider pb-2 border-b border-slate-100 dark:border-slate-800">⚡ Power & Internet</h3>
                    <ul class="space-y-2 text-xs font-semibold text-slate-600 dark:text-slate-400">
                        <li class="flex items-center space-x-2"><span>✔</span> <span>24-Hour power supply (Grid + dual backup gens)</span></li>
                        <li class="flex items-center space-x-2"><span>✔</span> <span>Unlimited high-speed broadband Wi-Fi</span></li>
                        <li class="flex items-center space-x-2"><span>✔</span> <span>Dedicated workstation and desk outlets</span></li>
                    </ul>
                </div>
                <!-- Kitchen & laundry -->
                <div class="space-y-4">
                    <h3 class="text-xs font-bold text-amber-500 uppercase tracking-wider pb-2 border-b border-slate-100 dark:border-slate-800">🍳 Kitchen & Laundry</h3>
                    <ul class="space-y-2 text-xs font-semibold text-slate-600 dark:text-slate-400">
                        <li class="flex items-center space-x-2"><span>✔</span> <span>Modern kitchen (Refrigerator, gas hob, microwave)</span></li>
                        <li class="flex items-center space-x-2"><span>✔</span> <span>In-suite automatic washing machine and dryer</span></li>
                        <li class="flex items-center space-x-2"><span>✔</span> <span>Cookware, cutlery and dinnerware sets</span></li>
                    </ul>
                </div>
                <!-- Guest support -->
                <div class="space-y-4">
                    <h3 class="text-xs font-bold text-amber-500 uppercase tracking-wider pb-2 border-b border-slate-100 dark:border-slate-800">💎 Security & Guest Services</h3>
                    <ul class="space-y-2 text-xs font-semibold text-slate-600 dark:text-slate-400">
                        <li class="flex items-center space-x-2"><span>✔</span> <span>Smart digital locks and video doorbell intercoms</span></li>
                        <li class="flex items-center space-x-2"><span>✔</span> <span>Housekeeping, fresh linen & towels replacement</span></li>
                        <li class="flex items-center space-x-2"><span>✔</span> <span>WhatsApp concierge coordination (8am–8pm)</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 8. LONG STAY ENQUIRY FORM SECTION -->
    <section id="longstay-form-section" class="py-20 bg-slate-50 dark:bg-slate-900/50 scroll-mt-24">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] shadow-lg p-6 sm:p-8">
                
                <div class="flex border-b border-slate-100 dark:border-slate-800 pb-4 mb-6 justify-between items-center">
                    <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: 1.25rem;">
                        Request Long-Stay Quote
                    </h2>
                    <span class="text-[10px] uppercase tracking-wider font-bold text-amber-500">
                        ● Direct Verification Roster
                    </span>
                </div>

                <form id="longstay-enquiry-form" @submit.prevent="submitEnquiryForm()">
                    @csrf
                    <div class="space-y-6">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="full_name">Full Name</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="text" id="full_name" name="full_name" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="email">Email Address</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="email" id="email" name="email" required>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="phone">Phone / WhatsApp</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="tel" id="phone" name="phone" required placeholder="e.g. +234...">
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="guest_type">Guest Profile</label>
                                <select class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-semibold" id="guest_type" name="guest_type">
                                    <option value="individual">Individual Professional</option>
                                    <option value="family">Relocating Family</option>
                                    <option value="corporate">Corporate Exec / Expatriate</option>
                                    <option value="consultant">Business Consultant</option>
                                    <option value="project_team">Project Team Group</option>
                                </select>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="preferred_apartment_type">Apartment Choice</label>
                                <select class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-semibold" id="preferred_apartment_type" name="preferred_apartment_type">
                                    @foreach($apartments as $apt)
                                        <option value="{{ $apt->name }}">{{ $apt->name }}</option>
                                    @endforeach
                                    <option value="multiple">Multiple Options</option>
                                    <option value="not_sure">Not sure</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="stay_duration">Stay Duration</label>
                                <select class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-semibold" id="stay_duration" name="stay_duration">
                                    <option value="weekly">1 - 4 Weeks</option>
                                    <option value="monthly">1 Month</option>
                                    <option value="1-3-months">1 - 3 Months</option>
                                    <option value="3-plus-months">3+ Months</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="billing_preference">Billing Method</label>
                                <select class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-semibold" id="billing_preference" name="billing_preference">
                                    <option value="personal_payment">Personal Payment</option>
                                    <option value="company_invoice">Company Invoice Direct</option>
                                    <option value="bank_transfer">Direct Bank Transfer</option>
                                    <option value="not_sure">Not sure yet</option>
                                </select>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="check_in">Check-in Date</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="date" id="check_in" name="check_in" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="expected_check_out_date">Check-out Date</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="date" id="expected_check_out_date" name="expected_check_out_date" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="number_of_guests">Number of Guests</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="number" id="number_of_guests" name="number_of_guests" min="1" max="100" value="1" required>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="company_name">Company Name (Optional)</label>
                                <input class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-medium" type="text" id="company_name" name="company_name">
                            </div>
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="airport_pickup_required">Airport Pickup?</label>
                                <select class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-semibold" id="airport_pickup_required" name="airport_pickup_required">
                                    <option value="no">No, thank you</option>
                                    <option value="yes">Yes, coordinate pickup</option>
                                    <option value="not_sure">Not sure yet</option>
                                </select>
                            </div>
                            <div class="sm:col-span-1">
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="car_rental_required">Chauffeur Car Rental?</label>
                                <select class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white font-semibold" id="car_rental_required" name="car_rental_required">
                                    <option value="no">No, thank you</option>
                                    <option value="yes">Yes, sedan/SUV + driver</option>
                                    <option value="not_sure">Not sure yet</option>
                                </select>
                            </div>
                        </div>

                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="guest_list_file">Group Guest List Upload (Optional)</label>
                            <input class="w-full text-xs p-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 text-slate-500" type="file" id="guest_list_file" name="guest_list_file">
                            <span class="block text-[9px] text-slate-400 font-semibold mt-1">Supported formats: CSV, Excel, Word, PDF. Max size: 5MB. Stored securely.</span>
                        </div>

                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="special_requirements">Special Stays / Relocation Requirements</label>
                            <textarea class="w-full text-xs p-3 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-amber-500 dark:text-white h-24 resize-none" id="special_requirements" name="special_requirements" placeholder="Add custom requirements such as balcony safety nets, localized office shuttles, snooker/PS5 leisure preferences, or special cleaning schedules..."></textarea>
                        </div>

                        <div class="flex items-start">
                            <input class="mt-1 mr-2 rounded-[0.1rem] border-slate-200 text-amber-500 focus:ring-amber-500" type="checkbox" id="longstay_consent" required>
                            <label class="text-[10px] text-slate-500 dark:text-slate-400 font-semibold" for="longstay_consent">
                                We agree to terms. We understand long stay extensions are subject to explicit room availability, corporate background clearances, and management confirmation.
                            </label>
                        </div>

                        <button class="w-full btn-pill btn-primary justify-center py-3.5" type="submit" :disabled="submitting" @click="logTelemetry('submit_form', 'long_stay_enquiry_submit')">
                            <span x-show="!submitting">Submit Long-Stay Enquiry</span>
                            <span x-show="submitting" class="flex items-center space-x-2">
                                <svg class="animate-spin h-4 w-4 text-slate-900" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                                <span>Processing Stays Roster...</span>
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- 9. STAGE POLICIES, DEPOSIT & HOUSEKEEPING MODULE -->
    <section class="py-16 bg-white dark:bg-slate-950">
        <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">
                <!-- Left: Rules -->
                <div class="space-y-4 bg-slate-50 dark:bg-slate-900 p-6 rounded-[0.1rem] border border-slate-100 dark:border-slate-800 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px]">
                    <h3 class="text-xs font-bold text-amber-500 uppercase tracking-wider pb-2 border-b border-slate-200 dark:border-slate-800">📋 Deposits & Rules</h3>
                    <ul class="space-y-2 text-xs font-semibold text-slate-600 dark:text-slate-400">
                        <li class="flex items-start space-x-2"><span>●</span> <span>A security deposit is required for all weekly/monthly apartment stays.</span></li>
                        <li class="flex items-start space-x-2"><span>●</span> <span>Cleaning charges may apply depending on custom housekeeping frequencies.</span></li>
                        <li class="flex items-start space-x-2"><span>●</span> <span>Cancellation policies apply to all scheduled booking dates.</span></li>
                        <li class="flex items-start space-x-2"><span>●</span> <span>Staged monthly payment terms are available for verified corporate clients.</span></li>
                    </ul>
                </div>
                <!-- Right: Services link -->
                <div class="space-y-4 bg-slate-50 dark:bg-slate-900 p-6 rounded-[0.1rem] border border-slate-100 dark:border-slate-800 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] flex flex-col justify-between">
                    <div>
                        <h3 class="text-xs font-bold text-amber-500 uppercase tracking-wider pb-2 border-b border-slate-200 dark:border-slate-800">📞 Housekeeping & Transit Services</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-xs font-semibold leading-relaxed pt-2">
                            Need airport transit services, customized breakfast menus, or regular maintenance checklists? Access our Guest Services portal to trigger housekeeping tickets or manage arrival directions.
                        </p>
                    </div>
                    <div class="flex space-x-4 pt-4">
                        <a href="{{ url('/guest-services') }}" class="btn-pill btn-primary text-xs py-2 px-4">Guest Services</a>
                        <a href="{{ url('/airport-pickup-car-rental') }}" class="btn-pill btn-outline-gold text-xs py-2 px-4">Transit Portal</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 10. LOCATION ADVANTAGE SECTION -->
    <section class="py-16 bg-slate-50 dark:bg-slate-900/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                <div class="space-y-6">
                    <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block">Prime Neighborhood</span>
                    <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                        Adeniyi Jones, Ikeja Location Proximity
                    </h2>
                    <p class="text-slate-500 dark:text-slate-400 text-xs leading-relaxed font-semibold">
                        Enjoy living in Lagos' premier business district, Ikeja. Our properties at Regina Coker and Ogunlowo Streets are located close to major commercial sectors, making commutes swift.
                    </p>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="border-l-2 border-amber-500 pl-3">
                            <span class="text-slate-900 dark:text-white text-xs font-bold block">✈ 8 Minutes</span>
                            <span class="text-[10px] text-slate-400 font-semibold block">To domestic airport terminals MM1 / MM2.</span>
                        </div>
                        <div class="border-l-2 border-amber-500 pl-3">
                            <span class="text-slate-900 dark:text-white text-xs font-bold block">✈ 15 Minutes</span>
                            <span class="text-[10px] text-slate-400 font-semibold block">To Murtala Muhammed International Airport.</span>
                        </div>
                        <div class="border-l-2 border-amber-500 pl-3">
                            <span class="text-slate-900 dark:text-white text-xs font-bold block">🛒 5 Minutes</span>
                            <span class="text-[10px] text-slate-400 font-semibold block">To Ikeja City Mall / Shoprite & Eateries.</span>
                        </div>
                        <div class="border-l-2 border-amber-500 pl-3">
                            <span class="text-slate-900 dark:text-white text-xs font-bold block">👮 3 Minutes</span>
                            <span class="text-[10px] text-slate-400 font-semibold block">To Memabod Police Station (High Security).</span>
                        </div>
                    </div>
                    <div>
                        <a href="{{ url('/neighbourhood') }}" class="btn-pill btn-primary text-xs py-2.5 px-6">View neighbourhood Guide</a>
                    </div>
                </div>
                <div class="rounded-[0.1rem] overflow-hidden shadow-lg border border-slate-200 dark:border-slate-800 h-80">
                    <iframe src="{{ $ikejaLocation->map_embed_url ?? 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3963.2985189399814!2d3.3512967!3d6.6097241!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x103b923145555555%3A0x5555555555555555!2sAdeniyi%20Jones%2C%20Ikeja%20Lagos!5e0!3m2!1sen!2sng!4v1717171717171' }}" class="w-full h-full border-0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </section>

    <!-- 11. SEO/GEO CONTENT BLOCK (CRAWLABLE FOR SEARCH ENGINES) -->
    <section class="py-8 bg-slate-100 dark:bg-slate-900/80 border-t border-b border-slate-200 dark:border-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <span class="text-[10px] text-slate-400 font-semibold block uppercase tracking-wider mb-2">GEO Location Index & Crawl Details</span>
            <p class="text-slate-400 dark:text-slate-500 text-[10px] leading-relaxed max-w-4xl mx-auto font-medium">
                Kevron Suites and Apartments offers long-stay serviced apartments in Adeniyi Jones, Ikeja, Lagos for business travellers, relocating families, consultants, expatriates, project teams and corporate guests. Guests can request weekly or monthly accommodation in 1, 2, 3 and 4 bedroom apartment options with 24-hour power supply, Wi-Fi, modern kitchen facilities, washing machine and dryer, air conditioning, smart security, balconies, PS5, snooker, airport pickup and rented car support on request.
            </p>
        </div>
    </section>

    <!-- 12. DYNAMIC FAQ ACCORDION -->
    <section class="py-16 bg-white dark:bg-slate-950">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block mb-2">Common Inquiries</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Frequently Asked Questions
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- FAQ Container -->
            <div class="space-y-4">
                @foreach($faqs as $index => $faq)
                <div class="border border-slate-200 dark:border-slate-800 rounded-[0.1rem] overflow-hidden shadow-[rgba(0,0,0,0.03)_0px_1px_2px_0px]">
                    <button class="w-full text-left p-4 focus:outline-none flex justify-between items-center transition-colors bg-slate-50 hover:bg-slate-100 dark:bg-slate-900/60 dark:hover:bg-slate-900"
                            @click="activeFaq === {{ $index }} ? activeFaq = null : activeFaq = {{ $index }}; logTelemetry('expand_faq', 'faq_{{ $index }}')">
                        <span class="text-xs font-bold text-slate-800 dark:text-slate-200">{{ $faq->question }}</span>
                        <span class="text-amber-500 font-bold text-sm" x-text="activeFaq === {{ $index }} ? '−' : '+'"></span>
                    </button>
                    <div x-show="activeFaq === {{ $index }}" x-collapse x-cloak
                         class="p-4 bg-white dark:bg-slate-950 border-t border-slate-100 dark:border-slate-800 text-xs font-medium leading-relaxed text-slate-500 dark:text-slate-400">
                        {!! $faq->answer !!}
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- 13. FINAL CTA -->
    <section class="bg-blue-950 text-white py-16">
        <div class="max-w-4xl mx-auto px-4 text-center space-y-6">
            <h2 class="text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.3rem, 3.2vw, 1.65rem);">
                Planning a Longer Stay in Ikeja?
            </h2>
            <p class="text-slate-300 text-xs leading-relaxed max-w-xl mx-auto font-medium">
                Tell us your preferred apartment type, stay duration and guest needs, and our team will provide a suitable long-stay quotation.
            </p>
            <div class="flex flex-col sm:flex-row justify-center items-center gap-4 pt-2">
                <button class="btn-pill btn-primary px-8 py-3" @click="scrollToForm()">Request Long-Stay Quote</button>
                <a href="#available-suites" class="btn-pill btn-outline-gold px-8 py-3 !border-white !text-white hover:!bg-white hover:!text-slate-900 text-xs uppercase tracking-wider font-bold">View Apartments</a>
                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985')) }}?text=Hello%20Kevron%20Suites%20and%20Apartments%2C%20our%20company%20is%20interested%20in%20setting%20up%20a%20long-stay%20extended%20accommodations%20plan." target="_blank" class="text-xs font-semibold text-amber-400 hover:text-amber-300 transition-colors">WhatsApp Us</a>
            </div>
        </div>
    </section>

    <!-- TOAST NOTIFICATIONS -->
    <div x-show="showToast" x-transition x-cloak
         class="fixed bottom-6 right-6 z-50 p-4 rounded-[0.1rem] shadow-xl border text-xs font-bold text-white flex items-center space-x-2"
         :class="toastType === 'success' ? 'bg-emerald-600 border-emerald-500' : 'bg-red-600 border-red-500'">
        <span x-text="toastType === 'success' ? '✔' : '❌'"></span>
        <span x-text="toastMessage"></span>
    </div>

</div>

<!-- JSON-LD Structured Data Schema -->
@if($schema)
    <script type="application/ld+json">
        {!! json_encode($schema->schema_json, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) !!}
    </script>
@else
    <script type="application/ld+json">
    {
        "@@context": "https://schema.org",
        "@@type": "WebPage",
        "name": "Long-Stay Serviced Apartments in Ikeja | Kevron Suites",
        "description": "Request weekly or monthly serviced apartments at Kevron Suites and Apartments, Adeniyi Jones, Ikeja Lagos.",
        "url": "https://kevronapartments.com/long-stay-serviced-apartments-ikeja",
        "breadcrumb": {
            "@@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@@type": "ListItem",
                    "position": 1,
                    "name": "Home",
                    "item": "https://kevronapartments.com"
                },
                {
                    "@@type": "ListItem",
                    "position": 2,
                    "name": "Long Stays",
                    "item": "https://kevronapartments.com/long-stay-serviced-apartments-ikeja"
                }
            ]
        },
        "about": {
            "@@type": "Service",
            "name": "Kevron Serviced Apartment Long-Stays & Extended Stays",
            "provider": {
                "@@type": "LodgingBusiness",
                "name": "Kevron Suites and Apartments",
                "address": {
                    "@@type": "PostalAddress",
                    "streetAddress": "7B Regina Coker Street, Adeniyi Jones, Ikeja",
                    "addressLocality": "Ikeja",
                    "addressRegion": "Lagos",
                    "postalCode": "100271",
                    "addressCountry": "NG"
                }
            }
        }
    }
    </script>
@endif

@endsection