@props([
    'product' => \Modules\Shop\Products\Models\Product::class,
])

<div class="h-full flex flex-col relative group transition-all duration-300">
    {{-- Image Container --}}
    <div class="relative w-full mb-4 bg-white rounded-3xl p-6 aspect-square flex items-center justify-center">


        {{-- Image --}}
        <a href="{{ route('product.detail', $product) }}" class="block w-full h-full">
            <img src="{{ $product->thumbnail ? Storage::url($product->thumbnail) : Vite::asset('resources/images/layout/thumbnail.webp') }}"
                alt="{{ $product->name }}"
                class="w-full h-full object-contain hover:scale-105 transition-transform duration-500">
        </a>
    </div>

    {{-- Content --}}
    <div class="flex flex-col flex-1 px-1 items-center text-center">
        <a href="{{ route('product.detail', $product) }}">
            <h3 class="font-bold text-gray-900 text-lg leading-tight mb-3 line-clamp-2">{{ $product->name }}</h3>
        </a>

        <div class="mb-4">
            <a href="{{ route('product.detail', $product) }}" class="block w-full h-full">
                <span class="inline-block px-4 py-1.5 rounded-lg text-xs font-semibold bg-[#e4011d] text-white">
                    Solicitar Cotización
                </span>
            </a>
        </div>

        {{-- Price --}}
        <div class="mt-auto flex items-baseline justify-center gap-3">

            <a href="{{ route('product.detail', $product) }}" class="block w-full h-full">
                <span class="text-lg font-bold text-[#969696]">Cotizar</span>
            </a>
        </div>
    </div>
</div>