@extends('layouts.app')

@section('content')
    @php
        $secondaryLocale = $locale === 'ar' ? 'en' : 'ar';
        $secondaryTranslation = $product->translation($secondaryLocale);
        $value = fn (string $field) => filled($translation->{$field}) ? $translation->{$field} : null;
        $facts = array_filter([
            ['origin', $value('origin') ?: $value('origin_growing_region'), 'pin'],
            ['part_used', $value('part_used'), 'leaf'],
            ['extraction_processing_method', $value('extraction_processing_method'), 'drop'],
            ['available_grades', $value('available_grades'), 'layers'],
            ['moq', $value('moq'), 'box'],
        ], fn ($fact) => filled($fact[1]));
        $profile = array_filter([
            ['appearance_color', $value('appearance_color')],
            ['odor_aroma_flavor_profile', $value('odor_aroma_flavor_profile')],
            ['part_used', $value('part_used')],
            ['extraction_processing_method', $value('extraction_processing_method')],
            ['origin_growing_region', $value('origin_growing_region')],
        ], fn ($item) => filled($item[1]));
        $compliance = array_filter([
            ['standard_followed', $value('standard_followed')],
            ['available_grades', $value('available_grades')],
            ['non_gmo', $product->is_non_gmo === null ? null : __('product_detail.'.($product->is_non_gmo ? 'yes' : 'no'))],
            ['country_certificate', $product->has_country_of_origin_certificate === null ? null : __('product_detail.'.($product->has_country_of_origin_certificate ? 'yes' : 'no'))],
        ], fn ($item) => filled($item[1]));
        $commercial = array_filter([
            ['moq', $value('moq')], ['available_grades', $value('available_grades')], ['origin', $value('origin') ?: $value('origin_growing_region')],
        ], fn ($item) => filled($item[1]));
        $applications = filled($translation->applications) ? preg_split('/\s*(?:\r?\n|;|•)\s*/u', $translation->applications, -1, PREG_SPLIT_NO_EMPTY) : [];
        $contactUrl = route('contact', ['locale' => $locale]);
        $canEditProduct = auth()->user()?->can('update', $product) ?? false;
    @endphp
    <main>
        <section class="product-hero relative overflow-hidden bg-olive pb-14 pt-32 text-cream md:pb-20 md:pt-40">
            <div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.035]"></div>
            <div class="container-page relative">
                @if ($canEditProduct)
                    <livewire:product-inline-editor :product="$product" :locale="$locale" section="identity" :key="'product-'.$product->id.'-'.$locale.'-identity'" />
                @endif
                <nav class="product-breadcrumb" aria-label="Breadcrumb">
                    <a href="{{ route('home', ['locale' => $locale]) }}">{{ __('product_detail.breadcrumb.home') }}</a><span aria-hidden="true">/</span>
                    <a href="{{ route('products', ['locale' => $locale]) }}">{{ __('product_detail.breadcrumb.products') }}</a><span aria-hidden="true">/</span>
                    <a href="{{ route('products', ['locale' => $locale, 'category' => $category->key]) }}#{{ $category->key }}">{{ $categoryTranslation->name }}</a><span aria-hidden="true">/</span>
                    <span aria-current="page">{{ $translation->name }}</span>
                </nav>
                <div class="mt-10 grid items-center gap-10 lg:grid-cols-[minmax(0,1.02fr)_minmax(25rem,.98fr)] lg:gap-20">
                    <figure class="product-hero-figure relative order-2 overflow-hidden rounded-sm bg-cream/10 md:order-1">
                        @if ($primaryMedia)
                            <img class="h-full w-full object-cover" src="{{ $primaryMedia->url() }}" alt="{{ $primaryMedia->translation($locale)?->alt_text ?: $translation->name }}" width="{{ $primaryMedia->width }}" height="{{ $primaryMedia->height }}">
                        @else
                            <div class="aspect-square" aria-hidden="true"></div>
                        @endif
                        <figcaption class="product-image-caption"><span class="h-px w-7 bg-cream/60"></span>{{ $translation->name }}</figcaption>
                    </figure>
                    <div class="order-1 max-w-xl md:order-2">
                        <p class="eyebrow text-cream/65">{{ $categoryTranslation->name }}</p>
                        <h1 class="display-hero mt-4">{{ $translation->name }}</h1>
                        @if ($secondaryTranslation?->name)<p class="mt-3 text-lg font-light text-cream/85" dir="{{ $locale === 'ar' ? 'ltr' : 'rtl' }}">{{ $secondaryTranslation->name }}</p>@endif
                        @if ($product->botanical_name)<p class="mt-5 font-display text-2xl italic text-cream/75 md:text-3xl">{{ $product->botanical_name }}</p>@endif
                        @if ($translation->short_description || $translation->description || $translation->technical_content)<div class="mt-7 h-px w-14 bg-cedar"></div><p class="mt-7 max-w-lg text-base leading-relaxed text-cream/78 md:text-lg">{{ $translation->short_description ?: ($translation->description ?: $translation->technical_content) }}</p>@endif
                        <div class="mt-9 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
                            <livewire:product-request-form :product="$product" :locale="$locale" type="quote" style="light" :key="'hero-quote-'.$product->id" />
                            <livewire:product-request-form :product="$product" :locale="$locale" type="sample" style="outline" :key="'hero-sample-'.$product->id" />
                            <livewire:product-request-form :product="$product" :locale="$locale" type="expert" style="text" :key="'hero-expert-'.$product->id" />
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @if ($facts || $canEditProduct)
            <section class="relative border-b border-border bg-card">@if ($canEditProduct)<livewire:product-inline-editor :product="$product" :locale="$locale" section="facts" :key="'product-'.$product->id.'-'.$locale.'-facts'" />@endif<div class="container-page"><dl class="product-facts grid divide-y divide-border sm:grid-cols-2 sm:divide-y-0 lg:grid-cols-5 lg:divide-x">@foreach ($facts as [$label, $factValue, $icon])<div class="product-fact"><div class="product-fact-icon" aria-hidden="true">@if($icon==='pin')<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.65"><path d="M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></svg>@elseif($icon==='leaf')<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.65"><path d="M20.7 3.3C12.3 3.8 5.9 7 4.6 15.1c-.4 2.5.9 4.5 1.8 5.6C9.5 20.3 17.7 18.1 20.7 3.3Z"/><path d="M3.5 21c3.1-5.8 7-8.8 12.6-11.7"/></svg>@elseif($icon==='drop')<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.65"><path d="M12 3s6 6.7 6 11a6 6 0 0 1-12 0c0-4.3 6-11 6-11Z"/></svg>@elseif($icon==='layers')<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.65"><path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5M3 16l9 5 9-5"/></svg>@else<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.65"><path d="M4 8.5 12 4l8 4.5v10L12 23l-8-4.5v-10Z"/><path d="m4 8.5 8 4.5 8-4.5M12 13v10"/></svg>@endif</div><dt>{{ __('product_detail.'.$label) }}</dt><dd>{{ $factValue }}</dd></div>@endforeach</dl></div></section>
        @endif

        @if ($profile || $translation->technical_content || $canEditProduct)
            <section class="relative overflow-hidden bg-cream py-20 md:py-28">@if ($canEditProduct)<livewire:product-inline-editor :product="$product" :locale="$locale" section="specifications" :key="'product-'.$product->id.'-'.$locale.'-specifications'" />@endif<div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.035]"></div><div class="container-page relative grid gap-14 lg:grid-cols-[.8fr_1.2fr] lg:gap-24"><div><p class="eyebrow">{{ __('product_detail.profile') }}</p><h2 class="display-xl mt-4 max-w-md">{{ __('product_detail.profile_heading') }}</h2>@if ($translation->technical_content)<p class="mt-6 max-w-sm leading-relaxed text-foreground/70">{{ $translation->technical_content }}</p>@endif</div>@if ($profile)<dl class="product-profile-grid">@foreach ($profile as [$label, $profileValue])<div><dt>{{ __('product_detail.'.$label) }}</dt><dd>{{ $profileValue }}</dd></div>@endforeach</dl>@endif</div></section>
        @endif

        @if ($applications || $canEditProduct)
            <section class="relative bg-card py-20 md:py-28">@if ($canEditProduct)<livewire:product-inline-editor :product="$product" :locale="$locale" section="applications" :key="'product-'.$product->id.'-'.$locale.'-applications'" />@endif<div class="container-page"><div class="max-w-2xl"><p class="eyebrow">{{ __('product_detail.applications') }}</p><h2 class="display-xl mt-4">{{ __('product_detail.applications_heading') }}</h2></div><ul class="product-applications mt-12" aria-label="{{ __('product_detail.applications_label') }}">@foreach ($applications as $application)<li><span class="product-app-number" aria-hidden="true">✓</span><span>{{ $application }}</span></li>@endforeach</ul></div></section>
        @endif

        @if ($compliance || $canEditProduct)
            <section class="relative overflow-hidden bg-olive py-20 text-cream md:py-28">@if ($canEditProduct)<livewire:product-inline-editor :product="$product" :locale="$locale" section="compliance" :key="'product-'.$product->id.'-'.$locale.'-compliance'" />@endif<div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.045]"></div><div class="container-page relative grid gap-14 lg:grid-cols-[.82fr_1.18fr] lg:gap-24"><div><p class="eyebrow text-cream/60">{{ __('product_detail.quality') }}</p><h2 class="display-xl mt-4 max-w-md">{{ __('product_detail.quality_heading') }}</h2></div><dl class="product-compliance-list">@foreach ($compliance as [$label, $complianceValue])<div><dt>{{ __('product_detail.'.$label) }}</dt><dd>{{ $complianceValue }}</dd></div>@endforeach</dl></div></section>
        @endif

        <section class="bg-cream py-20 md:py-28">
            <div class="container-page grid gap-14 lg:grid-cols-[.78fr_1.22fr] lg:gap-24">
                <div><p class="eyebrow">{{ __('product_detail.technical_documentation') }}</p><h2 class="display-xl mt-4 max-w-md">{{ __('product_detail.technical_documentation_heading') }}</h2><p class="mt-6 max-w-sm leading-relaxed text-foreground/70">{{ __('product_detail.technical_documentation_copy') }}</p></div>
                <ul class="product-document-list" aria-label="{{ __('product_detail.technical_documentation') }}"><li><span class="product-document-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.55"><path d="M6 3h9l3 3v15H6V3Z"/><path d="M15 3v4h4M9 12h6M9 16h6"/></svg></span><span class="min-w-0"><strong>{{ __('product_detail.technical_documentation') }}</strong><small>{{ __('product_detail.technical_documentation_copy') }}</small></span><a href="{{ $contactUrl }}">{{ __('product_detail.request_document') }} <span class="rtl-flip" aria-hidden="true">→</span></a></li></ul>
            </div>
        </section>

        @if ($commercial || $canEditProduct)
            <section class="relative border-y border-border bg-card py-16 md:py-20">@if ($canEditProduct)<livewire:product-inline-editor :product="$product" :locale="$locale" section="commercial" :key="'product-'.$product->id.'-'.$locale.'-commercial'" />@endif<div class="container-page grid gap-10 lg:grid-cols-[.8fr_1.2fr] lg:items-center lg:gap-24"><div><p class="eyebrow">{{ __('product_detail.commercial') }}</p><h2 class="display-xl mt-4">{{ __('product_detail.commercial_heading') }}</h2></div><dl class="product-commercial-grid">@foreach ($commercial as [$label, $commercialValue])<div><dt>{{ __('product_detail.'.$label) }}</dt><dd>{{ $commercialValue }}</dd></div>@endforeach</dl></div></section>
        @endif

        <section class="product-inquiry relative overflow-hidden bg-cedar py-20 text-cream md:py-28"><div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.06]"></div><div class="container-page relative text-center"><p class="eyebrow text-cream/65">{{ __('product_detail.inquiry', ['product' => $translation->name]) }}</p><h2 class="display-xl mx-auto mt-4 max-w-3xl">{{ __('product_detail.inquiry_heading', ['product' => $translation->name]) }}</h2><p class="mx-auto mt-5 max-w-xl leading-relaxed text-cream/78">{{ __('product_detail.inquiry_copy') }}</p><div class="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row sm:flex-wrap"><livewire:product-request-form :product="$product" :locale="$locale" type="quote" style="light" :key="'inquiry-quote-'.$product->id" /><livewire:product-request-form :product="$product" :locale="$locale" type="sample" style="outline" :key="'inquiry-sample-'.$product->id" /><livewire:product-request-form :product="$product" :locale="$locale" type="expert" style="text" :key="'inquiry-expert-'.$product->id" /></div></div></section>

        @if ($relatedProducts->isNotEmpty())
            <section class="bg-cream py-20 md:py-28"><div class="container-page"><div class="flex flex-col justify-between gap-6 sm:flex-row sm:items-end"><div><p class="eyebrow">{{ __('product_detail.related') }}</p><h2 class="display-xl mt-4">{{ __('product_detail.explore', ['category' => $categoryTranslation->name]) }}</h2></div><a class="product-text-link product-text-link--dark" href="{{ route('products', ['locale' => $locale, 'category' => $category->key]) }}#{{ $category->key }}">{{ __('product_detail.view_all', ['category' => $categoryTranslation->name]) }} <span class="rtl-flip" aria-hidden="true">→</span></a></div><div class="mt-12 grid grid-cols-2 gap-4 sm:grid-cols-4 md:gap-6">@foreach ($relatedProducts as $related)<a class="product-related-card group" href="{{ route('product.show', ['locale' => $locale, 'slug' => $related->translation($locale)->slug]) }}"><span class="block aspect-square overflow-hidden bg-card">@if ($media = $related->mediaAssets->first())<img class="h-full w-full object-cover" src="{{ $media->url() }}" alt="{{ $media->translation($locale)?->alt_text ?: $related->translation($locale)->name }}" loading="lazy">@else<span class="block h-full w-full bg-muted"></span>@endif</span><span>{{ $related->translation($locale)->name }} <span class="rtl-flip" aria-hidden="true">→</span></span></a>@endforeach</div></div></section>
        @endif
    </main>
@endsection