@foreach($products as $product)
    <div class="product-card glass">
        <a href="{{ route('shop.product', $product) }}" class="product-image-link">
            <div class="product-image-wrapper">
                <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="product-image" loading="lazy">
                
                @if($product->stock <= 0)
                    <span class="product-badge-stock" style="background-color: var(--color-error);">Agotado</span>
                @elseif($product->stock <= 5)
                    <span class="product-badge-stock" style="background-color: var(--color-warning);">¡Últimas {{ $product->stock }} un.!</span>
                @endif

                @if($product->images->count() > 0)
                    <span class="product-badge-gallery" title="{{ 1 + $product->images->count() }} fotos disponibles">
                        📷 {{ 1 + $product->images->count() }}
                    </span>
                @endif
            </div>
        </a>

        <div class="product-info">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; gap: 0.5rem;">
                @if($product->category)
                    <span class="category-pill-small">
                        {{ $product->category->icon }} {{ $product->category->name }}
                    </span>
                @else
                    <span class="category-pill-small" style="opacity: 0.6;">Boutique</span>
                @endif

                <span class="sku-pill-small" title="Código SKU">
                    {{ $product->sku ?: 'EB-' . $product->id }}
                </span>
            </div>

            <h3 class="product-name">
                <a href="{{ route('shop.product', $product) }}" style="color: inherit; text-decoration: none;">
                    {{ $product->name }}
                </a>
            </h3>

            <p class="product-description">{{ $product->description }}</p>
            
            <div class="product-footer">
                <span class="product-price">${{ number_format($product->price, 2) }}</span>
                
                <a href="{{ route('shop.product', $product) }}" class="btn btn-primary btn-sm btn-view-product" style="display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none;">
                    <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                    Ver Detalles
                </a>
            </div>
        </div>
    </div>
@endforeach