@props(['product'])
@php($img = $product->primaryImage())
@php($undeliverable = app(\App\Services\Geo\DeliveryScope::class)->blocksProduct($product))
@php($onSale = $product->onSale())
@php($price = $onSale ? $product->salePrice() : (float) $product->price)
@php($old = $onSale ? (float) $product->price : ($product->old_price ? (float) $product->old_price : null))
@php($fmt = fn ($v) => number_format((float) $v, 0, '.', ' ').' ₽')
@php($seller = $product->seller)

{{-- Карточка по UI-kit (tmp/design/redesign-2026, ProductCard): цена первой и
     самой жирной → название в две строки → рейтинг продавца + продавец →
     «В корзину» прижата к низу. Вся карточка — ссылка на товар; кнопка лежит
     поверх ссылки и в переход не превращается. --}}
<div class="group relative flex h-full flex-col overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-line)] bg-white transition hover:border-[var(--color-line-strong)] hover:shadow-[var(--shadow-hover)]">
    <a href="{{ $product->url() }}" class="absolute inset-0 z-0" aria-label="{{ $product->title }}"></a>

    {{-- Фото показывается целиком (object-contain), а не обрезается по квадрату.
         Товары приходят из чужих выгрузок в любой ориентации: у вертикальной
         бутылки при кропе оставалась середина этикетки, и понять, что это за
         товар, было нельзя. Отсюда же белый фон вместо серого — поля по бокам
         не должны выглядеть рамкой. --}}
    <div class="pointer-events-none relative aspect-square overflow-hidden bg-white">
        @if ($img)
            <img src="{{ $img->previewUrl() }}" alt="{{ $product->title }}" loading="lazy" class="h-full w-full object-contain p-2">
        @else
            <x-photo-placeholder :seed="$product->id" />
        @endif
        @if ($onSale)
            <span class="absolute left-2 top-2 rounded-[var(--radius-sm)] bg-[var(--color-sale)] px-[7px] py-[3px] text-[11.5px] font-bold text-white">−{{ $product->discount_percent }}%</span>
        @endif
    </div>

    <div class="pointer-events-none relative flex flex-1 flex-col gap-1.5 px-3 pb-3 pt-2.5">
        <div class="flex flex-wrap items-baseline gap-x-[7px]">
            <span class="text-[17px] font-extrabold tracking-[-0.2px] text-[var(--color-ink)]">{{ $fmt($price) }}</span>
            @if ($old)
                <s class="text-[12.5px] text-[var(--color-disabled)]">{{ $fmt($old) }}</s>
            @endif
        </div>
        <span class="line-clamp-2 min-h-[35px] text-[13px] leading-[1.35] text-[var(--color-slate)]">{{ $product->title }}</span>
        {{-- Рейтинг у нас — рейтинг продавца по отзывам на заказы; пока отзывов
             нет, звезды не рисуем, чтобы не выдумывать оценку. --}}
        <div class="flex items-center gap-[5px] overflow-hidden whitespace-nowrap text-xs text-[var(--color-muted)]">
            @if ($seller && $seller->reviews_count > 0)
                <span class="text-[var(--color-rating)]">★</span>
                <span class="font-semibold text-[var(--color-slate)]">{{ number_format($seller->rating_avg, 1) }}</span>
                <span class="truncate">· {{ $seller->public_name }}</span>
            @else
                <span class="truncate">{{ $seller?->public_name }}</span>
            @endif
        </div>
        @if ($undeliverable)
            <span class="inline-flex w-fit items-center gap-1 rounded-[var(--radius-sm)] bg-[var(--color-warning-soft)] px-1.5 py-0.5 text-[11px] font-semibold text-[var(--color-warning)]">
                <i data-lucide="truck" class="h-3 w-3"></i> Не доставляется в ваш город
            </span>
        @else
            {{-- Кнопка скрыта, когда продавец не везёт в город покупателя. --}}
            <button type="button" x-data="{ done: false }"
                    @click.stop.prevent="teeuAddToCart({{ $product->id }}).then(ok => { if (ok) { done = true; setTimeout(() => done = false, 1200) } })"
                    class="pointer-events-auto mt-auto w-full rounded-[7px] py-2 text-[12.5px] font-semibold transition"
                    :class="done ? 'bg-[var(--color-success-soft)] text-[var(--color-success)]' : 'bg-[var(--color-primary-soft)] text-[var(--color-primary)] hover:bg-[var(--color-primary-soft-hover)]'">
                <span x-show="!done">В корзину</span>
                <span x-show="done" x-cloak>Добавлено</span>
            </button>
        @endif
    </div>
</div>