@props(['product', 'related' => false])

<article {{ $attributes->class(['group overflow-hidden rounded-[1.6rem] border border-[#1f3443]/10 bg-white transition duration-300 hover:-translate-y-1 hover:border-[#bb7a58]/40']) }}>
    <a href="{{ route('products.show', $product['slug']) }}" class="block rounded-[1.6rem] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#bb7a58]">
        <div class="overflow-hidden bg-[#eee4d8]">
            <img src="{{ asset($product['primary_image']) }}" alt="{{ $product['name'] }} product presentation" width="720" height="820" loading="lazy" class="aspect-[6/7] w-full object-cover transition duration-700 group-hover:scale-[1.035]">
        </div>
        <div class="p-5 sm:p-6">
            <p class="text-[0.7rem] font-semibold uppercase tracking-[0.14em] text-[#b86f45]">{{ $product['category_label'] }}</p>
            <h3 class="mt-3 text-[1.25rem] leading-tight text-[#1f3443]">{{ $product['name'] }}</h3>
            <p class="mt-2 text-[0.88rem] leading-6 text-[#40261a]/65">{{ $product['short_description'] }}</p>
            <dl class="mt-5 divide-y divide-[#1f3443]/8 border-y border-[#1f3443]/8 text-[.75rem]">
                @if(!empty($product['format']))<div class="grid grid-cols-[4.5rem_1fr] gap-3 py-2.5"><dt class="text-[#40261a]/45">Format</dt><dd class="text-[#1f3443]/76">{{ $product['format'] }}</dd></div>@endif
                @if(!empty($product['packaging_options']))<div class="grid grid-cols-[4.5rem_1fr] gap-3 py-2.5"><dt class="text-[#40261a]/45">Pack</dt><dd class="text-[#1f3443]/76">{{ implode(' / ', $product['packaging_options']) }}</dd></div>@endif
            </dl>
            <span class="mt-5 inline-flex items-center gap-2 text-[0.82rem] font-semibold text-[#1f3443]">View product <span aria-hidden="true">→</span></span>
        </div>
    </a>
</article>