@props(['items', 'title' => 'Frequently Asked Questions'])
<section {{ $attributes->class(['section', 'faq-section']) }}>
    <div class="shell faq-layout">
        <div class="faq-heading"><h2>{{ $title }}</h2></div>
        <div class="faq-list" x-data="{ open: 0 }">
            @foreach($items as $item)
                <article>
                    <h3><button type="button" @click="open = open === {{ $loop->index }} ? -1 : {{ $loop->index }}" :aria-expanded="open === {{ $loop->index }}" aria-controls="faq-{{ $loop->index }}-{{ md5($item['question']) }}"><span>{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>{{ $item['question'] }}<i aria-hidden="true">+</i></button></h3>
                    <div id="faq-{{ $loop->index }}-{{ md5($item['question']) }}" x-show="open === {{ $loop->index }}" x-transition.opacity><p>{{ $item['answer'] }}</p></div>
                </article>
            @endforeach
        </div>
    </div>
</section>