@extends('frontend.default.layouts.app')

@section('meta_title', getSetting('web_name', config('app.name')).' - Beranda')
@section('meta_description', getSetting('meta_description', getSetting('web_description', '')))

@if ($featuredPost)
    @push('preloads')
        <link rel="preload" as="image" href="{{ $featuredPost->frontendImageUrl() }}" fetchpriority="high">
    @endpush
@endif

@section('content')
    <div class="section panel overflow-hidden dark:bg-gray-900 uc-dark">
        <div class="section-outer panel">
            <div class="container max-w-xl">
                <div class="section-inner panel vstack gap-4">
                    <div class="section-content">
                        <div class="block-layout grid-overlay-layout">
                            <div class="block-content">
                                <div class="row child-cols-12 md:child-cols-6 g-1 col-match">
                                    @if ($featuredPost)
                                        <div>
                                            <div>
                                                <article class="post type-post panel uc-transition-toggle vstack gap-2 lg:gap-3 h-100 rounded overflow-hidden">
                                                    <div class="post-media panel overflow-hidden h-100">
                                                        <div class="featured-image bg-gray-25 dark:bg-gray-800 h-100 d-none md:d-block">
                                                            <canvas class="h-100 w-100"></canvas>
                                                            <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ $featuredPost->frontendImageUrl() }}" alt="{{ $featuredPost->title }}" loading="eager" fetchpriority="high" decoding="async">
                                                        </div>
                                                        <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9 d-block md:d-none">
                                                            <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ $featuredPost->frontendImageUrl() }}" alt="{{ $featuredPost->title }}" loading="eager" fetchpriority="high" decoding="async">
                                                        </div>
                                                    </div>
                                                    <div class="position-cover bg-gradient-to-t from-black to-transparent opacity-90"></div>
                                                    <div class="post-header panel vstack justify-end items-start gap-1 sm:gap-2 p-2 sm:p-4 position-cover text-white">
                                                        <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                            <div>
                                                                <div class="post-category hstack gap-narrow fw-semibold">
                                                                    <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{ $featuredPost->category?->frontendUrl() ?? '#' }}">{{ $featuredPost->category?->title ?? 'News' }}</a>
                                                                </div>
                                                            </div>
                                                            <div class="sep d-none md:d-block">|</div>
                                                            <div class="d-none md:d-block">
                                                                <div class="post-date hstack gap-narrow">
                                                                    <span>{{ $featuredPost->publishedDateLabel() }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <h3 class="post-title h6 sm:h5 xl:h4 m-0 max-w-600px text-white text-truncate-2">
                                                            <a class="text-none text-white" href="{{ $featuredPost->frontendUrl() }}">{{ $featuredPost->title }}</a>
                                                        </h3>
                                                    </div>
                                                </article>
                                            </div>
                                        </div>
                                    @endif
                                    <div>
                                        <div class="panel">
                                            <div class="row child-cols-6 g-1">
                                                @foreach ($heroGridPosts as $heroPost)
                                                    <div class="{{ $loop->index > 1 ? 'd-none lg:d-block' : '' }}">
                                                        <article class="post type-post panel uc-transition-toggle vstack gap-2 lg:gap-3 rounded overflow-hidden">
                                                            <div class="post-media panel overflow-hidden">
                                                                <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-1x1 sm:ratio-4x3">
                                                                    <img class="media-cover image image uc-transition-scale-up uc-transition-opaque" src="{{ $heroPost->frontendListingImageUrl() }}" alt="{{ $heroPost->title }}" loading="eager" decoding="async">
                                                                </div>
                                                            </div>
                                                            <div class="position-cover bg-gradient-to-t from-black to-transparent opacity-90"></div>
                                                            <div class="post-header panel vstack justify-start items-start flex-column-reverse gap-1 p-2 position-cover text-white">
                                                                <h3 class="post-title fs-6 sm:h6 lg:fs-5 xl:h6 m-0 max-w-600px text-white text-truncate-2">
                                                                    <a class="text-none text-white" href="{{ $heroPost->frontendUrl() }}">{{ $heroPost->title }}</a>
                                                                </h3>
                                                                <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                    <div>
                                                                        <div class="post-category hstack gap-narrow fw-semibold">
                                                                            <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{ $heroPost->category?->frontendUrl() ?? '#' }}">{{ $heroPost->category?->title ?? 'News' }}</a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="sep d-none md:d-block">|</div>
                                                                    <div class="d-none md:d-block">
                                                                        <div class="post-date hstack gap-narrow">
                                                                            <span>{{ $heroPost->publishedDateLabel() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <a href="{{ $heroPost->frontendUrl() }}" class="position-cover"></a>
                                                        </article>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   

    <div class="image-links-panel panel overflow-hidden pt-2 swiper-parent">
        <div class="container max-w-xl">
            <div class="panel">
                <div class="swiper" data-uc-swiper="items: 3.25; gap: 8; freeMode: true; disable-class: d-none;" data-uc-swiper-s="items: 6;" data-uc-swiper-l="items: 8; gap: 16;">
                    <div class="swiper-wrapper">
                        @foreach ($categoryCards as $item)
                            <div class="swiper-slide">
                                <div class="panel uc-transition-toggle vstack text-center overflow-hidden rounded border border-white border-opacity-10">
                                    <figure class="featured-image m-0 ratio ratio-3x4 rounded-0 overflow-hidden bg-gray-25 dark:bg-gray-800">
                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ $item['cover']?->frontendListingImageUrl() ?? \App\Models\Post::frontendFallbackImageUrl() }}" alt="{{ $item['category']->title }}" loading="lazy" decoding="async">
                                        <a href="{{ $item['category']->frontendUrl() }}" class="position-cover" data-caption="{{ $item['category']->title }}"></a>
                                    </figure>
                                    <div class="overlay position-cover z-0 bg-black bg-opacity-50"></div>
                                    <div class="position-absolute bottom-0 vstack justify-end gap-1 lg:gap-2 h-3/4 w-100 p-2 bg-gradient-to-t {{ $item['gradient'] }} to-transparent">
                                        <span class="fs-7 lg:fs-6 fw-medium text-white m-0">{{ $item['category']->title }}</span>
                                        <a href="{{ $item['category']->frontendUrl() }}" class="btn btn-2xs border-white border-opacity-25 fs-7 text-white rounded-1">{{ $item['category']->posts_count }} </a>
                                    </div>
                                    <a class="position-cover text-none z-1" href="{{ $item['category']->frontendUrl() }}"></a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
     <div class="section panel overflow-hidden">
            <div class="section-outer panel py-5 lg:py-7">
                <div class="container max-w-xl">
                    <div class="section-inner panel vstack gap-4 lg:gap-5">
                        <div class="panel vstack items-center justify-center gap-2 text-center max-w-780px mx-auto">
                            <span class="fs-7 fw-semibold text-uppercase py-narrow px-2 rounded-pill bg-primary bg-opacity-10 text-primary dark:bg-white dark:bg-opacity-10 dark:text-white">
                                {{ $featuredVideo['eyebrow'] }}
                            </span>
                           
                            
                        </div>

                        <div class="panel rounded-3 overflow-hidden border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm">
                            <div class="ratio ratio-16x9 bg-gray-25 dark:bg-gray-800">
                                <iframe
                                    src="{{ $featuredVideo['embed_url'] }}"
                                    title="{{ $featuredVideo['title'] }}"
                                    loading="lazy"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    allowfullscreen
                                    referrerpolicy="strict-origin-when-cross-origin"
                                    style="border:0;width:100%;height:100%;"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @if ($primarySection && $primaryLead)
        <div class="section panel overflow-hidden">
            <div class="section-outer panel py-5 lg:py-8">
                <div class="container max-w-xl">
                    <div class="section-inner">
                        <div class="block-layout grid-layout vstack gap-3 lg:gap-4 panel overflow-hidden">
                            <div class="block-header panel">
                                <h2 class="h5 lg:h4 fw-medium m-0 text-inherit hstack">
                                    <a class="text-none dark:text-white hover:text-primary duration-150" href="{{ $primarySection->frontendUrl() }}">{{ $primarySection->title }}</a>
                                    <i class="icon-2 lg:icon-3 unicon-chevron-right opacity-40"></i>
                                </h2>
                            </div>
                            <div class="block-content">
                                <div class="panel row child-cols-12 md:child-cols gy-4 md:gx-3 xl:gx-4">
                                    <div class="col-12 md:col-6 lg:col-7">
                                        <div class="h-100">
                                            <article class="post type-post panel uc-transition-toggle vstack gap-2 lg:gap-3 h-100 overflow-hidden uc-dark">
                                                <div class="post-media panel overflow-hidden h-100">
                                                    <div class="featured-image bg-gray-25 dark:bg-gray-800 h-100 d-none md:d-block">
                                                        <canvas class="h-100 w-100"></canvas>
                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ $primaryLead->frontendImageUrl() }}" alt="{{ $primaryLead->title }}" loading="lazy" decoding="async">
                                                    </div>
                                                    <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-1x1 d-block md:d-none">
                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ $primaryLead->frontendImageUrl() }}" alt="{{ $primaryLead->title }}" loading="lazy" decoding="async">
                                                    </div>
                                                </div>
                                                <div class="position-cover bg-gradient-to-t from-black to-transparent opacity-90"></div>
                                                <div class="post-header panel vstack justify-end items-start gap-1 sm:gap-2 p-2 sm:p-4 position-cover text-white">
                                                    <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                        <div>
                                                            <div class="post-category hstack gap-narrow fw-semibold">
                                                                <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{ $primaryLead->category?->frontendUrl() ?? '#' }}">{{ $primaryLead->category?->title ?? 'News' }}</a>
                                                            </div>
                                                        </div>
                                                        <div class="sep d-none md:d-block">|</div>
                                                        <div class="d-none md:d-block">
                                                            <div class="post-date hstack gap-narrow">
                                                                <span>{{ $primaryLead->publishedDateLabel() }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <h3 class="post-title h6 lg:h5 m-0 max-w-600px text-white text-truncate-2">
                                                        <a class="text-none text-white" href="{{ $primaryLead->frontendUrl() }}">{{ $primaryLead->title }}</a>
                                                    </h3>
                                                </div>
                                            </article>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="row child-cols-12 g-4 sep-x">
                                            @foreach ($primarySide as $post)
                                                <div>
                                                    <article class="post type-post panel uc-transition-toggle">
                                                        <div class="row child-cols g-2" data-uc-grid>
                                                            <div class="col-auto">
                                                                <div class="post-media panel overflow-hidden max-w-150px min-w-100px lg:min-w-150px">
                                                                    <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9">
                                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ $post->frontendListingImageUrl() }}" alt="{{ $post->title }}" loading="lazy" decoding="async">
                                                                    </div>
                                                                    <a href="{{ $post->frontendUrl() }}" class="position-cover"></a>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <div class="post-header panel vstack justify-between gap-1">
                                                                    <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                        <div>
                                                                            <div class="post-category hstack gap-narrow fw-semibold">
                                                                                <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{ $post->category?->frontendUrl() ?? '#' }}">{{ $post->category?->title ?? 'News' }}</a>
                                                                            </div>
                                                                        </div>
                                                                        <div class="sep d-none md:d-block">|</div>
                                                                        <div class="d-none md:d-block">
                                                                            <div class="post-date hstack gap-narrow">
                                                                                <span>{{ $post->publishedDateLabel() }}</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <h3 class="post-title fs-6 lg:h6 m-0 text-truncate-2">
                                                                        <a class="text-none hover:text-primary duration-150" href="{{ $post->frontendUrl() }}">{{ $post->title }}</a>
                                                                    </h3>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </article>
                                                </div>
                                            @endforeach
                                            <a href="{{ $primarySection->frontendUrl() }}" class="animate-btn gap-0 btn btn-sm btn-alt-primary bg-transparent dark:text-white border w-100 mt-4">
                                                <span>See all {{ $primarySection->title }}</span>
                                                <i class="icon icon-1 unicon-chevron-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if ($featuredVideo['enabled'])
       
    @elseif ($homeTopAd)
        <div class="section panel overflow-hidden">
            <div class="section-outer panel py-4 lg:py-5">
                <div class="container max-w-xl">
                    <div class="section-inner">
                        <div class="panel overflow-hidden rounded-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm">
                            @if ($homeTopAd->link)
                                <a class="text-none d-block" href="{{ $homeTopAd->link }}" target="_blank" rel="noopener noreferrer" aria-label="{{ $homeTopAd->title }}">
                                    <img class="d-block w-100" src="{{ $homeTopAd->imageUrl() }}" alt="{{ $homeTopAd->title }}" loading="lazy" decoding="async">
                                </a>
                            @else
                                <img class="d-block w-100" src="{{ $homeTopAd->imageUrl() }}" alt="{{ $homeTopAd->title }}" loading="lazy" decoding="async">
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="section panel overflow-hidden">
        <div class="section-outer panel py-5 lg:py-8">
            <div class="container max-w-xl">
                <div class="section-inner">
                    <div class="row child-cols-12 lg:child-cols-6 g-4 lg:gx-6 xl:gy-8" data-uc-grid>
                        @foreach ($twoColumnSections as $section)
                            @if ($section['category'] && $section['posts']->isNotEmpty())
                                <div>
                                    <div class="block-layout grid-layout vstack gap-3 lg:gap-4 panel overflow-hidden">
                                        <div class="block-header panel">
                                            <h2 class="h5 lg:h4 fw-medium m-0 text-inherit hstack">
                                                <a class="text-none dark:text-white hover:text-primary duration-150" href="{{ $section['category']->frontendUrl() }}">{{ $section['category']->title }}</a>
                                                <i class="icon-2 lg:icon-3 unicon-chevron-right opacity-40"></i>
                                            </h2>
                                        </div>
                                        <div class="block-content">
                                            <div class="row child-cols-6 g-2 gy-3 md:gx-3 md:gy-4">
                                                @foreach ($section['posts'] as $post)
                                                    <div>
                                                        <article class="post type-post panel uc-transition-toggle vstack gap-1 lg:gap-2">
                                                            <div class="post-media panel overflow-hidden">
                                                                <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9">
                                                                    <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ $post->frontendListingImageUrl() }}" alt="{{ $post->title }}" loading="lazy" decoding="async">
                                                                </div>
                                                                <a href="{{ $post->frontendUrl() }}" class="position-cover"></a>
                                                            </div>
                                                            <div class="post-header panel vstack gap-1">
                                                                <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                    <div>
                                                                        <div class="post-category hstack gap-narrow fw-semibold">
                                                                            <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{ $post->category?->frontendUrl() ?? '#' }}">{{ $post->category?->title ?? 'News' }}</a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="sep d-none md:d-block">|</div>
                                                                    <div class="d-none md:d-block">
                                                                        <div class="post-date hstack gap-narrow">
                                                                            <span>{{ $post->publishedDateLabel() }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <h3 class="post-title fs-6 lg:h6 m-0 text-truncate-2 mb-1">
                                                                    <a class="text-none hover:text-primary duration-150" href="{{ $post->frontendUrl() }}">{{ $post->title }}</a>
                                                                </h3>
                                                            </div>
                                                        </article>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div class="block-footer cstack lg:mt-2">
                                            <a href="{{ $section['category']->frontendUrl() }}" class="animate-btn gap-0 btn btn-sm btn-alt-primary bg-transparent dark:text-white border w-100 md:w-auto">
                                                <span>See all {{ $section['category']->title }}</span>
                                                <i class="icon icon-1 unicon-chevron-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if ($darkSection && $darkSectionPosts->isNotEmpty())
        <div class="section panel overflow-hidden swiper-parent uc-dark">
            <div class="section-outer panel py-5 lg:py-8 bg-gray-25 dark:bg-gray-800 dark:text-white">
                <div class="container max-w-xl">
                    <div class="section-inner panel vstack gap-4">
                        <div class="section-header panel">
                            <h2 class="h5 lg:h4 fw-medium m-0 text-inherit hstack">
                                <a class="text-none dark:text-white hover:text-primary duration-150" href="{{ $darkSection?->frontendUrl() ?? '#' }}">{{ $darkSection?->title ?: 'Highlights' }}</a>
                                <i class="icon-2 lg:icon-3 unicon-chevron-right opacity-40"></i>
                            </h2>
                        </div>
                        <div class="section-content">
                            <div class="swiper" data-uc-swiper="items: 2; gap: 16; autoplay: 2500; dots: .dot-nav; next: .nav-next; prev: .nav-prev; disable-class: opacity-40;" data-uc-swiper-s="items: 3;" data-uc-swiper-m="gap: 24;" data-uc-swiper-l="items: 3; gap: 32;">
                                <div class="swiper-wrapper">
                                    @foreach ($darkSectionPosts as $post)
                                        <div class="swiper-slide">
                                            <div>
                                                <article class="post type-post panel vstack gap-1 lg:gap-2">
                                                    <div class="post-media panel overflow-hidden">
                                                        <div class="featured-image bg-gray-700 ratio ratio-16x9">
                                                            <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ $post->frontendListingImageUrl() }}" alt="{{ $post->title }}" loading="lazy" decoding="async">
                                                        </div>
                                                        <div class="has-video-overlay position-absolute top-0 end-0 w-150px h-150px bg-gradient-45 from-transparent via-transparent to-black opacity-50"></div>
                                                        <span class="cstack has-video-icon position-absolute top-0 end-0 fs-6 w-40px h-40px text-white">
                                                            <i class="icon-narrow unicon-play-filled-alt"></i>
                                                        </span>
                                                        <a href="{{ $post->frontendUrl() }}" class="position-cover"></a>
                                                    </div>
                                                    <div class="post-header panel vstack gap-1">
                                                        <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                            <div>
                                                                <div class="post-category hstack gap-narrow fw-semibold">
                                                                    <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{ $post->category?->frontendUrl() ?? '#' }}">{{ $post->category?->title ?? 'News' }}</a>
                                                                </div>
                                                            </div>
                                                            <div class="sep d-none md:d-block">|</div>
                                                            <div class="d-none md:d-block">
                                                                <div class="post-date hstack gap-narrow">
                                                                    <span>{{ $post->publishedDateLabel() }}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <h3 class="post-title fs-6 lg:h6 m-0 text-truncate-2 mb-1">
                                                            <a class="text-none hover:text-primary duration-150" href="{{ $post->frontendUrl() }}">{{ $post->title }}</a>
                                                        </h3>
                                                    </div>
                                                </article>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="hstack gap-1 mt-4">
                                    <div class="swiper-nav nav-prev btn btn-alt-primary bg-transparent dark:text-white rounded-0 p-0 border w-32px lg:w-40px h-32px lg:h-40px shadow-sm">
                                        <i class="icon-1 unicon-chevron-left"></i>
                                    </div>
                                    <div class="swiper-nav nav-next btn btn-alt-primary bg-transparent dark:text-white rounded-0 p-0 border w-32px lg:w-40px h-32px lg:h-40px shadow-sm">
                                        <i class="icon-1 unicon-chevron-right"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if ($finalSection && $finalLead)
        <div class="section panel overflow-hidden">
            <div class="section-outer panel py-5 lg:py-8">
                <div class="container max-w-xl">
                    <div class="section-inner">
                        <div class="block-layout grid-layout vstack gap-3 lg:gap-4 panel overflow-hidden">
                            <div class="block-header panel">
                                <h2 class="h5 lg:h4 fw-medium m-0 text-inherit hstack">
                                    <a class="text-none dark:text-white hover:text-primary duration-150" href="{{ $finalSection->frontendUrl() }}">{{ $finalSection->title }}</a>
                                    <i class="icon-2 lg:icon-3 unicon-chevron-right opacity-40"></i>
                                </h2>
                            </div>
                            <div class="block-content">
                                <div class="panel row child-cols-12 md:child-cols gy-4 md:gx-3 xl:gx-4">
                                    <div class="col-12 md:col-6 lg:col-7">
                                        <div class="h-100">
                                            <article class="post type-post panel uc-transition-toggle vstack gap-2 lg:gap-3 h-100 overflow-hidden uc-dark">
                                                <div class="post-media panel overflow-hidden h-100">
                                                    <div class="featured-image bg-gray-25 dark:bg-gray-800 h-100 d-none md:d-block">
                                                        <canvas class="h-100 w-100"></canvas>
                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ $finalLead->frontendImageUrl() }}" alt="{{ $finalLead->title }}" loading="lazy" decoding="async">
                                                    </div>
                                                    <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-1x1 d-block md:d-none">
                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ $finalLead->frontendImageUrl() }}" alt="{{ $finalLead->title }}" loading="lazy" decoding="async">
                                                    </div>
                                                </div>
                                                <div class="position-cover bg-gradient-to-t from-black to-transparent opacity-90"></div>
                                                <div class="post-header panel vstack justify-end items-start gap-1 sm:gap-2 p-2 sm:p-4 position-cover text-white">
                                                    <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                        <div>
                                                            <div class="post-category hstack gap-narrow fw-semibold">
                                                                <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{ $finalLead->category?->frontendUrl() ?? '#' }}">{{ $finalLead->category?->title ?? 'News' }}</a>
                                                            </div>
                                                        </div>
                                                        <div class="sep d-none md:d-block">|</div>
                                                        <div class="d-none md:d-block">
                                                            <div class="post-date hstack gap-narrow">
                                                                <span>{{ $finalLead->publishedDateLabel() }}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <h3 class="post-title h6 lg:h5 m-0 max-w-600px text-white text-truncate-2">
                                                        <a class="text-none text-white" href="{{ $finalLead->frontendUrl() }}">{{ $finalLead->title }}</a>
                                                    </h3>
                                                </div>
                                            </article>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="row child-cols-12 g-4 sep-x">
                                            @foreach ($finalSide as $post)
                                                <div>
                                                    <article class="post type-post panel uc-transition-toggle">
                                                        <div class="row child-cols g-2" data-uc-grid>
                                                            <div class="col-auto">
                                                                <div class="post-media panel overflow-hidden max-w-150px min-w-100px lg:min-w-150px">
                                                                    <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9">
                                                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ $post->frontendListingImageUrl() }}" alt="{{ $post->title }}" loading="lazy" decoding="async">
                                                                    </div>
                                                                    <a href="{{ $post->frontendUrl() }}" class="position-cover"></a>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <div class="post-header panel vstack justify-between gap-1">
                                                                    <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                                        <div>
                                                                            <div class="post-category hstack gap-narrow fw-semibold">
                                                                                <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{ $post->category?->frontendUrl() ?? '#' }}">{{ $post->category?->title ?? 'News' }}</a>
                                                                            </div>
                                                                        </div>
                                                                        <div class="sep d-none md:d-block">|</div>
                                                                        <div class="d-none md:d-block">
                                                                            <div class="post-date hstack gap-narrow">
                                                                                <span>{{ $post->publishedDateLabel() }}</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <h3 class="post-title fs-6 lg:h6 m-0 text-truncate-2">
                                                                        <a class="text-none hover:text-primary duration-150" href="{{ $post->frontendUrl() }}">{{ $post->title }}</a>
                                                                    </h3>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </article>
                                                </div>
                                            @endforeach
                                            <a href="{{ $finalSection->frontendUrl() }}" class="animate-btn gap-0 btn btn-sm btn-alt-primary bg-transparent dark:text-white border w-100 mt-4">
                                                <span>See all {{ $finalSection->title }}</span>
                                                <i class="icon icon-1 unicon-chevron-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="section panel overflow-hidden">
        <div class="section-outer panel">
            <div class="container max-w-xl">
                <div class="section-inner">
                    @if ($homeBottomAd)
                        @if ($homeBottomAd->link)
                            <a class="text-none d-block" href="{{ $homeBottomAd->link }}" target="_blank" rel="noopener noreferrer" aria-label="{{ $homeBottomAd->title }}">
                                <img class="d-block w-100" src="{{ $homeBottomAd->imageUrl() }}" alt="{{ $homeBottomAd->title }}" loading="lazy" decoding="async">
                            </a>
                        @else
                            <img class="d-block w-100" src="{{ $homeBottomAd->imageUrl() }}" alt="{{ $homeBottomAd->title }}" loading="lazy" decoding="async">
                        @endif
                    @else
                        <a class="text-none" href="{{ route('home') }}">
                           
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div id="latest-news" class="latest-news section panel overflow-hidden">
        <div class="section-outer panel py-5 lg:py-8">
            <div class="container max-w-xl">
                <div class="section-inner panel vstack gap-4">
                    <div class="section-header panel vstack items-center justify-center text-center gap-1">
                        <h2 class="h5 lg:h4 fw-medium m-0 text-inherit hstack">
                            <span>Latest news</span>
                        </h2>
                    </div>
                    <div class="section-content">
                        <div class="row child-cols-12 sm:child-cols-6 md:child-cols-4 lg:child-cols-3 g-2 gy-4 md:g-3 md:gy-5 xl:g-4 xl:gy-6">
                            @foreach ($latestNewsPosts as $post)
                                <div>
                                    <article class="post type-post panel uc-transition-toggle vstack gap-1 lg:gap-2">
                                        <div class="post-media panel overflow-hidden">
                                            <div class="featured-image bg-gray-25 dark:bg-gray-800 ratio ratio-16x9">
                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ $post->frontendListingImageUrl() }}" alt="{{ $post->title }}" loading="lazy" decoding="async">
                                            </div>
                                            <a href="{{ $post->frontendUrl() }}" class="position-cover"></a>
                                        </div>
                                        <div class="post-header panel vstack gap-1">
                                            <div class="post-meta panel hstack justify-start gap-1 fs-7 ft-tertiary fw-medium text-gray-900 dark:text-white text-opacity-60 d-none md:d-flex z-1">
                                                <div>
                                                    <div class="post-category hstack gap-narrow fw-semibold">
                                                        <a class="fw-medium text-none text-primary dark:text-primary-400" href="{{ $post->category?->frontendUrl() ?? '#' }}">{{ $post->category?->title ?? 'News' }}</a>
                                                    </div>
                                                </div>
                                                <div class="sep d-none md:d-block">|</div>
                                                <div class="d-none md:d-block">
                                                    <div class="post-date hstack gap-narrow">
                                                        <span>{{ $post->publishedDateLabel() }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <h3 class="post-title fs-6 lg:h6 m-0 text-truncate-2 mb-1">
                                                <a class="text-none hover:text-primary duration-150" href="{{ $post->frontendUrl() }}">{{ $post->title }}</a>
                                            </h3>
                                        </div>
                                    </article>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="section-footer cstack lg:mt-4">
                        <a href="{{ route('search') }}" class="animate-btn gap-0 btn btn-sm btn-alt-primary bg-transparent dark:text-white border w-100 md:w-auto">
                            <span>See all latest news</span>
                            <i class="icon icon-1 unicon-chevron-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection