<section class="bg-white py-16 lg:py-24 px-4 md:px-8 lg:px-24 xl:px-32 font-sans text-home-foreground overflow-hidden">
    <div class="max-w-7xl mx-auto">
        <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">

            <figure class="w-full relative order-2 lg:order-1">
                <div class="absolute -inset-4 bg-home-primary/5 rounded-3xl -z-10 transform -rotate-2"></div>
                <img src="https://images.pexels.com/photos/4659793/pexels-photo-4659793.jpeg" alt="Botol Parfum Elegan"
                    class="w-full h-[400px] lg:h-[600px] object-cover rounded-2xl shadow-lg">
            </figure>

            <article class="space-y-8 order-1 lg:order-2" x-data="{ activeAccordion: 0 }">

                <header>
                    <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-home-foreground leading-tight mb-6">
                        Keunggulan Produk Kami.
                    </h2>
                    <p class="text-base md:text-lg text-home-foreground/70 leading-relaxed">
                        Setiap parfum dibuat dengan standar tinggi agar kamu mendapatkan kualitas terbaik dan pengalaman
                        wangi yang tak terlupakan.
                    </p>
                </header>

                <div class="bg-white rounded-2xl p-6 md:p-8 shadow-sm border border-gray-100">
                    @foreach ($perfumeFeatures as $index => $perfumeFeature)
                        <div class="border-b border-gray-100 last:border-0">
                            <button
                                @click="activeAccordion = (activeAccordion === {{ $index }} ? null : {{ $index }})"
                                class="w-full flex justify-between items-center py-5 text-left group focus:outline-none transition-all duration-300"
                                :aria-expanded="activeAccordion === {{ $index }}">

                                <span class="text-lg font-bold transition-colors duration-300"
                                    :class="activeAccordion === {{ $index }} ? 'text-home-primary' :
                                        'text-home-foreground group-hover:text-home-primary'">
                                    {{ $perfumeFeature['name'] }}
                                </span>

                                <span
                                    class="ml-4 flex-shrink-0 transition-transform duration-300 w-8 h-8 flex items-center justify-center rounded-full"
                                    :class="activeAccordion === {{ $index }} ? 'rotate-180 bg-home-primary text-white' :
                                        'bg-gray-100 text-gray-400 group-hover:bg-home-primary/10 group-hover:text-home-primary'">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" 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="activeAccordion === {{ $index }}" x-collapse x-cloak
                                class="overflow-hidden text-home-foreground/70 text-base leading-relaxed">
                                <div class="pb-5">
                                    {{ $perfumeFeature['description'] }}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

            </article>

        </div>
    </div>
</section>
