@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>

    @php
        $blogItems = $blogs->getCollection();
        $featuredBlog = $blogItems->first();
        $sideBlogs = $blogItems->slice(1, 2);
        $moreBlogs = $blogItems->slice(3);
    @endphp

    @if ($featuredBlog)
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-16">
            <a href="{{ route('blog.details', $featuredBlog) }}" 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="{{ $featuredBlog->featured_image ? asset('storage/'.$featuredBlog->featured_image) : asset('images/ginger6.jpg') }}"
                        alt="{{ $featuredBlog->featured_image_alt ?: $featuredBlog->title }}"
                        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">
                        {{ $featuredBlog->category ?: 'Blog' }}
                    </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>{{ optional($featuredBlog->published_at ?? $featuredBlog->created_at)->format('F d, Y') }}</span>
                    </div>
                    <h3 class="serif-title text-2xl sm:text-3xl text-[#0d1f14] mb-3 group-hover:text-[#D98E28] transition">
                        {{ $featuredBlog->title }}
                    </h3>
                    <p class="text-sm text-gray-600 leading-relaxed max-w-2xl mb-6">
                        {{ \Illuminate\Support\Str::limit($featuredBlog->excerpt ?: strip_tags($featuredBlog->content), 180) }}
                    </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">
                @foreach ($sideBlogs as $blog)
                    <a href="{{ route('blog.details', $blog) }}" 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="{{ $blog->featured_image ? asset('storage/'.$blog->featured_image) : asset('images/ginger2.jpeg') }}"
                                alt="{{ $blog->featured_image_alt ?: $blog->title }}"
                                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">{{ $blog->category ?: 'Blog' }}</span>
                            <h3 class="serif-title text-xl text-[#0d1f14] leading-snug mb-3 group-hover:text-[#D98E28] transition">{{ $blog->title }}</h3>
                            <p class="text-xs text-gray-600 leading-relaxed mb-4">{{ \Illuminate\Support\Str::limit($blog->excerpt ?: strip_tags($blog->content), 120) }}</p>
                            <span class="text-[11px] text-gray-400 font-medium">{{ optional($blog->published_at ?? $blog->created_at)->format('F d, Y') }}</span>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>

        @if ($moreBlogs->isNotEmpty())
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                @foreach ($moreBlogs as $blog)
                    <a href="{{ route('blog.details', $blog) }}" 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="{{ $blog->featured_image ? asset('storage/'.$blog->featured_image) : asset('images/ginger3.jpeg') }}"
                                alt="{{ $blog->featured_image_alt ?: $blog->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">{{ $blog->category ?: 'Blog' }}</span>
                            <h3 class="serif-title text-xl text-[#0d1f14] leading-snug mb-3 group-hover:text-[#D98E28] transition">{{ $blog->title }}</h3>
                            <p class="text-xs text-gray-600 leading-relaxed mb-4">{{ \Illuminate\Support\Str::limit($blog->excerpt ?: strip_tags($blog->content), 110) }}</p>
                            <span class="text-[11px] text-gray-400 font-medium">{{ optional($blog->published_at ?? $blog->created_at)->format('F d, Y') }}</span>
                        </div>
                    </a>
                @endforeach
            </div>
        @endif

        @if ($blogs->hasPages())
            <div class="pt-10">
                {{ $blogs->links() }}
            </div>
        @endif
    @else
        <div class="bg-white/70 border border-[#EBE5D8] rounded-3xl p-8 sm:p-12 text-center">
            <h3 class="serif-title text-2xl sm:text-3xl text-[#0d1f14] mb-3">No published blogs yet</h3>
            <p class="text-sm text-gray-600 max-w-xl mx-auto leading-relaxed">
                Published articles from BAOPCL will appear here once they are available.
            </p>
        </div>
    @endif
</section>

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