@php
    $blogItems = ($latestBlogs ?? collect())->values();
    $featuredBlog = $blogItems->first();
    $sideBlogs = $blogItems->slice(1, 2);
    $fallbackImages = ['images/ginger2.jpeg', 'images/ginger1.jpeg'];

    $blogExcerpt = function ($blog, int $limit = 140): string {
        $plainContent = trim(strip_tags(html_entity_decode($blog->safe_content ?: $blog->content)));

        return \Illuminate\Support\Str::limit($blog->excerpt ?: $plainContent, $limit);
    };

    $readingMinutes = function ($blog): int {
        $plainContent = trim(strip_tags(html_entity_decode($blog->safe_content ?: $blog->content)));

        return max(1, (int) ceil(str_word_count($plainContent) / 220));
    };

    $blogImage = fn ($blog, string $fallback): string => $blog->featured_image
        ? asset('storage/'.$blog->featured_image)
        : asset($fallback);
@endphp

<!-- SECTION 7: INSIGHTS & UPDATES (BLOG) -->
<section class="py-24 px-6 max-w-7xl mx-auto">
    <div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
        <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">BLOGS</span>
            </div>

            <h2 class="serif-title text-3xl sm:text-5xl text-[#0d1f14] font-normal leading-tight">
                Blogs From the World of <span class="italic accent-color">Ginger</span>
            </h2>
        </div>

        <a href="{{ route('blog') }}" class="inline-flex items-center space-x-2 border border-[#0d1f14] text-[#0d1f14] px-6 py-2.5 rounded-full text-xs font-semibold hover:bg-[#0d1f14] hover:text-white transition w-fit">
            <span>View All Articles</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>
        </a>
    </div>

    @if ($featuredBlog)
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            <a href="{{ route('blog.details', $featuredBlog) }}" class="lg:col-span-7 bg-[#F4F1E8]/80 border border-[#EBE5D8] rounded-3xl overflow-hidden flex flex-col justify-between group hover:shadow-lg transition">
                <div class="relative h-64 sm:h-72 overflow-hidden bg-gray-200">
                    <img src="{{ $blogImage($featuredBlog, '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 flex flex-col justify-between flex-1">
                    <div>
                        <div class="flex items-center space-x-4 text-xs text-gray-500 mb-3 font-medium">
                            <span class="flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                {{ optional($featuredBlog->published_at ?? $featuredBlog->created_at)->format('F d, Y') }}
                            </span>
                            <span>&middot;</span>
                            <span class="flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                {{ $readingMinutes($featuredBlog) }} min read
                            </span>
                        </div>

                        <h3 class="serif-title text-xl sm:text-2xl text-[#0d1f14] mb-3 group-hover:text-[#D98E28] transition">
                            {{ $featuredBlog->title }}
                        </h3>

                        <p class="text-xs sm:text-sm text-gray-600 leading-relaxed mb-6 line-clamp-2">
                            {{ $blogExcerpt($featuredBlog, 180) }}
                        </p>
                    </div>

                    <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 flex flex-col 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 sm:flex-row gap-4 items-center group hover:shadow-md transition">
                        <div class="w-full sm:w-36 h-32 rounded-2xl overflow-hidden shrink-0 relative bg-gray-200">
                            <img src="{{ $blogImage($blog, $fallbackImages[$loop->index] ?? '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="flex flex-col justify-between w-full h-full py-1">
                            <div>
                                <span class="text-[10px] uppercase tracking-wider font-bold text-[#D98E28] block mb-1">
                                    {{ $blog->category ?: 'Blog' }}
                                </span>
                                <h4 class="serif-title text-base text-[#0d1f14] leading-snug mb-2 group-hover:text-[#D98E28] transition">
                                    {{ $blog->title }}
                                </h4>
                                <span class="text-[11px] text-gray-400 block mb-3 font-medium">
                                    {{ optional($blog->published_at ?? $blog->created_at)->format('F d, Y') }}
                                </span>
                            </div>
                            <span class="inline-flex items-center space-x-1.5 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>
                @endforeach
            </div>
        </div>
    @else
        <div class="bg-[#F4F1E8]/80 border border-[#EBE5D8] rounded-3xl p-8 sm:p-10 text-center">
            <h3 class="serif-title text-2xl text-[#0d1f14] mb-3">No published blogs yet</h3>
            <p class="text-sm text-gray-600 leading-relaxed">
                Published articles from BAOPCL will appear here once they are available.
            </p>
        </div>
    @endif
</section>