{{-- resources/views/components/faq-section.blade.php --}}
<section id="faq" class="max-w-screen-xl px-4 py-12 mx-auto lg:px-20" itemscope itemtype="https://schema.org/FAQPage">
    <div>
        <div class="mb-8 text-center lg:mb-10">
            <h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 md:text-4xl">
                {{ config('site-content.faq.title') }}
            </h2>
            <p class="text-gray-500 sm:text-xl">
                {{ config('site-content.faq.description') }}
            </p>
        </div>

        <div class="grid gap-5 text-start md:gap-8 md:grid-cols-2">
            @foreach(config('site-content.faq.items') as $index => $faq)
                <div x-data="{ open: false }" itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
                    <h2 id="faq-q-{{ $index+1 }}" itemprop="name">
                        <button @click="open = !open"
                            class="relative flex items-baseline justify-between w-full gap-3 p-5 font-medium text-gray-700 border border-b-0 border-gray-200 hover:bg-primary-50 {{ $loop->first ? 'rounded-t-xl' : '' }}">
                            <span class="flex items-baseline">
                                <i class="fad fa-question-circle me-2"></i>
                                {{ $faq['question'] }}
                            </span>
                            <i class="fad fa-chevron-down transform transition-transform duration-200"
                               :class="{ 'rotate-180': open }"></i>
                        </button>
                    </h2>
                    <div x-show="open" x-transition
                        class="p-5 border border-t-0 border-gray-200 dark:bg-gray-900"
                        itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
                        <p class="text-gray-500" itemprop="text">{{ $faq['answer'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
<script src="//unpkg.com/alpinejs" defer></script>