@php
    $faqCategoryModels = \App\Models\FaqCategory::where('is_published', true)
        ->orderBy('display_order')
        ->with(['faqs' => fn ($query) => $query->orderBy('id')])
        ->get()
        ->filter(fn ($category) => $category->faqs->isNotEmpty())
        ->values();

    $faqs = $faqCategoryModels
        ->flatMap(fn ($category) => $category->faqs->map(fn ($faq) => [
            'q' => $faq->question,
            'a' => $faq->answer,
            'cat' => $category->name,
        ]))
        ->values()
        ->all();

    $faqCategories = $faqCategoryModels->pluck('name')->prepend('All')->values()->all();
@endphp

<section id="faq" class="py-20 dark:bg-ink lg:py-28"
         x-data="{
             activeCat: 'All',
             search: '',
             faqs: @js(collect($faqs)->map(fn ($f) => ['cat' => $f['cat'], 'q' => strtolower($f['q'])])->values()),
             anyVisible() {
                 return this.faqs.some((f) => (this.activeCat === 'All' || this.activeCat === f.cat) && f.q.includes(this.search.toLowerCase()));
             },
         }">
    <div class="mx-auto max-w-3xl px-6">
        <div class="reveal mx-auto mb-10 max-w-2xl text-center">
            <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary-a11y dark:text-secondary">FAQ</p>
            <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                Frequently Asked <span class="text-primary dark:text-secondary">Questions</span>
            </h2>
        </div>

        @if (empty($faqs))
            <div class="reveal mx-auto max-w-md rounded-xl border border-dashed border-slate-200 py-12 text-center dark:border-white/10">
                <i class="fa-solid fa-clock-rotate-left mb-3 text-2xl text-slate-300 dark:text-slate-600" aria-hidden="true"></i>
                <p class="text-sm font-semibold text-slate-600 dark:text-slate-300">Will be available soon</p>
                <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">We're putting together answers to the questions we hear most. Check back shortly.</p>
            </div>
        @else
            <div class="reveal mb-6">
                <div class="relative mx-auto max-w-md">
                    <label for="faq-search" class="sr-only">Search questions</label>
                    <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-sm text-slate-400" aria-hidden="true"></i>
                    <input id="faq-search" type="text" x-model="search" placeholder="Search questions..."
                           class="w-full rounded-xl border border-slate-200 bg-white py-2.5 pl-10 pr-4 text-sm text-slate-800 outline-none transition focus:border-primary dark:border-white/10 dark:bg-panel dark:text-white dark:focus:border-secondary">
                </div>
            </div>

            <div class="reveal mb-8 flex flex-wrap justify-center gap-2" role="group" aria-label="Filter FAQs by category">
                @foreach ($faqCategories as $cat)
                    <button type="button" @click="activeCat = '{{ $cat }}'" :aria-pressed="(activeCat === '{{ $cat }}').toString()"
                            :class="activeCat === '{{ $cat }}'
                                ? 'bg-primary text-white dark:bg-secondary dark:text-ink'
                                : 'text-slate-500 hover:bg-primary/5 hover:text-primary dark:text-slate-400 dark:hover:bg-white/5 dark:hover:text-secondary'"
                            class="rounded-xl px-4 py-2 text-xs font-semibold transition duration-300">
                        {{ $cat }}
                    </button>
                @endforeach
            </div>

            <div class="reveal space-y-3">
                @foreach ($faqs as $faq)
                    <div x-data="{ open: false }"
                         x-show="(activeCat === 'All' || activeCat === '{{ $faq['cat'] }}') && '{{ strtolower(addslashes($faq['q'])) }}'.includes(search.toLowerCase())"
                         class="overflow-hidden rounded-xl border border-slate-100 bg-white transition duration-300 dark:border-white/10 dark:bg-panel">
                        <button type="button" @click="open = !open" :aria-expanded="open.toString()" aria-controls="faq-panel-{{ $loop->index }}"
                                class="flex w-full items-center justify-between gap-4 px-6 py-4 text-left text-sm font-semibold text-slate-800 dark:text-white">
                            <span>{{ $faq['q'] }}</span>
                            <i class="fa-solid fa-chevron-down flex-shrink-0 text-secondary-a11y dark:text-secondary transition duration-300"
                               :class="open && 'rotate-180'" aria-hidden="true"></i>
                        </button>
                        <div id="faq-panel-{{ $loop->index }}" x-show="open" x-collapse x-cloak>
                            <p class="px-6 pb-5 text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $faq['a'] }}</p>
                        </div>
                    </div>
                @endforeach

                <div x-show="!anyVisible()" x-cloak class="reveal rounded-xl border border-dashed border-slate-200 py-12 text-center dark:border-white/10">
                    <i class="fa-solid fa-magnifying-glass mb-3 text-2xl text-slate-300 dark:text-slate-600" aria-hidden="true"></i>
                    <p class="text-sm font-semibold text-slate-600 dark:text-slate-300">No matching questions found</p>
                    <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">Try a different search term, or browse another category.</p>
                    <button type="button" @click="search = ''; activeCat = 'All'"
                            class="mt-4 text-xs font-semibold text-primary underline decoration-primary/40 underline-offset-2 transition hover:decoration-primary dark:text-secondary dark:decoration-secondary/40 dark:hover:decoration-secondary">
                        Clear search &amp; filters
                    </button>
                </div>
            </div>
        @endif
    </div>
</section>