@php($rows = $block->data['items'] ?? [])

<section class="section-tight">
    <div class="container-page max-w-3xl">
        @if ($block->heading)
            <h2 class="mb-8 font-display text-headline font-bold text-text" data-reveal>{{ $block->heading }}</h2>
        @endif

        @if (filled($rows))
            <div class="divide-y divide-border overflow-hidden rounded-2xl border border-border bg-surface">
                @foreach ($rows as $index => $row)
                    <div x-data="{ open: false }" class="px-6">
                        <h3>
                            <button type="button" @click="open = !open" :aria-expanded="open"
                                    aria-controls="block-{{ $block->id }}-{{ $index }}"
                                    class="flex w-full items-center justify-between gap-5 py-5 text-left">
                                <span class="font-medium text-text">{{ $row['title'] ?? '' }}</span>
                                <x-icon name="chevron-down" class="size-4 shrink-0 text-text-muted transition-transform"
                                        ::class="open && 'rotate-180'" />
                            </button>
                        </h3>

                        <div id="block-{{ $block->id }}-{{ $index }}" x-show="open" x-collapse x-cloak>
                            <div class="prose-content pb-6 text-sm">{!! $row['body'] ?? '' !!}</div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>