@php
    $single = $block->get('single_open', true);
    $itemClass = match ($variant) {
        'separated' => 'ec-surface rounded-xl shadow-sm mb-3',
        'minimal'   => 'border-b',
        default     => 'border rounded-xl mb-3',
    };
@endphp
<div class="{{ $variant === 'two_column' ? 'max-w-6xl' : 'max-w-3xl' }} mx-auto px-4 sm:px-6 lg:px-8">
    @if ($block->get('title') || $block->get('subtitle'))
        <header class="text-center mb-10">
            @if ($block->get('title'))
                <h2 class="ec-heading text-3xl sm:text-4xl font-bold">{{ $block->get('title') }}</h2>
            @endif
            @if ($block->get('subtitle'))
                <p class="ec-muted mt-3">{{ $block->get('subtitle') }}</p>
            @endif
        </header>
    @endif

    <div x-data="{ open: null }" class="{{ $variant === 'two_column' ? 'md:columns-2 md:gap-8' : '' }}">
        @foreach ($items as $i => $item)
            @php
                $q = $block->get("items.{$i}.question") ?: (website_text(data_get($item, 'question')) ?: data_get($item, 'question_ar'));
                $a = $block->get("items.{$i}.answer") ?: (website_text(data_get($item, 'answer')) ?: data_get($item, 'answer_ar'));
            @endphp
            <div class="{{ $itemClass }} break-inside-avoid overflow-hidden">
                <h3>
                    <button type="button"
                            x-on:click="open = (open === {{ $i }} ? null : {{ $i }})"
                            x-bind:aria-expanded="open === {{ $i }} ? 'true' : 'false'"
                            aria-controls="faq-panel-{{ $block->id }}-{{ $i }}"
                            class="w-full flex items-center justify-between gap-4 text-start p-5 font-semibold">
                        <span>{{ $q }}</span>
                        <svg class="w-5 h-5 shrink-0 transition-transform" x-bind:class="open === {{ $i }} && 'rotate-180'"
                             fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>
                </h3>
                <div id="faq-panel-{{ $block->id }}-{{ $i }}" x-show="open === {{ $i }}" x-collapse x-cloak>
                    <div class="ec-muted ec-prose px-5 pb-5">{!! clean_html($a) !!}</div>
                </div>
            </div>
        @endforeach
    </div>
</div>
