@php
    $p = is_object($p) ? $p : (object) $p;
    $name = is_array($p->productname ?? null) ? ($p->productname[$lang] ?? (array_values($p->productname)[0] ?? '')) : ($p->productname ?? $p->name ?? '');

    // Price: prefer the offer price ONLY when it is a real positive value AND lower than the
    // main price. A formatted "$ 0.00" string is non-empty in PHP, so plain ?? is unsafe.
    $_offerNum = (float) preg_replace('/[^0-9.]/', '', (string) ($p->offerprice ?? ''));
    $_mainNum  = (float) preg_replace('/[^0-9.]/', '', (string) ($p->mainprice ?? ''));
    $hasOffer  = $_offerNum > 0 && $_offerNum < $_mainNum;
    $price     = $hasOffer ? $p->offerprice : ($p->mainprice ?? $p->offerprice ?? '');
    $compare   = $hasOffer ? $p->mainprice : null;
    $rating = isset($p->rating) ? (float) $p->rating : 0;
    $img = $p->thumbnail ?? null;
    $url = $p->producturl ?? '#';
    $cartUrl = $p->cartURL ?? null;
    $proid = $p->productid ?? $p->id ?? null;
    $type = $p->product_type ?? 'simple';
    $varid = $p->variantid ?? null;
    $inWish = isset($p->is_in_wishlist) && $p->is_in_wishlist == 1;
    $stock = $p->stock ?? 0;

    // Compare state from session
    $inCompare = false;
    $cmpType = ($p->product_type ?? 'simple') === 'simple' ? 'simple' : 'variant';
    $cmpId = $p->productid ?? $p->id ?? null;
    if ($cmpId) {
        foreach ((array) session('comparison', []) as $cmp) {
            if (($cmp['proid'] ?? null) == $cmpId && (($cmp['type'] ?? 'variant') === $cmpType)) {
                $inCompare = true;
                break;
            }
        }
    }
    $disPct = isset($p->discount_pct) ? (int) $p->discount_pct : 0;
    if (!$disPct && $compare) {
        $cv = (float) preg_replace('/[^0-9.]/', '', (string) $compare);
        $pv = (float) preg_replace('/[^0-9.]/', '', (string) $price);
        if ($cv > 0 && $cv > $pv) $disPct = round((1 - $pv / $cv) * 100);
    }
    $saleTag = is_array($p->sale_tag ?? null) ? ($p->sale_tag[$lang] ?? (array_values($p->sale_tag)[0] ?? null)) : ($p->sale_tag ?? null);
    $saleTag = is_string($saleTag) ? trim($saleTag) : $saleTag;
    $saleColor = ($p->sale_tag_color ?? null) ?: '#3b6df0';
    $saleTextColor = ($p->sale_tag_text_color ?? null) ?: '#ffffff';

    // Contrast guard for sale tag — flip text color if bg/text are too close (e.g. black on black)
    $_rgb = function($hex){
        $hex = ltrim((string) $hex, '#');
        if (strlen($hex) === 3) $hex = $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
        if (strlen($hex) !== 6) return null;
        return [hexdec(substr($hex,0,2)), hexdec(substr($hex,2,2)), hexdec(substr($hex,4,2))];
    };
    $_luma = function($rgb){ return $rgb ? (0.299 * $rgb[0] + 0.587 * $rgb[1] + 0.114 * $rgb[2]) / 255 : 1; };
    $bgRgb = $_rgb($saleColor); $txtRgb = $_rgb($saleTextColor);
    if ($bgRgb && $txtRgb && abs($_luma($bgRgb) - $_luma($txtRgb)) < 0.35) {
        $saleTextColor = $_luma($bgRgb) > 0.6 ? '#0a1430' : '#ffffff';
    }
@endphp

