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

@php
    $price = is_object($product) ? $product->price : $product['price'];
    $compareAt = is_object($product) ? $product->compare_at : ($product['compare_at'] ?? null);
    $slug = is_object($product) ? $product->slug : $product['slug'];
    $name = is_object($product) ? $product->name : $product['name'];
    $tag = is_object($product) ? $product->tag : ($product['tag'] ?? '');
    $badge = is_object($product) ? $product->badge : ($product['badge'] ?? null);
    $rating = is_object($product) ? $product->rating : ($product['rating'] ?? 5.0);
    $reviews = is_object($product) ? $product->reviews_count : ($product['reviews'] ?? 100);
    $image = is_object($product) ? $product->image : $product['image'];
    $imageAlt = is_object($product) ? ($product->image_alt ?? $product->image) : ($product['image_alt'] ?? $product['image']);
    $id = is_object($product) ? $product->id : ($product['id'] ?? 1);

    $off = $compareAt ? round((1 - $price / $compareAt) * 100) : null;
@endphp

<article {{ $attributes->class(['group flex flex-col bg-white', 'w-64 shrink-0 snap-start sm:w-72' => $carousel]) }}>
    <a href="{{ route('product', $slug) }}" class="relative block overflow-hidden bg-cream-50 rounded-xl border border-cream-200 p-3">
        @if ($badge)
            <span class="absolute top-3 left-3 z-10 bg-terra-500 px-2.5 py-1 text-[10px] font-semibold tracking-[0.14em] text-white uppercase rounded-xs">{{ $badge }}</span>
        @endif
        <div class="aspect-square w-full flex items-center justify-center">
            <img src="{{ asset($image) }}" alt="{{ $name }}" width="900" height="900"
                class="h-full w-full object-contain transition-opacity duration-300 group-hover:opacity-0" loading="lazy">
            <img src="{{ asset($imageAlt) }}" alt="" width="900" height="900" aria-hidden="true"
                class="absolute inset-0 p-3 h-full w-full object-contain opacity-0 transition-opacity duration-300 group-hover:opacity-100" loading="lazy">
        </div>
    </a>

    <div class="flex flex-1 flex-col pt-4 pb-2">
        <x-stars :rating="$rating" :reviews="$reviews" />
        <h3 class="mt-2 font-serif text-base font-medium text-ink-900">
            <a href="{{ route('product', $slug) }}" class="transition-colors hover:text-moss-600">{{ $name }}</a>
        </h3>
        <p class="mt-0.5 text-xs text-ink-500 line-clamp-1">{{ $tag }}</p>
        <p class="mt-2 flex items-baseline gap-2 text-sm">
            <span class="font-semibold text-ink-900">₹{{ number_format($price) }}</span>
            @if ($compareAt)
                <s class="text-ink-400">₹{{ number_format($compareAt) }}</s>
                <span class="text-xs font-semibold text-terra-500">{{ $off }}% off</span>
            @endif
        </p>

        <form action="{{ route('cart.add') }}" method="POST" class="mt-4 flex flex-col gap-2 min-[480px]:flex-row min-[480px]:items-stretch">
            @csrf
            <input type="hidden" name="product_id" value="{{ $id }}">
            <div class="flex items-center justify-between border border-sand-300 rounded-lg overflow-hidden" data-qty>
                <button type="button" class="flex h-full w-8 cursor-pointer items-center justify-center text-ink-500 transition-colors hover:text-ink-900" data-qty-minus aria-label="Decrease quantity">
                    <x-icon name="minus" class="h-3.5 w-3.5" />
                </button>
                <input type="text" name="quantity" value="1" inputmode="numeric" aria-label="Quantity" class="w-8 border-0 bg-transparent p-0 text-center text-sm font-medium focus:ring-0 focus:outline-none">
                <button type="button" class="flex h-full w-8 cursor-pointer items-center justify-center text-ink-500 transition-colors hover:text-ink-900" data-qty-plus aria-label="Increase quantity">
                    <x-icon name="plus" class="h-3.5 w-3.5" />
                </button>
            </div>
            <button type="submit" class="btn-primary flex-1 !px-3 !py-2.5 !text-[11px] cursor-pointer">Add to Cart</button>
        </form>
    </div>
</article>