<div class="card product-card h-100">
    <div class="card-img-wrap">
        <!-- Wishlist Form Overlay -->
        <form action="{{ route('wishlist.toggle', $product->id) }}" method="POST" class="position-absolute" style="top: 12px; right: 12px; z-index: 10;">
            @csrf
            <button type="submit" class="btn btn-white rounded-circle shadow-sm p-2 d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; background: white; border: none;">
                @if(session()->has('wishlist') && isset(session('wishlist')[$product->id]))
                    <i class="bi bi-heart-fill text-danger fs-5"></i>
                @else
                    <i class="bi bi-heart text-secondary fs-5"></i>
                @endif
            </button>
        </form>

        <!-- Discount Badge -->
        @if($product->has_discount)
            <span class="badge-discount">-{{ $product->discount_percentage }}% OFF</span>
        @endif

        <!-- Product Image -->
        <a href="{{ route('marketplace.show', $product->slug) }}">
            <img src="{{ mjs_image($product->primaryImage?->image_path, $product->id) }}" alt="{{ $product->name }}">
        </a>
    </div>
    
    <div class="card-body d-flex flex-column p-3">
        <div class="d-flex justify-content-between align-items-center mb-1">
            <span class="text-uppercase text-danger fw-bold" style="font-size: 10px; letter-spacing: 0.5px;">{{ $product->brand ?? 'Generic' }}</span>
            @if($product->stock_quantity > 0)
                <span class="badge bg-success-subtle text-success border border-success-subtle rounded px-2 py-1" style="font-size: 9px;">In Stock</span>
            @else
                <span class="badge bg-danger-subtle text-danger border border-danger-subtle rounded px-2 py-1" style="font-size: 9px;">Out of stock</span>
            @endif
        </div>
        
        <h6 class="card-title fw-bold mb-2">
            <a href="{{ route('marketplace.show', $product->slug) }}" class="text-decoration-none text-dark hover-text-danger">
                {{ $product->name }}
            </a>
        </h6>
        
        <p class="card-text text-muted fs-6 mb-3 flex-grow-1">
            {{ Str::words(strip_tags($product->description), 12) }}
        </p>
        
        <div class="d-flex align-items-center mb-3">
            @if($product->has_discount)
                <span class="fs-5 fw-bold text-danger me-2">KSh {{ number_format($product->discount_price) }}</span>
                <span class="text-decoration-line-through text-muted small">KSh {{ number_format($product->price) }}</span>
            @else
                <span class="fs-5 fw-bold text-secondary">KSh {{ number_format($product->price) }}</span>
            @endif
        </div>

        <div class="d-flex gap-2">
            <!-- Add to Cart Form -->
            <form action="{{ route('cart.add', $product->id) }}" method="POST" class="flex-grow-1">
                @csrf
                <button type="submit" class="btn btn-primary-mj w-100 rounded-pill py-2 px-1 text-center d-flex align-items-center justify-content-center gap-1" style="font-size: 13px;" {{ $product->stock_quantity <= 0 ? 'disabled' : '' }}>
                    <i class="bi bi-cart-plus"></i> Buy Now
                </button>
            </form>
            
            <!-- WhatsApp Chat Link -->
            @php
                $waMsg = "Hi MJ's Bikes! I'm interested in: " . $product->name . " (Price: KSh " . number_format($product->active_price) . "). Is it available?";
                $waUrl = "https://wa.me/254712345678?text=" . urlencode($waMsg);
            @endphp
            <a href="{{ $waUrl }}" target="_blank" class="btn btn-success rounded-circle d-flex align-items-center justify-content-center" style="width: 38px; height: 38px;" title="Inquire on WhatsApp">
                <i class="bi bi-whatsapp"></i>
            </a>
        </div>
    </div>
</div>
