@php
    $title = $product->displayName().' — Raharja Bumi Karya';
    $description = $product->description ?: __('ui.product_detail_default_description', ['product' => $product->displayName()]);
    $imageUrl = $product->publicImageUrl();
    $structuredData = [
        '@context' => 'https://schema.org',
        '@type' => 'Product',
        'name' => $product->displayName(),
        'description' => $description,
        'image' => [$imageUrl],
        'category' => $product->category,
        'brand' => ['@type' => 'Brand', 'name' => 'Raharja Bumi Karya'],
    ];
    if ($product->is_active && $product->price_per_kg > 0) {
        $structuredData['offers'] = [
            '@type' => 'Offer',
            'priceCurrency' => 'IDR',
            'price' => $product->price_per_kg,
            'url' => $canonicalUrl,
            'availability' => 'https://schema.org/InStock',
        ];
    }
@endphp

<x-home.page
    :title="$title"
    :description="$description"
    :site-settings="$siteSettings"
    :favicon-url="$faviconUrl"
    :canonical-url="$canonicalUrl"
    :image-url="$imageUrl"
    :structured-data="$structuredData"
>
    <section x-data class="px-5 py-8 sm:py-12 lg:px-8">
        <div class="mx-auto max-w-7xl">
            <nav aria-label="{{ __('ui.breadcrumb') }}" class="flex flex-wrap items-center gap-2 text-sm font-semibold text-[#766858]">
                <a href="{{ \App\Support\LocalizedUrl::route('home') }}" class="hover:text-[#b65324]">{{ __('ui.home') }}</a>
                <span aria-hidden="true">/</span>
                <a href="{{ \App\Support\LocalizedUrl::route('products') }}" class="hover:text-[#b65324]">{{ __('ui.products') }}</a>
                <span aria-hidden="true">/</span>
                <span aria-current="page" class="text-[#2d2118]">{{ $product->displayName() }}</span>
            </nav>

            <div class="mt-8 grid overflow-hidden rounded-[2rem] border border-[#e5d7c2] bg-[#fffdf8] shadow-[0_22px_65px_rgba(61,43,24,0.11)] lg:grid-cols-2">
                <div class="relative min-h-96 lg:min-h-[38rem]">
                    <img src="{{ $imageUrl }}" alt="{{ $product->image_alt ?: $product->displayName() }}" width="1448" height="1086" class="absolute inset-0 h-full w-full object-cover">
                    <div class="absolute inset-0 bg-linear-to-t from-[#201811]/65 via-transparent to-transparent"></div>
                    <p class="absolute bottom-6 left-6 rounded-full border border-white/20 bg-[#201811]/70 px-4 py-2 text-xs font-bold tracking-[0.14em] text-white uppercase backdrop-blur">{{ $product->origin }}</p>
                </div>

                <div class="flex flex-col p-7 sm:p-10 lg:p-12">
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <p class="text-xs font-bold tracking-[0.18em] text-[#b65324] uppercase">{{ $product->marketing_eyebrow ?: $product->category }}</p>
                        <span class="rounded-full bg-[#edf2e4] px-3 py-1.5 text-xs font-bold text-[#56712d]">{{ $product->availability_label }}</span>
                    </div>
                    <h1 class="mt-5 text-4xl font-black leading-none tracking-[-0.05em] text-[#2d2118] sm:text-6xl">{{ $product->displayName() }}</h1>
                    <p class="mt-6 text-base leading-8 text-[#6b6258]">{{ $product->description }}</p>

                    <div class="mt-7 flex flex-wrap gap-2">
                        @foreach (($product->variants ?? []) as $variant)
                            <span class="rounded-full border border-[#dfd0ba] bg-[#faf5ed] px-3 py-2 text-xs font-semibold text-[#584b3d]">{{ $variant }}</span>
                        @endforeach
                    </div>

                    <dl class="mt-8 grid grid-cols-2 gap-5 border-y border-[#eadcc5] py-7">
                        @foreach (($product->specifications ?? []) as $label => $value)
                            <div>
                                <dt class="text-[0.65rem] font-bold tracking-[0.13em] text-[#978778] uppercase">{{ $label }}</dt>
                                <dd class="mt-1.5 text-sm font-bold text-[#362b20]">{{ $value }}</dd>
                            </div>
                        @endforeach
                        @if ($product->is_active && $product->price_per_kg > 0)
                            <div>
                                <dt class="text-[0.65rem] font-bold tracking-[0.13em] text-[#978778] uppercase">{{ __('ui.indicative_price') }}</dt>
                                <dd class="mt-1.5 text-sm font-bold text-[#362b20]">{{ \Illuminate\Support\Number::currency($product->price_per_kg, in: 'IDR', locale: 'id', precision: 0) }} / kg</dd>
                            </div>
                        @endif
                    </dl>

                    @if ($product->is_active && $product->price_per_kg > 0)
                        <button type="button" x-on:click="document.getElementById('penawaran')?.scrollIntoView({ behavior: 'smooth', block: 'start' })" class="mt-8 inline-flex min-h-12 items-center justify-center rounded-xl bg-[#d95d24] px-6 py-3 text-sm font-bold text-white transition hover:bg-[#b84918] focus:outline-none focus:ring-4 focus:ring-[#f6cbb8]">{{ __('ui.request_this_product') }}</button>
                    @else
                        <a href="{{ \App\Support\WhatsAppLink::forProduct($product) }}" target="_blank" rel="noopener noreferrer" class="mt-8 inline-flex min-h-12 items-center justify-center rounded-xl bg-[#d95d24] px-6 py-3 text-sm font-bold text-white transition hover:bg-[#b84918] focus:outline-none focus:ring-4 focus:ring-[#f6cbb8]">{{ __('ui.request_this_product') }}</a>
                    @endif
                </div>
            </div>
        </div>
    </section>

    @if ($product->is_active && $product->price_per_kg > 0)
        <div class="pb-20 pt-8">
            <livewire:quotation-calculator :locale="app()->getLocale()" :initial-product-id="$product->id" />
        </div>
    @endif
</x-home.page>