@php
    $hasOffer = $product->effective_price !== null && bccomp($product->effective_price, $product->price, 2) < 0;
@endphp

<a href="{{ route('products.show', $product->slug) }}" wire:navigate class="group block bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md overflow-hidden">
    <div class="relative aspect-square bg-gray-100 dark:bg-gray-900 overflow-hidden">
        <x-product-image :path="$product->cover_image_path" :alt="$product->title" class="group-hover:opacity-90" />

        @if ($hasOffer)
            <span class="absolute top-2 left-2 bg-red-600 text-white text-xs font-semibold px-2 py-1 rounded">Oferta</span>
        @endif
    </div>

    <div class="p-3">
        <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{{ $product->title }}</h3>

        <div class="mt-1 flex items-center gap-2">
            @if ($hasOffer)
                <span class="text-sm font-semibold text-red-600">S/ {{ number_format($product->effective_price, 2) }}</span>
                <span class="text-xs text-gray-400 line-through">S/ {{ number_format($product->price, 2) }}</span>
            @else
                <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">S/ {{ number_format($product->price, 2) }}</span>
            @endif
        </div>
    </div>
</a>