@props(['product'])

{{--
    No background fill on the cream surface, a hairline border, image as the hero
    and type centred underneath — the card is a frame, not a box.
--}}
<article class="group card-product">
    <a href="{{ route('product', $product) }}" class="relative block aspect-[4/3] overflow-hidden bg-surface-container">
        @if ($product->image_path)
            <img src="{{ media($product->image_path) }}" alt="{{ $product->name }}" loading="lazy"
                 class="h-full w-full object-cover transition-transform duration-500 ease-soft group-hover:scale-[1.04]">
        @else
            <span class="flex h-full w-full items-center justify-center font-display text-headline-md text-outline-variant">
                {{ __('shop.brand_short') }}
            </span>
        @endif

        @if ($badge = collect($product->badges ?? [])->first())
            <span class="absolute top-3 start-3 rounded-full bg-surface/90 px-3 py-1
                         font-label text-label-sm uppercase tracking-[0.08em] text-secondary backdrop-blur">
                {{ __("shop.badges.{$badge}") }}
            </span>
        @endif
    </a>

    <div class="flex flex-1 flex-col items-center gap-2 p-4 text-center">
        <h3 class="font-headline text-body-lg leading-snug text-primary">
            <a href="{{ route('product', $product) }}" class="hover:text-secondary">{{ $product->name }}</a>
        </h3>

        @if ($product->summary)
            <p class="line-clamp-2 text-label-sm text-on-surface-variant">{{ $product->summary }}</p>
        @endif

        <x-price :product="$product" />

        <div class="mt-auto w-full pt-3">
            @if ($product->priceOnSelection())
                {{-- Needs a choice before it can be bought, so the card links on. --}}
                <a href="{{ route('product', $product) }}" class="btn-ghost w-full">
                    {{ __('shop.choose_option') }}
                </a>
            @else
                <form action="{{ route('cart.store') }}" method="post" data-cart-form
                      data-added-label="{{ __('shop.added') }}">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    <button type="submit" class="btn-primary w-full">{{ __('shop.add_to_cart') }}</button>
                </form>
            @endif
        </div>
    </div>
</article>