@props(['product'])

<div class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-[#e8ddd0]">
    <a href="{{ route('products.show', $product->id) }}" class="block overflow-hidden">
        @if($product->primaryImage)
            <img src="{{ $product->primaryImage->image_data_url }}" alt="{{ $product->name }}" class="w-full h-56 object-cover hover:scale-105 transition-transform duration-300">
        @else
            <div class="w-full h-56 bg-gradient-to-br from-[#f5f0e8] via-[#e8ddd0] to-[#d4c4b0] flex flex-col items-center justify-center relative overflow-hidden">
                <!-- Decorative pattern -->
                <div class="absolute inset-0 opacity-5">
                    <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                        <circle cx="20" cy="20" r="2" fill="#7d6a52"/>
                        <circle cx="80" cy="30" r="1.5" fill="#9d8566"/>
                        <circle cx="40" cy="70" r="1.5" fill="#c97d60"/>
                        <circle cx="70" cy="80" r="2" fill="#7d6a52"/>
                    </svg>
                </div>
                
                <!-- Cupcake Icon -->
                <div class="relative z-10 flex flex-col items-center">
                    <svg class="w-24 h-24 mb-3 drop-shadow-lg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <!-- Cupcake Base -->
                        <path d="M12 18 L8 22 L16 22 Z" fill="#f5f0e8" stroke="#7d6a52" stroke-width="1.5" stroke-linejoin="round"/>
                        <path d="M8 22 L9 24 L15 24 L16 22 Z" fill="#e8ddd0" stroke="#7d6a52" stroke-width="1.5" stroke-linejoin="round"/>
                        
                        <!-- Frosting -->
                        <path d="M8 18 Q9 14 12 14 Q15 14 16 18" fill="#c97d60" stroke="#9d8566" stroke-width="1.5" stroke-linejoin="round"/>
                        <path d="M9 17 Q12 15 15 17" fill="#e8b4a0"/>
                        
                        <!-- Cherry on top -->
                        <circle cx="12" cy="12" r="3.5" fill="#c97d60" stroke="#9d8566" stroke-width="0.5"/>
                        <circle cx="12.5" cy="11.5" r="1.5" fill="#ff6b6b"/>
                        <path d="M12 8.5 L12 12" stroke="#7d6a52" stroke-width="1.5" stroke-linecap="round"/>
                        
                        <!-- Sprinkles -->
                        <circle cx="10" cy="16" r="1" fill="#ffd93d"/>
                        <circle cx="14" cy="17" r="1" fill="#6bcf7f"/>
                        <circle cx="11" cy="15.5" r="1" fill="#4d96ff"/>
                        <circle cx="13" cy="15.5" r="1" fill="#ff6b6b"/>
                    </svg>
                    <span class="text-[#7d6a52] text-sm font-semibold">No Image Available</span>
                </div>
            </div>
        @endif
    </a>
    <div class="p-6">
        <h3 class="text-xl font-serif font-semibold mb-2 text-[#524438]">
            <a href="{{ route('products.show', $product->id) }}" class="hover:text-[#9d8566] transition-colors">
                {{ $product->name }}
            </a>
        </h3>
        <p class="text-[#645443] text-sm mb-4 line-clamp-2 leading-relaxed">{{ $product->description }}</p>
        <div class="flex items-center justify-between pt-4 border-t border-[#e8ddd0]">
            <div>
                @if($product->is_on_sale)
                    <div class="flex items-center gap-2">
                        <span class="text-2xl font-bold text-[#c97d60]">R{{ number_format($product->sale_price, 2) }}</span>
                        <span class="text-sm text-[#9d8566] line-through">R{{ number_format($product->price, 2) }}</span>
                        <span class="bg-[#c97d60] text-white text-xs px-2 py-1 rounded-full font-semibold">SALE</span>
                    </div>
                @else
                    <span class="text-2xl font-bold text-[#7d6a52]">R{{ number_format($product->price, 2) }}</span>
                @endif
            </div>
            <div class="flex gap-2">
                <a href="{{ route('products.show', $product->id) }}" class="bg-[#7d6a52] text-white px-6 py-2 rounded-full hover:bg-[#9d8566] transition-all font-medium shadow-md hover:shadow-lg">
                    View Details
                </a>
                @if($product->availability)
                    <button onclick="quickAddToCart({{ $product->id }})" class="bg-[#c97d60] text-white px-4 py-2 rounded-full hover:bg-[#b86a4f] transition-all font-medium shadow-md hover:shadow-lg" title="Quick Add" aria-label="Add to cart">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                        </svg>
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>