<div>
    {{-- Hero Section --}}
    <section class="relative h-[500px] flex items-center justify-center overflow-hidden">
        {{-- Background Image --}}
        <div class="absolute inset-0 z-0">
            <img src="https://images.pexels.com/photos/2789781/pexels-photo-2789781.jpeg" alt="Perfume Background"
                class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black/40"></div>
        </div>

        {{-- Content --}}
        <div class="relative z-10 container mx-auto px-6 text-center">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">{{ $pageTitle }}</h1>
            <p class="text-white/80 text-lg md:text-xl max-w-2xl mx-auto mb-10">
                {{ $pageDesc }}
            </p>

            {{-- Search Bar --}}
            <div class="max-w-xl mx-auto relative group">
                <input wire:model.live.debounce.500="search" type="search" placeholder="Cari pertanyaan..."
                    aria-label="Cari artikel"
                    class="w-full py-4 pl-6 pr-14 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-home-primary focus:bg-white/20 transition-all shadow-lg text-lg">
                <button
                    class="absolute right-2 top-2 bottom-2 w-10 h-10 bg-home-primary rounded-full flex items-center justify-center text-white hover:bg-white hover:text-home-primary transition-all duration-300">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
            </div>
        </div>
    </section>

    <main class="px-6 lg:px-32 xl:px-48 py-24 bg-white text-black font-sans">
        @if (!empty($faqs))
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start" x-data="{ activeAccordion: null }">
                @foreach ($faqs as $index => $faq)
                    <article
                        class="bg-white rounded-2xl border border-home-foreground/10 overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
                        <button
                            @click="activeAccordion = (activeAccordion === {{ $index }} ? null : {{ $index }})"
                            class="w-full px-6 py-5 flex items-center justify-between text-left focus:outline-none transition-colors"
                            :class="activeAccordion === {{ $index }} ? 'bg-home-primary/5' :
                                'bg-white hover:bg-home-foreground/5'">

                            <h3 class="text-lg font-bold pr-4 transition-colors"
                                :class="activeAccordion === {{ $index }} ? 'text-home-primary' :
                                    'text-home-foreground group-hover:text-home-primary'">
                                {{ $faq['question'] }}
                            </h3>

                            <span class="flex-shrink-0 ml-4 p-1 rounded-full transition-all duration-300"
                                :class="activeAccordion === {{ $index }} ? 'bg-home-primary text-white rotate-180' :
                                    'bg-home-foreground/10 text-home-foreground group-hover:bg-home-primary group-hover:text-white'">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                                </svg>
                            </span>
                        </button>

                        <div x-show="activeAccordion === {{ $index }}"
                            x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 max-h-0" x-transition:enter-end="opacity-100 max-h-96"
                            x-transition:leave="transition ease-in duration-200"
                            x-transition:leave-start="opacity-100 max-h-96" x-transition:leave-end="opacity-0 max-h-0"
                            x-cloak
                            class="px-6 pb-6 pt-2 bg-home-primary/5 border-t border-home-primary/10 text-home-foreground/70 leading-relaxed text-sm md:text-base overflow-hidden">
                            {{ $faq['answer'] }}
                        </div>
                    </article>
                @endforeach
            </div>
        @else
            @include('components.animations.lottie.not-found')
        @endif

        <div
            class="mt-16 bg-home-primary rounded-2xl p-10 text-center relative overflow-hidden shadow-xl shadow-home-primary/20">
            <div class="absolute top-0 right-0 w-48 h-48 bg-white/10 rounded-full blur-3xl -mr-12 -mt-12"></div>
            <div class="absolute bottom-0 left-0 w-32 h-32 bg-home-secondary/20 rounded-full blur-2xl -ml-8 -mb-8">
            </div>

            <div class="relative z-10">
                <h3 class="text-2xl font-bold text-white mb-3">Masih ada pertanyaan?</h3>
                <p class="text-white/80 mb-8 max-w-xl mx-auto">
                    Jika Anda tidak menemukan jawaban yang dicari, silakan hubungi kami dan kami siap membantu Anda
                    24/7.
                </p>

                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <!-- WhatsApp -->
                    <a href="https://wa.me/{{ formatToWhatsApp($contactSettings->phone_number) }}" target="_blank"
                        class="bg-white text-home-primary font-bold px-8 py-3 rounded-xl hover:bg-home-secondary hover:text-white transition-all shadow-lg text-center">
                        Chat WhatsApp
                    </a>

                    <!-- Email -->
                    <a href="mailto:{{ $contactSettings->email }}"
                        class="bg-home-primary border border-white/20 text-white font-bold px-8 py-3 rounded-xl hover:bg-white/10 transition-all text-center">
                        Kirim Email
                    </a>
                </div>
            </div>
        </div>

    </main>
</div>

@assets
    <script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
@endassets
