@php
    $isWishlisted = in_array($product->id, $userWishlistIds ?? []);
    $hasVariants = $product->variants && $product->variants->count() > 0;
    
    // Compile Pack Options (BigBasket style)
    $packOptions = [];
    if ($hasVariants) {
        foreach ($product->variants as $var) {
            $packOptions[] = [
                'id' => $var->id,
                'name' => $var->variant_name,
                'weight' => $var->weight ?: $var->variant_name,
                'selling_price' => (float)$var->selling_price,
                'effective_price' => (float)$var->effective_price,
                'discount_percent' => (int)$var->discount_percent,
                'stock_quantity' => (int)$var->stock_quantity,
                'is_in_stock' => $var->stock_quantity > 0,
            ];
        }
    } else {
        $packOptions[] = [
            'id' => null,
            'name' => $product->weight ?: ($product->unit ? '1 ' . $product->unit : 'Standard Pack'),
            'weight' => $product->weight ?: ($product->unit ? '1 ' . $product->unit : 'Standard Pack'),
            'selling_price' => (float)$product->selling_price,
            'effective_price' => (float)$product->effective_price,
            'discount_percent' => (int)$product->discount_percent,
            'stock_quantity' => (int)$product->stock_quantity,
            'is_in_stock' => $product->stock_quantity > 0,
        ];
    }
    $initialPack = $packOptions[0];
@endphp

