<div>
    {{-- ── Filter & Sort Toolbar ─────────────────────────────────────────── --}}
    <div class="bg-white border-b border-gray-100 sticky top-0 z-20 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex flex-wrap items-center gap-3">

            {{-- Search --}}
            <div class="relative flex-1 min-w-[180px] max-w-xs">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                <input
                    type="search"
                    wire:model.live.debounce.300ms="search"
                    placeholder="Search products..."
                    class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg bg-gray-50 focus:bg-white focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 outline-none transition"
                />
            </div>

            {{-- Category Filter --}}
            @if($categories->isNotEmpty())
            <select
                wire:model.live="categoryId"
                class="text-sm border border-gray-200 rounded-lg px-3 py-2 bg-gray-50 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 outline-none transition"
            >
                <option value="">All Categories</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                @endforeach
            </select>
            @endif

            {{-- Sort --}}
            <select
                wire:model.live="sortBy"
                class="text-sm border border-gray-200 rounded-lg px-3 py-2 bg-gray-50 focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 outline-none transition"
            >
                <option value="latest">Newest First</option>
                <option value="featured">Featured</option>
                <option value="price_asc">Price: Low → High</option>
                <option value="price_desc">Price: High → Low</option>
                <option value="name_asc">Name: A → Z</option>
            </select>

            {{-- Result count --}}
            <span class="ml-auto text-xs text-gray-400 whitespace-nowrap">
                {{ $products->total() }} {{ Str::plural('product', $products->total()) }}
            </span>
        </div>
    </div>

    {{-- ── Product Grid ──────────────────────────────────────────────────── --}}
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">

        @if($products->isEmpty())
            <div class="text-center py-24">
                <svg class="mx-auto w-16 h-16 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
                </svg>
                <p class="mt-4 text-gray-400 text-sm">No products found.</p>
                @if($search)
                    <button wire:click="$set('search','')" class="mt-3 text-indigo-600 text-sm underline">Clear search</button>
                @endif
            </div>
        @else
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">
                @foreach($products as $product)
                    @php
                        $imageUrl   = $product->getFirstMediaUrl('images', 'webp') ?: '/images/placeholder.jpg';
                        $price      = (float) ($product->sale_price ?? $product->price);
                        $oldPrice   = $product->sale_price ? (float) $product->price : null;
                        $inStock    = $product->quantity > 0;
                        $isFeatured = $product->is_featured;
                        $discount   = ($oldPrice && $oldPrice > $price)
                                      ? round((1 - $price / $oldPrice) * 100)
                                      : null;
                    @endphp

                    <a
                        href="{{ route('products.show', $product->id) }}"
                        class="group bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 flex flex-col"
                    >
                        {{-- Image --}}
                        <div class="relative bg-gray-50 aspect-square overflow-hidden">
                            <img
                                src="{{ $imageUrl }}"
                                alt="{{ $product->name }}"
                                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                                loading="lazy"
                            />

                            {{-- Badges --}}
                            <div class="absolute top-2 left-2 flex flex-col gap-1">
                                @if($discount)
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-500 text-white">
                                        -{{ $discount }}%
                                    </span>
                                @endif
                                @if($isFeatured)
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-indigo-500 text-white">
                                        ⭐ Featured
                                    </span>
                                @endif
                            </div>

                            {{-- Out of stock overlay --}}
                            @unless($inStock)
                                <div class="absolute inset-0 bg-white/70 flex items-center justify-center">
                                    <span class="text-xs font-semibold text-gray-500 bg-white border border-gray-200 rounded-full px-3 py-1 shadow-sm">
                                        Out of Stock
                                    </span>
                                </div>
                            @endunless
                        </div>

                        {{-- Info --}}
                        <div class="p-3 sm:p-4 flex flex-col flex-1">
                            <p class="text-xs text-gray-400 mb-1 truncate">{{ $product->category?->name ?? '' }}</p>
                            <h3 class="text-sm font-semibold text-gray-800 leading-snug line-clamp-2 group-hover:text-indigo-600 transition-colors flex-1">
                                {{ $product->name }}
                            </h3>

                            {{-- Price --}}
                            <div class="mt-2 flex items-center gap-2">
                                <span class="text-base font-bold text-gray-900">
                                    ৳{{ number_format($price, 0) }}
                                </span>
                                @if($oldPrice)
                                    <span class="text-xs text-gray-400 line-through">
                                        ৳{{ number_format($oldPrice, 0) }}
                                    </span>
                                @endif
                            </div>

                            {{-- Stock indicator --}}
                            <div class="mt-2">
                                @if($inStock)
                                    <span class="inline-flex items-center gap-1 text-[11px] text-emerald-600 font-medium">
                                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 inline-block"></span>
                                        In Stock
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 text-[11px] text-red-400 font-medium">
                                        <span class="w-1.5 h-1.5 rounded-full bg-red-400 inline-block"></span>
                                        Out of Stock
                                    </span>
                                @endif
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

            {{-- Pagination --}}
            @if($products->hasPages())
                <div class="mt-10">
                    {{ $products->links() }}
                </div>
            @endif
        @endif
    </div>
</div>
