<div class="group relative bg-white border border-[#ececec] rounded-2xl overflow-hidden hover:border-brand hover:shadow-lg transition-all duration-300 flex flex-col h-full animate__animated animate__fadeIn">
    <!-- Badge -->
    <div class="absolute top-0 left-0 z-10">
        @if($product->is_featured)
            <span class="bg-[#f74b81] text-white text-[12px] font-bold px-4 py-1.5 rounded-br-2xl">Hot</span>
        @elseif($product->discount_price)
            <span class="bg-[#3BB77E] text-white text-[12px] font-bold px-4 py-1.5 rounded-br-2xl">-{{ round((($product->price - $product->discount_price) / $product->price) * 100) }}%</span>
        @endif
    </div>

    <!-- Image Area -->
    <div class="relative pt-[90%] overflow-hidden bg-white mt-4">
        <a href="{{ route('products.show', $product->slug) }}" class="absolute inset-0 flex items-center justify-center p-4">
            <img src="{{ $product->image_url ?? 'https://nest-frontend-v6.netlify.app/assets/imgs/shop/product-1-1.jpg' }}" alt="{{ $product->name }}" class="w-full h-full object-contain group-hover:scale-110 transition-transform duration-500">
        </a>
        
        <!-- Hover Actions -->
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-all duration-300 scale-90 group-hover:scale-100 z-20">
            <button class="w-8 h-8 bg-white text-brand rounded-full flex items-center justify-center shadow-lg hover:bg-brand hover:text-white transition-all border border-brand/10" title="Quick View">
                <i class="fi-rs-eye text-xs"></i>
            </button>
            <button class="w-8 h-8 bg-white text-brand rounded-full flex items-center justify-center shadow-lg hover:bg-brand hover:text-white transition-all border border-brand/10" title="Compare">
                <i class="fi-rs-shuffle text-xs"></i>
            </button>
            <button class="w-8 h-8 bg-white text-brand rounded-full flex items-center justify-center shadow-lg hover:bg-brand hover:text-white transition-all border border-brand/10" title="Add to Wishlist">
                <i class="fi-rs-heart text-xs"></i>
            </button>
        </div>
    </div>

    <!-- Content -->
    <div class="p-5 flex flex-col flex-grow">
        <a href="#" class="text-[12px] text-[#ADADAD] mb-1 hover:text-brand transition-colors">{{ $product->category->name ?? 'Snack' }}</a>
        <h3 class="text-[16px] font-bold text-[#253D4E] hover:text-brand transition-colors mb-2 line-clamp-2 min-h-[44px] leading-tight">
            <a href="{{ route('products.show', $product->slug) }}">{{ $product->name }}</a>
        </h3>
        
        <!-- Rating -->
        <div class="flex items-center gap-2 mb-2">
            <div class="flex text-[#ffb300]">
                @for($i = 1; $i <= 5; $i++)
                    <i class="fi-rs-star text-[10px] {{ $i <= ($product->rating ?? 4) ? 'fill-current' : 'text-[#ced4da]' }}"></i>
                @endfor
            </div>
            <span class="text-[12px] text-[#7E7E7E]">({{ $product->rating ?? '4.0' }})</span>
        </div>

        <div class="mt-auto">
            <p class="text-[13px] text-[#7E7E7E] mb-3">By <span class="text-brand font-medium">SmartGrocery</span></p>
            
            <div class="flex items-center justify-between gap-2">
                <div class="flex flex-col">
                    <span class="text-brand text-[18px] font-bold">${{ $product->discount_price ?? $product->price }}</span>
                    @if($product->discount_price)
                        <span class="text-[#ADADAD] text-[14px] line-through font-medium">${{ $product->price }}</span>
                    @endif
                </div>
                
                <form action="{{ route('cart.store') }}" method="POST" class="flex-shrink-0">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    <button type="submit" class="flex items-center gap-2 bg-[#DEF9EC] text-brand px-3.5 py-1.5 rounded font-bold text-[14px] hover:bg-brand hover:text-white transition-all group/btn border border-brand/10">
                        <i class="fi-rs-shopping-cart text-[14px]"></i>
                        <span>Add</span>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>