{{-- Expects: $faqs (array of ['q' => ..., 'a' => ...]), optional $faqTitle / $faqSubtitle --}}
<section class="mx-auto max-w-3xl px-4 py-20 sm:px-6 sm:py-24" aria-label="Veelgestelde vragen">
    <div class="text-center">
        <h2 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl dark:text-white">
            {{ $faqTitle ?? 'Veelgestelde vragen' }}
        </h2>
        <p class="mt-4 text-lg text-slate-500 dark:text-slate-400">
            {{ $faqSubtitle ?? 'Staat je vraag er niet tussen? Mail ons via support@certified.eu.' }}
        </p>
    </div>

    <div class="mt-12 divide-y divide-slate-200 rounded-2xl border border-slate-200 bg-white shadow-sm dark:divide-slate-800 dark:border-slate-800 dark:bg-slate-900">
        @foreach ($faqs as $faq)
            <div x-data="{ expanded: false }">
                <button
                    type="button"
                    @click="expanded = !expanded"
                    :aria-expanded="expanded"
                    class="flex w-full items-center justify-between gap-4 px-6 py-5 text-left transition-colors duration-200 hover:bg-slate-50 dark:hover:bg-slate-800/50"
                >
                    <span class="text-base font-semibold text-slate-900 dark:text-white">{{ $faq['q'] }}</span>
                    <svg
                        class="size-5 shrink-0 text-emerald-600 transition-transform duration-300 dark:text-emerald-400"
                        :class="expanded && 'rotate-180'"
                        fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                    </svg>
                </button>
                <div x-show="expanded" x-collapse x-cloak>
                    <p class="px-6 pb-5 text-base leading-relaxed text-slate-600 dark:text-slate-400">{{ $faq['a'] }}</p>
                </div>
            </div>
        @endforeach
    </div>
</section>