@props(['product', 'badge' => null])

<div class="group relative bg-[#111827] border border-white/5 rounded-3xl overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_20px_50px_-15px_rgba(124,58,237,0.3)] hover:border-brand-500/30">
    {{-- Image Container --}}
    <div class="relative aspect-[4/3] overflow-hidden">
        <img src="{{ $product->thumbnail_url }}" 
             alt="{{ $product->title }}" 
             class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
        
        {{-- Overlay Gradient --}}
        <div class="absolute inset-0 bg-gradient-to-t from-[#0B0F19]/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

        {{-- Badge --}}
        @if($badge)
            <div class="absolute top-4 left-4 h-6 px-3 bg-brand-500 text-white text-[9px] font-black uppercase tracking-widest flex items-center rounded-lg shadow-xl">
                {{ $badge }}
            </div>
        @elseif($product->is_featured)
             <div class="absolute top-4 left-4 h-6 px-3 bg-emerald-500 text-white text-[9px] font-black uppercase tracking-widest flex items-center rounded-lg shadow-xl">
                Featured
            </div>
        @endif

        {{-- Quick Action --}}
        <div class="absolute top-4 right-4 translate-x-12 group-hover:translate-x-0 transition-transform duration-500">
             <button class="w-10 h-10 rounded-xl bg-white/10 backdrop-blur-md border border-white/10 flex items-center justify-center text-white hover:bg-brand-500 transition-colors">
                <i data-lucide="shopping-cart" class="w-4 h-4"></i>
             </button>
        </div>
    </div>

    {{-- Content --}}
    <div class="p-6 space-y-3">
        <div class="flex justify-between items-start gap-4">
            <h3 class="text-lg font-black text-white hover:text-brand-400 transition-colors line-clamp-1">
                <a href="/products/{{ $product->slug }}">{{ $product->title }}</a>
            </h3>
            <div class="text-right">
                @if($product->discount_price && $product->discount_price < $product->price)
                    <div class="text-[10px] text-slate-500 line-through leading-none mb-1">${{ number_format($product->price, 2) }}</div>
                    <div class="text-lg font-black text-emerald-400 tracking-tighter leading-none">
                        ${{ number_format($product->discount_price, 2) }}
                    </div>
                @else
                    <div class="text-lg font-black text-emerald-400 tracking-tighter">
                        ${{ number_format($product->price, 2) }}
                    </div>
                @endif
            </div>
        </div>

        <div class="flex items-center gap-3 text-[10px] font-bold text-slate-500 uppercase tracking-widest">
            <span class="flex items-center gap-1">
                <i data-lucide="layout" class="w-3 h-3"></i>
                {{ $product->category->name ?? 'Asset' }}
            </span>
            <div class="w-1 h-1 rounded-full bg-slate-700"></div>
            <span class="flex items-center gap-1" style="color: #bf7af0 !important;">
                <i data-lucide="zap" class="w-3 h-3"></i>
                {{ $product->display_sales }} Sales
            </span>
        </div>
    </div>
</div>