@php
    $faqs = [
        ['q' => 'What is Yatra Card?', 'a' => 'Yatra Card is an NFC-based digital transport payment card that lets you pay bus fares instantly by tapping the card at the terminal — no cash needed.', 'cat' => 'Card'],
        ['q' => 'How do I get a Yatra Card?', 'a' => 'You can apply for a Personalized card online or purchase a Non-Personalized card instantly at any authorized counter or partner outlet.', 'cat' => 'Card'],
        ['q' => 'What documents are needed for a Personalized card?', 'a' => 'A copy of your citizenship/ID, a passport-size photo, and a completed KYC form are required for a Personalized card.', 'cat' => 'Card'],
        ['q' => 'How do I recharge my card?', 'a' => 'You can recharge via bank transfer, debit/credit card, mobile wallets (eSewa, Khalti, IME Pay), QR payment, or at any authorized recharge counter.', 'cat' => 'Recharge'],
        ['q' => 'Is there a validity period on the card?', 'a' => 'Non-Personalized cards are valid for 3 years from issue. Personalized cards remain valid as long as your account stays active.', 'cat' => 'Card'],
        ['q' => 'What happens if I lose my card?', 'a' => 'Personalized card holders can freeze the card instantly via the app and recover their remaining balance on a replacement card.', 'cat' => 'Security'],
        ['q' => 'Can students get a discount?', 'a' => 'Yes — verified students automatically receive discounted fares once their student ID is linked to a Personalized card.', 'cat' => 'Rewards'],
        ['q' => 'Which buses accept Yatra Card?', 'a' => 'Yatra Card is accepted on all 500+ partner buses across the Kathmandu Valley, with more routes being added regularly.', 'cat' => 'Card'],
        ['q' => 'Is my payment data secure?', 'a' => 'Yes. All transactions are encrypted end-to-end and processed under NRB-licensed, PCI-compliant payment infrastructure.', 'cat' => 'Security'],
        ['q' => 'Can I check my balance and history?', 'a' => 'Yes — balance and full transaction history are available anytime through the Yatra Card app or by tapping at any terminal.', 'cat' => 'Account'],
    ];
    $faqCategories = ['All', 'Card', 'Recharge', 'Security', 'Rewards', 'Account'];
@endphp

<section id="faq" class="py-20 dark:bg-ink lg:py-28" x-data="{ activeCat: 'All', search: '' }">
    <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">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>

        <div class="reveal mb-6">
            <div class="relative mx-auto max-w-md">
                <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-sm text-slate-400"></i>
                <input 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">
            @foreach ($faqCategories as $cat)
                <button type="button" @click="activeCat = '{{ $cat }}'"
                        :class="activeCat === '{{ $cat }}'
                            ? 'bg-primary text-white dark:bg-secondary'
                            : '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 @click="open = !open"
                            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 transition duration-300"
                           :class="open && 'rotate-180'"></i>
                    </button>
                    <div 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>
    </div>
</section>