@extends('layouts.app')

@section('title', $seo ? $seo->meta_title : 'FAQs | Kevron Suites and Apartments, Ikeja')
@section('meta_description', $seo ? $seo->meta_description : 'Find answers to common questions about Kevron Suites and Apartments, Adeniyi Jones, Ikeja, including booking, payment, check-in, cancellation, location, security, amenities, airport pickup, house rules, long stays and corporate bookings.')

@section('content')
<style>
    /* 1. TYPOGRAPHY FONT SIZE CAPS AND MARCELLUS HEADINGS */
    .faq-h1 {
        font-family: 'Marcellus', serif !important;
        font-size: clamp(1.4rem, 4vw, 1.8rem) !important;
        line-height: 1.2 !important;
    }
    .faq-h2 {
        font-family: 'Marcellus', serif !important;
        font-size: clamp(1.15rem, 3.2vw, 1.5rem) !important;
        line-height: 1.3 !important;
    }
    .faq-h3 {
        font-family: 'Marcellus', serif !important;
        font-size: clamp(1.0rem, 2.5vw, 1.35rem) !important;
        line-height: 1.4 !important;
    }
    .faq-body, 
    .faq-text, 
    #main-content p, 
    #main-content span, 
    #main-content li, 
    #main-content button, 
    #main-content input, 
    #main-content textarea, 
    #main-content select, 
    #main-content label, 
    #main-content a {
        font-family: 'Inter', sans-serif !important;
        font-size: clamp(0.78rem, 2vw, 0.875rem) !important;
    }

    /* 2. BUTTONS 50PX BORDER RADIUS & 3D BOUNCY HOVER */
    .faq-btn {
        border-radius: 50px !important;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-weight: 600 !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    .faq-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    .faq-btn:active {
        transform: translateY(1px);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    }

    /* 3. CARDS 0.1REM BORDER RADIUS & OFFSET SHADOWS */
    .faq-card {
        border-radius: 0.1rem !important;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px !important;
        transition: all 0.3s ease;
    }
    .faq-card:hover {
        background-color: #F4F8FF; /* Soft Ice Blue */
        box-shadow: rgba(43, 49, 146, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 10px 20px 0px !important;
    }
    .dark .faq-card:hover {
        background-color: #172033; /* Charcoal Navy */
        box-shadow: rgba(31, 173, 234, 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 10px 20px 0px !important;
    }

    /* 4. CUSTOM SCROLLBARS FOR KEVRON THEME */
    .faq-scrollbar::-webkit-scrollbar {
        height: 4px;
        width: 4px;
    }
    .faq-scrollbar::-webkit-scrollbar-track {
        background: #F4F8FF;
    }
    .faq-scrollbar::-webkit-scrollbar-thumb {
        background: #2B3192;
        border-radius: 2px;
    }
    .dark .faq-scrollbar::-webkit-scrollbar-track {
        background: #080D2B;
    }
    .dark .faq-scrollbar::-webkit-scrollbar-thumb {
        background: #1FADEA;
    }

    /* 5. REDUCED MOTION SUPPORT */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
        .faq-btn:hover {
            transform: none !important;
        }
    }
</style>

<div class="bg-white dark:bg-slate-950 min-h-screen text-slate-700 dark:text-slate-300 antialiased"
     x-data="faqApp()"
     x-init="initFaq()">

    <!-- Telemetry event -->
    <div x-init="logTelemetry('page_view', 'faq_index')"></div>

    <!-- 1. HERO SECTION -->
    <section class="relative py-16 bg-slate-50 dark:bg-slate-900 border-b border-slate-100 dark:border-slate-800 overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
                <!-- Left Content -->
                <div class="lg:col-span-7 space-y-6">
                    <span class="bg-blue-50 dark:bg-slate-800 text-blue-900 dark:text-blue-300 text-[10px] px-3 py-1 rounded-[0.1rem] font-bold uppercase tracking-wider">
                        Help & Support Centre
                    </span>
                    <h1 class="text-slate-900 dark:text-white font-normal faq-h1">
                        Frequently Asked Questions
                    </h1>
                    <p class="text-slate-500 dark:text-slate-400 font-medium leading-relaxed max-w-2xl">
                        Find answers to common questions about booking, payment, check-in, cancellation, location, security, amenities, transport, house rules, long stays and corporate stays at Kevron Suites and Apartments, Adeniyi Jones, Ikeja.
                    </p>

                    <!-- Trust Chips -->
                    <div class="flex flex-wrap gap-2 pt-2">
                        <span class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-[10px] px-2.5 py-1 rounded-[0.1rem] font-bold text-slate-500 dark:text-slate-400">
                            🛡 Booking support
                        </span>
                        <span class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-[10px] px-2.5 py-1 rounded-[0.1rem] font-bold text-slate-500 dark:text-slate-400">
                            🔑 Secure enquiries
                        </span>
                        <span class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-[10px] px-2.5 py-1 rounded-[0.1rem] font-bold text-slate-500 dark:text-slate-400">
                            ✈ Airport pickup on request
                        </span>
                        <span class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-[10px] px-2.5 py-1 rounded-[0.1rem] font-bold text-slate-500 dark:text-slate-400">
                            ⚡ 24-hour power
                        </span>
                        <span class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-[10px] px-2.5 py-1 rounded-[0.1rem] font-bold text-slate-500 dark:text-slate-400">
                            🔒 Smart security
                        </span>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex flex-wrap gap-3 pt-4">
                        <a href="{{ route('booking.index') }}" 
                           class="faq-btn bg-[#2B3192] hover:bg-[#1FADEA] text-white text-xs px-6 py-2.5 shrink-0" 
                           @click="logTelemetry('hero_click', 'book_now')">
                            Book Your Stay
                        </a>
                        <a href="#contact-support" 
                           class="faq-btn bg-white dark:bg-slate-900 border border-[#D6A84F] text-[#D6A84F] hover:bg-[#D6A84F] hover:text-slate-950 text-xs px-6 py-2.5 shrink-0" 
                           @click="logTelemetry('hero_click', 'contact_support')">
                            Contact Support
                        </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%20I%20have%20some%20questions%20regarding%20my%20upcoming%20stay." 
                           target="_blank" 
                           class="faq-btn bg-emerald-600 hover:bg-emerald-500 text-white text-xs px-6 py-2.5 shrink-0" 
                           @click="logTelemetry('hero_click', 'whatsapp')">
                            WhatsApp Us
                        </a>
                    </div>
                </div>

                <!-- Right Visual -->
                <div class="lg:col-span-5 relative">
                    <div class="aspect-video lg:aspect-square w-full bg-slate-200 dark:bg-slate-800 rounded-[0.1rem] overflow-hidden shadow-md border border-slate-200 dark:border-slate-800">
                        <img src="{{ asset('pictures/lounge.jpg') }}" alt="Kevron Suites Executive Lounge" class="w-full h-full object-cover">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 2. SEARCH & SUGGESTIONS BAR -->
    <section class="py-12 bg-white dark:bg-slate-950 border-b border-slate-100 dark:border-slate-800 scroll-mt-20" id="search-section">
        <div class="max-w-4xl mx-auto px-4">
            <div class="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-[0.1rem] p-6 shadow-sm">
                <label for="faq-search-input" class="block text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">
                    Search Our Knowledge Base
                </label>
                <div class="relative">
                    <input type="text" 
                           id="faq-search-input" 
                           x-model="searchQuery" 
                           x-on:input.debounce.300ms="performSearch()"
                           class="w-full text-xs p-4 bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-700 rounded-[0.1rem] focus:outline-none focus:border-[#2B3192] dark:focus:border-[#1FADEA] dark:text-white"
                           placeholder="Search booking, payment, airport pickup, check-in, cancellation, Wi-Fi, security...">
                    <button class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 focus:outline-none" 
                            x-show="searchQuery" 
                            @click="searchQuery = ''; performSearch();">
                        ✕
                    </button>
                </div>

                <!-- Suggestions Chips -->
                <div class="flex flex-wrap items-center gap-2 mt-4">
                    <span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Popular Searches:</span>
                    <button @click="searchQuery = 'airport pickup'; performSearch();" class="bg-white dark:bg-slate-950 hover:bg-slate-100 border border-slate-200 dark:border-slate-800 text-[10px] px-2.5 py-1 rounded-full font-semibold text-slate-500 dark:text-slate-400">airport pickup</button>
                    <button @click="searchQuery = 'Wi-Fi'; performSearch();" class="bg-white dark:bg-slate-950 hover:bg-slate-100 border border-slate-200 dark:border-slate-800 text-[10px] px-2.5 py-1 rounded-full font-semibold text-slate-500 dark:text-slate-400">Wi-Fi</button>
                    <button @click="searchQuery = 'cancellation'; performSearch();" class="bg-white dark:bg-slate-950 hover:bg-slate-100 border border-slate-200 dark:border-slate-800 text-[10px] px-2.5 py-1 rounded-full font-semibold text-slate-500 dark:text-slate-400">cancellation</button>
                    <button @click="searchQuery = 'check-in'; performSearch();" class="bg-white dark:bg-slate-950 hover:bg-slate-100 border border-slate-200 dark:border-slate-800 text-[10px] px-2.5 py-1 rounded-full font-semibold text-slate-500 dark:text-slate-400">check-in</button>
                </div>
            </div>
        </div>
    </section>

    <!-- 3. LIVE SEARCH RESULTS SLOT -->
    <section class="py-6 bg-slate-50 dark:bg-slate-900/50" x-show="searchQuery.trim().length > 0">
        <div class="max-w-4xl mx-auto px-4">
            <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-800 pb-3 mb-6">
                <h2 class="faq-h2 text-slate-900 dark:text-white">
                    Search Results for "<span x-text="searchQuery"></span>"
                </h2>
                <span class="bg-[#2B3192]/10 text-[#2B3192] dark:text-[#1FADEA] text-[10px] px-2 py-0.5 rounded font-bold" x-text="searchResults.length + ' matches found'"></span>
            </div>

            <!-- Loader -->
            <div x-show="searching" class="py-12 text-center text-slate-400">
                <svg class="animate-spin h-6 w-6 text-[#2B3192] mx-auto mb-2" 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>Searching our database...</span>
            </div>

            <!-- Results List -->
            <div class="space-y-4" x-show="!searching && searchResults.length > 0">
                <template x-for="result in searchResults" :key="result.id">
                    <div class="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 p-5 rounded-[0.1rem] shadow-sm">
                        <div class="flex items-center space-x-2 mb-2">
                            <span class="bg-[#1FADEA]/15 text-[#1FADEA] text-[9px] px-2 py-0.5 rounded font-bold uppercase tracking-wider" x-text="result.category_name"></span>
                        </div>
                        <h3 class="font-bold text-slate-900 dark:text-white text-xs mb-3" x-html="result.question"></h3>
                        <p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-semibold mb-4" x-html="result.answer"></p>
                        
                        <!-- Feedback Block -->
                        <div class="border-t border-slate-100 dark:border-slate-800 pt-3 flex items-center justify-between">
                            <span class="text-[10px] text-slate-400">Was this helpful?</span>
                            <div class="flex items-center space-x-2">
                                <button @click="submitFeedback(result.id, true)" class="text-[10px] bg-slate-100 hover:bg-emerald-50 hover:text-emerald-600 text-slate-500 px-3 py-1 rounded transition-colors font-semibold">Yes</button>
                                <button @click="triggerFeedbackComment(result.id)" class="text-[10px] bg-slate-100 hover:bg-red-50 hover:text-red-600 text-slate-500 px-3 py-1 rounded transition-colors font-semibold">No</button>
                            </div>
                        </div>

                        <!-- Feedback Comment Block -->
                        <div x-show="commentFaqId === result.id" class="mt-3 p-3 bg-slate-50 dark:bg-slate-900/50 rounded space-y-2 border border-slate-200 dark:border-slate-800">
                            <label class="block text-[9px] font-bold text-slate-400 uppercase tracking-wider">How can we improve this answer?</label>
                            <textarea x-model="feedbackComment" class="w-full text-xs p-2 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-950 rounded resize-none h-16 dark:text-white"></textarea>
                            <button @click="submitFeedback(result.id, false)" class="faq-btn bg-slate-900 hover:bg-slate-800 text-white text-[9px] py-1.5 px-3">Submit Feedback</button>
                        </div>
                    </div>
                </template>
            </div>

            <!-- No Result / Unanswered Question Form -->
            <div x-show="!searching && searchResults.length === 0" 
                 class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 sm:p-8 rounded-[0.1rem] shadow-sm text-center max-w-2xl mx-auto space-y-4">
                <span class="text-3xl block">🔍</span>
                <h3 class="faq-h3 text-slate-950 dark:text-white">We couldn't find an exact answer</h3>
                <p class="text-slate-400 max-w-md mx-auto text-xs">
                    We could not find an exact answer. You can ask our team directly, and we may add your question to the FAQ page.
                </p>

                <!-- Unanswered form -->
                <form @submit.prevent="submitAskForm()" id="ask-question-form" class="text-left space-y-4 pt-4 border-t border-slate-100 dark:border-slate-850">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1" for="ask_name">Your 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 focus:outline-none focus:border-[#2B3192] dark:text-white" type="text" id="ask_name" x-model="askForm.guest_name" required>
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1" for="ask_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 focus:outline-none focus:border-[#2B3192] dark:text-white" type="email" id="ask_email" x-model="askForm.email" required>
                        </div>
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1" for="ask_phone">Phone / WhatsApp (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 focus:outline-none focus:border-[#2B3192] dark:text-white" type="text" id="ask_phone" x-model="askForm.phone" placeholder="e.g. +234...">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1" for="ask_question">Your Question</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 focus:outline-none focus:border-[#2B3192] dark:text-white h-24 resize-none" id="ask_question" x-model="askForm.question" required placeholder="What would you like to know?"></textarea>
                    </div>
                    <div class="flex items-start">
                        <input class="mt-1 mr-2 rounded border-slate-200 text-[#2B3192] focus:ring-[#2B3192]" type="checkbox" id="ask_consent" x-model="askForm.consent" required>
                        <label class="text-[10px] text-slate-500" for="ask_consent">
                            I consent to having my question stored securely and reviewed by the Kevron Suites support relations team.
                        </label>
                    </div>
                    <button class="faq-btn bg-[#2B3192] hover:bg-[#1FADEA] text-white text-xs w-full py-3.5" type="submit" :disabled="submittingAsk">
                        <span x-show="!submittingAsk">Submit Question</span>
                        <span x-show="submittingAsk">Sending query...</span>
                    </button>
                </form>
            </div>
        </div>
    </section>

    <!-- 4. CATEGORY NAVIGATION (STICKY & HORIZONTAL MOBILE SCROLL) -->
    <section class="sticky top-20 z-30 py-4 bg-slate-50 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center space-x-2 overflow-x-auto pb-1 faq-scrollbar">
                <button @click="activeCategory = 'all'" 
                        class="faq-btn text-xs px-5 py-2 shrink-0 border"
                        :class="activeCategory === 'all' ? 'bg-[#2B3192] border-[#2B3192] text-white' : 'bg-white dark:bg-slate-950 border-slate-200 dark:border-slate-800 text-slate-500 hover:bg-slate-100'">
                    All FAQs
                </button>
                @foreach($categories as $category)
                <button @click="activeCategory = '{{ $category->slug }}'" 
                        class="faq-btn text-xs px-5 py-2 shrink-0 border"
                        :class="activeCategory === '{{ $category->slug }}' ? 'bg-[#2B3192] border-[#2B3192] text-white' : 'bg-white dark:bg-slate-950 border-slate-200 dark:border-slate-800 text-slate-500 hover:bg-slate-100'">
                    {{ $category->name }}
                </button>
                @endforeach
            </div>
        </div>
    </section>

    <!-- 5. FEATURED / POPULAR FAQS SECTION -->
    <section class="py-16 bg-white dark:bg-slate-950" x-show="activeCategory === 'all'">
        <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-[#D6A84F] font-bold block mb-2">Guest Favorites</span>
                <h2 class="faq-h2 text-slate-900 dark:text-white">Popular Questions</h2>
                <div class="h-0.5 w-16 bg-[#D6A84F] mx-auto mt-4"></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                @foreach($popularFaqs as $faq)
                <div class="faq-card bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-6 flex flex-col justify-between"
                     x-data="{ open: false }">
                    <div>
                        <div class="flex items-center justify-between mb-4">
                            <span class="bg-[#2B3192]/10 text-[#2B3192] dark:text-[#1FADEA] text-[9px] px-2 py-0.5 rounded font-bold uppercase tracking-wider">
                                {{ $faq->category ? $faq->category->name : 'Popular' }}
                            </span>
                            <span class="text-slate-300 dark:text-slate-700 text-xs">★ Featured</span>
                        </div>
                        <h3 class="font-bold text-slate-900 dark:text-white text-xs mb-3">
                            {{ $faq->question }}
                        </h3>
                        <p class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed font-semibold transition-all duration-300"
                           :class="open ? '' : 'line-clamp-2'">
                            {!! $faq->answer !!}
                        </p>
                    </div>

                    <div class="mt-4 pt-4 border-t border-slate-100 dark:border-slate-800 flex items-center justify-between">
                        <button @click="open = !open; logTelemetry('popular_expand', 'faq_' + '{{ $faq->id }}')" 
                                class="text-[#2B3192] dark:text-[#1FADEA] hover:underline font-bold text-[10px] focus:outline-none">
                            <span x-text="open ? 'Show Less &uarr;' : 'Read Full Answer &darr;'"></span>
                        </button>

                        <div class="flex items-center space-x-2">
                            <span class="text-[9px] text-slate-400">Helpful?</span>
                            <button @click="submitFeedback({{ $faq->id }}, true)" class="text-[9px] bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 hover:text-emerald-500 px-2 py-0.5 rounded transition-colors font-semibold">Yes</button>
                            <button @click="triggerFeedbackComment({{ $faq->id }})" class="text-[9px] bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 hover:text-red-500 px-2 py-0.5 rounded transition-colors font-semibold">No</button>
                        </div>
                    </div>

                    <!-- Inner Feedback Comment Block -->
                    <div x-show="commentFaqId === {{ $faq->id }}" class="mt-3 p-3 bg-white dark:bg-slate-950 rounded space-y-2 border border-slate-200 dark:border-slate-800">
                        <label class="block text-[9px] font-bold text-slate-400 uppercase tracking-wider">How can we improve this answer?</label>
                        <textarea x-model="feedbackComment" class="w-full text-xs p-2 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 rounded resize-none h-16 dark:text-white"></textarea>
                        <button @click="submitFeedback({{ $faq->id }}, false)" class="faq-btn bg-slate-900 hover:bg-slate-800 text-white text-[9px] py-1.5 px-3">Submit Feedback</button>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- 6. MAIN ACCORDION DIRECTORY -->
    <section class="py-16 bg-slate-50 dark:bg-slate-900/30 border-t border-b border-slate-100 dark:border-slate-800">
        <div class="max-w-4xl mx-auto px-4">
            
            <div class="space-y-12">
                @foreach($categories as $category)
                <div x-show="activeCategory === 'all' || activeCategory === '{{ $category->slug }}'"
                     class="space-y-4 transition-all duration-300">
                    
                    <!-- Category Header -->
                    <div class="border-b border-slate-200 dark:border-slate-800 pb-3 flex items-center space-x-3">
                        <span class="text-xl">
                            @if($category->slug === 'booking') 📅
                            @elseif($category->slug === 'payment') 💳
                            @elseif($category->slug === 'check-in-check-out') ⏰
                            @elseif($category->slug === 'cancellation') ❌
                            @elseif($category->slug === 'location') 📍
                            @elseif($category->slug === 'security') 🛡
                            @elseif($category->slug === 'amenities') ✨
                            @elseif($category->slug === 'transport') 🚗
                            @elseif($category->slug === 'house-rules') 🏠
                            @elseif($category->slug === 'long-stay') 🗓
                            @elseif($category->slug === 'corporate-stay') 👔
                            @elseif($category->slug === 'damages') ⚠️
                            @else 📝
                            @endif
                        </span>
                        <div>
                            <h2 class="faq-h2 text-slate-950 dark:text-white">{{ $category->name }}</h2>
                            @if($category->description)
                            <p class="text-[10px] text-slate-400 font-medium leading-relaxed">{{ $category->description }}</p>
                            @endif
                        </div>
                    </div>

                    <!-- Category Accordion Rows -->
                    <div class="space-y-3">
                        @foreach($category->faqs as $faq)
                        <div class="border border-slate-200 dark:border-slate-800 rounded-[0.1rem] overflow-hidden bg-white dark:bg-slate-950/40"
                             x-data="{ open: false }">
                            
                            <!-- Accordion Trigger Button -->
                            <button class="w-full text-left p-4 focus:outline-none flex justify-between items-center transition-colors text-slate-850 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-900/50"
                                    id="faq-trigger-{{ $faq->id }}"
                                    aria-expanded="false"
                                    x-bind:aria-expanded="open"
                                    aria-controls="faq-answer-{{ $faq->id }}"
                                    @click="open = !open; logTelemetry('faq_expand', 'faq_' + '{{ $faq->id }}')">
                                <span class="text-xs font-bold uppercase tracking-wide pr-4">{{ $faq->question }}</span>
                                <span class="text-xs text-slate-400 shrink-0" x-text="open ? '▲' : '▼'"></span>
                            </button>

                            <!-- Collapsible Content Wrapper -->
                            <div class="bg-slate-50/50 dark:bg-slate-900/20 border-t border-slate-100 dark:border-slate-800 p-5 space-y-4"
                                 id="faq-answer-{{ $faq->id }}"
                                 x-show="open"
                                 x-transition:enter="transition ease-out duration-200"
                                 x-transition:enter-start="transform opacity-0 -translate-y-1"
                                 x-transition:enter-end="transform opacity-100 translate-y-0"
                                 x-transition:leave="transition ease-in duration-100"
                                 x-transition:leave-start="transform opacity-100 translate-y-0"
                                 x-transition:leave-end="transform opacity-0 -translate-y-1">
                                
                                <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed font-semibold">
                                    {!! $faq->answer !!}
                                </p>

                                <!-- Was this helpful & voting metrics -->
                                <div class="border-t border-slate-200/50 dark:border-slate-800/50 pt-3 flex flex-wrap items-center justify-between gap-2">
                                    <span class="text-[10px] text-slate-400">Was this answer helpful to your query?</span>
                                    <div class="flex items-center space-x-2">
                                        <button @click="submitFeedback({{ $faq->id }}, true)" class="text-[10px] bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 hover:text-emerald-500 px-3 py-1 rounded transition-colors font-semibold">Yes</button>
                                        <button @click="triggerFeedbackComment({{ $faq->id }})" class="text-[10px] bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-800 hover:text-red-500 px-3 py-1 rounded transition-colors font-semibold">No</button>
                                    </div>
                                </div>

                                <!-- Feedback Comment Area -->
                                <div x-show="commentFaqId === {{ $faq->id }}" class="mt-3 p-3 bg-white dark:bg-slate-950 rounded space-y-2 border border-slate-200 dark:border-slate-800">
                                    <label class="block text-[9px] font-bold text-slate-400 uppercase tracking-wider">How can we improve this answer?</label>
                                    <textarea x-model="feedbackComment" class="w-full text-xs p-2 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 rounded resize-none h-16 dark:text-white"></textarea>
                                    <button @click="submitFeedback({{ $faq->id }}, false)" class="faq-btn bg-slate-900 hover:bg-slate-800 text-white text-[9px] py-1.5 px-3">Submit Feedback</button>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </div>

        </div>
    </section>

    <!-- 7. CONTACT SUPPORT / ESCALATION SECTION -->
    <section id="contact-support" 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="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-8 rounded-[0.1rem] shadow-sm">
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
                    <div class="lg:col-span-7 space-y-4">
                        <span class="text-xs uppercase tracking-[0.2em] text-[#D6A84F] font-bold block">Still Need Help?</span>
                        <h2 class="faq-h2 text-slate-900 dark:text-white">Have questions not covered in our FAQ database?</h2>
                        <p class="text-slate-500 dark:text-slate-400 font-medium leading-relaxed max-w-xl">
                            Still have questions? Our team can help you confirm availability, booking details, payment options, airport pickup, corporate stays or long-stay arrangements.
                        </p>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2 text-xs font-semibold text-slate-500 dark:text-slate-400">
                            <div>📞 Direct Phone: <span class="text-slate-800 dark:text-white font-bold">{{ \App\Models\SiteSetting::getVal('contact_phone', '+234 813 163 2926') }}</span></div>
                            <div>✉ Direct Email: <span class="text-slate-800 dark:text-white font-bold">{{ \App\Models\SiteSetting::getVal('contact_email', 'info@kevronapartments.com') }}</span></div>
                            <div>📍 Ikeja Branch: <span class="text-slate-800 dark:text-white font-bold">7B Regina Coker, Adeniyi Jones</span></div>
                            <div>🟢 Stays WhatsApp: <span class="text-slate-800 dark:text-white font-bold">{{ \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985') }}</span></div>
                        </div>
                    </div>

                    <div class="lg:col-span-5 flex flex-col sm:flex-row gap-3 justify-end">
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', \App\Models\Setting::getVal('brand_whatsapp', '+234 808 213 1985')) }}?text=Hello%20Kevron%20relations%20support%20team%2C%20I%20have%20an%20escalation%20query." 
                           target="_blank" 
                           class="faq-btn bg-emerald-600 hover:bg-emerald-500 text-white text-xs px-6 py-3 justify-center w-full sm:w-auto"
                           @click="logTelemetry('support_click', 'whatsapp')">
                            Chat on WhatsApp
                        </a>
                        <a href="{{ route('contact') }}" 
                           class="faq-btn bg-slate-900 hover:bg-slate-850 text-white text-xs px-6 py-3 justify-center w-full sm:w-auto"
                           @click="logTelemetry('support_click', 'contact_form')">
                            Open Contact Form
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 8. SEO/GEO CRAWLABLE CONTENT BLOCK -->
    <section class="py-12 bg-slate-50 dark:bg-slate-900/20 border-t border-slate-100 dark:border-slate-800 text-center">
        <div class="max-w-4xl mx-auto px-4 text-slate-400 dark:text-slate-500 leading-relaxed font-semibold">
            <h3 class="text-[10px] font-bold text-slate-900 dark:text-white uppercase tracking-wider mb-3">
                Corporate Living & Relocation Support Ikeja
            </h3>
            <p class="max-w-2xl mx-auto">
                Kevron Suites and Apartments provides answers to common guest questions about booking luxury serviced apartments in Adeniyi Jones, Ikeja, Lagos. Guests can find information about booking, payment, check-in and check-out, cancellation, airport access, security, 24-hour power, Wi-Fi, airport pickup, house rules, long stays, corporate stays and security deposit requirements.
            </p>
        </div>
    </section>

    <!-- 9. FINAL CALL TO ACTION -->
    <section class="py-20 bg-[#080D2B] text-white text-center relative overflow-hidden">
        <!-- Accent circles -->
        <div class="absolute -top-24 -left-24 w-48 h-48 bg-[#2B3192]/20 rounded-full blur-2xl"></div>
        <div class="absolute -bottom-24 -right-24 w-48 h-48 bg-[#1FADEA]/20 rounded-full blur-2xl"></div>

        <div class="max-w-3xl mx-auto px-4 relative z-10 space-y-6">
            <span class="text-xs uppercase tracking-[0.25em] text-[#D6A84F] font-bold block">Exclusive Serviced Living</span>
            <h2 class="faq-h1 text-white">Have Your Questions Answered? Book Your Stay in Ikeja</h2>
            <p class="text-slate-400 max-w-xl mx-auto leading-relaxed text-xs">
                Choose from luxury 1, 2, 3 and 4 bedroom serviced apartments at Kevron Suites and Apartments, Adeniyi Jones, Ikeja.
            </p>

            <div class="flex flex-wrap justify-center gap-3 pt-4">
                <a href="{{ route('booking.index') }}" 
                   class="faq-btn bg-[#2B3192] hover:bg-[#1FADEA] text-white text-xs px-8 py-3"
                   @click="logTelemetry('bottom_cta', 'book_now')">
                    Book Your Stay
                </a>
                <a href="{{ route('apartments.index') }}" 
                   class="faq-btn bg-transparent border border-white hover:bg-white hover:text-slate-950 text-white text-xs px-8 py-3"
                   @click="logTelemetry('bottom_cta', 'view_apartments')">
                    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%20Apartments%2C%20I%20am%20ready%20to%20reserve%20a%20suite%20in%20Ikeja." 
                   target="_blank" 
                   class="faq-btn bg-emerald-600 hover:bg-emerald-500 text-white text-xs px-8 py-3"
                   @click="logTelemetry('bottom_cta', 'whatsapp')">
                    WhatsApp Us
                </a>
            </div>
        </div>
    </section>

    <!-- Global Floating Toast Notification -->
    <div x-show="showToast" 
         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 p-4 rounded-[0.1rem] text-xs font-bold text-white shadow-lg flex items-center space-x-2"
         :class="toastType === 'success' ? 'bg-emerald-600' : 'bg-red-600'">
        <span x-text="toastType === 'success' ? '✓' : '⚠️'"></span>
        <span x-text="toastMessage"></span>
    </div>

</div>

<!-- JSON-LD Structured Data Schema for FAQPage -->
@if($schema && $schema->schema_json)
<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": "FAQPage",
    "mainEntity": [
        {
            "@@type": "Question",
            "name": "How do I book an apartment?",
            "acceptedAnswer": {
                "@@type": "Answer",
                "text": "You can secure your booking directly through our secure online reservation portal by navigating to the booking page. Alternatively, you can contact our reservation desk via telephone or WhatsApp. Confirmation is immediate once payment is processed and verified."
            }
        },
        {
            "@@type": "Question",
            "name": "What payment methods are accepted?",
            "acceptedAnswer": {
                "@@type": "Answer",
                "text": "We accept direct bank transfers, credit/debit cards (via our secure online gateway, where configured), and corporate payment platforms. Please note that all payments must clear in our bank account before keys are issued."
            }
        },
        {
            "@@type": "Question",
            "name": "What time is check-in and check-out?",
            "acceptedAnswer": {
                "@@type": "Answer",
                "text": "Our standard check-in time is from 2:00 PM, and standard check-out is by 12:00 PM (noon). Early check-in or late check-out is subject to availability and prior management approval."
            }
        },
        {
            "@@type": "Question",
            "name": "Is there 24-hour power and Wi-Fi?",
            "acceptedAnswer": {
                "@@type": "Answer",
                "text": "Yes, we provide uninterrupted 24-hour power backup supported by solar systems, soundproof backup generators, and inverter setups. Complimentary high-speed fiber-optic Wi-Fi is active throughout the entire building."
            }
        }
    ]
}
</script>
@endif

<script>
function faqApp() {
    return {
        // Search State
        searchQuery: '',
        searching: false,
        searchResults: [],

        // Navigation state
        activeCategory: 'all',

        // Feedback logs
        commentFaqId: null,
        feedbackComment: '',

        // Unanswered Question Form
        askForm: {
            guest_name: '',
            email: '',
            phone: '',
            question: '',
            category_slug: '',
            consent: false
        },
        submittingAsk: false,

        // Toast properties
        showToast: false,
        toastMessage: '',
        toastType: 'success',

        initFaq() {
            // Check url params for category filter trigger
            const params = new URLSearchParams(window.location.search);
            const cat = params.get('category');
            if (cat) {
                this.activeCategory = cat;
            }
        },

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

        performSearch() {
            const query = this.searchQuery.trim();
            if (query.length < 2) {
                this.searchResults = [];
                return;
            }

            this.searching = true;
            this.commentFaqId = null;

            fetch(`/faqs/search?query=${encodeURIComponent(query)}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                this.searching = false;
                if (data.success) {
                    this.searchResults = data.results;
                    this.logTelemetry('search_query', query);
                }
            })
            .catch(err => {
                this.searching = false;
                console.error('Failed FAQ search', err);
            });
        },

        triggerFeedbackComment(faqId) {
            this.commentFaqId = faqId;
            this.feedbackComment = '';
        },

        submitFeedback(faqId, isHelpful) {
            fetch('/faqs/feedback', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    faq_id: faqId,
                    is_helpful: isHelpful,
                    feedback_text: this.feedbackComment
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    this.triggerToast(data.message, 'success');
                    this.commentFaqId = null;
                    this.feedbackComment = '';
                    this.logTelemetry(isHelpful ? 'helpful_yes' : 'helpful_no', 'faq_' + faqId);
                } else {
                    this.triggerToast(data.message || 'Verification issue', 'error');
                }
            })
            .catch(err => {
                // If 422 is returned, it means duplicate vote
                this.triggerToast('You have already submitted feedback for this question.', 'error');
                this.commentFaqId = null;
            });
        },

        submitAskForm() {
            this.submittingAsk = true;
            this.askForm.category_slug = this.activeCategory !== 'all' ? this.activeCategory : '';

            fetch('/faqs/ask', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify(this.askForm)
            })
            .then(res => res.json())
            .then(data => {
                this.submittingAsk = false;
                if (data.success) {
                    this.triggerToast(data.message, 'success');
                    // Reset askForm
                    this.askForm = {
                        guest_name: '',
                        email: '',
                        phone: '',
                        question: '',
                        category_slug: '',
                        consent: false
                    };
                    this.logTelemetry('ask_unanswered_submit', 'success');
                } else {
                    this.triggerToast('Failed to submit question. Please verify your email.', 'error');
                }
            })
            .catch(err => {
                this.submittingAsk = false;
                this.triggerToast('Error submitting support enquiry.', 'error');
            });
        },

        logTelemetry(action, key) {
            fetch('/offers/log', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    event_type: action,
                    event_key: key
                })
            }).catch(e => {});
        }
    };
}
</script>
@endsection