{{# FAQ Accordion Section #}}
<section class="py-16 full-bleed bg-[#f9f8ff]">
    <div class="max-w-3xl mx-auto">
        {{ if title }}
        <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] text-center mb-3 title-underline" data-aos="fade-up">
            {{ title }}
        </h2>
        {{ /if }}
        {{ if faq_items }}
        <div class="space-y-3 mt-10">
            {{ faq_items }}
            <div class="bg-white rounded-lg shadow-sm border border-gray-100" x-data="{ open: false }" data-aos="fade-up" data-aos-delay="{{ index | multiply:50 }}">
                <button @click="open = !open" class="w-full flex items-center justify-between px-6 py-4 text-left">
                    <span class="font-nunito font-bold text-[#252a3f] text-sm">{{ question }}</span>
                    <i class="fa-solid fa-chevron-down text-[#6254e7] text-xs transition-transform duration-300" :class="open && 'rotate-180'"></i>
                </button>
                <div x-show="open" x-collapse>
                    <div class="px-6 pb-4 text-sm text-[#696687] leading-relaxed">
                        {{ answer }}
                    </div>
                </div>
            </div>
            {{ /faq_items }}
        </div>
        {{ /if }}
    </div>
</section>