{{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    PRODUCT CARD — GRID (used inside x-for loops)
    All data comes from Alpine `product` variable
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
<div class="product-card group relative flex flex-col"
     x-data="addToCart(product.id)">

    {{-- Flash sale badge --}}
    <div x-show="product.is_flash_sale" class="flash-badge">⚡ FLASH</div>

    {{-- Featured badge --}}
    <div x-show="product.is_featured && !product.is_flash_sale"
         class="absolute top-2 left-2 badge bg-orange-500 text-white z-10">
        Featured
    </div>

    {{-- Wishlist button --}}
    <div class="absolute top-2 right-2 z-10" x-data="wishlist(product.id)">
        <button @click.prevent="toggle()" :disabled="loading"
                class="w-7 h-7 bg-white rounded-full shadow flex items-center justify-center
                       hover:scale-110 transition-transform">
            <svg class="w-3.5 h-3.5 transition-colors"
                 :class="active ? 'text-red-500 fill-red-500' : 'text-gray-400'"
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
            </svg>
        </button>
    </div>

    {{-- Product image --}}
    <a :href="`/products/${product.uuid}`" class="block overflow-hidden bg-gray-50 aspect-square">
        <img :src="product.primary_image || '/images/placeholder.png'"
             :alt="product.name"
             class="product-img w-full h-full object-cover"
             loading="lazy">
    </a>

    {{-- Product info --}}
    <div class="flex flex-col flex-1 p-2.5 md:p-3">
        <a :href="`/products/${product.uuid}`">
            <p class="text-xs md:text-sm text-gray-800 line-clamp-2 leading-tight hover:text-orange-500 transition-colors"
               x-text="product.name"></p>
        </a>

        {{-- Rating --}}
        <div class="flex items-center gap-1 mt-1" x-show="product.review_count > 0">
            <div class="stars text-xs">
                <template x-for="i in 5">
                    <span :class="i <= Math.round(product.average_rating) ? 'star-filled' : 'star-empty'">★</span>
                </template>
            </div>
            <span class="text-xs text-gray-400" x-text="`(${product.review_count})`"></span>
        </div>

        {{-- Price --}}
        <div class="mt-auto pt-2">
            <div class="flex items-center gap-1.5 flex-wrap">
                <span class="text-sm md:text-base font-bold text-orange-500"
                      x-text="price(product.current_price || product.sale_price || product.base_price)"></span>
                <span x-show="product.sale_price && product.base_price > product.sale_price"
                      class="price-strike"
                      x-text="price(product.base_price)"></span>
            </div>
            <div x-show="product.sale_price && product.base_price > product.sale_price"
                 class="badge-red text-xs mt-0.5">
                <span x-text="discount(product.base_price, product.sale_price) + '% off'"></span>
            </div>
        </div>

        {{-- Stock warning --}}
        <p x-show="product.stock_quantity <= 5 && product.stock_quantity > 0"
           class="text-xs text-red-500 font-medium mt-1"
           x-text="`Only ${product.stock_quantity} left!`"></p>

        {{-- Add to cart button --}}
        <button @click="add()" :disabled="loading || product.stock_quantity === 0"
                class="mt-2 w-full text-xs py-1.5 rounded border border-orange-500 text-orange-500
                       hover:bg-orange-500 hover:text-white transition-colors font-medium
                       disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-1">
            <span x-show="!loading && product.stock_quantity > 0">+ Add to Cart</span>
            <span x-show="loading" class="w-3 h-3 border border-orange-500 border-t-transparent rounded-full animate-spin"></span>
            <span x-show="product.stock_quantity === 0" class="text-gray-400">Out of Stock</span>
        </button>
    </div>
</div>