@php
    $currency = app(\App\Support\AppSettings::class)->get('currency', 'USD');
    $lowStock = (int) $product->stock <= 5;
    $imageUrl = $product->image_path
        ? (Str::startsWith($product->image_path, ['http://', 'https://']) ? $product->image_path : asset($product->image_path))
        : null;
    $imageUrl = $imageUrl ?: ($product->images->first()?->image_path ? asset($product->images->first()->image_path) : null);
@endphp
<div class="card-hover group relative flex flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-card">
    <a href="{{ route('store.product', $product->id) }}" class="relative block aspect-[4/3] overflow-hidden bg-gradient-to-br from-brand-50 via-teal-50 to-sky-50">
        @if ($imageUrl)
            <img src="{{ $imageUrl }}" alt="{{ $product->brand_name }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
        @else
            <span class="flex h-full w-full items-center justify-center">
                <span class="flex h-16 w-16 items-center justify-center rounded-2xl bg-white/80 text-brand-600 shadow-sm">
                    <i data-lucide="pill" class="h-8 w-8"></i>
                </span>
            </span>
        @endif
        <span class="absolute left-3 top-3 flex flex-wrap gap-1.5">
            @if ($product->is_featured)
                <span class="rounded-full bg-amber-400/95 px-2.5 py-1 text-[11px] font-bold text-amber-950">Bestseller</span>
            @endif
            @if ($product->medicine?->requires_rx)
                <span class="inline-flex items-center gap-1 rounded-full bg-sky-600/95 px-2.5 py-1 text-[11px] font-bold text-white"><i data-lucide="file-text" class="h-3 w-3"></i>Rx</span>
            @endif
        </span>
    </a>
    <div class="flex flex-1 flex-col gap-1 p-4">
        <p class="text-[11px] font-bold uppercase tracking-wider text-brand-700">{{ $product->medicine?->category }}</p>
        <a href="{{ route('store.product', $product->id) }}" class="line-clamp-1 text-base font-bold text-slate-900 transition hover:text-brand-700">{{ $product->brand_name }}</a>
        <p class="line-clamp-1 text-sm text-slate-500">{{ $product->medicine?->generic_name }} {{ $product->medicine?->strength }}</p>
        <div class="mt-auto flex items-end justify-between pt-3">
            <div>
                <p class="text-lg font-extrabold text-slate-900">{{ $currency }} {{ number_format((float) $product->price, 2) }}</p>
                <p class="text-[11px] font-semibold {{ $lowStock ? 'text-rose-600' : 'text-brand-700' }}">
                    {{ $lowStock ? 'Only '.$product->stock.' left' : 'In stock' }}
                </p>
            </div>
            <form method="POST" action="{{ route('store.cart.add') }}">
                @csrf
                <input type="hidden" name="brand_id" value="{{ $product->id }}">
                <button class="flex h-11 w-11 items-center justify-center rounded-2xl bg-brand-600 text-white shadow-lift transition hover:scale-105 hover:bg-brand-700" title="Add to cart">
                    <i data-lucide="plus" class="h-5 w-5"></i>
                </button>
            </form>
        </div>
    </div>
</div>