@include('frontend.header', [
    'title' => $product->seo_title ?: $product->name,
    'description' => $product->seo_description ?: Str::limit($product->description, 150),
])
@include('frontend.navbar')

@php
    $specRows = $product->specificationRows();
    $packagingRows = $product->packagingRows();
    $imageGallery = collect($product->images ?? []);
    $availableBatchCount = $product->availableBatches->count();
    $activeReportCount = $product->availableBatches->sum(fn ($batch) => $batch->activeLabReports->count());
@endphp

<style>
    .product-detail-hero {
        background:
            radial-gradient(circle at 16% 20%, rgba(74, 132, 74, .36), transparent 28rem),
            radial-gradient(circle at 85% 16%, rgba(217, 142, 40, .18), transparent 24rem),
            linear-gradient(135deg, #03140A 0%, #0A2615 48%, #204938 100%);
    }

    .product-detail-image-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .85rem;
    }

    .product-detail-main-image {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 1.5rem;
        background: #0A2615;
        box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
    }

    .product-detail-main-image img {
        width: 100%;
        aspect-ratio: 5 / 4;
        object-fit: cover;
    }

    .product-detail-image-overlay {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, rgba(4, 26, 14, .08), rgba(4, 26, 14, .24)),
            linear-gradient(0deg, rgba(10, 38, 21, .26), rgba(10, 38, 21, .26));
        pointer-events: none;
    }

    .product-detail-caption {
        background: rgba(10, 38, 21, .58);
        box-shadow: inset 0 0 0 1px rgba(226, 235, 226, .14);
    }

    .product-detail-thumb {
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 1rem;
        background: rgba(255, 255, 255, .08);
    }

    .product-detail-thumb img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .product-info-card {
        position: relative;
        overflow: hidden;
        min-height: 100%;
        border: 1px solid #E5DDCF;
        border-radius: 1.25rem;
        background: rgba(255, 255, 255, .78);
        box-shadow: 0 16px 36px rgba(13, 31, 20, .07);
    }

    .product-info-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        background: linear-gradient(90deg, #D98E28, #2C5234);
    }

    .product-info-card.featured {
        border-color: #0A2615;
        background:
            radial-gradient(circle at 90% 8%, rgba(217, 142, 40, .22), transparent 12rem),
            linear-gradient(145deg, #062818, #0A2615);
        color: #fff;
    }

    .product-info-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
        padding: .85rem 0;
        border-bottom: 1px solid #E5DDCF;
    }

    .product-info-row:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .quality-batch-card,
    .certificate-card {
        position: relative;
        overflow: hidden;
        border: 1px solid #E5DDCF;
        border-radius: 1.25rem;
        background: rgba(255, 255, 255, .92);
        color: #0d1f14;
        box-shadow: 0 16px 36px rgba(13, 31, 20, .07);
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .quality-batch-card:hover,
    .certificate-card:hover {
        transform: translateY(-4px);
        border-color: rgba(217, 142, 40, .65);
        color: #0d1f14;
        box-shadow: 0 24px 50px rgba(13, 31, 20, .12);
    }

    .quality-batch-card h3,
    .quality-batch-card h3:hover,
    .quality-batch-card .batch-report-heading,
    .quality-batch-card:hover .batch-report-heading {
        color: #0d1f14;
    }

    .quality-batch-card p,
    .quality-batch-card:hover p {
        color: #6b7280;
    }

    .quality-batch-card::before,
    .certificate-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        background: linear-gradient(90deg, #D98E28, #2C5234);
    }

    .report-chip {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        width: fit-content;
        border: 1px solid #E5DDCF;
        border-radius: 999px;
        background: #FBF9F1;
        padding: .45rem .75rem;
        color: #4b5563;
        font-size: .8rem;
        font-weight: 600;
    }

    .certificate-watermark {
        position: absolute;
        right: 1rem;
        top: .75rem;
        color: rgba(44, 82, 52, .08);
        font-family: "DM Serif Display", serif;
        font-size: 5rem;
        line-height: 1;
        pointer-events: none;
    }

    @media (max-width: 640px) {
        .product-info-row {
            grid-template-columns: 1fr;
            gap: .25rem;
        }
    }
</style>

<section class="product-detail-hero text-white px-4 sm:px-6 relative overflow-hidden" style="padding-top: 8.5rem; padding-bottom: 4.5rem;">
    <div class="absolute inset-0 bg-gradient-to-t from-[#041A0E]/70 via-transparent to-[#041A0E]/10"></div>
    <div class="max-w-7xl mx-auto relative z-10 grid lg:grid-cols-12 gap-10 items-center">
        <div class="lg:col-span-6">
            {{-- <a href="{{ route('home') }}#products" class="inline-flex text-sm font-bold text-amber-400 mb-6">&lt;- Back to products</a> --}}
            <span class="inline-flex items-center px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider bg-white/10 text-amber-400">BAOPCL Product</span>
            <h1 class="serif-title text-4xl sm:text-6xl leading-tight mt-5 mb-5">{{ $product->name }}</h1>
            <p class="text-gray-300 leading-relaxed mb-8">{{ $product->description }}</p>
            <div class="grid grid-cols-3 gap-3 mb-8">
                <div class="rounded-2xl border border-white/10 bg-white/[0.06] p-4">
                    <div class="serif-title text-2xl text-amber-400">{{ $product->moq ?: 'MOQ' }}</div>
                    <div class="mt-1 text-[10px] font-bold uppercase tracking-wider text-gray-300">Minimum Order</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/[0.06] p-4">
                    <div class="serif-title text-2xl text-amber-400">{{ $availableBatchCount }}</div>
                    <div class="mt-1 text-[10px] font-bold uppercase tracking-wider text-gray-300">Batches</div>
                </div>
                <div class="rounded-2xl border border-white/10 bg-white/[0.06] p-4">
                    <div class="serif-title text-2xl text-amber-400">{{ $activeReportCount }}</div>
                    <div class="mt-1 text-[10px] font-bold uppercase tracking-wider text-gray-300">Reports</div>
                </div>
            </div>
            <div class="flex flex-col sm:flex-row gap-4">
                <a href="{{ route('client-enquiry.create') }}" class="bg-accent text-white px-7 py-3 rounded-full text-sm font-bold text-center">Request Pricing</a>
                <a href="#quality" class="border border-white/20 text-white px-7 py-3 rounded-full text-sm font-bold text-center">View Quality Reports</a>
            </div>
        </div>
        <div class="lg:col-span-6">
            <div class="product-detail-image-shell">
                <div class="product-detail-main-image">
                    <img src="{{ $product->primaryImageUrl() }}" alt="{{ $product->name }}">
                    <div class="product-detail-image-overlay"></div>
                    <div class="product-detail-caption absolute left-5 right-5 bottom-5 rounded-2xl border border-white/15 p-5 text-white backdrop-blur-md">
                        <span class="text-[10px] font-bold uppercase tracking-wider text-amber-400">{{ $product->moq ?: 'Bulk Supply' }}</span>
                        <h2 class="serif-title mt-1 text-2xl leading-tight">{{ $product->name }}</h2>
                    </div>
                </div>

                @if ($imageGallery->count() > 1)
                    <div class="grid grid-cols-3 gap-3">
                        @foreach ($imageGallery->skip(1)->take(3) as $image)
                            <div class="product-detail-thumb">
                                <img src="{{ Storage::disk('public')->url($image) }}" alt="{{ $product->name }}">
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="grid grid-cols-3 gap-3">
                        <div class="rounded-2xl border border-white/10 bg-white/[0.06] p-4">
                            <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">Use</div>
                            <div class="mt-1 text-sm font-semibold text-white">Bulk B2B Supply</div>
                        </div>
                        <div class="rounded-2xl border border-white/10 bg-white/[0.06] p-4">
                            <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">Quality</div>
                            <div class="mt-1 text-sm font-semibold text-white">Batch Linked</div>
                        </div>
                        <div class="rounded-2xl border border-white/10 bg-white/[0.06] p-4">
                            <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">Supply</div>
                            <div class="mt-1 text-sm font-semibold text-white">Buyer Ready</div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>

<section class="soft-bg-section bg-[#F4F1E8] px-4 sm:px-6 py-16 sm:py-20">
    <div class="max-w-7xl mx-auto">
        <div class="mb-8 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <span class="text-xs uppercase tracking-wider font-bold text-[#D98E28]">Buyer Details</span>
                <h2 class="serif-title text-3xl sm:text-5xl text-[#0d1f14] leading-tight mt-2 mb-0">Product information at a glance</h2>
            </div>
            <p class="max-w-xl text-sm leading-relaxed text-gray-600 mb-0">
                Key order, specification, and packaging details are grouped for faster procurement review.
            </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-6 gap-6">
            {{-- <div class="product-info-card featured p-6 sm:p-7">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-[#D98E28] text-white mb-7">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10"/>
                    </svg>
                </div>
                <div class="text-xs uppercase tracking-wider font-bold text-amber-400 mb-3">Minimum Order Quantity</div>
                <div class="serif-title text-4xl leading-tight">{{ $product->moq ?: 'On request' }}</div>
                <p class="mt-5 mb-0 text-sm leading-relaxed text-gray-300">For exact pricing, packaging options, and dispatch planning, send a buyer enquiry with your preferred quantity.</p>
            </div> --}}

            <div class="product-info-card p-6 sm:p-7">
                <div class="mb-6 flex items-start justify-between gap-4">
                    <div>
                        <span class="text-xs uppercase tracking-wider font-bold text-[#D98E28]">Technical Details</span>
                        <h2 class="serif-title text-3xl text-[#0d1f14] mt-1 mb-0">Specifications</h2>
                    </div>
                    <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#E2EBE2] text-[#2C5234]">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 12h6m-6 4h6M7 4h7l4 4v12H7V4z"/>
                        </svg>
                    </div>
                </div>
                <div>
                    @forelse ($specRows as $row)
                        <div class="product-info-row">
                            <span class="font-bold text-[#0d1f14]">{{ $row['label'] }}</span>
                            <span class="text-gray-600 lg:text-right">{{ $row['value'] }}</span>
                        </div>
                    @empty
                        <p class="text-gray-600 mb-0">Specifications will be updated soon.</p>
                    @endforelse
                </div>
            </div>

            <div class="product-info-card p-6 sm:p-7">
                <div class="mb-6 flex items-start justify-between gap-4">
                    <div>
                        <span class="text-xs uppercase tracking-wider font-bold text-[#D98E28]">Dispatch Ready</span>
                        <h2 class="serif-title text-3xl text-[#0d1f14] mt-1 mb-0">Packaging</h2>
                    </div>
                    <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#FFF6E8] text-[#D98E28]">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 3.5l7 4v8l-7 4-7-4v-8l7-4zM5 7.5l7 4 7-4M12 11.5v8"/>
                        </svg>
                    </div>
                </div>
                <div>
                    @forelse ($packagingRows as $row)
                        <div class="product-info-row">
                            <span class="font-bold text-[#0d1f14]">{{ $row['label'] }}</span>
                            <span class="text-gray-600 lg:text-right">{{ $row['value'] }}</span>
                        </div>
                    @empty
                        <p class="text-gray-600 mb-0">Packaging can be customized for buyer requirements.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</section>

<section id="quality" class="bg-[#0A2615] px-4 sm:px-6 py-16 sm:py-20 text-white">
    <div class="max-w-7xl mx-auto">
        <div class="mb-10 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <span class="text-xs uppercase tracking-wider font-bold text-[#D98E28]">Quality Evidence</span>
                <h2 class="serif-title text-3xl sm:text-5xl mt-2 mb-0">Available batches and reports</h2>
            </div>
            <p class="max-w-xl text-sm leading-relaxed text-gray-300 mb-0">
                Each visible batch is active, has remaining stock, and keeps its lab reports attached for quick buyer review.
            </p>
        </div>

        <div class="grid lg:grid-cols-2 gap-5">
            @forelse ($product->availableBatches as $batch)
                @php($primaryReport = $batch->activeLabReports->first())
                <a
                    href="{{ $primaryReport ? Storage::disk('public')->url($primaryReport->document_path) : 'javascript:void(0)' }}"
                    @if ($primaryReport) target="_blank" rel="noopener" @endif
                    class="quality-batch-card group block p-5 sm:p-6 text-[#0d1f14] {{ $primaryReport ? '' : 'cursor-default' }}"
                >
                    <div class="mb-6 flex items-start justify-between gap-4">
                        <div>
                            <div class="text-xs font-bold text-[#D98E28]">Batch {{ $batch->batch_number }}</div>
                            <h3 class="serif-title text-2xl sm:text-3xl leading-tight">{{ $batch->title ?: $batch->productLabel() }}</h3>
                            <p class="mt-1 mb-0 text-xs text-gray-500">{{ $batch->productLabel() }}</p>
                        </div>
                        <div class="shrink-0 rounded-2xl bg-[#F4F1E8] px-4 py-3 text-right">
                            <div class="text-[10px] font-bold uppercase tracking-wider text-gray-500">Available</div>
                            <div class="serif-title text-2xl leading-none text-[#D98E28]">{{ number_format((float) $batch->remaining_quantity, 0) }}</div>
                            <div class="text-[10px] font-bold text-gray-500">{{ $batch->quantity_unit }}</div>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-[#E5DDCF] bg-[#FBF9F1] p-4">
                        <div class="mb-3 flex items-center justify-between gap-3">
                            <span class="batch-report-heading text-xs font-bold uppercase tracking-wider">Reports</span>
                            <span class="rounded-full bg-[#E2EBE2] px-2.5 py-1 text-[10px] font-bold text-[#2C5234]">{{ $batch->activeLabReports->count() }} listed</span>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            @forelse ($batch->activeLabReports as $report)
                                <span class="report-chip">
                                    <svg class="h-3.5 w-3.5 text-[#D98E28]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 12l2 2 4-4"/>
                                    </svg>
                                    {{ $report->title }}
                                </span>
                            @empty
                                <span class="text-sm text-gray-500">Reports will appear after upload.</span>
                            @endforelse
                        </div>
                    </div>

                    <div class="mt-5 inline-flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-[#D98E28]">
                        <span>{{ $primaryReport ? 'Open primary PDF' : 'PDF not uploaded yet' }}</span>
                        @if ($primaryReport)
                            <svg class="h-4 w-4 transition group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M5 12h14m-6-6l6 6-6 6"/>
                            </svg>
                        @endif
                    </div>
                </a>
            @empty
                <div class="lg:col-span-2 rounded-2xl border border-white/10 bg-white/[0.06] p-8 text-center">
                    <div class="font-bold text-white">No available batches right now</div>
                </div>
            @endforelse
        </div>
    </div>
</section>

<section class="soft-bg-section bg-[#F4F1E8] px-4 sm:px-6 py-16 sm:py-20">
    <div class="max-w-7xl mx-auto">
        <div class="mb-10 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <span class="text-xs uppercase tracking-wider font-bold text-[#D98E28]">Organic Compliance</span>
                <h2 class="serif-title text-3xl sm:text-5xl text-[#0d1f14] mt-2 mb-0">Current certificates</h2>
            </div>
            <p class="max-w-xl text-sm leading-relaxed text-gray-600 mb-0">
                Active certificate records are shown as compliance documents for buyer confidence.
            </p>
        </div>

        <div class="grid md:grid-cols-3 gap-5">
            @forelse ($certificates as $certificate)
                <a href="{{ Storage::disk('public')->url($certificate->document_path) }}" target="_blank" rel="noopener" class="certificate-card group block p-5 sm:p-6">
                    <span class="certificate-watermark">{{ $loop->iteration }}</span>
                    <div class="relative">
                        <div class="mb-5 flex items-start justify-between gap-4">
                            <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-[#E2EBE2] text-[#2C5234]">
                                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 12l2 2 4-4m5-2.5V13a9 9 0 11-16 0V7.5L12 4l8 3.5z"/>
                                </svg>
                            </div>
                            <span class="rounded-full bg-[#FFF3DD] px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-[#B46D17]">{{ $certificate->certificate_type }}</span>
                        </div>
                        <h3 class="serif-title text-2xl leading-tight text-[#0d1f14] mb-2">{{ $certificate->title }}</h3>
                        <p class="text-sm text-gray-600 leading-relaxed mb-6">{{ $certificate->description ?: 'Current BAOPCL organic certification record.' }}</p>
                        <div class="flex items-center justify-between gap-4 border-t border-[#E5DDCF] pt-4">
                            <div>
                                <div class="text-[10px] font-bold uppercase tracking-wider text-gray-500">Valid until</div>
                                <div class="text-sm font-bold text-[#0d1f14]">{{ optional($certificate->valid_until)->format('d M Y') ?: 'Open' }}</div>
                            </div>
                            <div class="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-[#D98E28]">
                                PDF
                                <svg class="h-4 w-4 transition group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M5 12h14m-6-6l6 6-6 6"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </a>
            @empty
                <div class="md:col-span-3 bg-white border border-[#E5DDCF] rounded-2xl p-6 text-center">
                    <div class="font-bold text-[#0d1f14]">No current certificates available</div>
                </div>
            @endforelse
        </div>
    </div>
</section>

@include('frontend.footer')
@include('frontend.floating-whatsapp')
@include('frontend.scripts')