{{-- LIVEWIRE ROOT (REQUIRED) --}}
<div>

    {{-- ================= BLOG DETAIL ================= --}}
    <section>

        <div class="mx-auto px-6 lg:px-20 py-16">

            {{-- TOP BAR --}}
            <div class="flex justify-between items-start mb-10">

                <a href="/blogs"
                    class="inline-flex items-center gap-2
          font-semibold
          text-[14px] lg:text-[16px]
          border-black pb-1">
                    ← See All Blogs
                </a>

                <div class="text-right uppercase tracking-widest text-black/60">
                    <div class="text-black font-bold capitalize text-[14px] lg:text-[16px]">
                        Date
                    </div>

                    <div>{{ \Carbon\Carbon::parse($blog->publish_date)->format('M Y') }}</div>
                </div>

            </div>

            {{-- TITLE --}}
            <h1
                class="text-[28px] sm:text-[34px] lg:text-[42px]
                       font-extrabold leading-tight max-w-4xl mb-10">
                {{ $blog->title }}
            </h1>

            {{-- FEATURE IMAGE --}}
            <div class="border border-black/20 p-6 mb-14">
                <div class="bg-white p-4">
                    <img src="{{ asset($blog->featured_image) }}" alt="{{ $blog->title }}"
                        class="w-full max-h-[520px] object-contain mx-auto">
                </div>
            </div>
         <div class="blog-content mx-auto px-0 lg:px-16">
            <article
                class="prose prose-neutral
                       text-[16px] lg:text-[18px]
                       leading-relaxed
                       text-justify
                       prose-h3:text-[18px]
                       prose-h3:font-bold
                       prose-h3:mt-10
                       prose-h3:mb-2
                       prose-p:mt-2
                       prose-p:mb-4
                       prose-ul:mt-3
                       prose-ul:mb-4">
        
                {!! $blog->content !!}
            </article>
        </div>



