<div>

    
    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($latestBlog): ?>
        <?php $blog = $latestBlog; ?>

        <section class="bg-[#d7d7d7] overflow-hidden py-20">
            <div class="mx-auto max-w-8xl">

                <h1
                    class="text-[72px] px-10 sm:text-[96px] md:text-[100px]
                           font-black tracking-tight text-neutral-900">
                    BLOGS
                </h1>

                <div class="mt-12 grid grid-cols-1 md:grid-cols-12 gap-12 items-start">

                    
                    <div class="md:col-span-6 px-10">

                        <div class="text-sm text-neutral-700">
                            <?php echo e(\Carbon\Carbon::parse($blog->publish_date)->format('M Y')); ?>

                        </div>

                        <div class="mt-4 h-px w-full bg-neutral-500/40"></div>
<h2
    class="mt-8 text-[22px] lg:text-[28px]
           font-extrabold leading-tight text-neutral-900 text-left">
    <?php echo e($blog->title); ?>

</h2>


                       <p class="mt-7 max-w-md text-[16px] lg:text-[18px] leading-relaxed text-neutral-700 text-justify">
                            <?php echo e(\Illuminate\Support\Str::limit(strip_tags($blog->short_description ?? $blog->content), 260)); ?>

                    </p>


                       <a href="/blogs/<?php echo e($blog->slug); ?>"
   class="mt-10 inline-flex items-center gap-2
          text-[16px] lg:text-[18px] font-bold text-neutral-900 hover:opacity-80">
    Read Article →
</a>

                    </div>

                    
                    <div class="md:col-span-6 flex items-center justify-end">
                        <img src="<?php echo e(asset($blog->hero_image ?? $blog->featured_image)); ?>"
                            class="w-full max-w-[900px] object-contain" alt="<?php echo e($blog->title); ?>">
                    </div>

                </div>
            </div>
        </section>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>


    
    <section x-data="{ active: null }" class="bg-white">

        <div class="border-t border-black">

            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $blogs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $blog): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a wire:key="blog-<?php echo e($blog->id); ?>" href="/blogs/<?php echo e($blog->slug); ?>"
                    @mouseenter="active = <?php echo e($index); ?>" @mouseleave="active = null" class="block">

                    <div class="border-b border-black transition-colors duration-300"
                        :class="active === <?php echo e($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">

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

                            </div>

                            <div class="hidden lg:block col-span-8 lg:col-span-6">
                               <h3 class="font-bold leading-snug text-[18px] lg:text-[22px]"
                                :class="active === <?php echo e($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 === <?php echo e($index); ?> ? 'after:w-full' : ''">

                                    <?php echo e($blog->title); ?>

                                </span>
                            </h3>
                            </div>

                         <!-- DESKTOP IMAGE -->
                            <div class="hidden lg:flex col-span-3 justify-end">
                                <div class="w-[200px]">
                                    <img src="<?php echo e(asset($blog->featured_image)); ?>"
                                        class="w-full rounded-md shadow-lg transition-all duration-300"
                                        :class="active === <?php echo e($index); ?> ?
                                            'opacity-100 translate-y-0' :
                                            'opacity-0 translate-y-4'">
                                </div>
                            </div>

                            <div class="hidden lg:flex col-span-1 justify-end text-xl"
                                :class="active === <?php echo e($index); ?> ? 'text-white' : 'text-black'">
                                →
                            </div>

                            <div class="col-span-8 lg:hidden">
                               <h3
    class="font-bold leading-snug text-[18px]
           flex items-start gap-1
           sm:inline-block"
    :class="active === <?php echo e($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"
        :class="active === <?php echo e($index); ?> ? 'after:w-full' : ''">

        <?php echo e($blog->title); ?>

    </span>

    <span class="shrink-0 leading-none mt-[2px]">→</span>
</h3>


                                <div class="mt-4">
                                    <img src="<?php echo e(asset($blog->featured_image)); ?>"
                                        class="w-full max-w-[56%] rounded-md border">
                                </div>
                            </div>

                        </div>
                    </div>
                </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

        </div>

    </section>

    
    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($blogs->count() < $totalBlogs): ?>
        <div class="mx-auto px-5 lg:px-16 py-10">
            <button wire:click="loadMore" wire:loading.attr="disabled"
                class="group inline-flex items-center gap-2
           text-[18px] lg:text-[22px]
           font-bold
           hover:opacity-70
           transition-all cursor-pointer">


                
                <span wire:loading.remove class="flex items-center gap-2">
                    Load More
                    <span class="transform transition-transform group-hover:translate-y-1">
                        ↓
                    </span>
                </span>

                
                <span wire:loading class="flex items-center gap-2">
                    Loading
                    <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"
                            fill="none" stroke-dasharray="31.4" stroke-dashoffset="15.7" />
                    </svg>
                </span>

            </button>
        </div>
    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    <?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('contact-form', []);

$key = null;

$key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-4120712572-0', null);

$__html = app('livewire')->mount($__name, $__params, $key);

echo $__html;

unset($__html);
unset($__name);
unset($__params);
unset($__split);
if (isset($__slots)) unset($__slots);
?>
</div>
<?php /**PATH /home1/eggfirst/public_html/resources/views/livewire/blogs/blog-index.blade.php ENDPATH**/ ?>