@if(!empty($faq['items']))
    <section class="faq section" id="faq" aria-labelledby="faq-title" @sectionTone($faq['style'] ?? [])>
        <div class="container faq__layout">
            <div class="faq__intro reveal">
                <p class="eyebrow" data-edit="faq.eyebrow">{{ $faq['eyebrow'] ?? '' }}</p>
                <h2 id="faq-title"><x-editable path="faq.title">{{ $faq['title'] ?? '' }}</x-editable></h2>
                <p class="section-head__desc"><x-editable path="faq.description">{{ $faq['description'] ?? '' }}</x-editable></p>

                <div class="faq__support">
                    <p class="faq__support-title"><x-editable path="faq.supportTitle">{{ $faq['supportTitle'] ?? 'Still have questions?' }}</x-editable></p>
                    <p class="faq__support-text"><x-editable path="faq.supportText">{{ $faq['supportText'] ?? '' }}</x-editable></p>
                    <div class="faq__support-actions">
                        @if(!empty($meta['whatsapp']))
                            <a class="btn btn--ink btn--sm" href="{{ $meta['whatsapp'] }}" target="_blank" rel="noreferrer" data-edit-href="meta.whatsapp"><x-editable path="faq.whatsappLabel">{{ $faq['whatsappLabel'] ?? 'Chat on WhatsApp' }}</x-editable></a>
                        @endif
                        @if(!empty($meta['email']))
                            <a class="link-arrow" href="mailto:{{ $meta['email'] }}" data-edit="meta.email" data-edit-href="meta.email" data-edit-prefix="mailto:">{{ $meta['email'] }}</a>
                        @endif
                    </div>
                </div>
            </div>

            <div class="faq__list reveal">
                @foreach($faq['items'] as $item)
                    <details class="faq-item" @if($loop->first) open @endif>
                        <summary>
                            <span><x-editable path="faq.items.{{ $loop->index }}.question">{{ $item['question'] ?? '' }}</x-editable></span>
                            <span class="faq-item__icon" aria-hidden="true"></span>
                        </summary>
                        <div class="faq-item__answer">
                            <p><x-editable path="faq.items.{{ $loop->index }}.answer">{{ $item['answer'] ?? '' }}</x-editable></p>
                        </div>
                    </details>
                @endforeach
            </div>
        </div>
    </section>
@endif