{{-- FAQ SECTION (only if blog has FAQs) --}}
@if ($blog->faqs && $blog->faqs->count() > 0)
    <div class="mx-auto px-0 lg:px-16 mt-16 mb-20">

        {{-- HEADER --}}
        <div class="mb-8 sm:mb-10">
            <span class="inline-block text-[11px] sm:text-[12px] font-bold uppercase tracking-[0.2em] text-orange-500 mb-2">
                Got Questions?
            </span>
            <h2 class="text-[24px] sm:text-[28px] lg:text-[34px] font-extrabold leading-tight">
                Frequently Asked Questions
            </h2>
        </div>

        {{-- ACCORDION --}}
        <div class="space-y-3 sm:space-y-4" x-data="{ open: 0 }">
            @foreach ($blog->faqs as $index => $faq)
                <div
                    class="group rounded-2xl border transition-all duration-300 overflow-hidden"
                    :class="open === {{ $index }}
                        ? 'border-black shadow-md bg-white'
                        : 'border-black/10 bg-white hover:border-black/25 hover:shadow-sm'">

                    <button
                        type="button"
                        @click="open === {{ $index }} ? open = null : open = {{ $index }}"
                        class="w-full flex items-center gap-3 sm:gap-4
                               text-left px-4 sm:px-6 py-4 sm:py-5
                               focus:outline-none">

                        {{-- NUMBER BADGE --}}
                        <span
                            class="shrink-0 w-8 h-8 sm:w-9 sm:h-9 rounded-full flex items-center justify-center
                                   text-[12px] sm:text-[13px] font-bold transition-colors duration-300"
                            :class="open === {{ $index }}
                                ? 'bg-black text-white'
                                : 'bg-black/5 text-black/50 group-hover:bg-black/10'">
                            {{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}
                        </span>

                        {{-- QUESTION --}}
                        <span
                            class="flex-1 font-semibold text-[15px] sm:text-[17px] lg:text-[18px] leading-snug transition-colors duration-300"
                            :class="open === {{ $index }} ? 'text-black' : 'text-black/80'">
                            {{ $faq->question }}
                        </span>

                        {{-- ICON --}}
                        <span
                            class="shrink-0 w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center
                                   border transition-all duration-300"
                            :class="open === {{ $index }}
                                ? 'bg-orange-500 border-orange-500 rotate-180'
                                : 'border-black/15 text-black/50 group-hover:border-black/30'">
                            <svg
                                class="w-3.5 h-3.5 sm:w-4 sm:h-4 transition-colors duration-300"
                                :class="open === {{ $index }} ? 'text-white' : 'text-black/60'"
                                fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                            </svg>
                        </span>
                    </button>

                    {{-- ANSWER --}}
                    <div x-show="open === {{ $index }}" x-collapse x-cloak>
                        <div class="px-4 sm:px-6 pb-5 sm:pb-6">
                            <div class="pl-11 sm:pl-13 pr-2 sm:pr-8">
                                <p class="text-[14px] sm:text-[15px] lg:text-[16px] leading-relaxed text-black/60">
                                    {{ $faq->answer }}
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
            @endforeach
        </div>

    </div>
@endif
        </div>
    </section>


    {{-- ================= MORE BLOGS ================= --}}
    <section x-data="{ active: null }">

        {{-- TOP BORDER (EDGE TO EDGE) --}}
        <div class="w-full border-black"></div>

        {{-- HEADER --}}
        <div class="mx-auto px-6 lg:px-16 py-12
                flex justify-between items-center">
            <h2 class="text-2xl font-bold text-black">
                More
            </h2>

            <a href="/blogs"
                class="group inline-flex items-center gap-2
                  text-sm font-semibold
                  border-b border-black pb-1">
                See All Blogs
                <span class="transition-transform duration-300 group-hover:translate-x-1">
                    →
                </span>
            </a>
        </div>

        @foreach ($moreBlogs as $index => $item)
            <a href="/blogs/{{ $item->slug }}" @mouseenter="active = {{ $index }}" @mouseleave="active = null"
                class="block">

                <div class="border-b border-black transition-colors duration-300"
                    :class="active === {{ $index }} ? 'bg-[#f58220]' : 'bg-white'">

                    <div
                        class="mx-auto
                           px-5 lg:px-16
                           py-8 lg:py-10
                           grid grid-cols-12 gap-y-3
                           items-start lg:items-center">

                        <!-- DATE -->
                        <div class="col-span-4 lg:col-span-2 text-xs uppercase tracking-widest"
                            :class="active === {{ $index }} ? 'text-white' : 'text-black/60'">
                            {{ \Carbon\Carbon::parse($blog->publish_date)->format('M Y') }}
                        </div>

                        <!-- TITLE (DESKTOP) -->
                        <div class="hidden lg:block col-span-8 lg:col-span-6 lg:text-left">
                            <h3 class="font-bold leading-snug text-[18px] lg:text-[22px]"
                                :class="active === {{ $index }} ? 'text-white' : 'text-black'">

                                 <span
                                class="relative inline
                                after:content-['']
                                after:absolute
                                after:left-0
                                after:-bottom-1
                                after:h-[2px]
                                after:w-0
                                after:bg-current
                                after:transition-[width]
                                after:duration-300
                                after:ease-out"
                                :class="active === {{ $index }} ? 'after:w-full' : ''">

                                    {{ $blog->title }}
                                </span>
                            </h3>
                        </div>

                        <!-- DESKTOP IMAGE -->
                        <div class="hidden lg:flex col-span-3 justify-end overflow-hidden">
                            <div class="w-[200px]">
                                <img src="{{ asset($blog->featured_image) }}"
                                    class="w-full h-auto rounded-md shadow-lg
                                       transform-gpu transition-all duration-300 ease-out"
                                    :class="active === {{ $index }} ?
                                        'opacity-100 translate-y-0' :
                                        'opacity-0 translate-y-4'">
                            </div>
                        </div>

                        <!-- DESKTOP ARROW -->
                        <div class="hidden lg:flex col-span-1 justify-end text-xl"
                            :class="active === {{ $index }} ? 'text-white' : 'text-black'">
                            →
                        </div>

                        <!-- MOBILE -->
                        <div class="col-span-8 lg:col-span-6 lg:hidden">

                            <h3 class="font-bold leading-snug text-[18px]"
                                :class="active === {{ $index }} ? 'text-white' : 'text-black'">

                                <span
                                    class="relative inline
                                after:content-['']
                                after:absolute
                                after:left-1/2
                                after:-translate-x-1/2
                                after:-bottom-1
                                after:h-[2px]
                                after:w-0
                                after:bg-current
                                after:transition-[width]
                                after:duration-300"
                                    :class="active === {{ $index }} ? 'after:w-full' : ''">
                                    {{ $blog->title }}
                                </span>

                                <span> →</span>
                            </h3>

                            <div class="mt-4">
                                <img src="{{ asset($blog->featured_image) }}"
                                    class="w-full max-w-[56%] h-auto rounded-md border">
                            </div>

                        </div>

                    </div>
                </div>
            </a>
        @endforeach




    </section>

    <livewire:contact-form />

    <style>
.blog-content {
    margin: auto;
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4 {
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 12px;
}

.blog-content h2 {
    font-size: 26px;
    text-align: left;
}

.blog-content h3 {
    font-size: 22px;
}

.blog-content p {
    margin-bottom: 14px;
}

.blog-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 16px;
}

.blog-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-bottom: 16px;
}

.blog-content li {
    margin-bottom: 8px;
}

.blog-content strong {
    font-weight: 700;
}

.blog-content br {
    display: block;
    margin-bottom: 6px;
}

    </style>
</div>