@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 relative overflow-hidden font-sans text-home-foreground">
    <div class="absolute top-24 left-[40%] w-4 h-4 bg-gray-200 rounded-full opacity-50"></div>
    <div class="absolute top-32 left-[30%] w-2 h-2 bg-orange-200 rounded-full opacity-50"></div>
    <div class="absolute bottom-10 right-[20%] w-2 h-2 bg-red-200 rounded-full opacity-50"></div>

    <div class="grid lg:grid-cols-2 gap-12 mb-20 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" alt="Parfum Premium">
        </figure>

        <article class="space-y-4 mt-4 lg:mt-0">
            <h2 class="text-4xl leading-tight mb-6 text-home-foreground">
                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.
                Dan kalau kamu ingin pengalaman yang lebih eksklusif, ada paket membership yang bikin kamu jauh lebih
                hemat dan leluasa mencoba banyak aroma.
            </p>

            @foreach ($accordions as $acc)
                <div class="border-b border-gray-200 pb-4 accordion-item">
                    <button class="w-full flex justify-between items-center py-2 text-left group focus:outline-none"
                        onclick="toggleAccordion(this)" aria-expanded="false">
                        <span class="text-lg font-semibold text-home-foreground group-hover:text-gray-600 transition">
                            {{ $acc['title'] }}
                        </span>
                        <span
                            class="text-xl font-light text-gray-400 transition-transform duration-300 icon-plus">+</span>
                    </button>
                    <div
                        class="max-h-0 overflow-hidden transition-all duration-500 ease-in-out content text-gray-700 text-sm leading-relaxed">
                        <div class="pt-2 pb-2">{{ $acc['content'] }}</div>
                    </div>
                </div>
            @endforeach
        </article>
    </div>
</section>

<script>
    function toggleAccordion(button) {
        const content = button.nextElementSibling;
        const icon = button.querySelector('.icon-plus');

        document.querySelectorAll('.accordion-item').forEach(item => {
            const otherBtn = item.querySelector('button');
            const otherContent = item.querySelector('.content');
            const otherIcon = item.querySelector('.icon-plus');

            if (otherBtn !== button) {
                otherContent.style.maxHeight = null;
                otherIcon.textContent = '+';
                otherIcon.style.transform = 'rotate(0deg)';
                otherBtn.setAttribute('aria-expanded', 'false');
            }
        });

        if (content.style.maxHeight) {
            content.style.maxHeight = null;
            icon.textContent = '+';
            icon.style.transform = 'rotate(0deg)';
            button.setAttribute('aria-expanded', 'false');
        } else {
            content.style.maxHeight = content.scrollHeight + 'px';
            icon.style.transform = 'rotate(45deg)';
            button.setAttribute('aria-expanded', 'true');
        }
    }
</script>