<div class="bg-white rounded-2xl sm:rounded-3xl p-3 sm:p-4 border border-slate-200/80 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between group relative w-full"
     x-data="{
         openVariants: false,
         packs: {{ json_encode($packOptions) }},
         selectedPack: {{ json_encode($initialPack) }},
         adding: false,
         get discount() { return this.selectedPack.discount_percent; },
         get price() { return this.selectedPack.effective_price; },
         get mrp() { return this.selectedPack.selling_price; },
         get inStock() { return this.selectedPack.is_in_stock; },
         get variantId() { return this.selectedPack.id; },
         selectPack(p) {
             this.selectedPack = p;
             this.openVariants = false;
         },
         addToCart() {
             @guest
                 window.showCustomerLoginModal('add_to_cart');
             @else
                 this.adding = true;
                 window.addToCartAjax({{ $product->id }}, this.variantId)
                     .then(() => {
                         this.adding = false;
                     })
                     .catch(() => {
                         this.adding = false;
                     });
             @endguest
         }
     }"
     @click.away="openVariants = false">
    
    <!-- Top Bar: Discount Badge & Wishlist -->
    <div class="flex items-center justify-between z-10 mb-1.5 sm:mb-2">
        <div>
            <span x-show="discount > 0" 
                  x-text="discount + '% OFF'" 
                  class="bg-rose-500 text-white text-[9px] sm:text-[10px] font-black px-2 py-0.5 rounded-full uppercase tracking-wider shadow-sm">
            </span>
        </div>

        <!-- AJAX Wishlist Button -->
        <button type="button" 
                data-wishlist-btn="{{ $product->id }}" 
                @guest onclick="window.showCustomerLoginModal('wishlist')" @else onclick="window.toggleWishlistAjax({{ $product->id }})" @endguest 
                class="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-slate-100/80 hover:bg-rose-50 flex items-center justify-center transition shadow-sm cursor-pointer"
                title="Save to Wishlist">
            <i data-wishlist-icon="{{ $product->id }}" class="{{ $isWishlisted ? 'fa-solid fa-heart text-rose-500' : 'fa-regular fa-heart text-slate-400' }} text-[10px] sm:text-xs transition-colors duration-300"></i>
        </button>
    </div>

    <!-- Product Image & Express Delivery Tag -->
    <div class="relative">
        <a href="{{ route('products.show', $product->slug) }}" class="block overflow-hidden rounded-xl sm:rounded-2xl mb-2 sm:mb-3 h-28 sm:h-44 bg-slate-50 flex items-center justify-center p-1.5 sm:p-2">
            <img src="{{ $product->image }}" alt="{{ $product->name }}" class="max-h-full max-w-full object-contain group-hover:scale-105 transition-transform duration-300">
        </a>
        <div class="absolute bottom-3 left-2 bg-white/90 backdrop-blur-xs text-emerald-800 text-[9px] font-extrabold px-1.5 py-0.5 rounded-md shadow-2xs border border-emerald-100 flex items-center gap-1">
            <i class="fa-solid fa-bolt text-amber-500 text-[8px]"></i> 30 MINS
        </div>
    </div>

    <!-- Product Details -->
    <div class="space-y-1.5 flex-1 flex flex-col justify-between">
        <div>
            <div class="text-[9px] sm:text-[11px] font-bold text-slate-400 uppercase tracking-wider flex items-center justify-between gap-1">
                <span class="truncate">{{ $product->brand ?? ($product->category->name ?? 'Daily Grocery') }}</span>
            </div>

            <a href="{{ route('products.show', $product->slug) }}" class="font-extrabold text-slate-900 text-xs sm:text-sm hover:text-brand-600 line-clamp-2 mt-1 leading-tight sm:leading-snug">
                {{ $product->name }}
            </a>
        </div>

        <!-- BigBasket-Style Pack Size / Variant Selector -->
        <div class="relative pt-1">
            <template x-if="packs.length > 1">
                <div>
                    <!-- Dropdown Trigger Button -->
                    <button type="button" 
                            @click.stop="openVariants = !openVariants" 
                            class="flex items-center justify-between w-full bg-slate-50 hover:bg-slate-100 text-slate-800 font-extrabold text-[11px] sm:text-xs px-3 py-1.5 rounded-xl border border-slate-200/90 transition shadow-2xs cursor-pointer">
                        <span class="truncate" x-text="selectedPack.name"></span>
                        <i class="fa-solid fa-chevron-down text-[10px] text-slate-500 transition-transform ml-1" :class="openVariants ? 'rotate-180 text-brand-600' : ''"></i>
                    </button>

                    <!-- BigBasket-Style Dropdown Menu Popup -->
                    <div x-show="openVariants" 
                         x-transition:enter="transition ease-out duration-150"
                         x-transition:enter-start="opacity-0 scale-95 translate-y-1"
                         x-transition:enter-end="opacity-100 scale-100 translate-y-0"
                         x-transition:leave="transition ease-in duration-100"
                         x-transition:leave-start="opacity-100 scale-100 translate-y-0"
                         x-transition:leave-end="opacity-0 scale-95 translate-y-1"
                         x-cloak 
                         class="absolute left-0 right-0 top-full mt-1.5 z-50 bg-white rounded-2xl border border-slate-200 shadow-2xl p-2 space-y-1.5 max-h-56 overflow-y-auto">
                        
                        <div class="text-[10px] font-bold text-slate-400 uppercase px-2 py-0.5 border-b border-slate-100">Select Pack Size</div>
                        
                        <template x-for="p in packs" :key="p.id || p.name">
                            <div @click.stop="selectPack(p)" 
                                 :class="selectedPack.id === p.id && selectedPack.name === p.name ? 'bg-emerald-50/70 border-emerald-500' : 'hover:bg-slate-50 border-slate-100'"
                                 class="p-2 rounded-xl border transition cursor-pointer flex items-center justify-between gap-2">
                                
                                <div class="space-y-0.5 flex-1 min-w-0">
                                    <div class="font-extrabold text-slate-800 text-[11px] truncate" x-text="p.name"></div>
                                    <div class="flex items-center gap-1.5">
                                        <span class="font-black text-slate-900 text-xs" x-text="'₹' + p.effective_price.toFixed(2)"></span>
                                        <span class="text-[10px] text-slate-400 line-through" x-show="p.selling_price > p.effective_price" x-text="'₹' + p.selling_price.toFixed(2)"></span>
                                        <span class="text-[9px] font-bold text-emerald-600 bg-emerald-100/60 px-1.5 py-0.2 rounded" x-show="p.discount_percent > 0" x-text="p.discount_percent + '% OFF'"></span>
                                    </div>
                                    <template x-if="!p.is_in_stock">
                                        <div class="text-[9px] font-bold text-rose-500">Out of Stock</div>
                                    </template>
                                </div>

                                <div class="shrink-0">
                                    <template x-if="selectedPack.id === p.id && selectedPack.name === p.name">
                                        <div class="w-5 h-5 rounded-full bg-emerald-600 text-white flex items-center justify-center text-[10px] shadow-xs">
                                            <i class="fa-solid fa-check"></i>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>

            <!-- Single Pack Label -->
            <template x-if="packs.length === 1">
                <div class="text-[11px] font-bold text-slate-500 bg-slate-50 px-2.5 py-1 rounded-lg border border-slate-100 w-fit">
                    <span x-text="selectedPack.name"></span>
                </div>
            </template>
        </div>

        <!-- Price Display & Add Button -->
        <div class="pt-2 sm:pt-3">
            <div class="flex items-baseline gap-1.5 sm:gap-2 mb-2 sm:mb-3">
                <span class="text-sm sm:text-lg font-black text-emerald-700" x-text="'₹' + price.toFixed(2)"></span>
                <span class="text-[10px] sm:text-xs text-slate-400 line-through" x-show="mrp > price" x-text="'₹' + mrp.toFixed(2)"></span>
            </div>

            <!-- BigBasket-Style Add Button -->
            <template x-if="inStock">
                <button type="button" 
                        @click="addToCart()" 
                        :disabled="adding"
                        class="w-full bg-emerald-50 hover:bg-emerald-600 text-emerald-700 hover:text-white font-extrabold text-[11px] sm:text-xs py-2 sm:py-2.5 rounded-xl transition border border-emerald-300 hover:border-emerald-600 flex items-center justify-center gap-1.5 shadow-xs cursor-pointer group">
                    <i class="fa-solid fa-plus text-[10px] sm:text-xs group-hover:rotate-90 transition-transform"></i> 
                    <span x-text="adding ? 'Adding...' : 'Add to Cart'"></span>
                </button>
            </template>

            <template x-if="!inStock">
                <button disabled class="w-full bg-slate-100 text-slate-400 font-bold text-[11px] sm:text-xs py-2 sm:py-2.5 rounded-xl border border-slate-200 cursor-not-allowed">
                    Out of Stock
                </button>
            </template>
        </div>
    </div>
</div>