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

<style>
    .blog-detail-hero {
        background:
            radial-gradient(circle at 18% 22%, rgba(74, 132, 74, .38), transparent 30rem),
            radial-gradient(circle at 82% 18%, rgba(217, 142, 40, .18), transparent 24rem),
            linear-gradient(135deg, #03140A 0%, #0A2615 46%, #204938 100%);
    }

    .blog-hero-card {
        border: 1px solid rgba(255, 255, 255, .14);
        background: rgba(255, 255, 255, .08);
        backdrop-filter: blur(14px);
        box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
    }

    .article-shell {
        border: 1px solid #EBE5D8;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 250, 240, .78));
        box-shadow: 0 24px 60px rgba(13, 31, 20, .08);
    }

    .blog-body h1,
    .blog-body h2,
    .blog-body h3,
    .blog-body h4 {
        font-family: 'DM Serif Display', serif;
        color: #0d1f14;
        line-height: 1.15;
        margin-top: 2rem;
        margin-bottom: 0.85rem;
    }

    .blog-body h2 {
        font-size: clamp(2rem, 4vw, 3rem);
    }

    .blog-body h1 {
        font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    }

    .blog-body h3 {
        font-size: clamp(1.5rem, 3vw, 2.2rem);
    }

    .blog-body p,
    .blog-body li {
        color: #4b5563;
        font-size: 1.03rem;
        line-height: 1.9;
    }

    .blog-body p {
        margin-bottom: 1.2rem;
    }

    .blog-body ul,
    .blog-body ol {
        margin: 1.25rem 0 1.5rem 1.25rem;
        padding-left: 1.25rem;
    }

    .blog-body ul {
        list-style: disc;
    }

    .blog-body ol {
        list-style: decimal;
    }

    .blog-body img {
        border-radius: 1.5rem;
        margin: 2rem 0;
        width: 100%;
        box-shadow: 0 18px 40px rgba(13, 31, 20, .1);
    }

    .blog-body blockquote {
        position: relative;
        overflow: hidden;
        border-left: 4px solid #D98E28;
        background: #F4F1E8;
        border-radius: 0 1.25rem 1.25rem 0;
        color: #0d1f14;
        font-family: 'DM Serif Display', serif;
        font-size: 1.4rem;
        line-height: 1.45;
        margin: 2rem 0;
        padding: 1.25rem 1.5rem;
    }

    .blog-side-card {
        border: 1px solid #EBE5D8;
        border-radius: 1.5rem;
        background: rgba(255, 255, 255, .78);
        box-shadow: 0 14px 34px rgba(13, 31, 20, .06);
    }

    .related-article {
        border-bottom: 1px solid #EBE5D8;
        padding-bottom: 1rem;
    }

    .related-article:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .blog-sidebar-feature {
        min-height: 23rem;
        isolation: isolate;
    }

    .blog-sidebar-feature::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
            linear-gradient(90deg, rgba(4, 26, 14, .94) 0%, rgba(4, 26, 14, .78) 48%, rgba(4, 26, 14, .32) 100%),
            linear-gradient(0deg, rgba(4, 26, 14, .82), rgba(4, 26, 14, .2));
    }

    .blog-sidebar-feature::after {
        content: "";
        position: absolute;
        inset: 1rem;
        z-index: 2;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 1.1rem;
        pointer-events: none;
    }
</style>

@php
    $publishedDate = optional($blog->published_at ?? $blog->created_at)->format('F d, Y');
    $heroImage = $blog->featured_image ? asset('storage/'.$blog->featured_image) : asset('images/ginger6.jpg');
    $articleContent = trim($blog->safe_content ?? '');

    if ($articleContent === '' && filled($blog->excerpt)) {
        $articleContent = '<p>'.e($blog->excerpt).'</p>';
    }

    $plainContent = trim(strip_tags(html_entity_decode($articleContent)));
    $wordCount = str_word_count($plainContent);
    $readingMinutes = max(1, (int) ceil($wordCount / 220));
@endphp

