@php $faq = $home['faq'] ?? []; @endphp
<section class="home-section home-section--muted">
    <div class="container-page">
        <div class="mx-auto max-w-2xl">
            @include('pages.home._section-head', [
                'kicker' => $faq['kicker'] ?? '',
                'title' => $faq['title'] ?? '',
                'lead' => $faq['lead'] ?? '',
                'centered' => true,
            ])

            <div class="home-faq home-faq--panel mt-10">
                @foreach(($faq['items'] ?? []) as $i => $item)
                    <div class="home-faq__item" x-data="{ open: {{ $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" x-cloak class="home-faq__answer">
                            {{ $item['answer'] ?? '' }}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>