@foreach($products as $product)
    <div
        class="group relative glass rounded-[2rem] overflow-hidden border border-white/5 hover:border-yellow-500/30 hover:shadow-2xl hover:shadow-yellow-500/10 transition-all duration-500">
        <div class="aspect-w-1 aspect-h-1 w-full overflow-hidden bg-slate-800 relative" x-data="{
                    activeIndex: 0,
                    images: [
                        @foreach($product->images->sortBy('sort_order') as $img)
                            '{{ $img->image_path }}',
                        @endforeach
                        @if($product->images->isEmpty())
                            'https://placehold.co/600x600/1e293b/white?text=No+Image'
                        @endif
                    ]
                 }">

            <template x-if="images.length > 0">
                <a href="{{ route('shop.product', $product->slug) }}" class="block h-64 w-full"
                    title="{{ $product->name }}">
                    <img :src="images[activeIndex]" alt="{{ $product->name }}"
                        class="h-full w-full object-cover object-center transition-all duration-700 group-hover:scale-110">
                </a>
            </template>

            <!-- Arrows -->
            <div
                class="absolute inset-0 flex items-center justify-between opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none px-2 z-10">
                <button x-show="images.length > 1"
                    @click.prevent="activeIndex = activeIndex === 0 ? images.length - 1 : activeIndex - 1"
                    class="pointer-events-auto bg-black/50 hover:bg-yellow-500 hover:text-slate-900 text-white rounded-full p-2 focus:outline-none backdrop-blur-sm transition-colors">
                    <i data-lucide="chevron-left" class="w-4 h-4"></i>
                </button>
                <button x-show="images.length > 1"
                    @click.prevent="activeIndex = activeIndex === images.length - 1 ? 0 : activeIndex + 1"
                    class="pointer-events-auto bg-black/50 hover:bg-yellow-500 hover:text-slate-900 text-white rounded-full p-2 focus:outline-none backdrop-blur-sm transition-colors">
                    <i data-lucide="chevron-right" class="w-4 h-4"></i>
                </button>
            </div>

            <!-- Wishlist Button -->
            <button type="button"
                onclick="event.preventDefault(); if(typeof window.toggleWishlist === 'function') window.toggleWishlist({{ $product->id }})"
                class="absolute top-4 right-4 z-20 p-2.5 rounded-full bg-black/50 text-white hover:text-rose-500 hover:bg-white transition-all backdrop-blur-md opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0"
                title="Add to Wishlist">
                <i data-lucide="heart" class="w-4 h-4"></i>
            </button>

            <!-- Quick Add -->
            <div
                class="absolute bottom-4 inset-x-4 translate-y-full group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-500">
                <form action="{{ route('cart.add') }}" method="POST">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    <input type="hidden" name="quantity" value="1">
                    <button type="submit"
                        class="w-full bg-yellow-500 text-slate-900 py-3 rounded-xl flex items-center justify-center gap-2 uppercase text-xs font-bold tracking-widest hover:bg-yellow-400 transition-colors shadow-lg shadow-yellow-500/20">
                        <i data-lucide="shopping-bag" class="w-4 h-4"></i>
                        Add to Cart
                    </button>
                </form>
            </div>
        </div>
        <div class="p-6">
            <h3 class="text-lg font-bold text-white mb-2 line-clamp-1 group-hover:text-yellow-500 transition-colors">
                <a href="{{ route('shop.product', $product->slug) }}" title="{{ $product->name }}">
                    <span aria-hidden="true" class="absolute inset-0"></span>
                    {{ $product->name }}
                </a>
            </h3>
            <div class="flex items-end justify-between">
                <div class="flex flex-col">
                    <p class="text-slate-400 text-xs mb-1">Price</p>
                    <p class="text-xl font-bold text-white">
                        @if($product->variations->count() > 0)
                            ₹{{ number_format($product->variations->min('sp'), 2) }}
                        @else
                            N/A
                        @endif
                    </p>
                </div>
                @if($product->variations->count() > 0 && $product->variations->max('mrp') > $product->variations->min('sp'))
                    <div class="flex flex-col items-end">
                        <span
                            class="text-sm text-slate-500 line-through">₹{{ number_format($product->variations->max('mrp'), 2) }}</span>
                        <span class="text-xs font-bold text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded-lg">
                            {{ round((($product->variations->max('mrp') - $product->variations->min('sp')) / $product->variations->max('mrp')) * 100) }}%
                            Off
                        </span>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endforeach