@props(['items' => []])

<section class="section bg-surface">
    <div class="container-site max-w-3xl">
        <div class="text-center mb-12">
            <p class="section-label justify-center">Frequently Asked Questions</p>
            <h2 class="heading-md">Common questions</h2>
        </div>

        <div x-data="faq()" class="space-y-3">
            @foreach($items as $i => $faq)
            <div class="bg-white rounded-xl3 border border-graphite-100 shadow-xs overflow-hidden">
                <button @click="toggle({{ $i }})"
                        class="w-full flex items-center justify-between gap-4 px-6 py-5 text-left
                               hover:bg-graphite-50 transition-colors"
                        :aria-expanded="open === {{ $i }}">
                    <span class="font-semibold text-graphite-900 text-sm leading-snug">
                        {{ $faq['q'] }}
                    </span>
                    <svg class="w-5 h-5 text-teal-500 flex-shrink-0 transition-transform duration-200"
                         :class="open === {{ $i }} ? 'rotate-180' : ''"
                         viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
                    </svg>
                </button>
                <div x-show="open === {{ $i }}"
                     x-collapse
                     x-cloak
                     class="px-6 pb-5 text-sm text-graphite-600 leading-relaxed border-t border-graphite-100 pt-4">
                    {!! $faq['a'] !!}
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>