@props(['faqs'])

{{--
    Native <details>/<summary> rather than a JS-driven accordion: fully
    accessible and keyboard-operable out of the box, works with JS disabled,
    and costs zero script-execution time — the most Lighthouse-friendly way
    to build this pattern.
--}}
<div class="mx-auto max-w-3xl divide-y divide-slate-200 dark:divide-slate-800">
    @foreach ($faqs as $faq)
        <details class="group py-6" @if ($loop->first) open @endif>
            <summary class="flex cursor-pointer list-none items-center justify-between gap-4 text-left font-semibold text-slate-900 dark:text-white">
                {{ $faq['question'] }}
                <svg class="h-5 w-5 shrink-0 text-slate-400 transition group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.5v15m7.5-7.5h-15" />
                </svg>
            </summary>
            <p class="mt-3 text-sm leading-relaxed text-slate-600 dark:text-slate-300">
                {{ $faq['answer'] }}
            </p>
        </details>
    @endforeach
</div>