{{-- SECTION: Preguntas Frecuentes - Acordeón --}}
<section class="py-16 " id="faq-acordeon">
    <div class=" mx-auto px-20">
        <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 $index => $faq)
                    <div class="border-b border-[#9f9f9f]/30 pb-6 mb-6">

                        <button class="flex items-start justify-between w-full text-left cursor-pointer"
                            @click="openItem = openItem === {{ $index }} ? null : {{ $index }}">
                            <h2 class="text-[#070000] font-semibold text-base md:text-lg pr-4">
                                {{ $faq->pregunta }}
                            </h2>

                            <span class="text-[#9f9f9f] text-xl mt-0.5 flex-shrink-0 transition-transform duration-300"
                                :class="openItem === {{ $index }} ? 'rotate-180' : ''">
                                <x-fas-angle-down class="h-8" />
                            </span>
                        </button>

                        <div x-show="openItem === {{ $index }}" x-collapse
                            class="mt-3 text-[#9f9f9f] text-sm md:text-lg leading-relaxed">
                            {!! $faq->respuesta !!}
                        </div>

                    </div>
                @endforeach

            </div>

        </div>
    </div>

</section>