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

@php
    $quotationMode = (bool) config( 'shop.quotation_mode', env('SHOP_QUOTATION_MODE', false) );
    $priceInfo = $product->price_info;
    $isOnSale = $priceInfo->base_price && $priceInfo->min_price < $priceInfo->base_price;
    $discountPercentage = $isOnSale ? round((1 - $priceInfo->min_price / $priceInfo->base_price) * 100) : 0;
@endphp

<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">
        {{-- Badges --}}
        <div class="absolute top-4 left-4 z-10 flex flex-col gap-2">
            @if ($isOnSale)
                <span class="bg-black text-white text-xs rounded-full px-4 py-1">
                    Oferta
                </span>
            @elseif($product->featured)
                <span class="bg-black text-white text-xs rounded-full px-4 py-1">
                    Destacado
                </span>
                {{-- <img src="{{ Vite::asset('resources/images/shop/feature.webp') }}" alt="Destacado" class="w-10 h-10 object-contain"> --}}                    
            @endif
        </div>

        {{-- 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-semibold text-black text-base leading-tight mb-3 line-clamp-2">{{ $product->name }}</h3>
        </a>
        {{-- Marca --}}
        @if ($product->brand)
            <div class="mb-4">
                <span class="inline-block px-4 py-1.5 rounded-lg text-xs font-semibold bg-[#dfdfdf] text-[#454545]">
                    {{ $product->brand->name }}
                </span>
            </div>
        @endif
        {{-- Shipping Badge --}}
        @if ($product->shippable)
            <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-[#dfdfdf] text-[#454545]">
                        Envío en 24 horas
                    </span>
                </a>
            </div>
        @endif

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

            <a href="{{ route('product.detail', $product) }}" class="block w-full h-full">
                @if ($priceInfo->min_price !== $priceInfo->max_price)
                    <span class="text-lg font-bold text-gray-900">${{ number_format($priceInfo->min_price, 2) }}</span>
                @else
                    @if ($isOnSale)
                        <span
                            class="text-gray-400 line-through font-medium opacity-60 decoration-1 text-sm">${{ number_format($priceInfo->base_price, 1) }}</span>
                        <span
                            class="text-lg font-bold text-gray-900">${{ number_format($priceInfo->min_price, 2) }}</span>
                    @else
                        <span
                            class="text-lg font-bold text-gray-900">${{ number_format($priceInfo->min_price, 2) }}</span>
                    @endif
                @endif
            </a>
        </div>
        <div class="text-center">
            <div class="h-5"></div>
            <a href="{{ route('product.detail', $product) }}" class="bg-black px-4 py-1 rounded-full text-white">Ver más</a>
        </div>
    </div>
</div>