@extends('layouts.public')

@section('content')
<section class="hms-section">
    <div class="hms-container grid gap-10 lg:grid-cols-2 lg:items-start">
        <div>@if($product->primaryMedia)<img class="aspect-square w-full rounded-3xl object-cover" src="{{ $product->primaryMedia->publicUrl() }}" alt="{{ $product->primaryMedia->alt_text }}">@else<div class="aspect-square rounded-3xl bg-[var(--hms-sage-soft)] grid place-items-center text-black/45">Image coming soon</div>@endif</div>
        <div>
            <p class="hms-kicker">Product information</p>
            <h1 class="hms-display mt-2">{{ $product->name }}</h1>
            @if($product->short_description)<p class="mt-5 text-lg text-black/65">{{ $product->short_description }}</p>@endif
            @if($publicPricesEnabled && $product->price)<p class="mt-6 text-2xl font-semibold text-[var(--hms-forest-deep)]">${{ number_format((float)$product->price, 2) }} @if($product->price_unit)<span class="text-sm font-normal text-black/50">/ {{ $product->price_unit }}</span>@endif</p>@else<p class="mt-6 text-sm font-semibold text-black/55">Pricing is not displayed publicly. Contact or visit the store for current pricing.</p>@endif
            @if($product->description)<div class="prose mt-8 max-w-none">{!! nl2br(e($product->description)) !!}</div>@endif
            <dl class="mt-8 grid grid-cols-2 gap-4 text-sm">
                <div><dt class="text-black/50">Availability</dt><dd class="mt-1 font-semibold">{{ str($product->availability_status)->headline() }}</dd></div>
                @if($product->producer)<div><dt class="text-black/50">Producer/source</dt><dd class="mt-1 font-semibold">{{ $product->producer }}</dd></div>@endif
                @if($product->last_verified_at)<div><dt class="text-black/50">Last verified</dt><dd class="mt-1 font-semibold">{{ $product->last_verified_at->toFormattedDateString() }}</dd></div>@endif
                @if($product->categories->isNotEmpty())<div class="col-span-2"><dt class="text-black/50">Categories</dt><dd class="mt-1 font-semibold">{{ $product->categories->pluck('name')->join(', ') }}</dd></div>@endif
            </dl>
            @if($relatedStrains->isNotEmpty())<section class="mt-8"><h2 class="font-serif text-2xl">Related strains</h2><div class="mt-3 flex flex-wrap gap-2">@foreach($relatedStrains as $strain)<a class="rounded-full border border-black/10 bg-white px-3 py-2 text-sm font-semibold" href="{{ route('strains.show',$strain) }}">{{ $strain->name }}</a>@endforeach</div></section>@endif
            @if($relatedSpecials->isNotEmpty())<section class="mt-8 rounded-2xl border border-[var(--hms-forest)]/15 bg-[var(--hms-sage-soft)]/45 p-5"><p class="hms-kicker">Current promotions</p><div class="mt-3 grid gap-3">@foreach($relatedSpecials as $special)<div><strong>{{ $special->title }}</strong>@if($special->description)<p class="mt-1 text-sm text-black/60">{{ $special->description }}</p>@endif</div>@endforeach</div><a class="mt-4 inline-block text-sm font-semibold underline" href="{{ route('specials.index') }}">View promotion terms</a></section>@endif
            <div class="mt-8 rounded-2xl bg-[var(--hms-cream)] p-5 text-sm text-black/65">{{ config('hms.public_product_notice') }}</div>
            <div class="mt-8 flex flex-wrap gap-3"><a data-analytics-event="directions_click" class="hms-button hms-button-primary" href="{{ route('visit') }}">Visit the store</a><a class="hms-button border border-black/15" href="{{ route('products.index') }}">Back to products</a></div>
        </div>
    </div>
</section>
@endsection