<a href="{{ route('product-detail', $product) }}" style="text-decoration: none; color: inherit;">
    <div class="product-card" data-category="{{ $product->category->slug }}">
        @if($product->images->count() > 0)
            <img src="{{ asset('storage/' . $product->images->first()->image_path) }}" alt="{{ $product->name }}" class="card-image" style="background-size: cover; background-position: center;">
        @else
            <img src="{{ $product->image }}" alt="{{ $product->name }}" class="card-image" style="background-size: cover; background-position: center;">
        @endif
        <div class="card-content">
            <div class="card-title">{{ $product->name }}</div>
            <span class="card-tag">{{ $product->category->name }}</span>
            <p class="card-description">{{ substr($product->description, 0, 80) }}...</p>
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
                <!-- <span style="font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem;">R{{ number_format($product->price, 2) }}</span> -->
                <button class="btn btn--sm" style="pointer-events: none;">View Details</button>
            </div>
        </div>
    </div>
</a>
