@extends('layouts.public')
@section('content')<section class="hms-section"><div class="hms-container"><p class="hms-kicker">Products</p><h1 class="hms-display mt-2">Browse current information</h1><p class="mt-4 max-w-2xl text-black/65">Published catalog content appears here. Availability, potency, and product details can change. Public pricing is currently disabled.</p>@if($leaflyMenuEnabled && $leaflyProfileUrl)<div class="mt-6 rounded-2xl border border-black/10 bg-[var(--hms-cream)] p-5"><strong>Leafly menu integration is enabled.</strong><p class="mt-1 text-sm text-black/60">HMS uses only an authorized Leafly integration. Until the official Website Menu embed details are configured, you can open the retailer profile directly.</p><a class="hms-button hms-button-primary mt-4" href="{{ $leaflyProfileUrl }}" rel="noopener noreferrer">Open Leafly profile</a></div>@endif<form class="mt-8 grid gap-3 rounded-2xl bg-[var(--hms-cream)] p-4 md:grid-cols-[1fr_220px_180px_auto]"><input class="rounded-xl border border-black/10 bg-white px-4 py-3" name="q" value="{{ request('q') }}" placeholder="Search products"><select class="rounded-xl border border-black/10 bg-white px-4 py-3" name="category"><option value="">All categories</option>@foreach($categories as $category)<option value="{{ $category->slug }}" @selected(request('category')===$category->slug)>{{ $category->name }}</option>@endforeach</select><select class="rounded-xl border border-black/10 bg-white px-4 py-3" name="availability"><option value="">Any availability</option>@foreach(['available','limited','unavailable'] as $s)<option value="{{ $s }}" @selected(request('availability')===$s)>{{ str($s)->headline() }}</option>@endforeach</select><button class="hms-button hms-button-primary">Apply</button></form><div class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">@forelse($products as $product)<article class="hms-card">@if($product->primaryMedia)<img class="aspect-[4/3] w-full object-cover" loading="lazy" src="{{ $product->primaryMedia->publicUrl() }}" alt="{{ $product->primaryMedia->alt_text }}">@else<div class="grid aspect-[4/3] place-items-center bg-[var(--hms-sage-soft)] text-sm text-black/45">Image coming soon</div>@endif<div class="p-5"><div class="flex items-center justify-between gap-2"><span class="text-xs font-semibold uppercase tracking-wider text-[var(--hms-sage)]">{{ str($product->availability_status)->headline() }}</span>@if($product->last_verified_at)<small class="text-black/40">Verified {{ $product->last_verified_at->toDateString() }}</small>@endif</div><h2 class="mt-2 font-serif text-2xl text-[var(--hms-forest-deep)]">{{ $product->name }}</h2>@if($product->short_description)<p class="mt-2 text-sm text-black/65">{{ $product->short_description }}</p>@endif<div class="mt-5 flex items-center justify-between gap-3">@if($publicPricesEnabled && $product->price)<span class="font-semibold">${{ number_format((float)$product->price,2) }}@if($product->price_unit)<small> / {{ $product->price_unit }}</small>@endif</span>@else<span class="text-xs text-black/45">Pricing available in store</span>@endif<a data-analytics-event="product_view" data-analytics-properties='@json(["slug"=>$product->slug])' class="text-sm font-bold" href="{{ route('products.show',$product) }}">View →</a></div></div></article>@empty<div class="col-span-full rounded-2xl border border-dashed border-black/15 bg-white p-8 text-black/60">No published products match those filters.</div>@endforelse</div><div class="mt-10">{{ $products->links() }}</div></div></section>@endsection