@include('frontend.header')
@include('frontend.navbar')

<style>
    .product-catalog-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .product-card-shell {
        height: 100%;
    }

    .product-card-image {
        display: block;
        height: 240px;
        overflow: hidden;
        background: #0A2615;
        flex-shrink: 0;
    }

    .product-card-image img {
        width: 100%;
        height: 240px;
        object-fit: cover;
    }

    @media (min-width: 768px) {
        .product-catalog-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1280px) {
        .product-catalog-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
</style>

<section class="bg-[#041A0E] 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-[radial-gradient(circle_at_16%_18%,rgba(74,132,74,0.45),transparent_30rem),radial-gradient(circle_at_82%_24%,rgba(217,142,40,0.18),transparent_24rem),linear-gradient(135deg,#03140A_0%,#0A2615_44%,#204938_100%)]"></div>
    <div class="absolute inset-0 bg-gradient-to-t from-[#041A0E]/60 via-transparent to-[#041A0E]/10"></div>

    <div class="max-w-7xl mx-auto relative z-10 grid lg:grid-cols-12 gap-10 items-end">
        <div class="lg:col-span-7">
            {{-- <a href="{{ route('home') }}" class="inline-flex items-center text-sm font-bold text-amber-400 mb-6">&lt;- Back to home</a> --}}
            <div class="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-md px-4 py-1.5 rounded-full border border-white/15 text-xs text-amber-400 mb-7">
                <span class="uppercase tracking-wider font-semibold">BAOPCL Product Catalogue</span>
            </div>
            <h1 class="serif-title text-4xl sm:text-6xl leading-tight mb-5">
                Certified Organic Ginger<br>
                <span class="italic accent-color">Products for Bulk Buyers</span>
            </h1>
            <p class="text-gray-300 text-sm sm:text-base leading-relaxed max-w-2xl mb-8">
                Explore active BAOPCL products with buyer-ready details, available batch information, quality reports, and organic compliance signals.
            </p>
            <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 hover:brightness-110 transition">Request Pricing</a>
                <a href="#catalogue" class="border border-white/25 text-white px-7 py-3 rounded-full text-sm font-bold text-center hover:bg-white/10 transition">View Products</a>
            </div>
        </div>

        <div class="lg:col-span-5 grid grid-cols-3 gap-3">
            <div class="rounded-2xl bg-white/10 border border-white/10 p-4 text-center">
                <div class="serif-title text-3xl text-amber-400">{{ number_format($products->count()) }}</div>
                <div class="text-[10px] uppercase tracking-wider text-gray-300 font-bold">Active Products</div>
            </div>
            <div class="rounded-2xl bg-white/10 border border-white/10 p-4 text-center">
                <div class="serif-title text-3xl text-amber-400">{{ number_format($products->sum(fn ($product) => $product->availableBatches->count())) }}</div>
                <div class="text-[10px] uppercase tracking-wider text-gray-300 font-bold">Available Batches</div>
            </div>
            <div class="rounded-2xl bg-white/10 border border-white/10 p-4 text-center">
                <div class="serif-title text-3xl text-amber-400">{{ number_format($certificates->count()) }}</div>
                <div class="text-[10px] uppercase tracking-wider text-gray-300 font-bold">Current Certificates</div>
            </div>
        </div>
    </div>
</section>

<section id="catalogue" 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="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-5 mb-10">
            <div>
                <span class="text-xs uppercase tracking-wider font-bold text-[#D98E28]">Current Catalogue</span>
                <h2 class="serif-title text-3xl sm:text-5xl text-[#0d1f14] leading-tight mt-2 mb-0">Products ready for buyer conversations</h2>
            </div>
            <p class="text-sm text-gray-600 max-w-xl mb-0">
                Public listings show only active products. Batch stock and lab reports stay connected to each product where available.
            </p>
        </div>

        <div class="product-catalog-grid">
            @forelse ($products as $product)
                @php
                    $availableQuantity = $product->availableBatches->sum(fn ($batch) => (float) $batch->remaining_quantity);
                    $unit = $product->availableBatches->first()?->quantity_unit ?: 'KG';
                    $reportCount = $product->availableBatches->sum(fn ($batch) => $batch->activeLabReports->count());
                @endphp
                <article class="product-card-shell group bg-white border border-[#E5DDCF] rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition" data-card-hover>
                    <div class="flex flex-col h-full">
                        <a href="{{ route('products.show', $product) }}" class="product-card-image">
                            <img src="{{ $product->primaryImageUrl() }}" alt="{{ $product->name }}" class="group-hover:scale-105 transition duration-500">
                        </a>
                        <div class="p-5 sm:p-6 flex flex-col flex-1">
                            <div class="flex items-start justify-between gap-4 mb-4">
                                <div>
                                    <span class="text-[10px] uppercase tracking-wider font-bold text-[#D98E28]">{{ $product->moq ?: 'Bulk Supply' }}</span>
                                    <h3 class="serif-title text-2xl sm:text-3xl text-[#0d1f14] leading-tight mt-1">{{ $product->name }}</h3>
                                </div>
                                <span class="inline-flex items-center bg-[#E2EBE2] text-[#2C5234] px-3 py-1 rounded-full text-[10px] font-bold uppercase">Active</span>
                            </div>

                            <p class="text-sm text-gray-600 leading-relaxed mb-5">{{ Str::limit($product->description ?: 'Certified organic ginger product available for bulk buyer enquiries.', 150) }}</p>

                            <div class="grid grid-cols-3 gap-2 mb-5">
                                <div class="rounded-2xl bg-[#F4F1E8] border border-[#E5DDCF] p-3">
                                    <div class="text-[9px] uppercase tracking-wider font-bold text-gray-500">Stock</div>
                                    <div class="serif-title text-xl text-[#D98E28]">{{ number_format($availableQuantity, 0) }}</div>
                                    <div class="text-[10px] font-bold text-gray-500">{{ $unit }}</div>
                                </div>
                                <div class="rounded-2xl bg-[#F4F1E8] border border-[#E5DDCF] p-3">
                                    <div class="text-[9px] uppercase tracking-wider font-bold text-gray-500">Batches</div>
                                    <div class="serif-title text-xl text-[#D98E28]">{{ $product->availableBatches->count() }}</div>
                                    <div class="text-[10px] font-bold text-gray-500">Available</div>
                                </div>
                                <div class="rounded-2xl bg-[#F4F1E8] border border-[#E5DDCF] p-3">
                                    <div class="text-[9px] uppercase tracking-wider font-bold text-gray-500">Reports</div>
                                    <div class="serif-title text-xl text-[#D98E28]">{{ $reportCount }}</div>
                                    <div class="text-[10px] font-bold text-gray-500">Active</div>
                                </div>
                            </div>

                            <div class="mt-auto flex flex-col sm:flex-row gap-3">
                                <a href="{{ route('products.show', $product) }}" class="inline-flex justify-center items-center bg-[#0A2615] text-white px-5 py-2.5 rounded-full text-xs font-bold hover:bg-[#123921] transition">View Details</a>
                                <a href="{{ route('client-enquiry.create') }}" class="inline-flex justify-center items-center border border-[#E5DDCF] text-[#0d1f14] px-5 py-2.5 rounded-full text-xs font-bold hover:border-[#D98E28] transition">Request Quote</a>
                            </div>
                        </div>
                    </div>
                </article>
            @empty
                <div class="lg:col-span-2 bg-white border border-[#E5DDCF] rounded-3xl p-8 text-center">
                    <div class="serif-title text-3xl text-[#0d1f14] mb-2">No active products right now</div>
                    <p class="text-sm text-gray-600 mb-0">Products added and activated from admin will appear here automatically.</p>
                </div>
            @endforelse
        </div>
    </div>
</section>

<section class="soft-bg-section-light bg-white px-4 sm:px-6 py-16">
    <div class="max-w-7xl mx-auto grid lg:grid-cols-3 gap-6">
        <div class="lg:col-span-1">
            <span class="text-xs uppercase tracking-wider font-bold text-[#D98E28]">Buyer Confidence</span>
            <h2 class="serif-title text-3xl sm:text-4xl text-[#0d1f14] leading-tight mt-2 mb-4">Quality evidence stays linked to supply.</h2>
            <p class="text-sm text-gray-600 leading-relaxed mb-0">Certificates establish organic status, while product pages connect available batches with their active lab reports.</p>
        </div>
        <div class="lg:col-span-2 grid sm:grid-cols-3 gap-4">
            <div class="bg-[#F4F1E8] border border-[#E5DDCF] rounded-2xl p-5">
                <div class="w-11 h-11 rounded-xl bg-[#E2EBE2] text-[#2C5234] flex items-center justify-center mb-4">
                    <svg class="w-5 h-5" 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>
                <h3 class="serif-title text-xl text-[#0d1f14] mb-2">Current Certificates</h3>
                <p class="text-xs text-gray-600 leading-relaxed mb-0">Only active and currently valid certificates are counted for buyers.</p>
            </div>
            <div class="bg-[#F4F1E8] border border-[#E5DDCF] rounded-2xl p-5">
                <div class="w-11 h-11 rounded-xl bg-[#FFF6E8] text-[#D98E28] flex items-center justify-center mb-4">
                    <svg class="w-5 h-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>
                <h3 class="serif-title text-xl text-[#0d1f14] mb-2">Batch Reports</h3>
                <p class="text-xs text-gray-600 leading-relaxed mb-0">Lab reports remain attached to their respective available batches.</p>
            </div>
            <div class="bg-[#F4F1E8] border border-[#E5DDCF] rounded-2xl p-5">
                <div class="w-11 h-11 rounded-xl bg-[#E2EBE2] text-[#2C5234] flex items-center justify-center mb-4">
                    <svg class="w-5 h-5" 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>
                <h3 class="serif-title text-xl text-[#0d1f14] mb-2">Available Stock</h3>
                <p class="text-xs text-gray-600 leading-relaxed mb-0">Sold-out batches stay in admin history but disappear publicly.</p>
            </div>
        </div>
    </div>
</section>

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