@section('title', 'Ayuda')

<div>
    {{-- Banner --}}
    <div class="relative h-64 w-full bg-cover bg-center"
        style="background-image: url('{{ Vite::asset('resources/images/contact/texture.webp') }}');">
        <div class="absolute inset-0 bg-black opacity-50"></div>
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl font-bold text-white mt-2">Ayuda</h1>
            </div>
        </div>
    </div>

    <div class="container px-4 py-12">
        {{-- Category Filters --}}
        <div class="flex flex-wrap justify-center gap-4 mb-12">
            @foreach ($categories as $category)
                <button wire:click="setActiveCategory({{ $category->id }})"
                    class="px-6 py-2 rounded-lg font-bold transition-colors duration-300 {{ $activeCategoryId === $category->id ? 'bg-black text-white' : 'bg-red-600 text-white hover:bg-black' }}">
                    {{ $category->name }}
                </button>
            @endforeach
        </div>

        <div class="lg:grid lg:grid-cols-12">
            <div class="lg:col-span-10 lg:col-start-2">


                {{-- FAQ Accordion --}}
                <div class="space-y-4">
                    @forelse($faqs as $faq)
                        <div x-data="{ open: false }" class="border-b border-gray-200 pb-4">
                            <button @click="open = !open"
                                class="flex justify-between items-center w-full text-left focus:outline-none">
                                <span class="text-lg font-bold text-black">{{ $faq->question }}</span>
                                <span class="transform transition-transform duration-300"
                                    :class="{ 'rotate-180': open }">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 9l-7 7-7-7" />
                                    </svg>
                                </span>
                            </button>
                            <div x-show="open" x-collapse style="display: none;" class="mt-2 text-gray-600">
                                {!! $faq->answer !!}
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-gray-500">
                            No hay preguntas frecuentes disponibles en esta categoría.
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>