@props(['product', 'showRating' => true])
@php
    $image = $product->images->sortBy('sort_order')->firstWhere('is_primary', true) ?? $product->images->sortBy('sort_order')->first();
    $imageUrl = \App\Helpers\ImageHelper::urlOrPlaceholder($image->image_path ?? null);
    $price = $product->min_price ?? $product->base_price;
    $hasDiscount = $product->base_price > $price;
    $discountPct = $hasDiscount && $product->base_price > 0 ? round((($product->base_price - $price) / $product->base_price) * 100) : 0;
    $inStock = true; // You can add stock check logic here
@endphp
<div class="card product-card overflow-hidden group cursor-pointer relative" data-product-id="{{ $product->id }}">
    <a href="{{ route('products.show', $product->slug) }}" class="block">
        <div class="relative aspect-square overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100">
            <img src="{{ $imageUrl }}" alt="{{ $product->name }}" class="w-full h-full object-contain p-2 group-hover:scale-110 transition-transform duration-500">
            @if($discountPct > 0)
                <span class="badge-discount animate-bounce-subtle">{{ $discountPct }}% OFF</span>
            @endif
            @if($product->is_featured)
                <span class="badge-new">NEW</span>
            @endif
            @if($inStock)
                <span class="badge-stock">
                    <i class="fas fa-check-circle mr-1"></i>In Stock
                </span>
            @endif
            <div class="absolute inset-0 bg-gradient-to-t from-black/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        </div>
    </a>
    <div class="p-4">
        <a href="{{ route('products.show', $product->slug) }}">
            <h3 class="font-bold text-gray-900 line-clamp-2 min-h-[3rem] group-hover:text-blinkit-green transition text-sm leading-tight mb-2">{{ $product->name }}</h3>
        </a>
        @if($showRating && ($product->average_rating > 0 || ($product->ratings_count ?? 0) > 0))
            <div class="flex items-center gap-1.5 mb-2">
                <div class="flex items-center gap-0.5">
                    @for($i = 1; $i <= 5; $i++)
                        <i class="fas fa-star text-xs {{ $i <= round($product->average_rating ?? 0) ? 'text-blinkit-yellow' : 'text-gray-300' }}"></i>
                    @endfor
                </div>
                <span class="text-xs font-semibold text-gray-700">{{ number_format($product->average_rating ?? 0, 1) }}</span>
                <span class="text-xs text-gray-400">({{ $product->ratings_count ?? 0 }})</span>
            </div>
        @endif
        <div class="flex items-baseline gap-2 mb-3">
            <span class="text-lg font-black text-blinkit-green">{{ $currency_symbol }}{{ number_format($price, 0) }}</span>
            @if($hasDiscount)
                <span class="text-sm text-gray-400 line-through font-medium">{{ $currency_symbol }}{{ number_format($product->base_price, 0) }}</span>
            @endif
        </div>
        <form action="{{ route('cart.add') }}" method="POST" class="mt-3 pt-3 border-t border-gray-100" onclick="event.stopPropagation();">
            @csrf
            <input type="hidden" name="product_id" value="{{ $product->id }}">
            @if($product->variants && $product->variants->isNotEmpty())
            <input type="hidden" name="product_variant_id" value="{{ $product->variants->first()->id }}">
            @endif
            <input type="hidden" name="quantity" value="1">
            <button type="submit" class="w-full bg-blinkit-green hover:bg-blinkit-green-dark text-white font-bold py-2.5 px-4 rounded-lg text-sm transition-all shadow-sm hover:shadow-md transform hover:-translate-y-0.5 active:scale-95 flex items-center justify-center gap-2">
                <i class="fas fa-cart-plus"></i> Add
            </button>
        </form>
    </div>
</div>