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







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