<section
    class="relative w-full lg:w-[65%] min-h-[600px] lg:min-h-screen hidden lg:flex flex-col lg:flex-row justify-end items-end pb-8 pr-0 lg:pr-10 z-10">

    <div
        class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1591925463023-1ca6b0636780?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-center bg-no-repeat">
        <div
            class="absolute inset-0 bg-gradient-to-t from-home-background/90 via-home-background/50 to-transparent lg:hidden">
        </div>
    </div>

    <div class="relative w-full px-6 lg:px-0 grid grid-cols-1 lg:grid-cols-2 gap-6 mb-24 lg:mb-0">

        @foreach ($bestSellingPerfumes as $perfume)
            <article
                class="bg-white backdrop-blur-md rounded-2xl shadow-lg hover:shadow-xl transition-shadow flex flex-row items-center p-4 h-auto lg:h-[250px] group">

                <figure class="w-[40%] lg:w-auto h-32 lg:h-full overflow-hidden rounded-xl bg-gray-100">
                    <img src="{{ $perfume['image'] }}"
                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                        alt="{{ $perfume['name'] }}">
                </figure>

                <div class="flex-1 ml-4 lg:ml-6 flex flex-col justify-center space-y-2 lg:space-y-3">
                    <div>
                        <h3 class="text-base lg:text-xl text-black font-bold line-clamp-1">{{ $perfume['name'] }}</h3>
                        <div class="flex items-center gap-2 mt-1">
                            <span class="text-home-primary font-bold text-sm lg:text-lg">
                                Rp {{ number_format($perfume['sale_price'], 0, ',', '.') }}
                            </span>
                        </div>
                        <div class="flex items-center gap-1.5 mt-0.5">
                            <span class="text-[10px] lg:text-xs font-medium text-gray-400 capitalize">
                                {{ number_format($perfume['items_sum_quantity'], 0, ',', '.') }} Terjual
                            </span>
                        </div>
                    </div>

                    <div class="flex items-center gap-2 mt-auto">
                        <button wire:click="goToProduct"
                            class="flex-1 justify-center items-center border border-gray-200 py-2 px-3 bg-home-primary rounded-full text-xs lg:text-sm font-medium hover:bg-home-primary/80 transition-colors text-home-background">
                            Belanja Sekarang
                        </button>
                        <button wire:click="goToProduct"
                            class="w-8 h-8 lg:w-10 lg:h-10 bg-home-primary flex justify-center items-center rounded-full hover:bg-home-primary/80 transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                stroke-width="1.5" stroke="currentColor" class="size-4 lg:size-5 text-home-background">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
                            </svg>
                        </button>
                    </div>
                </div>
            </article>
        @endforeach

    </div>
</section>
