<div class="col-12 col-md-6 col-lg-4 mb-4 h-100">
    <div class="d-flex flex-column h-100 justify-content-between">

        <div class="card border-0 p-4 position-relative book-grid-card d-flex flex-column justify-content-between"
             style="background-color: #F1F1F1; border-radius: var(--mb-radius); cursor: pointer; min-height: 280px;"
             @onclick="OnCardClick">

            <div class="d-flex justify-content-between align-items-center mb-3">
                @if (IsNew)
                {
                    <span class="badge rounded-pill px-3 py-2 badge-new-arrival" style="background-color: var(--mb-accent-red); font-weight: 500;">New</span>
                }
                else
                {
                    <div></div>
                }
                <button class="btn bg-white rounded-circle d-flex align-items-center justify-content-center p-2 shadow-sm border-0" style="width: 32px; height: 32px;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--mb-text-dark)" stroke-width="2.5">
                        <line x1="7" y1="17" x2="17" y2="7" />
                        <polyline points="7,7 17,7 17,17" />
                    </svg>
                </button>
            </div>

            <div class="d-flex justify-content-center align-items-center flex-grow-1 my-2">
                @if (!string.IsNullOrWhiteSpace(BookImageUrl))
                {
                    <img src="@BookImageUrl" class="img-fluid book-shadow" style="max-height: 240px; object-fit: contain;" alt="@Title" />
                }
                else
                {
                    <div class="book-spine-fallback bg-dark d-flex align-items-center justify-content-center text-center p-3 text-white-50 shadow-sm"
                         style="width: 50%; max-width: 140px; aspect-ratio: 2 / 3; border-radius: 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.4; box-shadow: 0 10px 24px rgba(0,0,0,0.16);">
                        <div style="max-width: 100%; overflow: hidden; word-break: break-word;">
                            @Category.ToUpper()<br><span class="opacity-50" style="font-size: 0.55rem;">EDITION</span>
                        </div>
                    </div>
                }
            </div>

        </div>

        <div class="d-flex justify-content-between align-items-start mt-3 mb-2 px-2" style="cursor: pointer;" @onclick="OnCardClick">
            <div style="max-width: 72%;">
                <span class="fw-medium text-dark d-block text-truncate product-card-title" style="font-size: 0.95rem; line-height: 1.25;">@Title</span>
                <span class="text-muted small d-block text-truncate mt-1" style="font-size: 0.8rem;">by @Author</span>
            </div>
            <span class="font-monospace fw-semibold text-secondary pt-0.5" style="font-size: 0.9rem; white-space: nowrap;">R @Price.ToString("N0")</span>
        </div>

    </div>
</div>

@code {
    [Parameter] public long Id { get; set; }
    [Parameter] public string Title { get; set; } = string.Empty;
    [Parameter] public string Author { get; set; } = string.Empty;
    [Parameter] public decimal Price { get; set; }
    [Parameter] public string Category { get; set; } = string.Empty;
    [Parameter] public bool IsNew { get; set; }
    [Parameter] public string BookImageUrl { get; set; } = string.Empty;

    [Parameter] public EventCallback OnCardClick { get; set; }
}