{{-- SECTION: Preguntas Frecuentes - Acordeón --}}
<section class="py-16 bg-[#eeffff]" id="faq-acordeon">
    <div class="container mx-auto px-4">
        <div class="flex flex-col lg:flex-row gap-8">

            {{-- Columna principal: Acordeón --}}
            <div class="flex-1" x-data="{ openItem: null }">

                @foreach ($faqs as $faq)
                    {{-- Item 1 --}}
                    <div class="border-b border-[#007e7f]/30 pb-6 mb-6" data-aos="fade-up" data-aos-duration="800"
                        ata-aos-easing="ease-out-cubic" data-aos-delay="100">
                        <button class="flex items-start justify-between w-full text-left cursor-pointer"
                            @click="openItem = openItem === 1 ? null : 1">
                            <h2 class="text-[#007e7f] font-semibold text-base md:text-lg pr-4">
                                {{ $faq->pregunta }}
                            </h2>
                            <span class="text-[#007e7f] text-xl mt-0.5 flex-shrink-0 transition-transform duration-300"
                                :class="openItem === 1 ? 'rotate-180' : ''">
                                <x-fas-angle-down class="h-8" />
                            </span>
                        </button>
                        <div x-show="openItem !== 1" x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 -translate-y-2"
                            x-transition:enter-end="opacity-100 translate-y-0"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-start="opacity-100 translate-y-0"
                            x-transition:leave-end="opacity-0 -translate-y-2"
                            class="mt-3 text-[#007e7f] text-sm md:text-lg leading-relaxed">
                            {!! $faq->respuesta !!}
                        </div>
                    </div>
                @endforeach

            </div>

        </div>
    </div>

</section>