@php
    $items = array_values(array_filter($data['items'] ?? [], fn ($i) => filled($i['question'] ?? null)));
    $firstOpen = ! empty($data['first_open']);
@endphp
<section class="{{ $cls }}" {{ $attrs }}>
    <div class="container-page">
        <div class="mx-auto max-w-2xl">
            @include('builder.partials.head')

            <div class="home-faq home-faq--panel mt-10">
                @foreach($items as $i => $item)
                    <div class="home-faq__item" x-data="{ open: {{ $firstOpen && $i === 0 ? 'true' : 'false' }} }">
                        <button type="button" class="home-faq__trigger" @click="open = !open" :aria-expanded="open">
                            {{ $item['question'] }}
                            <span class="home-faq__icon" x-text="open ? '−' : '+'" aria-hidden="true"></span>
                        </button>
                        <div x-show="open" @unless($firstOpen && $i === 0) x-cloak @endunless class="home-faq__answer">
                            {{ $item['answer'] ?? '' }}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    @if(! empty($data['schema']) && count($items))
        <script type="application/ld+json">{!! json_encode([
            '@context' => 'https://schema.org',
            '@type' => 'FAQPage',
            'mainEntity' => array_map(fn ($i) => [
                '@type' => 'Question',
                'name' => $i['question'],
                'acceptedAnswer' => ['@type' => 'Answer', 'text' => $i['answer'] ?? ''],
            ], $items),
        ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!}</script>
    @endif
</section>