@props(['product'])

<div style="background:#fff; border:1px solid #e8ede9; border-radius:1rem; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.04); transition:transform 0.3s,box-shadow 0.3s;" 
     onmouseenter="this.style.transform='translateY(-5px)';this.style.boxShadow='0 12px 32px rgba(0,0,0,0.1)'"
     onmouseleave="this.style.transform='translateY(0)';this.style.boxShadow='0 2px 12px rgba(0,0,0,0.04)'">

    {{-- Book Cover --}}
    <div style="position:relative; aspect-ratio:3/4; background:#f8f5f0; overflow:hidden;">
        <img src="{{ $product->thumbnail_url }}" 
             alt="{{ $product->name }}" 
             style="width:100%; height:100%; object-fit:cover; transition:transform 0.5s;"
             onmouseenter="this.style.transform='scale(1.06)'"
             onmouseleave="this.style.transform='scale(1)'">

        {{-- Bestseller Badge --}}
        @if($product->is_featured)
            <div style="position:absolute; top:0.75rem; left:0.75rem; background:#2d5a3d; color:#fff; font-size:0.65rem; font-weight:900; letter-spacing:0.08em; text-transform:uppercase; padding:0.3rem 0.75rem; border-radius:9999px;">
                Bestseller
            </div>
        @endif

        {{-- Discount Badge --}}
        @if($product->discount_price && $product->discount_price < $product->price)
            @php
                $percent = round((($product->price - $product->discount_price) / $product->price) * 100);
            @endphp
            <div style="position:absolute; top:0.75rem; right:0.75rem; background:#ef4444; color:#fff; font-size:0.65rem; font-weight:900; padding:0.3rem 0.6rem; border-radius:0.5rem; box-shadow:0 4px 12px rgba(239,68,68,0.2);">
                -{{ $percent }}%
            </div>
        @endif

        {{-- Fake Sale Badge --}}
        @php
            $soldCount = rand(55, 320);
        @endphp
        <div style="position:absolute; bottom:0.75rem; left:0.75rem; background:rgba(45,90,61,0.92); color:#fff; font-size:0.65rem; font-weight:800; letter-spacing:0.05em; padding:0.3rem 0.7rem; border-radius:9999px; display:flex; align-items:center; gap:0.3rem;">
            🔥 {{ $soldCount }} sold
        </div>
    </div>

    {{-- Details --}}
    <div style="padding:1.25rem; display:flex; flex-direction:column; gap:0.6rem;">

        {{-- Title --}}
        <h3 style="font-size:0.95rem; font-weight:800; color:#1a2332; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;">
            <a href="{{ route('storefront.product', $product->slug) }}" 
               style="text-decoration:none; color:inherit; transition:color 0.2s;"
               onmouseenter="this.style.color='#2d5a3d'"
               onmouseleave="this.style.color='inherit'">
                {{ $product->name }}
            </a>
        </h3>

        {{-- Author --}}
        <p style="font-size:0.72rem; font-weight:600; color:#9aa5b4; text-transform:uppercase; letter-spacing:0.05em;">
            {{ $product->vendor->shop_name ?? 'Elite Author' }}
        </p>

        {{-- Stars --}}
        <div style="display:flex; align-items:center; gap:2px; color:#f59e0b;">
            @for($i = 0; $i < 5; $i++)
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
            @endfor
            <span style="font-size:0.7rem; color:#9aa5b4; font-weight:700; margin-left:4px;">({{ rand(80, 450) }})</span>
        </div>

        {{-- Price & Cart --}}
        <div style="display:flex; align-items:center; justify-content:space-between; padding-top:0.4rem;">
            <div style="display:flex; align-items:baseline; gap:0.5rem;">
                <span style="font-size:1.15rem; font-weight:900; color:#1a2332;">
                    @if($product->discount_price)
                        ${{ number_format($product->discount_price, 2) }}
                    @else
                        {{ $product->price_formatted ?? '$' . number_format($product->price, 2) }}
                    @endif
                </span>
                
                @if($product->discount_price && $product->discount_price < $product->price)
                    <span style="font-size:0.85rem; font-weight:600; color:#9aa5b4; text-decoration:line-through;">
                        ${{ number_format($product->price, 2) }}
                    </span>
                @endif
            </div>
            <form action="{{ route('cart.items.add') }}" method="POST">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}">
                <button type="submit" style="width:2.2rem; height:2.2rem; background:#f3f5f2; border:1px solid #e8ede9; border-radius:0.5rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.2s,border-color 0.2s;"
                        onmouseenter="this.style.background='#2d5a3d';this.style.borderColor='#2d5a3d';this.querySelector('svg').style.color='#fff'"
                        onmouseleave="this.style.background='#f3f5f2';this.style.borderColor='#e8ede9';this.querySelector('svg').style.color='#1a2332'">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1a2332" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition:color 0.2s;"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
                </button>
            </form>
        </div>
    </div>
</div>