<section class="blog-detail-hero relative text-white pt-28 sm:pt-36 pb-14 sm:pb-18 px-4 sm:px-6 overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-t from-[#041A0E]/80 via-transparent to-[#041A0E]/10"></div>

    <div class="relative z-10 max-w-7xl mx-auto">
        <a href="{{ route('blog') }}" class="mb-8 inline-flex w-fit items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-xs font-bold uppercase tracking-wider text-gray-200 transition hover:bg-white/15 hover:text-white">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M19 12H5m7 7-7-7 7-7"/>
            </svg>
            {{-- <span>Back to Articles</span> --}}
        </a>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-end">
            <div class="lg:col-span-7">
                <div class="flex flex-wrap items-center gap-3 mb-6">
                    <span class="inline-flex bg-[#D98E28] text-white px-3.5 py-1.5 rounded-full text-[11px] font-semibold uppercase tracking-wider">
                        {{ $blog->category ?: 'Blog' }}
                    </span>
                    <span class="text-sm text-gray-300">{{ $publishedDate }}</span>
                    <span class="h-1 w-1 rounded-full bg-white/35"></span>
                    <span class="text-sm text-gray-300">{{ $readingMinutes }} min read</span>
                </div>

                <h1 class="serif-title text-4xl sm:text-6xl md:text-7xl font-normal leading-tight mb-6">
                    {{ $blog->title }}
                </h1>

                @if ($blog->excerpt)
                    <p class="text-gray-300 text-sm sm:text-lg max-w-3xl font-light leading-relaxed">
                        {{ $blog->excerpt }}
                    </p>
                @endif
            </div>

            <div class="lg:col-span-5">
                <div class="blog-hero-card overflow-hidden rounded-3xl">
                    <div class="relative h-72 sm:h-96 bg-[#0A2615]">
                        <img src="{{ $heroImage }}" alt="{{ $blog->featured_image_alt ?: $blog->title }}" class="h-full w-full object-cover">
                        {{-- <div class="absolute inset-0 bg-gradient-to-t from-[#041A0E]/70 via-transparent to-transparent"></div>
                        <div class="absolute left-5 right-5 bottom-5 rounded-2xl border border-white/15 bg-black/25 p-5 backdrop-blur-md">
                            <span class="text-[10px] uppercase tracking-wider text-amber-400 font-bold">Article Focus</span>
                            <h2 class="serif-title mt-1 text-2xl leading-tight">{{ $blog->category ?: 'Organic Ginger' }}</h2>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="soft-bg-section bg-[#F4F1E8] py-14 sm:py-20 lg:py-24 px-4 sm:px-6">
    <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-14">
        <article class="lg:col-span-8">
            <div class="article-shell rounded-3xl p-5 sm:p-8 lg:p-12">
                <div class="mb-8 flex flex-wrap items-center gap-3 border-b border-[#EBE5D8] pb-6 text-sm text-gray-500">
                    <span class="font-bold text-[#0d1f14]">{{ $blog->category ?: 'Blog' }}</span>
                    <span class="h-1 w-1 rounded-full bg-gray-300"></span>
                    <span>{{ $publishedDate }}</span>
                    <span class="h-1 w-1 rounded-full bg-gray-300"></span>
                    <span>{{ number_format($wordCount) }} words</span>
                </div>
                <div class="blog-body">
                    {!! $articleContent !!}
                </div>
            </div>
        </article>

        <aside class="lg:col-span-4">
            <div class="sticky top-28 space-y-6">
                <div class="blog-sidebar-feature bg-[#0d1f14] text-white rounded-3xl p-6 sm:p-7 overflow-hidden relative flex items-end">
                    <div class="absolute inset-0">
                        <img src="{{ asset('images/ginger5.jpg') }}" alt="" class="w-full h-full object-cover">
                    </div>
                    <div class="relative z-10">
                        <span class="text-[10px] uppercase tracking-wider text-amber-400 font-bold">BAOPCL Blog</span>
                        <h2 class="serif-title text-3xl sm:text-4xl leading-tight mt-2 mb-4 max-w-xs">Stories from organic ginger fields to export-ready supply.</h2>
                        <p class="text-sm text-gray-200 leading-relaxed max-w-sm mb-0">
                            Explore updates on cultivation, processing discipline, certifications, and farmer-owned supply.
                        </p>
                    </div>
                </div>

                @if (($blog->tags ?? null) && count($blog->tags))
                    <div class="blog-side-card p-6">
                        <h3 class="serif-title text-2xl text-[#0d1f14] mb-4">Topics</h3>
                        <div class="flex flex-wrap gap-2">
                            @foreach ($blog->tags as $tag)
                                <span class="bg-[#E2EBE2] text-[#2C5234] px-3 py-1.5 rounded-full text-xs font-bold">{{ $tag }}</span>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if ($relatedBlogs->isNotEmpty())
                    <div class="blog-side-card p-6">
                        <div class="mb-5 flex items-center justify-between gap-4">
                            <h3 class="serif-title text-2xl text-[#0d1f14] mb-0">More Articles</h3>
                            <a href="{{ route('blog') }}" class="text-[10px] font-bold uppercase tracking-wider text-[#D98E28]">All</a>
                        </div>
                        <div class="space-y-4">
                            @foreach ($relatedBlogs as $relatedBlog)
                                <a href="{{ route('blog.details', $relatedBlog) }}" class="related-article group grid grid-cols-[72px_minmax(0,1fr)] gap-4">
                                    <div class="h-16 w-18 overflow-hidden rounded-2xl bg-[#E5DDCF]">
                                        <img src="{{ $relatedBlog->featured_image ? asset('storage/'.$relatedBlog->featured_image) : asset('images/ginger2.jpeg') }}" alt="{{ $relatedBlog->featured_image_alt ?: $relatedBlog->title }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
                                    </div>
                                    <div class="min-w-0">
                                    <span class="text-[10px] uppercase tracking-wider font-bold text-[#D98E28] block mb-1">{{ $relatedBlog->category ?: 'Blog' }}</span>
                                    <h4 class="serif-title text-lg text-[#0d1f14] leading-snug group-hover:text-[#D98E28] transition">{{ $relatedBlog->title }}</h4>
                                    <span class="text-[11px] text-gray-400 font-medium">{{ optional($relatedBlog->published_at ?? $relatedBlog->created_at)->format('F d, Y') }}</span>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </aside>
    </div>
</section>

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