@php
    $p = $product;
    $primaryImage = asset($p->publicImagePath());
    $hoverImagePath = collect($p->publicGalleryPaths())->skip(1)->first();
@endphp
<div class="product-card product-card-animated scroll-animate" data-product-id="{{ $p->id }}" data-category="{{ $p->category }}">
    <a href="{{ route('product.show', $p) }}" class="product-card-link" aria-label="{{ $p->name }}"></a>
    <div class="product-image product-image-zoom">
        <img src="{{ $primaryImage }}" alt="{{ $p->name }}" loading="lazy" data-src="{{ $primaryImage }}" @if($hoverImagePath) data-hover="{{ asset($hoverImagePath) }}" @endif>
        @if(!empty($p->sale_percent))
            <span class="sale-tag">{{ $p->sale_percent }}% OFF</span>
        @endif
    </div>
    <div class="product-info product-info-animated">
        <h3 class="product-name">{{ $p->name }}</h3>
        <div class="product-price">
            Rs {{ number_format($p->price, 0) }}
            @if(!empty($p->original_price) && $p->original_price > $p->price)
                <span style="text-decoration:line-through;color:#999;font-weight:normal;margin-left:.5rem;">Rs {{ number_format($p->original_price, 0) }}</span>
            @endif
        </div>
    </div>
</div>