@if ($desa->faqs->isNotEmpty())
<section id="faq" class="py-5" style="background-color: #F5F5F5;">
    <div class="container" style="max-width: 700px;">
        <h2 class="h4 text-center mb-4">FAQ</h2>

        <div class="accordion" x-data="{ open: null }">
            @foreach ($desa->faqs as $index => $faq)
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" @click="open = open === {{ $index }} ? null : {{ $index }}">
                            {{ $faq->pertanyaan }}
                        </button>
                    </h2>
                    <div x-show="open === {{ $index }}" x-cloak class="accordion-body">
                        {{ $faq->jawaban }}
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif
