@php
$productSettings = $productSettings ?? (object)[];
$displaySales = ($productSettings->show_sales ?? true) && $product->display_sales;
$effectivePrice = $product->effective_price;
$isOnSale = $product->on_sale;
$badge = $product->marketing_badge;
$showBadges = $themeSettings->show_badges ?? true;
$showRatings = $productSettings->show_ratings ?? true;
$showReviewCount = $themeSettings->show_review_count ?? true;
$showVendor = $productSettings->show_vendor_name ?? true;
$showCompare = $themeSettings->show_compare_button ?? false;

    $badgeColors = [
        'Trending' => 'bg-rose-500/10 text-rose-600 dark:text-rose-400 border-rose-500/20',
        'Hot' => 'bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/20',
        'Best Seller' => 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20',
        'Editors Pick' => 'bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-indigo-500/20',
    ];
@endphp

<div
    class="group relative flex flex-col bg-surface-secondary/60 dark:bg-surface-secondary/60 backdrop-blur-3xl border border-border-subtle dark:border-white/5 rounded-[var(--card-radius)] overflow-hidden hover:border-brand-500/50 transition-all duration-500 shadow-xl shadow-black/5 dark:shadow-black/40 hover:-translate-y-2 hover:shadow-brand-500/20 active:scale-[0.98]">

    {{-- Thumbnail Container --}}
    <div class="relative aspect-[16/10] overflow-hidden bg-bg-main border-b border-border-subtle">
        {{-- Badges --}}
        @if($showBadges)
        <div class="absolute top-2.5 left-2.5 z-20 flex flex-col gap-1.5">
            @if($badge && strtolower($badge) !== 'none')
            <span
                class="px-2 py-0.5 text-[11px] font-black uppercase tracking-widest rounded-lg border backdrop-blur-md {{ $badgeColors[$badge] ?? 'bg-brand-500/10 text-brand-400 border-brand-500/20' }}">
                {{ $badge }}
            </span>
            @endif
        </div>
        @endif

        {{-- Instant Access Overlay --}}
        <div
            class="absolute inset-0 bg-black/30 backdrop-blur-sm opacity-0 group-hover:opacity-100 transform scale-95 group-hover:scale-100 transition-all duration-300 z-10 flex items-center justify-center p-5 text-center">
            <a href="{{ route('storefront.product', $product->slug) }}"
                class="pointer-events-auto inline-flex items-center justify-center gap-3 w-full max-w-xs py-3 rounded-[var(--input-radius)] bg-gradient-to-br from-brand-500 to-brand-600 text-zinc-950 font-black text-sm shadow-xl hover:shadow-2xl transform transition-all duration-300 hover:scale-105 active:scale-95">
                <i data-lucide="zap" class="w-4 h-4 fill-current stroke-[2.5]"></i>
                <span class="uppercase tracking-widest">View Details</span>
            </a>
        </div>

        {{-- Image --}}
        <a href="{{ route('storefront.product', $product->slug) }}" class="block w-full h-full">
            @if($product->thumbnail_url)
            <img src="{{ $product->thumbnail_url }}" alt="{{ $product->title }}"
                x-on:error="$el.src = 'https://placehold.co/1200x800/111118/FFFFFF/png?text=Product+Preview'"
                class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105 opacity-80 group-hover:opacity-100">
            @else
            <div class="w-full h-full flex items-center justify-center bg-surface-secondary/40">
                <i data-lucide="box" class="w-8 h-8 text-text-dim/10 stroke-[1.5]"></i>
            </div>
            @endif
        </a>
    </div>

    {{-- Content --}}
    <div class="p-4 flex flex-col flex-1 space-y-3">
        <div class="flex items-center justify-between mb-1">
            @if($showVendor && !($product->vendor?->isSuperAdmin()))
            <a href="#" class="flex items-center gap-2 group/author">
                <div
                    class="w-4 h-4 rounded bg-surface-primary border border-border-subtle flex items-center justify-center text-[10px] font-black text-text-dim/40 group-hover:border-brand-500/20 group-hover:text-brand-500 transition-all">
                    {{ substr($product->vendor?->name ?? 'A', 0, 1) }}
                </div>
                <span
                    class="text-xs font-bold text-text-dim/40 group-hover:text-text-base transition-colors uppercase tracking-widest">
                    {{ $product->vendor?->name ?? 'Elite Author' }}
                </span>
            </a>
            @endif

            @if($showRatings && $product->rating_average > 0)
            <div class="flex items-center gap-1 text-xs font-bold text-amber-500">
                <i data-lucide="star" class="w-2.5 h-2.5 fill-current stroke-0"></i>
                <span>{{ number_format($product->rating_average, 1) }}</span>
                @if($showReviewCount)
                <span class="text-[9px] text-text-dim/40 font-600">({{ $product->reviews_count }})</span>
                @endif
            </div>
            @endif
        </div>

        <h3
            class="text-base font-black text-text-base line-clamp-2 leading-snug group-hover:text-brand-500 transition-colors uppercase tracking-tight">
            <a href="{{ route('storefront.product', $product->slug) }}">{{ $product->title }}</a>
        </h3>

        <div class="flex items-center justify-between gap-2 overflow-hidden">
            <span class="text-[10px] font-bold text-text-dim/40 bg-surface-primary border border-border-subtle px-2 py-0.5 rounded uppercase tracking-widest truncate">
                {{ $product->category->name ?? 'Digital Product' }}
            </span>
            <span class="flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest whitespace-nowrap" style="color: #bf7af0 !important;">
                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="animate-pulse"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                {{ number_format($product->display_sales) }} Sales
            </span>
        </div>

        {{-- Footer --}}
        <div class="mt-auto pt-3 border-t border-border-subtle flex items-center justify-between">
            <div class="flex flex-col">
                @if($isOnSale)
                <span class="text-[10px] font-bold text-text-dim/40 line-through tracking-tighter leading-none mb-0.5">${{ number_format($product->price, 2) }}</span>
                <span class="text-xl font-black text-emerald-500 uppercase tracking-tighter leading-none">${{ number_format($effectivePrice, 2) }}</span>
                @else
                <span class="text-xl font-black text-text-base uppercase tracking-tighter leading-none">${{ number_format($product->price, 2) }}</span>
                @endif
            </div>

            <div class="flex items-center gap-2">
                @if($showCompare)
                <button 
                    class="w-8 h-8 rounded-lg bg-surface-primary border border-border-subtle text-text-dim/60 hover:text-brand-500 hover:border-brand-500/40 transition-all flex items-center justify-center active:scale-90"
                    title="Compare Protocol">
                    <i data-lucide="git-compare" class="w-3.5 h-3.5 stroke-[2.5]"></i>
                </button>
                @endif
                <a href="{{ route('checkout.buy-now', $product->id) }}" 
                    class="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 text-zinc-950 hover:scale-110 hover:-translate-y-0.5 transition-all flex items-center justify-center shadow-lg shadow-brand-500/30 active:scale-95"
                    aria-label="Checkout Now">
                    <i data-lucide="zap" class="w-4 h-4 fill-current"></i>
                </a>
            </div>
        </div>
    </div>
</div>