@php
    $accordions = [
        [
            'title' => 'Aroma Premium Tahan Lama',
            'content' =>
                'Setiap varian dirancang menggunakan konsentrat berkualitas tinggi sehingga wanginya bertahan sepanjang hari, cocok dipakai kerja maupun aktivitas luar.',
        ],
        [
            'title' => 'Formula Aman untuk Kulit',
            'content' =>
                'Parfum kami menggunakan bahan yang lebih lembut di kulit sehingga nyaman digunakan setiap hari tanpa rasa perih atau iritasi.',
        ],
        [
            'title' => 'Pilihan Aroma Sangat Beragam',
            'content' =>
                'Mulai dari floral, fresh, woody, oriental hingga parfum harian — semua tersedia untuk menyesuaikan gaya dan kepribadianmu.',
        ],
        [
            'title' => 'Harga Terjangkau Kualitas Premium',
            'content' =>
                'Nikmati parfum berkelas tanpa perlu mengeluarkan biaya tinggi. Value terbaik untuk kebutuhan harian maupun koleksi pribadi.',
        ],
    ];
@endphp

<section class="bg-white py-20 px-6 lg:px-48 font-sans text-home-foreground">
    <div class="grid lg:grid-cols-2 gap-12 items-start">
        <figure class="w-full">
            <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80"
                class="w-full h-[500px] object-cover rounded-2xl shadow">
        </figure>
        <article class="space-y-4">
            <h2 class="text-4xl leading-tight mb-6">Keunggulan Produk Kami.</h2>
            <p class="text-gray-700 mb-8 max-w-3xl leading-relaxed">
                Setiap parfum dibuat dengan standar tinggi agar kamu mendapatkan kualitas terbaik.
            </p>

            @foreach ($accordions as $index => $acc)
                <div x-data="{ open: null }" class="border-b border-gray-200 pb-4 accordion-item">
                    <button @click="open === {{ $index }} ? open = null : open = {{ $index }}"
                        class="w-full flex justify-between items-center py-2 text-left group focus:outline-none"
                        :aria-expanded="open === {{ $index }}">
                        <span class="text-lg font-semibold text-home-foreground group-hover:text-gray-600 transition">
                            {{ $acc['title'] }}
                        </span>

                        <span class="icon-plus text-xl font-light text-gray-400 transition-transform duration-300"
                            :class="{ 'rotate-45': open === {{ $index }} }">
                            +
                        </span>
                    </button>
                    <div x-show="open === {{ $index }}" x-collapse
                        x-transition:enter="transition ease-out duration-300"
                        x-transition:leave="transition ease-in duration-200"
                        class="min-h-0 content overflow-hidden text-gray-700 text-sm leading-relaxed">
                        <div class="pt-2 pb-2">
                            {{ $acc['content'] }}
                        </div>
                    </div>
                </div>
            @endforeach
        </article>
    </div>
</section>