@props([
    'items' => [],
    'title' => null,
    'eyebrow' => null,
])

@php
    $faqs = collect($items)
        ->filter(fn ($item): bool => filled(data_get($item, 'question')) && filled(data_get($item, 'answer')))
        ->values();

    // Unique prefix so multiple FAQ blocks on one page keep their ARIA wiring
    // (aria-controls / aria-labelledby) valid.
    $faqUid = \Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(6));
@endphp

@if ($faqs->isNotEmpty())
    <div {{ $attributes->merge(['class' => '']) }} data-faq>
        @if (filled($eyebrow))
            <p class="mb-3 font-sans text-xs font-bold uppercase tracking-[0.22em] text-accent-text">{{ $eyebrow }}</p>
        @endif

        @if (filled($title))
            <h2 class="font-serif text-h2 font-normal uppercase leading-[0.95] text-on-surface">{{ $title }}</h2>
        @endif

        <div class="mt-6 space-y-3">
            @foreach ($faqs as $faq)
                @php
                    $itemId = 'faq-'.$faqUid.'-'.$loop->index;
                    $panelId = $itemId.'-panel';
                @endphp
                <div data-faq-item
                     x-data="{ open: false }"
                     class="rounded-none border border-line bg-surface-raised shadow-soft transition-shadow duration-base ease-out-soft">
                    <button type="button"
                            id="{{ $itemId }}"
                            @click="open = ! open"
                            aria-expanded="false"
                            aria-controls="{{ $panelId }}"
                            :aria-expanded="open ? 'true' : 'false'"
                            class="flex w-full cursor-pointer items-center justify-between gap-4 p-5 text-left font-serif text-h3 text-on-surface">
                        <span>{{ $faq['question'] }}</span>
                        <span aria-hidden="true"
                              class="shrink-0 text-on-surface-muted transition-transform duration-base ease-out-soft"
                              :class="open ? 'rotate-180' : ''">
                            <x-icon name="chevron-down" :size="20" />
                        </span>
                    </button>

                    {{-- Smooth height: the animated grid track goes 0fr → 1fr so the
                         answer expands and collapses without measuring heights. The
                         shared duration tokens neutralize it under reduced motion. --}}
                    <div id="{{ $panelId }}"
                         role="region"
                         aria-labelledby="{{ $itemId }}"
                         style="grid-template-rows: 0fr"
                         :style="open ? 'grid-template-rows: 1fr' : 'grid-template-rows: 0fr'"
                         class="grid transition-[grid-template-rows] duration-base ease-out-soft">
                        <div class="overflow-hidden">
                            <div class="border-t border-line px-5 py-4 font-sans text-body text-on-surface-muted">
                                {{ $faq['answer'] }}
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endif