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

<section class="relative min-h-[68svh] md:min-h-[72svh] bg-[#041A0E] text-white pt-28 sm:pt-36 pb-14 sm:pb-16 px-4 sm:px-6 overflow-hidden" >
    <div class="absolute inset-0">
        <img src="{{ asset('images/ginger6.jpg') }}" alt="Certified organic ginger harvest" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-b from-[#03140A]/80 via-[#041A0E]/82 to-[#041A0E]"></div>
    </div>

    <div class="relative z-10 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-10 items-end min-h-[42svh] md:min-h-[48svh]">
        <div class="lg:col-span-8">
            <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-8">
                <span class="uppercase tracking-wider font-semibold">BLOGS</span>
            </div>

            <h1 class="serif-title text-4xl sm:text-6xl md:text-7xl font-normal leading-tight mb-5 sm:mb-6">
                Blogs From the World of <span class="italic accent-color">Organic Ginger</span>
            </h1>

            <p class="text-gray-300 text-sm sm:text-base max-w-2xl font-light leading-relaxed">
                Read practical stories on farmer ownership, organic cultivation, dehydrated ginger slice processing, export preparation, and the people behind BAOPCL's supply chain.
            </p>
        </div>

        <div class="hidden lg:block lg:col-span-4">
            <div class="glass-card rounded-3xl p-6">
                <span class="text-[10px] uppercase tracking-wider text-amber-400 font-bold">Featured Theme</span>
                <h2 class="serif-title text-2xl leading-tight mt-2 mb-3">Certified organic slices for serious buyers.</h2>
                <p class="text-xs text-gray-300 leading-relaxed">
                    From farm practices to dehydrating and packing discipline, our articles focus on what buyers need to know before placing repeat orders.
                </p>
            </div>
        </div>
    </div>
</section>

<section class="py-16 sm:py-20 lg:py-24 px-4 sm:px-6 max-w-7xl mx-auto">
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
        <div>
            <div class="inline-flex items-center space-x-2 bg-[#E2EBE2] text-[#2C5234] px-3.5 py-1 rounded-full text-xs font-semibold mb-4">
                <span class="uppercase tracking-wider">LATEST ARTICLES</span>
            </div>
            <h2 class="serif-title text-3xl sm:text-5xl text-[#0d1f14] font-normal leading-tight">
                Field Notes, Buyer Guides, and <span class="italic accent-color">Market Updates</span>
            </h2>
        </div>
        <p class="hidden md:block text-sm text-gray-600 leading-relaxed max-w-md">
            A concise reading room for teams comparing suppliers, planning bulk requirements, or learning how export-grade dehydrated ginger slices are handled.
        </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-16">
        <a href="#" class="lg:col-span-7 bg-[#F4F1E8]/80 border border-[#EBE5D8] rounded-3xl overflow-hidden group hover:shadow-lg transition">
            <div class="relative h-72 sm:h-96 overflow-hidden bg-gray-200">
                <img src="{{ asset('images/ginger6.jpg') }}" alt="Organic ginger roots ready for inspection" class="w-full h-full object-cover object-center group-hover:scale-105 transition duration-500">
                <span class="absolute top-4 left-4 bg-[#D98E28] text-white px-3 py-1 rounded-full text-[11px] font-semibold">Health & Wellness</span>
            </div>
            <div class="p-6 sm:p-8">
                <div class="flex flex-wrap items-center gap-3 text-xs text-gray-500 mb-3 font-medium">
                    <span>August 18, 2026</span>
                    <span>5 min read</span>
                </div>
                <h3 class="serif-title text-2xl sm:text-3xl text-[#0d1f14] mb-3 group-hover:text-[#D98E28] transition">
                    Health and Culinary Benefits of Organic Ginger
                </h3>
                <p class="text-sm text-gray-600 leading-relaxed max-w-2xl mb-6">
                    From digestion to flavour, discover why organic ginger is a staple in kitchens, wellness products, and food manufacturing around the world.
                </p>
                <span class="inline-flex items-center space-x-2 text-xs font-bold text-[#0d1f14] group-hover:text-[#D98E28] transition">
                    <span>Read Article</span>
                    <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-6-6l6 6-6 6"/>
                    </svg>
                </span>
            </div>
        </a>

        <div class="lg:col-span-5 grid grid-cols-1 gap-6">
            <a href="#" class="bg-[#F4F1E8]/80 border border-[#EBE5D8] rounded-3xl p-4 sm:p-5 flex flex-col gap-4 group hover:shadow-md transition">
                <div class="w-full h-44 sm:h-52 rounded-2xl overflow-hidden shrink-0 bg-gray-200">
                    <img src="{{ asset('images/ginger2.jpeg') }}" alt="Organic ginger prepared for dehydrated slice packing" class="w-full h-full object-cover object-center group-hover:scale-105 transition duration-500">
                </div>
                <div class="py-1">
                    <span class="text-[10px] uppercase tracking-wider font-bold text-[#D98E28] block mb-2">EXPORT PROCESS</span>
                    <h3 class="serif-title text-xl text-[#0d1f14] leading-snug mb-3 group-hover:text-[#D98E28] transition">How Dehydrated Ginger Slices Are Prepared for Global Export</h3>
                    <p class="text-xs text-gray-600 leading-relaxed mb-4">A closer look at cleaning, slicing, dehydrating, packing, and documentation discipline for international orders.</p>
                    <span class="text-[11px] text-gray-400 font-medium">August 04, 2026</span>
                </div>
            </a>

        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        @foreach ([
            ['category' => 'Buyer Guide', 'title' => 'Choosing the Right Ginger Slice Grade for Bulk Supply', 'image' => 'ginger3.jpeg', 'date' => 'July 10, 2026'],
            ['category' => 'Quality', 'title' => 'What Good Slice Sorting Looks Like Before Dispatch', 'image' => 'ginger4.jpg', 'date' => 'June 28, 2026'],
            ['category' => 'Market Notes', 'title' => 'Planning Seasonal Orders Without Compromising Freshness', 'image' => 'ginger5.jpg', 'date' => 'June 12, 2026'],
        ] as $article)
            <a href="#" class="bg-white/60 border border-[#EBE5D8] rounded-3xl overflow-hidden group hover:shadow-md transition">
                <div class="h-52 overflow-hidden bg-gray-200">
                    <img src="{{ asset('images/' . $article['image']) }}" alt="{{ $article['title'] }}" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
                </div>
                <div class="p-6">
                    <span class="text-[10px] uppercase tracking-wider font-bold text-[#D98E28] block mb-2">{{ $article['category'] }}</span>
                    <h3 class="serif-title text-xl text-[#0d1f14] leading-snug mb-3 group-hover:text-[#D98E28] transition">{{ $article['title'] }}</h3>
                    <span class="text-[11px] text-gray-400 font-medium">{{ $article['date'] }}</span>
                </div>
            </a>
        @endforeach
    </div>
</section>

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