<section class="bg-white py-16 lg:py-24 px-4 md:px-8 lg:px-24 xl:px-32 overflow-hidden">
    <div class="max-w-7xl mx-auto">

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center mb-20">
            <div class="order-2 lg:order-1 space-y-6">
                <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
                    Temukan Parfum Favorit dengan Kualitas Terbaik
                </h2>
                <p class="text-base md:text-lg text-gray-600 leading-relaxed">
                    Kami menghadirkan parfum original berkualitas tinggi langsung dari distributor resmi. Setiap aroma
                    dirancang untuk bertahan lama, memberikan pengalaman wangi yang istimewa, dan memastikan setiap
                    tetesnya asli dan terpercaya.
                </p>
            </div>

            <div class="order-1 lg:order-2 relative">
                <div class="absolute -inset-4 bg-home-primary/5 rounded-3xl -z-10 transform rotate-2"></div>
                <img src="https://plus.unsplash.com/premium_photo-1723579353390-f4dd36758856?q=80&w=1469&auto=format&fit=crop"
                    alt="Koleksi Parfum Eksklusif"
                    class="rounded-2xl w-full h-[400px] lg:h-[500px] object-cover shadow-xl">
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach ($whyChooseUs as $whyChoose)
                <article
                    class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
                    <div
                        class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
                        <flux:icon :name="$whyChoose['icon']"
                            class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300" />
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">{{ $whyChoose['name'] }}</h3>
                    <p class="text-sm text-gray-600 leading-relaxed">
                        {{ $whyChoose['description'] }}
                    </p>
                </article>
            @endforeach
        </div>
    </div>
</section>
