@extends('layouts.app')

@section('title', $seo ? $seo->meta_title : 'Corporate Serviced Apartments in Ikeja | Kevron Suites')
@section('meta_description', $seo ? $seo->meta_description : 'Request corporate serviced apartments at Kevron Suites and Apartments, Adeniyi Jones, Ikeja. Suitable for companies, executives, consultants, project teams, expatriates, relocation guests and business travellers, with group bookings, invoice billing, negotiated rates and airport pickup on request.')

@section('content')
<div class="bg-white dark:bg-slate-950 min-h-screen text-slate-700 dark:text-slate-300 antialiased" x-data="{
    activeForm: 'enquiry', // enquiry or group
    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);
    },

    selectForm(type) {
        this.activeForm = type;
        document.getElementById('b2b-form-hub').scrollIntoView({ behavior: 'smooth', block: 'start' });
    },

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

        fetch('{{ route('corporate.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 fill all required fields correctly.', 'error');
            }
        })
        .catch(err => {
            this.submitting = false;
            this.triggerToast('An error occurred during submission. Please try again.', 'error');
        });
    },

    submitGroupForm() {
        this.submitting = true;
        const form = document.getElementById('corporate-group-form');
        const formData = new FormData(form);

        fetch('{{ route('corporate.group') }}', {
            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 group request submission.', 'error');
        });
    },

    logTelemetry(action, key) {
        fetch('{{ route('corporate.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', 'corporate_stays_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="Luxury corporate bedroom at Kevron Apartments" 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>Premium Executive Accommodations</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);">
                        Corporate 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;">
                        Book luxury serviced apartments for executives, consultants, project teams, expatriates, relocation guests and business travellers at Kevron Suites and Apartments, Adeniyi Jones, Ikeja.
                    </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> 1–4 Bedroom Apartments
                        </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> Invoice Billing Option
                        </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> Long-Stay Support
                        </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> Airport Pickup on Request
                        </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> Dedicated Support
                        </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="selectForm('enquiry'); logTelemetry('click_cta', 'hero_request_corporate_rate');">
                            Request Corporate Rate
                        </button>
                        <button class="btn-pill btn-outline-gold justify-center sm:justify-start !border-white !text-white hover:!bg-white hover:!text-slate-900" @click="selectForm('group'); logTelemetry('click_cta', 'hero_submit_group_booking');">
                            Submit Group Booking
                        </button>
                        <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%20corporate%20stay%20billing%20account%20or%20negotiating%20corporate%20rates%20for%20staff%20accommodations%20in%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 Corporate 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="Premium executive lounge room" 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">Corporate Comfort</span>
                            <span class="text-white text-xs font-medium">B2B tailored solutions for corporate retreats, expatriates and executive visits.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 2. CORPORATE USER SEGMENTS 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">Designed For Business</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Corporate Target User Groups
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- Segment Cards -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Card 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] hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-300 flex flex-col justify-between">
                    <div>
                        <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm">
                            💼
                        </div>
                        <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">Companies Booking for Staff</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed mb-4">
                            Seamless accommodation management for your staff, backed by corporate accounts, weekly usage reports, and invoices.
                        </p>
                        <span class="text-[10px] font-semibold text-slate-400 block mb-4">Recommended: 1 or 2 Bed Luxury</span>
                    </div>
                    <button class="w-full text-center text-xs font-bold bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200 py-2.5 rounded-full hover:bg-amber-500 hover:text-slate-950 transition-colors duration-300"
                            @click="selectForm('enquiry'); logTelemetry('click_segment_cta', 'staff_booking');">
                        Enquire for This Stay Type
                    </button>
                </div>

                <!-- Card 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] hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-300 flex flex-col justify-between">
                    <div>
                        <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm">
                            👔
                        </div>
                        <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">Executives & Consultants</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed mb-4">
                            Premium quiet suites with rapid Wi-Fi connection, work desks, and fully equipped kitchens for optimal productivity.
                        </p>
                        <span class="text-[10px] font-semibold text-slate-400 block mb-4">Recommended: 1 Bedroom Master Suite</span>
                    </div>
                    <button class="w-full text-center text-xs font-bold bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200 py-2.5 rounded-full hover:bg-amber-500 hover:text-slate-950 transition-colors duration-300"
                            @click="selectForm('enquiry'); logTelemetry('click_segment_cta', 'executive_stays');">
                        Enquire for This Stay Type
                    </button>
                </div>

                <!-- Card 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] hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-300 flex flex-col justify-between">
                    <div>
                        <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm">
                            👥
                        </div>
                        <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">Project & Event Teams</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed mb-4">
                            Coordinate multiple bedroom stays within the same perimeter blocks. Ideal for collaborative project teams.
                        </p>
                        <span class="text-[10px] font-semibold text-slate-400 block mb-4">Recommended: 3 or 4 Bed Luxury</span>
                    </div>
                    <button class="w-full text-center text-xs font-bold bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200 py-2.5 rounded-full hover:bg-amber-500 hover:text-slate-950 transition-colors duration-300"
                            @click="selectForm('group'); logTelemetry('click_segment_cta', 'team_booking');">
                        Enquire for This Stay Type
                    </button>
                </div>

                <!-- Card 4 -->
                <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] hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors duration-300 flex flex-col justify-between">
                    <div>
                        <div class="text-amber-500 mb-4 bg-amber-500/10 w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm">
                            ✈
                        </div>
                        <h3 class="text-xs font-bold text-slate-900 dark:text-white mb-2">Expatriates & Relocations</h3>
                        <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed mb-4">
                            Long-term extended stays providing ultimate luxury and stability, complete with in-suite laundry and kitchens.
                        </p>
                        <span class="text-[10px] font-semibold text-slate-400 block mb-4">Recommended: 2 or 3 Bed Luxury</span>
                    </div>
                    <button class="w-full text-center text-xs font-bold bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200 py-2.5 rounded-full hover:bg-amber-500 hover:text-slate-950 transition-colors duration-300"
                            @click="selectForm('enquiry'); logTelemetry('click_segment_cta', 'expat_relocation');">
                        Enquire for This Stay Type
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- 3. CORPORATE STAY 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">Our Advantage</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Why Corporate Stays at Kevron Apartments?
                </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-2 lg:grid-cols-4 gap-6">
                <!-- Benefit 1 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 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">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-2">🏡 Apartment Comfort</span>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        Spacious lounge rooms, modern kitchens, in-suite washing machines, and clean en-suite layout details.
                    </p>
                </div>

                <!-- Benefit 2 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 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">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-2">⚡ Work-Friendly Stay</span>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        Dual generators backup for 24-hour power supply and unlimited high-speed broadband Wi-Fi internet.
                    </p>
                </div>

                <!-- Benefit 3 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 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">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-2">📊 Company Billing</span>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        Payment tracking, consolidated invoicing and direct credit bank transfer setups for approved corporate clients.
                    </p>
                </div>

                <!-- Benefit 4 -->
                <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 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">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-2">💎 Negotiated Rates</span>
                    <p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-relaxed">
                        Tailored volume contracts for repeat reservations and extended stays. Rates depend on room duration blocks.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 4. APARTMENT OPTIONS FOR CORPORATE STAYS -->
    <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">Accommodation 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 Types for Corporate Stays
                </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>
                            
                            <!-- B2B Suitability 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">
                                    Work-friendly
                                </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="selectForm('enquiry'); logTelemetry('click_apt_cta', 'enquire_' + '{{ $apt->slug }}');">
                                Request Rate
                            </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%20corporate%20stay%20information%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 Support
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- 5. CENTRAL INTERACTIVE REQUEST HUB SECTION (TABS) -->
    <section id="b2b-form-hub" 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">
                
                <!-- Toggle Tab Headers -->
                <div class="flex border-b border-slate-100 dark:border-slate-800 pb-4 mb-6 justify-between items-center">
                    <div class="flex space-x-1 bg-slate-100 dark:bg-slate-800 p-1 rounded-full select-none">
                        <button class="text-xs font-semibold px-5 py-2 rounded-full transition-all duration-300 focus:outline-none"
                                :class="activeForm === 'enquiry' ? 'bg-blue-900 text-white dark:bg-amber-500 dark:text-slate-950' : 'text-slate-600 hover:text-blue-950 dark:text-slate-400 dark:hover:text-white'"
                                @click="activeForm = 'enquiry'; logTelemetry('click_tab', 'switch_enquiry');">
                            Corporate Enquiry Form
                        </button>
                        <button class="text-xs font-semibold px-5 py-2 rounded-full transition-all duration-300 focus:outline-none"
                                :class="activeForm === 'group' ? 'bg-blue-900 text-white dark:bg-amber-500 dark:text-slate-950' : 'text-slate-600 hover:text-blue-950 dark:text-slate-400 dark:hover:text-white'"
                                @click="activeForm = 'group'; logTelemetry('click_tab', 'switch_group');">
                            Group Booking Request
                        </button>
                    </div>

                    <span class="hidden sm:inline-block text-[10px] uppercase tracking-wider font-bold text-amber-500">
                        ● Admin Portal Integration
                    </span>
                </div>

                <!-- 5A. CORPORATE ENQUIRY FORM -->
                <form id="corporate-enquiry-form" x-show="activeForm === 'enquiry'" @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="company_name">Company 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="company_name" name="company_name" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="contact_person">Contact Person</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="contact_person" name="contact_person" 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="email">Contact Email</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>
                                <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>

                        <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="purpose_of_stay">Purpose of Stay</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="purpose_of_stay" name="purpose_of_stay">
                                    <option value="staff_accommodation">Staff Accommodation</option>
                                    <option value="project_team">Project Team</option>
                                    <option value="executive_visit">Executive Visit</option>
                                    <option value="relocation">Relocation</option>
                                    <option value="training_event">Training / Event</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="apartment_type_preference">Preferred Suite</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="apartment_type_preference" name="apartment_type_preference">
                                    @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="billing_preference">Billing Preference</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="company_invoice">Company Invoice Billing</option>
                                    <option value="card_payment">Card Payment</option>
                                    <option value="bank_transfer">Direct Bank Transfer</option>
                                    <option value="not_sure">Not sure</option>
                                </select>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-4 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="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 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="check_out">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="check_out" name="check_out" required>
                            </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="guests_count">Total 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="guests_count" name="guests_count" min="1" max="100" value="1" required>
                            </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="number_of_apartments">Apartments</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_apartments" name="number_of_apartments" min="1" max="50" value="1" 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="airport_pickup_required">Airport Pickup Required?</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, please coordinate</option>
                                    <option value="not_sure">Not sure yet</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="car_rental_required">Car Rental Required?</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, executive 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="special_requirements">Special Stays Specifications</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="Dietary profiles, custom check-in schedules, repeat stay parameters, or localized office transport requirements..."></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="enquiry_consent" required>
                            <label class="text-[10px] text-slate-500 dark:text-slate-400 font-medium" for="enquiry_consent">
                                We agree to terms. We understand corporate invoicing, pricing agreements, and booking details are subject to background verification, rate checks and explicit corporate relation officer approval.
                            </label>
                        </div>

                        <button class="w-full btn-pill btn-primary justify-center py-3.5" type="submit" :disabled="submitting" @click="logTelemetry('submit_form', 'corporate_enquiry_submit')">
                            <span x-show="!submitting">Submit Corporate Rate 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 Details...</span>
                            </span>
                        </button>
                    </div>
                </form>

                <!-- 5B. GROUP BOOKING REQUEST FORM -->
                <form id="corporate-group-form" x-show="activeForm === 'group'" enctype="multipart/form-data" @submit.prevent="submitGroupForm()">
                    @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="group_name">Group / Company 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="group_name" name="group_name" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="group_coordinator">Group Coordinator</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="group_coordinator" name="group_coordinator" 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="group_email">Contact Email</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="group_email" name="email" required>
                            </div>
                            <div>
                                <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="group_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="group_phone" name="phone" required placeholder="e.g. +234...">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-4 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="arrival_date">Arrival 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="arrival_date" name="arrival_date" required>
                            </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="departure_date">Departure 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="departure_date" name="departure_date" required>
                            </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="group_guests">Total 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="group_guests" name="number_of_guests" min="1" max="200" value="5" required>
                            </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="group_apartments">Apartments</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="group_apartments" name="number_of_apartments" min="1" max="50" value="2" 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="preferred_apartment_mix">Apartment Mix</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="preferred_apartment_mix" name="preferred_apartment_mix" placeholder="e.g. 2x 1Bed, 1x 3Bed">
                            </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="rooming_preference">Rooming Allocation</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="rooming_preference" name="rooming_preference">
                                    <option value="private">Private (One guest per room)</option>
                                    <option value="shared">Shared allocation where possible</option>
                                    <option value="executive">Executive suite priority</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="group_pickup">Airport Transit 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="group_pickup" name="airport_pickup_required">
                                    <option value="no">No, thank you</option>
                                    <option value="yes">Yes, team pickup required</option>
                                    <option value="not_sure">Not sure yet</option>
                                </select>
                            </div>
                        </div>

                        <!-- Guest List Upload -->
                        <div class="bg-slate-50 dark:bg-slate-800/80 p-5 rounded-[0.1rem] border border-dashed border-slate-300 dark:border-slate-700 text-center">
                            <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">Guest List Upload (CSV, XLS, XLSX, PDF - Max 5MB)</label>
                            <input type="file" id="guest_list_file" name="guest_list_file" accept=".csv,.xls,.xlsx,.pdf" class="hidden" @change="logTelemetry('upload_attempt', 'guest_list_file')">
                            <button type="button" class="btn-pill btn-outline-gold px-6 py-2 bg-white dark:bg-slate-900" onclick="document.getElementById('guest_list_file').click()">
                                Select Guest Roster
                            </button>
                            <p class="text-[9px] text-slate-400 mt-2">
                                Secure storage: rosters contain sensitive company staff datasets and are locked to admin-only access.
                            </p>
                        </div>

                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-1" for="group_notes">Coordinator Remarks</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="group_notes" name="notes" placeholder="Team flight allocations, arrival delays sync coordinates or unique catering arrangements..."></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="group_consent" required>
                            <label class="text-[10px] text-slate-500 dark:text-slate-400 font-medium" for="group_consent">
                                We agree to terms. We understand group room rosters allocations, shuttle services, and discounted pricing options are subject to Kevron logistics desk coordination, rate parameters and availability check validation.
                            </label>
                        </div>

                        <button class="w-full btn-pill btn-primary justify-center py-3.5" type="submit" :disabled="submitting" @click="logTelemetry('submit_form', 'group_booking_submit')">
                            <span x-show="!submitting">Submit Group Booking Request</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>Uploading guest rosters details...</span>
                            </span>
                        </button>
                    </div>
                </form>

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

    <!-- 6. COMPANY BILLING & PAYMENT TRACKING SECTION -->
    <section class="py-16 bg-white dark:bg-slate-950 border-t border-b border-slate-100 dark:border-slate-800">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-amber-50/50 dark:bg-slate-900/80 border-l-4 border-amber-500 p-6 rounded-[0.1rem] shadow-sm">
                <div class="flex space-x-3 items-start">
                    <span class="text-amber-500 mt-0.5">
                        💳
                    </span>
                    <div>
                        <h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider mb-2">Company Billing & Payment Policies</h4>
                        <p class="text-slate-600 dark:text-slate-400 leading-relaxed font-medium" style="font-family: 'Inter', sans-serif; font-size: 0.875rem;">
                            Corporate clients may request invoice billing, payment tracking and booking summaries for approved company stays. Billing arrangements are subject to confirmation and may depend on booking value, stay duration, approval status and company requirements.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 7. NEGOTIATED RATES SECTION -->
    <section class="py-16 bg-slate-50 dark:bg-slate-900/50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6">
            <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                Negotiated Corporate Rates
            </h2>
            <p class="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto leading-relaxed font-medium text-xs">
                Companies, repeat clients, long-stay guests and project teams may request negotiated corporate rates. Rates may depend on stay duration, apartment type, number of guests, frequency of booking, season and service requirements.
            </p>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 pt-4 max-w-xl mx-auto text-xs font-semibold text-slate-700 dark:text-slate-300">
                <div class="bg-white dark:bg-slate-900 p-3 rounded-[0.1rem] border border-slate-200 dark:border-slate-800">
                    Corporate Rate
                </div>
                <div class="bg-white dark:bg-slate-900 p-3 rounded-[0.1rem] border border-slate-200 dark:border-slate-800">
                    Long-Stay Weekly/Monthly
                </div>
                <div class="bg-white dark:bg-slate-900 p-3 rounded-[0.1rem] border border-slate-200 dark:border-slate-800">
                    Group Stay Rate
                </div>
                <div class="bg-white dark:bg-slate-900 p-3 rounded-[0.1rem] border border-slate-200 dark:border-slate-800">
                    Repeat-Client Rate
                </div>
                <div class="bg-white dark:bg-slate-900 p-3 rounded-[0.1rem] border border-slate-200 dark:border-slate-800">
                    Project-Team Rate
                </div>
                <div class="bg-white dark:bg-slate-900 p-3 rounded-[0.1rem] border border-slate-200 dark:border-slate-800">
                    Training/Event Attendee
                </div>
            </div>
        </div>
    </section>

    <!-- 8. LONG-STAY & RELOCATION 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="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div class="space-y-6">
                    <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block">Extended Stay Support</span>
                    <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                        Long-Stay & Relocation Services
                    </h2>
                    <div class="h-0.5 w-16 bg-amber-500 mt-4"></div>
                    <p class="text-slate-500 dark:text-slate-400 text-xs leading-relaxed font-medium">
                        For expatriates, relocated directors, or technical teams deployed for projects, Kevron Apartments provides a premium secondary home. We feature weekly and monthly stay packages with dedicated in-suite laundry, chef support on request, high-speed Wi-Fi internet and round-the-clock power.
                    </p>
                    <ul class="text-xs space-y-2.5 text-slate-600 dark:text-slate-400 font-semibold list-none">
                        <li><span class="text-amber-500">✔</span> Weekly/monthly stay enquiries</li>
                        <li><span class="text-amber-500">✔</span> Expatriate support</li>
                        <li><span class="text-amber-500">✔</span> Relocation guest support</li>
                        <li><span class="text-amber-500">✔</span> Laundry and kitchen convenience</li>
                        <li><span class="text-amber-500">✔</span> Wi-Fi and power support</li>
                    </ul>
                    <div class="flex space-x-4 pt-2">
                        <button class="btn-pill btn-primary py-2.5 px-6 text-xs" @click="selectForm('enquiry'); logTelemetry('click_cta', 'relocation_rate_request');">
                            Request Long-Stay Rate
                        </button>
                        <a href="{{ route('long-stay') }}" class="btn-pill btn-outline-gold py-2.5 px-6 text-xs inline-block text-center border-slate-300 hover:border-amber-500 text-slate-800 dark:text-white" @click="logTelemetry('click_cta', 'view_long_stay_page');">
                            View Long Stay Page
                        </a>
                    </div>
                </div>
                <div class="bg-slate-100 dark:bg-slate-900 p-2 rounded-[0.1rem] border border-slate-200 dark:border-slate-800">
                    <img src="{{ asset('pictures/kitchen.jpg') }}" alt="Gourmet kitchen inside Kevron Suites" class="rounded-[0.1rem] w-full object-cover h-72">
                </div>
            </div>
        </div>
    </section>

    <!-- 9. AIRPORT PICKUP & STAFF ARRIVALS 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-12 items-center">
                <div class="bg-slate-200 dark:bg-slate-800 p-2 rounded-[0.1rem] border border-slate-300 dark:border-slate-700 lg:order-last">
                    <img src="{{ asset('pictures/bedroom-2.jpg') }}" alt="Executive arrivals en-suite space" class="rounded-[0.1rem] w-full object-cover h-72">
                </div>
                <div class="space-y-6">
                    <span class="text-xs uppercase tracking-[0.2em] text-amber-500 font-bold block">Terminal Operations</span>
                    <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                        Airport Pickup for Staff Arrival
                    </h2>
                    <div class="h-0.5 w-16 bg-amber-500 mt-4"></div>
                    <p class="text-slate-500 dark:text-slate-400 text-xs leading-relaxed font-medium">
                        Coordinate smooth guest airport transfers from local MM1 and MM2 terminals, or Murtala Muhammed International Airport (MMIA). Our logistics team tracks landing timelines in real-time, providing security drivers and premium sedans or executive vans.
                    </p>
                    <ul class="text-xs space-y-2.5 text-slate-600 dark:text-slate-400 font-semibold list-none">
                        <li><span class="text-amber-500">✔</span> Pickup from MM1, MM2, or MMIA terminal</li>
                        <li><span class="text-amber-500">✔</span> Multiple staff arrival request matching</li>
                        <li><span class="text-amber-500">✔</span> Flight details monitoring and delay sync</li>
                        <li><span class="text-amber-500">✔</span> Guest list upload for terminal routing</li>
                        <li><span class="text-amber-500">✔</span> Car rental support</li>
                    </ul>
                    <div class="flex space-x-4 pt-2">
                        <a href="{{ route('airport-pickup-car-rental') }}" class="btn-pill btn-primary py-2.5 px-6 text-xs text-center inline-block" @click="logTelemetry('click_cta', 'add_airport_pickup');">
                            Add Airport Pickup
                        </a>
                        <a href="{{ route('airport-pickup-car-rental') }}" class="btn-pill btn-outline-gold py-2.5 px-6 text-xs text-center inline-block border-slate-300 hover:border-amber-500 text-slate-800 dark:text-white" @click="logTelemetry('click_cta', 'request_car_rental');">
                            Request Car Rental
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 10. DEDICATED SUPPORT SECTION -->
    <section class="py-16 bg-white dark:bg-slate-950 text-center">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
            <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                Dedicated Corporate Support
            </h2>
            <p class="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto leading-relaxed font-medium text-xs">
                To coordinate stays seamlessly, corporate account partners and group coordinators are assigned a dedicated customer success relations coordinator. They assist with arrival timelines, secure invoices, rooming block re-allocations and direct WhatsApp check-in setups.
            </p>
            <div class="flex flex-col sm:flex-row justify-center items-center gap-4 pt-2 text-xs font-semibold">
                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985')) }}?text=Hello%20Kevron%20Apartments%2C%20our%20company%20needs%20assistance%20from%20a%20corporate%20support%20representative%20regarding%20group%20stays." 
                   target="_blank"
                   class="btn-pill btn-primary py-2.5 px-6 flex items-center space-x-2"
                   @click="logTelemetry('click_cta', 'whatsapp_dedicated_support');">
                    <span>WhatsApp Corporate Support</span>
                </a>
                <a href="mailto:{{ \App\Models\Setting::getVal('brand_email', 'info@kevronapartments.com') }}?subject=Corporate Stays Inquiry - Kevron Apartments"
                   class="btn-pill btn-outline-gold py-2.5 px-6 border-slate-300 text-slate-800 dark:text-white hover:border-amber-500"
                   @click="logTelemetry('click_cta', 'email_dedicated_support');">
                    Email: {{ \App\Models\Setting::getVal('brand_email', 'info@kevronapartments.com') }}
                </a>
            </div>
        </div>
    </section>

    <!-- 11. CORPORATE STAY WORKFLOW 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">Our Process</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    The Corporate Booking Workflow
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-6 gap-4">
                <!-- Step 1 -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 rounded-[0.1rem] hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-3">01. Enquiry</span>
                    <p class="text-slate-500 dark:text-slate-400 text-[10px] leading-relaxed">
                        Submit corporate enquiry or group booking request.
                    </p>
                </div>
                <!-- Step 2 -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 rounded-[0.1rem] hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-3">02. Details</span>
                    <p class="text-slate-500 dark:text-slate-400 text-[10px] leading-relaxed">
                        Provide company, guest and stay details.
                    </p>
                </div>
                <!-- Step 3 -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 rounded-[0.1rem] hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-3">03. Review</span>
                    <p class="text-slate-500 dark:text-slate-400 text-[10px] leading-relaxed">
                        Kevron team reviews availability and rate options.
                    </p>
                </div>
                <!-- Step 4 -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 rounded-[0.1rem] hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-3">04. Quotation</span>
                    <p class="text-slate-500 dark:text-slate-400 text-[10px] leading-relaxed">
                        Corporate rate or quotation is issued.
                    </p>
                </div>
                <!-- Step 5 -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 rounded-[0.1rem] hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-3">05. Confirm</span>
                    <p class="text-slate-500 dark:text-slate-400 text-[10px] leading-relaxed">
                        Booking, billing and guest arrival support are confirmed.
                    </p>
                </div>
                <!-- Step 6 -->
                <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 rounded-[0.1rem] hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs uppercase block mb-3">06. Arrival</span>
                    <p class="text-slate-500 dark:text-slate-400 text-[10px] leading-relaxed">
                        Guests receive stay details and support information.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 12. TRUST AND SUITABILITY 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">Location & Facilities</span>
                <h2 class="text-slate-900 dark:text-white" style="font-family: 'Marcellus', serif; font-size: clamp(1.25rem, 2.4vw, 1.6rem);">
                    Trust & Executive Suitability
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <!-- Features Cards Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Feature 1 -->
                <div class="bg-slate-50 dark:bg-slate-900 p-5 rounded-[0.1rem] border border-slate-200 dark:border-slate-800 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs block mb-2">📍 Adeniyi Jones, Ikeja Location</span>
                    <p class="text-slate-500 dark:text-slate-400 text-[11px] leading-relaxed font-medium">
                        Highly accessible upscale neighborhood, just 8 mins to Local Airport (MM1/MM2) and 15 mins to International Terminal (MMIA).
                    </p>
                </div>
                <!-- Feature 2 -->
                <div class="bg-slate-50 dark:bg-slate-900 p-5 rounded-[0.1rem] border border-slate-200 dark:border-slate-800 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs block mb-2">⚡ 24-Hour Power & Internet</span>
                    <p class="text-slate-500 dark:text-slate-400 text-[11px] leading-relaxed font-medium">
                        Dual autostart generator networks ensure uninterrupted corporate power, backed by unlimited broadband Wi-Fi coverage.
                    </p>
                </div>
                <!-- Feature 3 -->
                <div class="bg-slate-50 dark:bg-slate-900 p-5 rounded-[0.1rem] border border-slate-200 dark:border-slate-800 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs block mb-2">🔒 Keyless Smart Entry</span>
                    <p class="text-slate-500 dark:text-slate-400 text-[11px] leading-relaxed font-medium">
                        State of the art keyless lock passcodes, perimeter CCTV cameras, smart intercom bells and proximity to Memabod Police Station.
                    </p>
                </div>
                <!-- Feature 4 -->
                <div class="bg-slate-50 dark:bg-slate-900 p-5 rounded-[0.1rem] border border-slate-200 dark:border-slate-800 shadow-[rgba(0,0,0,0.05)_0px_0px_0px_1px] hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors duration-300">
                    <span class="text-amber-500 font-bold text-xs block mb-2">🍽 Modern In-suite Amenities</span>
                    <p class="text-slate-500 dark:text-slate-400 text-[11px] leading-relaxed font-medium">
                        Gourmet kitchen space fully loaded with microwave, washing machines, private balconies and Snooker/PS5 entertainment.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 13. SEO/GEO CONTENT BLOCK -->
    <section class="py-8 bg-slate-50 dark:bg-slate-900/30 border-t border-b border-slate-200/50 dark:border-slate-850">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p class="text-[10px] text-slate-400 dark:text-slate-500 leading-relaxed font-medium max-w-4xl mx-auto">
                Kevron Suites and Apartments provides corporate serviced apartments in Adeniyi Jones, Ikeja, Lagos for companies, consultants, executives, project teams, expatriates, relocation guests, training attendees and business travellers. Corporate clients can request group bookings, guest-list upload, company billing, negotiated rates, weekly or monthly stay support, airport pickup and dedicated corporate support.
            </p>
        </div>
    </section>

    <!-- 14. DYNAMIC FAQS ACCORDION -->
    <section class="py-16 bg-white dark:bg-slate-950">
        <div class="max-w-3xl 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">Have Questions?</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 B2B Questions
                </h2>
                <div class="h-0.5 w-16 bg-amber-500 mx-auto mt-4"></div>
            </div>

            <div class="space-y-4">
                @foreach($faqs as $idx => $faq)
                <div class="bg-slate-50 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">
                    <button class="w-full text-left p-5 flex justify-between items-center focus:outline-none focus:bg-slate-100 dark:focus:bg-slate-800/80 transition-colors"
                            @click="activeFaq = (activeFaq === {{ $idx }} ? null : {{ $idx }}); logTelemetry('expand_faq', '{{ Str::slug($faq->question) }}')">
                        <span class="text-xs font-bold text-slate-900 dark:text-white tracking-tight">{{ $faq->question }}</span>
                        <span class="text-amber-500 font-bold text-sm" x-text="activeFaq === {{ $idx }} ? '−' : '+'"></span>
                    </button>
                    <div class="px-5 pb-5 text-xs font-medium text-slate-500 dark:text-slate-400 leading-relaxed border-t border-slate-100 dark:border-slate-800/50 pt-4"
                         x-show="activeFaq === {{ $idx }}"
                         x-cloak
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:enter-start="opacity-0 transform -translate-y-2"
                         x-transition:enter-end="opacity-100 transform translate-y-0">
                        {{ $faq->answer }}
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- 15. FINAL CTA SECTION -->
    <section class="relative bg-slate-900 text-white overflow-hidden py-16 lg:py-20">
        <div class="absolute inset-0 opacity-15">
            <img src="{{ asset('pictures/other-lounge.jpg') }}" alt="Luxury lobby lounge" class="w-full h-full object-cover">
        </div>
        <div class="absolute inset-0 bg-slate-950/90"></div>
        
        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6">
            <h2 class="text-white font-normal leading-tight tracking-tight" style="font-family: 'Marcellus', serif; font-size: clamp(1.35rem, 3.6vw, 1.8rem);">
                Need Corporate Accommodation in Ikeja?
            </h2>
            <p class="text-slate-300 max-w-2xl mx-auto leading-relaxed font-medium text-xs">
                Send your company stay requirements and our team will review availability, apartment options, billing needs and corporate rate possibilities.
            </p>
            <div class="flex flex-col sm:flex-row justify-center items-stretch sm:items-center gap-4 pt-4 max-w-md mx-auto">
                <button class="btn-pill btn-primary justify-center py-3 text-xs" @click="selectForm('enquiry'); logTelemetry('click_cta', 'final_request_corporate_rate');">
                    Request Corporate Rate
                </button>
                <button class="btn-pill btn-outline-gold justify-center py-3 text-xs !border-white !text-white hover:!bg-white hover:!text-slate-900" @click="selectForm('group'); logTelemetry('click_cta', 'final_submit_group_booking');">
                    Submit Group Booking
                </button>
            </div>
        </div>
    </section>

    <!-- Global Floating Toast Notification -->
    <div x-show="showToast"
         x-cloak
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-2 sm:translate-y-0 sm:translate-x-2"
         x-transition:enter-end="opacity-100 translate-y-0 sm:translate-x-0"
         x-transition:leave="transition ease-in duration-100"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed bottom-5 right-5 z-50 max-w-sm w-full bg-white dark:bg-slate-900 border rounded-[0.1rem] shadow-2xl p-4 flex items-start space-x-3"
         :class="toastType === 'success' ? 'border-emerald-500' : 'border-red-500'">
        <div class="flex-shrink-0">
            <template x-if="toastType === 'success'">
                <span class="text-emerald-500 text-lg font-bold">✔</span>
            </template>
            <template x-if="toastType === 'error'">
                <span class="text-red-500 text-lg font-bold">❌</span>
            </template>
        </div>
        <div class="flex-1 text-xs font-bold text-slate-800 dark:text-slate-200" x-text="toastMessage"></div>
    </div>