<article class="bg-white rounded-2xl shadow-card p-3 lg:p-4 grid grid-cols-[100px_1fr] sm:grid-cols-[160px_1fr_auto] gap-4 items-start hover:shadow-hover transition-shadow">
    <a href="{{ $url }}" class="aspect-square bg-slate-50 rounded-xl overflow-hidden block relative">
        <img src="{{ $img ?: url('images/no-image.png') }}" alt="{{ $name }}" loading="lazy" class="w-full h-full object-cover">
        @if($saleTag)
            <div class="absolute top-1.5 left-1.5 text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded" style="background: {{ $saleColor }}; color: {{ $saleTextColor }};">{{ $saleTag }}</div>
        @endif
        @if($disPct > 0)
            <div class="absolute top-1.5 right-1.5 bg-emerald-600 text-white text-[11px] font-bold px-1.5 py-0.5 rounded tabular">−{{ $disPct }}%</div>
        @endif
    </a>
    <div class="min-w-0">
        <h3 class="font-semibold text-[15px] leading-snug">
            <a href="{{ $url }}" class="hover:text-brand-600">{{ $name }}</a>
        </h3>
        <div class="flex items-center flex-wrap gap-2 mt-2">
            @if($rating > 0)
                <span class="bg-emerald-600 text-white px-1.5 py-0.5 rounded font-semibold flex items-center gap-0.5 text-[11px]">{{ number_format($rating, 1) }}<svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5l2.9 6 6.6 1-4.8 4.6 1.1 6.6L12 17.6 6.2 20.7 7.3 14.1 2.5 9.5l6.6-1L12 2.5Z"/></svg></span>
            @else
                <span class="text-[11px] text-slate-400 flex items-center gap-1"><svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" class="text-slate-300"><path d="M12 2.5l2.9 6 6.6 1-4.8 4.6 1.1 6.6L12 17.6 6.2 20.7 7.3 14.1 2.5 9.5l6.6-1L12 2.5Z"/></svg>{{ __('No reviews yet') }}</span>
            @endif
            @if($disPct > 0)
                <span class="text-[11px] text-emerald-600 font-bold">{{ $disPct }}% {{ __('off') }}</span>
            @endif
        </div>
        @php $hidePrice = (App\Genral::first()->login ?? 0) == 1 && !auth()->check(); @endphp
        <div class="flex items-baseline gap-2 mt-2">
            @if($hidePrice)
                <a href="{{ url('login') }}" class="text-[13px] font-semibold text-brand-600 hover:underline">{{ __('Login to view price') }}</a>
            @else
                <span class="font-display font-extrabold text-[20px] tabular text-deep">{!! $price !!}</span>
                @if($compare)
                    <span class="text-slate-400 line-through text-[13px] tabular">{!! $compare !!}</span>
                @endif
            @endif
        </div>
        @if($stock <= 0)
            <span class="inline-block mt-2 bg-rose-50 text-rose-600 text-[11px] font-bold uppercase tracking-wider px-2 py-0.5 rounded">{{ __('Out of stock') }}</span>
        @endif
    </div>
    <div class="col-span-2 sm:col-span-1 flex sm:flex-col gap-2 sm:items-end items-stretch">
        <a href="{{ $url }}" class="text-[13px] font-semibold text-brand-600 hover:underline whitespace-nowrap text-center sm:text-right">{{ __('View Details') }} →</a>
        @if($cartUrl && $stock > 0)
            @if($type === 'simple' && $proid)
                <form method="POST" action="{{ $cartUrl }}" class="addSimpleCardFrom{{ $proid }}">
                    @csrf
                    <input name="qty" type="hidden" value="1">
                    <button type="button" onclick="addSimpleProCard({{ $proid }})" class="bg-deep hover:bg-saffron hover:text-deep text-white text-[13px] px-5 py-2 rounded-lg font-semibold transition-colors whitespace-nowrap w-full sm:w-auto">+ {{ __('Add to cart') }}</button>
                </form>
            @elseif($varid)
                <form method="POST" action="{{ $cartUrl }}" class="addVariantProCard{{ $varid }}">
                    @csrf
                    <input name="qty" type="hidden" value="1">
                    <button type="button" onclick="addVariantProCard({{ $varid }})" class="bg-deep hover:bg-saffron hover:text-deep text-white text-[13px] px-5 py-2 rounded-lg font-semibold transition-colors whitespace-nowrap w-full sm:w-auto">+ {{ __('Add to cart') }}</button>
                </form>
            @endif
        @endif
        @if($type === 'simple' && $proid)
            <button type="button" onclick="toggleWish('simple', {{ $proid }}, this)" class="text-[13px] px-5 py-2 rounded-lg font-semibold transition-colors flex items-center gap-1.5 justify-center {{ $inWish ? 'bg-rose-500 text-white hover:bg-rose-600' : 'bg-rose-50 text-rose-500 hover:bg-rose-100' }}" title="{{ __('Wishlist') }}">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="{{ $inWish ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="1.6"><path d="M12 20s-7-4.5-9-9.2A4.8 4.8 0 0 1 7.5 5 4.8 4.8 0 0 1 12 8a4.8 4.8 0 0 1 4.5-3A4.8 4.8 0 0 1 21 10.8C19 15.5 12 20 12 20Z"/></svg>
                {{ $inWish ? __('In Wishlist') : __('Wishlist') }}
            </button>
        @elseif($varid)
            <button type="button" onclick="toggleWish('variant', {{ $varid }}, this)" class="text-[13px] px-5 py-2 rounded-lg font-semibold transition-colors flex items-center gap-1.5 justify-center {{ $inWish ? 'bg-rose-500 text-white hover:bg-rose-600' : 'bg-rose-50 text-rose-500 hover:bg-rose-100' }}" title="{{ __('Wishlist') }}">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="{{ $inWish ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="1.6"><path d="M12 20s-7-4.5-9-9.2A4.8 4.8 0 0 1 7.5 5 4.8 4.8 0 0 1 12 8a4.8 4.8 0 0 1 4.5-3A4.8 4.8 0 0 1 21 10.8C19 15.5 12 20 12 20Z"/></svg>
                {{ $inWish ? __('In Wishlist') : __('Wishlist') }}
            </button>
        @endif

        @if($proid)
            <button type="button" onclick="addToCompare('{{ $type }}', {{ $proid }}, this)" class="cmp-btn text-[13px] px-5 py-2 rounded-lg font-semibold transition-colors flex items-center gap-1.5 justify-center {{ $inCompare ? 'bg-brand-500 text-white hover:bg-brand-600' : 'bg-brand-50 text-brand-600 hover:bg-brand-100' }}" title="{{ $inCompare ? __('In compare list') : __('Compare') }}">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="{{ $inCompare ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="1.6"><path d="M21 16V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Z"/><path d="M12 6v12"/></svg>
                {{ $inCompare ? __('In Compare') : __('Compare') }}
            </button>
        @endif
    </div>
</article>