@props([
    'name'      => '',
    'price'     => null,
    'image'     => null,
    'href'      => '#',
    'variantId' => null,
    'hasCustomFields' => false,
])

{{-- data-turbo-frame="_top" on the links: this card renders inside the
     category page's <turbo-frame id="category-listing">, so without it a click
     would try to load the product page *into* that frame, not find a matching
     frame, and fail with "content missing". It's a no-op anywhere there's no
     frame (homepage grids, related products). --}}
<div class="group">
    <div class="relative flex items-center justify-center mb-4">
        <a href="{{ $href }}" data-turbo-frame="_top" class="block w-full border border-black overflow-hidden bg-white aspect-[251/335] flex items-center justify-center">
            @if($image)
                <img
                    src="{{ $image }}"
                    alt="{{ $name }}"
                    loading="lazy"
                    class="w-full h-auto block"
                >
            @else
                <div class="w-full aspect-square bg-neutral-300 flex items-center justify-center text-neutral-500 text-sm">
                    {{ __('storefront.product.no_image') }}
                </div>
            @endif
        </a>

        @if ($hasCustomFields)
            {{-- Custom fields have to be filled in on the product page. --}}
            <x-ui.button
                :href="$href"
                size="md"
                position="absolute"
                data-turbo-frame="_top"
                class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity duration-100"
            >
                {{ __('storefront.product.personalize') }}
            </x-ui.button>
        @elseif ($variantId)
            {{-- has-[...] forces the button visible while an add-to-cart error
                 is showing, so it isn't only readable on hover — a shopper who
                 already moved off the card (mouse or the click itself) must
                 still see why nothing happened. --}}
            <x-checkout::add-to-cart
                :purchasable="$variantId"
                class="absolute opacity-0 group-hover:opacity-100 has-[.bbk-add-to-cart-error:not([hidden])]:opacity-100 transition-opacity duration-100"
            >
                <x-ui.button type="submit" size="md">
                    {{ __('storefront.product.add_to_cart') }}
                </x-ui.button>
            </x-checkout::add-to-cart>
        @endif
    </div>

    <div class="flex items-baseline justify-between gap-4">
        <a href="{{ $href }}" data-turbo-frame="_top" class="font-bold text-xl leading-snug hover:text-brand">{{ $name }}</a>
        @if($price !== null)
            <span class="font-bold text-xl shrink-0"><x-ui.price :amount="$price" /></span>
        @endif
    </div>
</div>