</div>

<!-- CSS Styling Helpers Injection -->
<style>
    [x-cloak] { display: none !important; }
    .btn-pill {
        display: inline-flex;
        align-items: center;
        border-radius: 50px;
        font-family: 'Inter', sans-serif;
        font-size: 0.875rem;
        font-weight: 600;
        padding: 0.625rem 1.5rem;
        min-height: 44px;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        outline: none;
    }
    .btn-primary {
        background-color: #2B3192;
        color: #d1d5dc;
        border: 2px solid transparent;
        box-shadow: 0 4px 6px -1px rgba(43, 49, 146, 0.1), 0 2px 4px -1px rgba(43, 49, 146, 0.06);
    }
    .btn-primary:hover {
        background-color: #D6A84F;
        color: #080D2B;
        transform: translateY(-2px);
    }
    .btn-outline-gold {
        background-color: transparent;
        color: #D6A84F;
        border: 2px solid #D6A84F;
    }
    .btn-outline-gold:hover {
        background-color: #D6A84F;
        color: #080D2B;
        transform: translateY(-2px);
    }
    /* Styles for scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
    }
    ::-webkit-scrollbar-track {
        background: #F4F8FF;
    }
    ::-webkit-scrollbar-thumb {
        background: #2B3192;
        border-radius: 50px;
    }
</style>

<!-- JSON-LD Structured Data Schema Markup -->
@if($schema)
<script type="application/ld+json">
    {!! json_encode($schema->schema_json, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) !!}
</script>
@endif
@endsection