{{-- Product Card Partial --}}
{{-- Usage: @include('partials.product-card', ['product' => $product]) --}}
@php
    $imgSrc = $product->image_path ? asset('images/' . $product->image_path) : 'https://ui-avatars.com/api/?name=' . urlencode($product->name) . '&background=random&size=200';
    $discount = ($product->old_price && $product->old_price > $product->price) ? round((1 - $product->price / $product->old_price) * 100) : 0;
@endphp

<div class="group bg-white border border-gray-100 p-4 transition-all hover:shadow-xl hover:border-red-200 relative rounded overflow-hidden flex flex-col h-full">
    {{-- Badges --}}
    <div class="absolute top-4 left-4 z-10 flex flex-col space-y-1">
        @if($discount > 0)
            <span class="bg-brand-red text-white text-[10px] font-bold px-2 py-0.5 rounded leading-none">-{{ $discount }}%</span>
        @endif
        @if($product->is_new)
            <span class="bg-blue-600 text-white text-[10px] font-bold px-2 py-0.5 rounded leading-none">NEW</span>
        @endif
    </div>

    {{-- Hover Actions --}}
    <div class="absolute top-4 right-4 z-10 flex flex-col space-y-2 translate-x-12 opacity-0 transition-all duration-300 ease-in-out group-hover:translate-x-0 group-hover:opacity-100">
        <button onclick="WishlistManager.toggle({{ $product->id }}); this.querySelector('svg').classList.toggle('fill-red-500')" class="w-8 h-8 bg-white shadow rounded-full flex items-center justify-center hover:bg-brand-red hover:text-white transition-colors text-gray-600">
            <i data-lucide="heart" class="w-4 h-4"></i>
        </button>
        <a href="{{ url('/product/' . $product->id) }}" class="w-8 h-8 bg-white shadow rounded-full flex items-center justify-center hover:bg-brand-red hover:text-white transition-colors text-gray-600">
            <i data-lucide="eye" class="w-4 h-4"></i>
        </a>
    </div>

    {{-- Image --}}
    <a href="{{ url('/product/' . $product->id) }}" class="aspect-square mb-4 overflow-hidden relative bg-gray-50 flex items-center justify-center block rounded">
        <img src="{{ $imgSrc }}" alt="{{ $product->name }}" class="object-cover w-full h-full mix-blend-multiply transition-transform duration-500 group-hover:scale-110" loading="lazy">
    </a>

    {{-- Content --}}
    <div class="space-y-1 text-center flex-grow flex flex-col">
        {{-- Rating --}}
        <div class="flex justify-center space-x-0.5 text-yellow-400 mb-2">
            @for($i = 0; $i < 5; $i++)
                @if($i < floor($product->rating ?? 5))
                    <svg class="w-3 h-3 fill-current" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                @else
                    <svg class="w-3 h-3 text-gray-300 fill-current" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                @endif
            @endfor
        </div>

        <p class="text-xs text-brand-red font-semibold">{{ $product->brand }}</p>
        <a href="{{ url('/product/' . $product->id) }}" class="text-sm font-bold text-gray-800 line-clamp-2 flex-grow hover:text-brand-red cursor-pointer transition-colors block">
            {{ $product->name }}
        </a>

        <div class="flex justify-center items-center space-x-2 mt-auto pt-2">
            @if($product->old_price)
                <span class="text-xs text-gray-400 line-through">${{ number_format($product->old_price, 2) }}</span>
            @endif
            <span class="text-lg font-extrabold text-brand-dark">${{ number_format($product->price, 2) }}</span>
        </div>
    </div>

    {{-- Add to Cart Overlay --}}
    <div class="absolute bottom-0 left-0 right-0 p-4 translate-y-full opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-in-out bg-white/95 backdrop-blur-sm border-t border-gray-100">
        <button
            onclick="CartManager.addItem({id:{{ $product->id }}, name:'{{ addslashes($product->name) }}', price:{{ $product->price }}, brand:'{{ addslashes($product->brand) }}', image:'{{ $imgSrc }}'})"
            class="w-full bg-brand-dark text-white hover:bg-brand-red py-2.5 rounded font-bold text-sm tracking-wide transition-colors flex items-center justify-center space-x-2"
        >
            <i data-lucide="shopping-cart" class="w-4 h-4"></i>
            <span>ADD TO CART</span>
        </button>
    </div>
</div>