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

<div class="space-y-3" x-data="{ open: null }">
    @foreach($items as $i => $item)
        <div class="overflow-hidden rounded-2xl border border-border bg-white shadow-sm">
            <button type="button"
                    class="flex w-full items-center justify-between px-6 py-5 text-left font-semibold text-secondary"
                    @click="open = open === {{ $i }} ? null : {{ $i }}"
                    :aria-expanded="open === {{ $i }}"
                    aria-controls="accordion-panel-{{ $i }}">
                {{ $item['question'] ?? $item['title'] ?? '' }}
                <svg class="h-5 w-5 shrink-0 text-primary transition-transform" :class="open === {{ $i }} && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div id="accordion-panel-{{ $i }}" x-show="open === {{ $i }}" x-cloak class="border-t border-border px-6 pb-5 pt-3 text-sm leading-relaxed text-muted" role="region">
                {!! $item['answer'] ?? $item['description'] ?? '' !!}
            </div>
        </div>
    @endforeach
</div>