@props(['product'])

@php($img = $product->primaryImage())

<div class="group relative bg-ink-card rounded-3xl border border-white/10 hover:border-brand-light/60 transition-all duration-300 hover:shadow-glow flex flex-col overflow-hidden">
    
    <!-- Image & Badges -->
    <a href="{{ route('products.show', $product) }}" class="block relative aspect-square bg-slate-900/80 overflow-hidden">
        @if($img)
            <img src="{{ $img->url }}" alt="{{ $product->name }}" class="w-full h-full object-cover group-hover:scale-110 transition duration-500 ease-out">
        @else
            <div class="w-full h-full flex flex-col items-center justify-center text-slate-500 text-xs gap-2">
                <span class="text-3xl">👟</span>
                <span>No image</span>
            </div>
        @endif

        <!-- Floating Discount Badge -->
        @if($product->discount_percent > 0)
            <span class="absolute top-3 left-3 bg-gradient-to-r from-brand to-brand-light text-ink text-[11px] font-black px-2.5 py-1 rounded-full shadow-lg">
                {{ $product->discount_percent }}% OFF
            </span>
        @endif

        <!-- Gender / Brand Pill -->
        @if($product->gender)
            <span class="absolute top-3 right-3 bg-ink/80 backdrop-blur-sm border border-white/10 text-slate-300 text-[10px] font-bold px-2 py-0.5 rounded-md uppercase tracking-wider">
                {{ $product->gender }}
            </span>
        @endif

        <!-- Stock Urgency -->
        @if($product->stock > 0 && $product->stock <= 10)
            <span class="absolute bottom-2 left-3 bg-amber-500/90 text-black text-[10px] font-black px-2 py-0.5 rounded-full">
                🔥 Only {{ $product->stock }} Left
            </span>
        @endif
    </a>

    <!-- Product Info -->
    <div class="p-4 flex-1 flex flex-col justify-between">
        <div>
            <!-- Category & Brand -->
            <div class="flex items-center justify-between text-[11px] text-slate-400 mb-1">
                <span class="uppercase tracking-wider font-semibold text-brand-light">{{ $product->category->name ?? 'Footwear' }}</span>
                @if($product->brand)
                    <span class="truncate max-w-[100px] text-slate-400 font-medium">{{ $product->brand }}</span>
                @endif
            </div>

            <!-- Title -->
            <h3 class="font-heading font-bold text-sm text-white group-hover:text-brand-light transition line-clamp-1">
                <a href="{{ route('products.show', $product) }}">{{ $product->name }}</a>
            </h3>

            <!-- Rating preview -->
            <div class="flex items-center gap-1.5 mt-1 text-xs text-amber-400">
                <span>★★★★★</span>
                <span class="text-[11px] text-slate-400 font-medium">(4.9)</span>
            </div>
        </div>

        <!-- Price and Action -->
        <div class="mt-3 pt-3 border-t border-white/5 flex items-center justify-between gap-2">
            <div>
                <div class="flex items-baseline gap-2">
                    <span class="font-heading font-extrabold text-base text-white">₹{{ number_format($product->price, 2) }}</span>
                    @if($product->original_price > $product->price)
                        <span class="price-strike text-slate-400 text-xs">₹{{ number_format($product->original_price, 2) }}</span>
                    @endif
                </div>
                <span class="text-[10px] text-slate-400 block">+ ₹{{ number_format($product->tax_amount, 2) }} GST</span>
            </div>

            <a href="{{ route('products.show', $product) }}" 
               class="p-2 rounded-xl bg-white/5 hover:bg-brand text-slate-200 hover:text-white transition group-hover:bg-brand group-hover:text-white shadow-sm" title="View details">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
            </a>
        </div>
    </div>
</div>