@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)
@section('keywords', $keywords)
@section('load_webgl_hover', true)

@php
    $settingsService = app(\App\Services\SettingsService::class);
    $siteName = $settingsService->get('site_name', config('app.name'));
    $siteDescription = $settingsService->get('site_description', 'Innovative IT solutions for modern organizations.');
    $contactPhone = $settingsService->get('contact_phone', '+263 78 691 2342');
    $contactPhones = collect(preg_split('/\s*(?:\/|,|;|\r\n|\r|\n)\s*/', (string) $contactPhone))
        ->map(fn ($phone) => trim($phone))
        ->filter()
        ->values();
    $contactEmail = $settingsService->get('contact_email', config('mail.from.address'));
    $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
    $storedAsset = function (?string $path, string $fallback) use ($assetPath) {
        if (!$path) {
            return $assetPath($fallback);
        }

        $path = trim($path);

        if (preg_match('/^(https?:)?\/\//i', $path) || str_starts_with($path, '/')) {
            return $path;
        }

        if (str_starts_with($path, 'storage/')) {
            return asset($path);
        }

        if (str_starts_with($path, 'settings/') || str_starts_with($path, 'uploads/')) {
            return asset('storage/' . $path);
        }

        return $assetPath($path);
    };
    $homeImage = fn (?string $path) => $storedAsset($path, 'images/service/hm1-img01.webp');
    $settingEnabled = fn (string $key, bool $default = true) => filter_var($settingsService->get($key, $default ? 'true' : 'false'), FILTER_VALIDATE_BOOLEAN);
    $normaliseHref = fn (?string $href, string $fallback) => trim((string) $href) !== '' ? trim((string) $href) : $fallback;
    $heroGeneratedImages = [
        'engineers' => 'storage/uploads/generated/ndarama-hero-engineers.png',
        'support' => 'storage/uploads/generated/ndarama-hero-support.png',
    ];
    $homeHeroSlides = collect([
        ['index' => 1, 'fallback_image' => 'images/hero/hm1-bg01.webp', 'fallback_url' => route('frontend.about')],
        ['index' => 2, 'fallback_image' => $heroGeneratedImages['engineers'], 'fallback_url' => route('frontend.contact')],
        ['index' => 3, 'fallback_image' => $heroGeneratedImages['support'], 'fallback_url' => route('frontend.services.index')],
    ])->filter(fn ($slide) => $settingEnabled("home_hero_slide_{$slide['index']}_enabled", true))
        ->map(fn ($slide) => [
            'number' => str_pad((string) $slide['index'], 2, '0', STR_PAD_LEFT),
            'label' => $settingsService->get("home_hero_slide_{$slide['index']}_label", 'INNOVATIVE SOLUTIONS'),
            'title' => $settingsService->get("home_hero_slide_{$slide['index']}_title", $slide['index'] === 1 ? 'Innovative IT' : ($slide['index'] === 2 ? 'Scalable Digital' : 'Reliable CMS')),
            'accent' => $settingsService->get("home_hero_slide_{$slide['index']}_accent", $slide['index'] === 1 ? 'Business' : ($slide['index'] === 2 ? 'Solutions' : 'Platforms')),
            'body' => $settingsService->get("home_hero_slide_{$slide['index']}_body") ?: $siteDescription,
            'button_label' => $settingsService->get("home_hero_slide_{$slide['index']}_button_label", 'Discover More'),
            'url' => $normaliseHref($settingsService->get("home_hero_slide_{$slide['index']}_button_url"), $slide['fallback_url']),
            'image' => $storedAsset($settingsService->get("home_hero_slide_{$slide['index']}_image"), $slide['fallback_image']),
        ])->values();
    if ($homeHeroSlides->isEmpty()) {
        $homeHeroSlides = collect([[
            'number' => '01',
            'label' => 'INNOVATIVE SOLUTIONS',
            'title' => 'Innovative IT',
            'accent' => 'Business',
            'body' => $siteDescription,
            'button_label' => 'Discover More',
            'url' => route('frontend.about'),
            'image' => $assetPath('images/hero/hm1-bg01.webp'),
        ]]);
    }
@endphp

@push('head')
    @if($homeHeroSlides->isNotEmpty())
        <link rel="preload" as="image" href="{{ $homeHeroSlides->first()['image'] }}" fetchpriority="high">
    @endif
@endpush

@php
    $partnerLogos = collect(range(1, 6))
        ->filter(fn ($index) => $settingEnabled("home_partner_{$index}_enabled", true))
        ->map(fn ($index) => [
            'name' => $settingsService->get("home_partner_{$index}_name", "Partner {$index}"),
            'url' => $normaliseHref($settingsService->get("home_partner_{$index}_url"), '#'),
            'logo' => $storedAsset($settingsService->get("home_partner_{$index}_logo"), 'images/brands/' . str_pad((string) $index, 2, '0', STR_PAD_LEFT) . '.webp'),
        ])
        ->filter(fn ($partner) => !empty($partner['logo']))
        ->values();
    if ($partnerLogos->isEmpty()) {
        $partnerLogos = collect(['01', '02', '03', '04', '05', '06'])->map(fn ($brand) => [
            'name' => "Partner {$brand}",
            'url' => '#',
            'logo' => $assetPath("images/brands/{$brand}.webp"),
        ]);
    }
    $generatedWebsiteImages = [
        'collaboration' => 'storage/uploads/generated/ndarama-collaboration.png',
        'engineer' => 'storage/uploads/generated/ndarama-engineer.png',
        'support' => 'storage/uploads/generated/ndarama-support.png',
    ];
    $themeArrow = <<<'HTML'
<span class="arrow-all">
    <i>
        <svg width="16" height="19" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2 6H10M10 6L6 2M10 6L6 10" stroke="#050505" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <svg width="16" height="19" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2 6H10M10 6L6 2M10 6L6 10" stroke="#050505" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </i>
</span>
HTML;
    $themeArrowWhite = <<<'HTML'
<span class="arrow-all-2">
    <i>
        <svg width="11" height="12" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white"></path>
        </svg>
        <svg width="11" height="12" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white"></path>
        </svg>
    </i>
</span>
HTML;
    $fallbackServices = collect([
        ['name' => 'Android and IOS Apps Designing', 'category' => 'Coding', 'description' => 'Scalable app experiences for teams, customers, and operations.', 'image' => 'images/service/hm1-img01.webp', 'url' => route('frontend.services.index')],
        ['name' => 'Digital Transformation and Automation', 'category' => 'Automation', 'description' => 'Connected workflows that reduce manual effort and unlock better visibility.', 'image' => 'images/service/hm1-img02.webp', 'url' => route('frontend.services.index')],
        ['name' => 'Web and Mobile UI/UX Designing', 'category' => 'Designing', 'description' => 'Clean product interfaces shaped around real users and business goals.', 'image' => 'images/service/hm1-img03.webp', 'url' => route('frontend.services.index')],
    ]);
    $serviceItems = $featuredServices->count()
        ? $featuredServices->take(3)->map(fn ($service) => [
            'name' => $service->name,
            'category' => optional($service->category)->name ?? 'Service',
            'description' => $service->short_description ?: \Illuminate\Support\Str::limit(strip_tags($service->description), 150),
            'image' => $service->image ? 'storage/' . $service->image : null,
            'url' => route('frontend.services.show', $service),
            'features' => $service->features_list,
        ])
        : $fallbackServices;
    $fallbackProjects = collect([
        ['title' => 'Webx - Modern Website', 'tag' => 'Development', 'description' => 'A modern web platform with clear journeys and measurable outcomes.', 'image' => 'images/project/hm1-img01.webp', 'url' => route('frontend.projects.index')],
        ['title' => 'Business Strategy', 'tag' => 'Business', 'description' => 'Structured digital strategy for better teams, tools, and decisions.', 'image' => 'images/project/hm1-img02.webp', 'url' => route('frontend.projects.index')],
        ['title' => '3D Product Designing', 'tag' => 'Designing', 'description' => 'Product presentation and design systems for stronger brand experiences.', 'image' => 'images/project/hm1-img03.webp', 'url' => route('frontend.projects.index')],
        ['title' => 'Business Development', 'tag' => 'Development', 'description' => 'Growth-focused systems for operations, sales, and service delivery.', 'image' => 'images/project/hm1-img04.webp', 'url' => route('frontend.projects.index')],
    ]);
    $projectItems = $featuredProjects->count()
        ? $featuredProjects->take(4)->map(fn ($project, $index) => [
            'title' => $project->title,
            'tag' => optional($project->department)->name ?? $project->status_label,
            'description' => \Illuminate\Support\Str::limit(strip_tags($project->description ?: $project->content), 110),
            'image' => $project->featured_image ? 'storage/' . $project->featured_image : 'images/project/hm1-img0' . (($index % 4) + 1) . '.webp',
            'url' => route('frontend.projects.show', $project->slug),
        ])
        : $fallbackProjects;
    $fallbackTeam = collect([
        ['name' => 'Ndarama Engineering Team', 'position' => 'Software Delivery', 'image' => $generatedWebsiteImages['engineer'], 'url' => route('frontend.teams.index')],
        ['name' => 'Ndarama Product Team', 'position' => 'Digital Solutions', 'image' => $generatedWebsiteImages['collaboration'], 'url' => route('frontend.teams.index')],
        ['name' => 'Ndarama Support Team', 'position' => 'Client Success', 'image' => $generatedWebsiteImages['support'], 'url' => route('frontend.teams.index')],
    ]);
    $teamItems = $featuredTeams->count()
        ? $featuredTeams->take(3)->map(fn ($member, $index) => [
            'name' => $member->name,
            'position' => $member->position ?: optional($member->department)->name ?: 'Team Member',
            'image' => $member->image ? 'storage/' . $member->image : 'images/team/hm1-img0' . (($index % 3) + 1) . '.webp',
            'url' => route('frontend.teams.show', $member),
            'linkedin' => $member->linkedin,
            'twitter' => $member->twitter,
        ])
        : $fallbackTeam;
    $founderProfile = $featuredTeams->first(function ($member) {
        $position = strtolower((string) $member->position);

        return str_contains($position, 'chief executive')
            || str_contains($position, 'ceo')
            || str_contains($position, 'founder');
    }) ?: $featuredTeams->first();
    $fallbackNews = collect([
        ['title' => 'Top 10 Most Popular Tools For Marketing', 'date' => '16 Aug, 2025', 'image' => 'images/blog/blog01.webp', 'url' => route('frontend.news.index')],
        ['title' => 'Business Growing Tips for Sales Globally', 'date' => '17 Aug, 2025', 'image' => 'images/blog/blog02.webp', 'url' => route('frontend.news.index')],
        ['title' => 'Installation Sales Navigator Extension on Chrome', 'date' => '29 Aug, 2025', 'image' => 'images/blog/blog03.webp', 'url' => route('frontend.news.index')],
    ]);
    $newsItems = $featuredNews->count()
        ? $featuredNews->take(3)->map(fn ($news, $index) => [
            'title' => $news->title,
            'date' => optional($news->published_at)->format('d M, Y'),
            'image' => $news->featured_image ? 'storage/' . $news->featured_image : 'images/blog/blog0' . (($index % 3) + 1) . '.webp',
            'url' => route('frontend.news.show', $news->slug),
        ])
        : $fallbackNews;
@endphp

@push('styles')
    <style>
        .cms-home-cover {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .cms-home-service-frame {
            width: 700px;
            max-width: 100%;
            aspect-ratio: 700 / 479;
            border-radius: 20px;
        }

        .tv-service-section .tv-service-inner .tv-service-item .service-left {
            flex: 0 1 700px;
            max-width: 58%;
        }

        .cms-home-project-card .image-wrapper {
            aspect-ratio: 432 / 520;
            background: #f6f1e5;
        }

        .cms-home-team-frame {
            aspect-ratio: 384 / 420;
            background: #f6f1e5;
        }

        .cms-home-team-cover {
            object-position: center top;
        }

        .cms-home-blog-frame {
            aspect-ratio: 392 / 284;
            background: #f6f1e5;
        }

        @media (max-width: 912px) {
            .tv-service-section .tv-service-inner .tv-service-item .service-left {
                flex: 1 1 auto;
                width: 100%;
                max-width: 100%;
            }

            .cms-home-service-frame {
                width: 100%;
                aspect-ratio: 700 / 479;
            }
        }

        /* ScrollTrigger pin needs visible overflow on desktop */
        @media (min-width: 993px) {
            .tv-service-section.cms-service-pin-ready,
            .tv-service-section.cms-service-pin-ready .tv-service-inner {
                overflow: visible !important;
            }
        }

    </style>
@endpush

@section('content')
    {{-- Hero banner with slider content and primary CTA --}}
    <section class="tv-hero-section overflow-hidden z-2 bg-light">
        <div class="hero-inner mx-30 ml-mx-0 position-relative">
            <div class="container-fluid px-0">
                <div class="hero-slider position-relative swiper">
                    <div class="swiper-wrapper">
                        @foreach($homeHeroSlides as $slide)
                            <div class="swiper-slide {{ $loop->even ? 'blurSkew' : 'pageTurn' }}">
                                <div class="hero-area position-relative">
                                    <div class="p-bottom-left wow slideInUp z-1"><img src="{{ $assetPath('images/hero/hm1-shape01.webp') }}" alt=""></div>
                                    <div
                                        class="bg image {{ $loop->first ? 'background-image' : '' }}"
                                        @if($loop->first)
                                            style="background-image: url('{{ $slide['image'] }}');"
                                        @else
                                            data-bg-src="{{ $slide['image'] }}"
                                        @endif
                                    ></div>
                                    <div class="video-box">
                                        <div class="circle-box">
                                            <a class="logo-box popup-video" href="#" data-fancybox="video-gallery">
                                                <img src="{{ $assetPath('images/hero/spin-icon.webp') }}" alt="">
                                            </a>
                                            <div class="text-inner" style="animation: 10s linear 0s infinite normal none running text-rotate;">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="192.5" height="192.5" viewBox="0 0 250.5 250.5">
                                                    <path d="M.25,125.25a125,125,0,1,1,125,125,125,125,0,0,1-125-125" id="hero-path-{{ $loop->iteration }}"></path>
                                                    <text><textPath href="#hero-path-{{ $loop->iteration }}" startOffset="0%">TECHNOLOGY BUSINESS SOLUTION INNOVATION</textPath></text>
                                                </svg>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="hero-content">
                                                    <span class="sub-title d-inline-flex align-items-center">
                                                        <img src="{{ $assetPath('images/hero/check.webp') }}" alt="..">
                                                        <span>{{ $slide['label'] }}</span>
                                                    </span>
                                                    <h1 class="hero-title text-white">{{ $slide['title'] }} <br><span>{{ $slide['accent'] }}</span></h1>
                                                    <div class="text-icon position-relative">
                                                        <div class="icon d-inline-block spin2"><img src="{{ $assetPath('images/icons/star.png') }}" alt=""></div>
                                                        <p class="text">{{ $slide['body'] }}</p>
                                                    </div>
                                                    <a href="{{ $slide['url'] }}" class="theme-btn mt-40 br-30">
                                                        <span class="link-effect">
                                                            <span class="effect-1">{{ $slide['button_label'] }}</span>
                                                            <span class="effect-1">{{ $slide['button_label'] }}</span>
                                                        </span>
                                                        {!! $themeArrow !!}
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="slide-number">{{ $slide['number'] }}</div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Feature highlights and quick social-proof metrics --}}
    <section class="tv-feature-section bg-light space">
        <div class="container">
            <div class="row gy-30">
                <div class="col-lg-4 col-md-6 col-sm-6">
                    <div class="tv-feature-item wow fadeInLeft" data-wow-delay=".5s">
                        <div class="client-social-proof">
                            <div class="social">
                                @foreach($featuredTeams->take(2) as $member)
                                    <img src="{{ $member->image ? asset('storage/' . $member->image) : $homeImage($generatedWebsiteImages['engineer']) }}" alt="{{ $member->name }}">
                                @endforeach
                                <h4>{{ max(1, $statistics['total_projects']) }}+</h4>
                            </div>
                            <div class="count-box mt-30"><span class="count-number odometer" data-count="{{ max(1, $statistics['total_projects']) }}">0</span></div>
                            <div class="rating-viewers">active projects</div>
                            <a href="{{ route('frontend.projects.index') }}" class="theme-btn style2 mt-20 br-30">
                                <span class="link-effect"><span class="effect-1">Explore More</span><span class="effect-1">Explore More</span></span>
                                {!! $themeArrowWhite !!}
                            </a>
                            <div class="scribble-shape1 moving">
                                <img src="{{ $assetPath('images/feature/scribble.webp') }}" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                @foreach($serviceItems->take(2) as $service)
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="tv-feature-box {{ $loop->last ? 'bg-theme3' : '' }} wow fadeInLeft" data-wow-delay="{{ $loop->first ? '.7s' : '.9s' }}">
                            <div class="icon-top">
                                <div class="icon {{ $loop->last ? 'style2 bg-dark' : '' }}">
                                    <i class="fa-solid fa-arrow-up-right"></i>
                                </div>
                            </div>
                            <div class="logo mb-40"><img src="{{ $assetPath('images/feature/hm1-icon0' . $loop->iteration . '.webp') }}" alt=""></div>
                            <h2>{{ $service['name'] }}</h2>
                            <p>{{ $service['description'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- About preview with company intro and supporting imagery --}}
    <section class="tv-about-section bg-color2 space-bottom">
        <div class="container">
            <div class="row gy-30 align-items-center">
                <div class="col-lg-7">
                    <div class="about-left pr-60 md-pr-0">
                        <div class="title-wrap three">
                            <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Established 2024</div>
                            <h2 class="sec-title">Empowering Your Business with Innovative IT Solutions</h2>
                        </div>
                        <div class="image-box br-30 sm-br-0 overflow-hidden data-item-hover">
                            <figure class="data-img-hover cms-frame cms-frame--home-about-main" data-style="01" data-intensity="0.2" data-speedin="1" data-speedout="1">
                                <img class="cms-img-cover" width="698" height="440" loading="lazy" decoding="async" src="{{ $homeImage($generatedWebsiteImages['collaboration']) }}" alt="Black African software professionals collaborating on Ndarama digital systems">
                            </figure>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="about-right">
                        <div class="right-top">
                            <img class="cms-home-founder-avatar" width="100" height="100" src="{{ $founderProfile?->image ? asset('storage/' . $founderProfile->image) : $homeImage($generatedWebsiteImages['engineer']) }}" alt="{{ $founderProfile?->name ?? $siteName }}">
                            <div class="text">
                                <h4>{{ $founderProfile?->name ?? $siteName }}</h4>
                                <p>{{ $founderProfile?->position ?? 'Founder and CEO' }} - {{ $siteName }}</p>
                            </div>
                        </div>
                        <div class="border mt-40 mb-30"></div>
                        <p>{{ $siteDescription }}</p>
                        <a href="{{ route('frontend.about') }}" class="theme-btn mt-25">
                            <span class="link-effect"><span class="effect-1">Discover More</span><span class="effect-1">Discover More</span></span>
                            {!! $themeArrow !!}
                        </a>
                        <div class="data-item-hover br-30 sm-br-0 overflow-hidden mt-50">
                            <figure class="image data-img-hover cms-frame cms-frame--home-about-support" data-intensity="0.2" data-speedin="1" data-speedout="1">
                                <img class="cms-img-cover" width="537" height="296" loading="lazy" decoding="async" src="{{ $homeImage($generatedWebsiteImages['support']) }}" alt="Black African support specialists helping Ndarama clients">
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Services grid showcasing key offerings --}}
    <section class="tv-service-section bg-light position-relative overflow-hidden cms-service-pin-ready">
        <div class="p-top-center z-1 wow slideInTop">
            <img src="{{ $assetPath('images/service/hm1-shape-01.webp') }}" alt="">
        </div>
        <div class="tv-service-inner space bg-theme3 mx-30 ml-mx-0 overflow-hidden">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <div class="title-wrap two white">
                            <div class="sub-title-2 text-white two"><i class="fa-solid fa-circle-check"></i>Services</div>
                            <h2 class="sec-title">Empowering Companies with Reliable <br>and Scalable IT Services</h2>
                        </div>
                    </div>
                </div>
                <div class="row gy-30">
                    <div class="col-lg-12">
                        <div class="tv-service-item-inner">
                            @foreach($serviceItems as $service)
                                <div class="service-item-wrap {{ $loop->iteration < 3 ? 'service-item-pin' : '' }}">
                                    <div class="tv-service-item">
                                        <div class="service-number">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}.</div>
                                        <div class="service-left">
                                            <div class="video-btn">
                                                <a class="popup-video" href="#" data-fancybox="video-gallery">
                                                    <i class="fa-sharp fa-solid fa-play"></i>
                                                </a>
                                            </div>
                                            <div class="overlay-anim4 overflow-hidden cms-home-service-frame">
                                                <img class="cms-home-cover" width="700" height="479" loading="lazy" decoding="async" src="{{ $homeImage($service['image'] ?: 'images/service/hm1-img0' . (($loop->index % 3) + 1) . '.webp') }}" alt="{{ $service['name'] }}">
                                            </div>
                                        </div>
                                        <div class="service-right">
                                            <h6>{{ strtoupper($service['category']) }}</h6>
                                            <h2>{{ $service['name'] }}</h2>
                                            <p>{{ $service['description'] }}</p>
                                            <a href="{{ $service['url'] }}" class="learn-more">Learn More <i class="fa-solid fa-arrow-up-right"></i></a>
                                            <div class="border my-40"></div>
                                            <div class="tags">
                                                @foreach(collect($service['features'] ?? [])->take(5) as $feature)
                                                    <span>{{ $feature }}</span>
                                                @endforeach
                                                @if(empty($service['features']))
                                                    <span>Wordpress</span><span>Shopify</span><span>Webflow</span><span>Hosting</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Why choose us section with value proposition points --}}
    <section class="tv-choose-section space bg-light">
        <div class="container">
            <div class="row gy-30">
                <div class="col-lg-12 col-xl-6">
                    <div class="tv-choose-left">
                        <div class="title-wrap three">
                            <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Why Choose Us</div>
                            <h2 class="sec-title">Proven Track Record of Driving Digital Transformation</h2>
                        </div>
                        <div class="tv-choose-boxs">
                            @foreach([
                                ['title' => 'Cutting-Edge Technology', 'text' => 'Modern tools selected around your business needs.', 'icon' => 'images/choose/hm1-icon01.webp'],
                                ['title' => 'Proven Client Satisfaction', 'text' => 'CMS-backed content, clear workflows, and reliable delivery.', 'icon' => 'images/choose/hm1-icon02.webp'],
                            ] as $item)
                                <div class="tv-choose-single-box {{ $loop->first ? 'two' : '' }} wow {{ $loop->first ? 'fadeInLeft' : 'fadeInRight' }}" data-wow-delay=".{{ $loop->first ? '3' : '5' }}s">
                                    <div class="box-top-content mb-20">
                                        <div class="icon-top"><img src="{{ $assetPath($item['icon']) }}" alt=""></div>
                                        <h4 class="title">{{ $item['title'] }}</h4>
                                    </div>
                                    <p>{{ $item['text'] }}</p>
                                    <div class="icon bg-light"><i class="fa-solid fa-arrow-up-right"></i></div>
                                    <div class="choose-box box-1"></div><div class="choose-box box-2"></div><div class="choose-box box-3"></div><div class="choose-box box-4"></div>
                                </div>
                            @endforeach
                        </div>
                        <a href="{{ route('frontend.faq') }}" class="theme-btn mt-40">
                            <span class="link-effect"><span class="effect-1">Discover More</span><span class="effect-1">Discover More</span></span>
                            {!! $themeArrow !!}
                        </a>
                    </div>
                </div>
                <div class="col-lg-12 col-xl-6">
                    <div class="tv-choose-right-box">
                        <div class="data-item-hover">
                            <figure class="image_right data-img-hover" data-style="08" data-intensity="0.2" data-speedin="1" data-speedout="1">
                                <img loading="lazy" decoding="async" src="{{ $homeImage($generatedWebsiteImages['collaboration']) }}" alt="Ndarama Technologies team collaboration">
                            </figure>
                        </div>
                        <div class="text_right">
                            <div class="content">
                                <div class="icon"><img src="{{ $assetPath('images/choose/star.webp') }}" alt=""></div>
                                <h3 class="title">Best <br> Agency</h3>
                                <div class="arrow"><img src="{{ $assetPath('images/choose/arrow.webp') }}" alt=""></div>
                                <span class="year">{{ date('Y') }}</span>
                            </div>
                        </div>
                        <a class="middle-btn" href="{{ route('frontend.contact') }}"><i class="fa-solid fa-arrow-up-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-bottom-left wow slideInUp"><img src="{{ $assetPath('images/choose/hm1-shape01.webp') }}" alt=""></div>
    </section>

    <div class="tv-marquee-section bg-light position-relative">
        <div class="tv-marquee-inner mx-30 ml-mx-0 position-relative">
            <div class="container-fluid p-0 overflow-hidden">
                <div class="slider__marquee clearfix marquee-wrap">
                    <ul class="marquee_mode marquee__group">
                        @foreach(['Digital Marketing', 'Branding Solutions', 'Custom Website', 'Innovation Design', 'Cyber Security'] as $marquee)
                            <li class="item m-item"><img class="icon" src="{{ $assetPath('images/icons/marquee-icon.png') }}" alt=""> {{ $marquee }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {{-- Process timeline describing delivery steps --}}
    <section class="tv-process-section bg-light position-relative">
        <div class="p-top-center z-1 wow slideInTop">
            <img src="{{ $assetPath('images/process/hm1-shape01.png') }}" alt="">
        </div>
        <div class="process-inner bg-theme3 mx-30 ml-mx-0 space overflow-hidden xxl-br-0 position-relative">
            <div class="container position-relative">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="process-title mt--25">
                            <h2 class="text-white text-center">PR<span class="text-theme">O</span>CESS</h2>
                        </div>
                    </div>
                </div>
                <div class="row gy-30">
                    @foreach([
                        ['title' => 'Consult & Understand', 'text' => 'We map your operations, users, data, and the real business problem before writing code.', 'icon' => 'images/process/hm1-icon1.webp'],
                        ['title' => 'Plan & Architect', 'text' => 'We shape the workflow, modules, integrations, timelines, and delivery priorities.', 'icon' => 'images/process/hm1-icon2.webp'],
                        ['title' => 'Build & Deploy', 'text' => 'We deliver secure web, mobile, ERP, billing, and data systems with practical rollout support.', 'icon' => 'images/process/hm1-icon3.webp'],
                        ['title' => 'Support & Improve', 'text' => 'We monitor adoption, fix friction, and keep improving the platform as your needs grow.', 'icon' => 'images/process/hm1-icon4.webp'],
                    ] as $step)
                        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                            <div class="tv-process-item wow fadeInRightBig" data-wow-delay=".{{ $loop->iteration + 1 }}s">
                                <h4 class="title-text">STEP {{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</h4>
                                <div class="process-box">
                                    <div class="icon"><img src="{{ $assetPath($step['icon']) }}" alt=""></div>
                                    <h3 class="title">{{ $step['title'] }}</h3>
                                    <p>{{ $step['text'] }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    {{-- Recent projects carousel/list --}}
    <section class="tv-project-section space bg-light">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="project-title-area d-flex sm-mb-30">
                        <div class="title-wrap white">
                            <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Projects</div>
                            <h2 class="sec-title text-dark">We Have Successfully Completed <br>Creative Projects</h2>
                        </div>
                        <div class="project-btn sm-justify-content-start">
                            <a href="{{ route('frontend.projects.index') }}" class="theme-btn">
                                <span class="link-effect"><span class="effect-1">Discover More</span><span class="effect-1">Discover More</span></span>
                                {!! $themeArrow !!}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid px-60 ml-px-15 xxl-px-50">
            <div class="row gy-30">
                @foreach($projectItems as $project)
                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                        <div class="tv-project-single-box cms-home-project-card">
                            <div class="image-wrapper">
                                <img class="cms-home-cover" width="432" height="520" loading="lazy" decoding="async" src="{{ $homeImage($project['image']) }}" alt="{{ $project['title'] }}">
                            </div>
                            <div class="project-info">
                                <span class="tag">{{ strtoupper($project['tag']) }}</span>
                                <h3 class="title"><a href="{{ $project['url'] }}">{{ $project['title'] }}</a></h3>
                                <div class="border mb-20"></div>
                                <p>{{ $project['description'] }}</p>
                                <div class="icon-box">
                                    <a href="{{ $project['url'] }}" class="hover-icon"><i class="fa-regular fa-arrow-up-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Contact and CTA area with phone/email details --}}
    <section class="tv-contact-section bg-light md-pb-80">
        <div class="tv-contact-inner bg-theme3 mx-30 ml-mx-0 position-relative overflow-hidden br-30 ml-br-0 space">
            <div class="shape-mockup z-1 scribble d-none d-xxl-block" data-right="44%" data-bottom="66%"><img src="{{ $assetPath('images/contact/hm1-scribble01.webp') }}" alt=""></div>
            <div class="container">
                <div class="row align-items-end gy-30">
                    <div class="col-lg-6">
                        <div class="title-wrap white">
                            <div class="sub-title-2 text-white two"><i class="fa-solid fa-circle-check"></i>Get in Touch</div>
                            <h2 class="sec-title">Connect with us for next <br>Gen Business Success</h2>
                        </div>
                        <div class="contact-form">
                            <h2 class="sec-title">Ask for a call back</h2>
                            <form id="contact_form" class="contact_form" action="{{ route('frontend.contact.submit') }}" method="post">
                                @csrf
                                @include('frontend.partials.contact-spam-fields')
                                <div class="form-grid">
                                    <div class="form-group">
                                        <input type="text" id="fullName" name="name" placeholder="Your Name" value="{{ old('name') }}" required autocomplete="name">
                                    </div>
                                    <div class="form-group">
                                        <input type="email" id="userEmail" name="email" placeholder="E-Mail" value="{{ old('email') }}" required autocomplete="email">
                                    </div>
                                </div>
                                <div class="form-grid">
                                    <div class="form-group">
                                        <input type="text" name="phone" placeholder="Phone Number" value="{{ old('phone') }}" autocomplete="tel">
                                    </div>
                                    <div class="form-group">
                                        <select class="custom-select" id="service" name="subject" required>
                                            <option value="" disabled {{ old('subject') ? '' : 'selected' }}>Select Service</option>
                                            @foreach($serviceItems as $service)
                                                <option value="{{ $service['name'] }}" @selected(old('subject') === $service['name'])>{{ $service['name'] }}</option>
                                            @endforeach
                                            <option value="General Enquiry" @selected(old('subject') === 'General Enquiry')>General Enquiry</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <textarea id="msg" name="message" placeholder="Write Message" required>{{ old('message') }}</textarea>
                                </div>
                                <button type="submit" class="theme-btn" data-loading-text="Please wait...">
                                    <span class="btn-title mr-10">Send Message</span>
                                    <i class="fa-solid fa-arrow-right"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="choose-image-wrapper">
                            <div class="thumb-bg spin2"><img src="{{ $assetPath('images/contact/hm1-shape01.webp') }}" alt=""></div>
                            <div class="thumb">
                                <img class="wow img-anim-right" loading="lazy" decoding="async" src="{{ $homeImage($generatedWebsiteImages['support']) }}" alt="Ndarama Technologies support team">
                            </div>
                            <div class="info-card">
                                <div class="info-icon"><img src="{{ $assetPath('images/contact/hm1-icon01.webp') }}" alt=""></div>
                                <div class="info-text">
                                    <p>Call us anytime</p>
                                    <h4 class="cms-phone-list">
                                        @forelse($contactPhones as $phone)
                                            <a class="text-white" href="tel:{{ preg_replace('/(?!^\+)[^0-9]/', '', $phone) }}">{{ $phone }}</a>
                                        @empty
                                            <a class="text-white" href="tel:{{ preg_replace('/(?!^\+)[^0-9]/', '', $contactPhone) }}">{{ $contactPhone }}</a>
                                        @endforelse
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-bottom-left wow slideInUp xs-d-none"><img src="{{ $assetPath('images/contact/hm1-shape02.webp') }}" alt=""></div>
        </div>
    </section>

    {{-- Team spotlight cards --}}
    <section class="tv-team-section bg-light space">
        <div class="container">
            <div class="title-wrap three text-center">
                <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Our Team</div>
                <h2 class="sec-title">Meet the Expert Team Powering Our <br>Goals and Ambitions</h2>
            </div>
            <div class="row gy-30">
                @foreach($teamItems as $member)
                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
                        <div class="tv-team-card wow fadeInUp" data-wow-delay=".{{ $loop->iteration * 2 }}s">
                            <div class="team-photo cms-home-team-frame">
                                <img class="cms-home-cover cms-home-team-cover" width="384" height="420" loading="lazy" decoding="async" src="{{ $homeImage($member['image']) }}" alt="{{ $member['name'] }}">
                                <div class="team-social">
                                    <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
                                    <a href="{{ $member['twitter'] ?? '#' }}"><i class="fa-brands fa-x-twitter"></i></a>
                                    <a href="{{ $member['linkedin'] ?? '#' }}"><i class="fa-brands fa-linkedin-in"></i></a>
                                </div>
                            </div>
                            <div class="team-info">
                                <div class="info-inner">
                                    <h3 class="team-name"><a href="{{ $member['url'] }}">{{ $member['name'] }}</a></h3>
                                    <p class="team-role">{{ $member['position'] }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Testimonials section intentionally hidden for now.
    @if(false)
    <section class="tv-testimonial-section bg-light overflow-hidden">
        <div class="tv-testi-inner br-30 ml-br-0 space position-relative mx-30 xxl-mx-0 overflow-hidden">
            <div class="bg image"><img src="{{ $assetPath('images/testimonial/hm1-bg01.webp') }}" alt=""></div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="testimonial-content-wrap d-flex justify-content-between sm-flex-column">
                            <div class="title-wrap two white">
                                <div class="sub-title-2 two text-white"><i class="fa-solid fa-circle-check"></i>Testimonial</div>
                                <h2 class="sec-title">Helping Organizations Build <br>Reliable Digital Operations</h2>
                            </div>
                            <div class="testimonial-btn-wrapper">
                                <div class="scribble-shape scribble md-d-none">
                                    <img src="{{ $assetPath('images/testimonial/scribble01.webp') }}" alt="">
                                </div>
                                <div class="client-social-proof">
                                    <div class="social">
                                        @foreach($featuredTeams->take(2) as $member)
                                            <img src="{{ $member->image ? asset('storage/' . $member->image) : $homeImage($generatedWebsiteImages['support']) }}" alt="{{ $member->name }}">
                                        @endforeach
                                        <h4>{{ max(1, $statistics['total_projects']) }}+</h4>
                                    </div>
                                    <h4 class="text">Projects and <br>Digital Systems</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tv-brands-section position-relative z-1">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="sponsors-outer brand-outher">
                                    <div class="trusted-partners d-flex align-items-center"></div>
                                    <div class="border"></div>
                                    <div class="brands-slider-two swiper py-45">
                                        <div class="swiper-wrapper">
                                            @foreach($partnerLogos->concat($partnerLogos->take(1)) as $partner)
                                                <div class="swiper-slide">
                                                    <div class="brand-item">
                                                        <a class="image" href="{{ $partner['url'] }}">
                                                            <img src="{{ $partner['logo'] }}" alt="{{ $partner['name'] }}">
                                                            <img src="{{ $partner['logo'] }}" alt="{{ $partner['name'] }}">
                                                        </a>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="border mb-60"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="testi-slider swiper">
                            <div class="swiper-wrapper">
                                @foreach([
                                    ['name' => 'Ndarama Client', 'role' => 'Operations Lead', 'image' => 'images/project/hm1-img01.webp'],
                                    ['name' => 'Ndarama Client', 'role' => 'Business Manager', 'image' => 'images/project/hm1-img02.webp'],
                                    ['name' => 'Ndarama Client', 'role' => 'Technology Partner', 'image' => 'images/project/hm1-img03.webp'],
                                    ['name' => 'Ndarama Client', 'role' => 'Operations Lead', 'image' => 'images/project/hm1-img01.webp'],
                                ] as $testimonial)
                                    <div class="swiper-slide">
                                        <div class="tv-testi-card wow fadeInUp" data-wow-delay=".5s">
                                            <div class="testi-top">
                                                <div class="image position-relative z-1">
                                                    <img src="{{ $assetPath($testimonial['image']) }}" alt="{{ $testimonial['name'] }}">
                                                    <span class="quote-icon"><i class="fa-solid fa-quote-left"></i></span>
                                                </div>
                                                <div class="testi-info">
                                                    <h4>{{ $testimonial['name'] }}</h4>
                                                    <p>{{ $testimonial['role'] }}</p>
                                                </div>
                                            </div>
                                            <div class="testi-content">
                                                <div class="stars">
                                                    <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                                                    <span>(4.8)</span>
                                                </div>
                                                <p>"Technically sound delivery, clear communication, and a website platform our team can actually manage."</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    --}}

    {{-- Pricing section intentionally hidden for now.
    @if(false)
    <section class="tv-pricing-section space bg-light">
        <div class="shape-mockup z-1 spin d-none d-xxl-block" data-left="15%" data-bottom="69%"><img src="{{ $assetPath('images/pricing/eart.webp') }}" alt=""></div>
        <div class="shape-mockup z-1 spin2 d-none d-xxl-block" data-right="15%" data-bottom="69%"><img src="{{ $assetPath('images/pricing/spin-shape.webp') }}" alt=""></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="title-wrap text-center three">
                        <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Pricing Plans</div>
                        <h2 class="sec-title">Choose the Perfect Plans for <br>Your Business Growth</h2>
                    </div>
                </div>
            </div>
            <div class="row gy-30 align-items-end">
                @foreach([
                    ['plan' => 'Starter', 'price' => '29 USD', 'popular' => false, 'features' => ['3 Users available', 'Limited tools', 'Unlimited support']],
                    ['plan' => 'Growth', 'price' => '39 USD', 'popular' => true, 'features' => ['5 Users available', 'CMS management', 'Unlimited support', 'API access']],
                    ['plan' => 'Business', 'price' => '59 USD', 'popular' => false, 'features' => ['10 Users available', 'Advanced CMS tools', 'Priority support', 'Premium apps']],
                ] as $plan)
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <div class="tv-pricing-card {{ $plan['popular'] ? 'style2' : '' }} wow fadeInUp" data-wow-delay=".{{ 3 + ($loop->iteration * 2) }}s">
                            @if($plan['popular'])
                                <div class="popular-badge"><i class="fa-solid fa-fire"></i> Most Popular</div>
                            @endif
                            <div class="pricing-inner-box">
                                @if($plan['popular'])
                                    <div class="top-icon spin"><img src="{{ $assetPath('images/pricing/spin-shape02.webp') }}" alt=""></div>
                                @endif
                                <div class="pricing-inner">
                                    <div class="pricing-plan">
                                        <h5 class="plan">{{ $plan['plan'] }}</h5>
                                        <div class="price"><h2>{{ $plan['price'] }}</h2><span class="billing-cycle">/ month</span></div>
                                        <p>Organize daily tasks and content updates.</p>
                                        <a href="{{ route('frontend.contact') }}" class="theme-btn mt-25 w-100 br-25">
                                            <span class="link-effect"><span class="effect-1">Join this Plan</span><span class="effect-1">Join this Plan</span></span>
                                            <span class="arrow1"><i class="fa-solid fa-arrow-right"></i></span>
                                        </a>
                                        <h4>Key Features</h4>
                                    </div>
                                    <ul class="features">
                                        @foreach($plan['features'] as $feature)
                                            <li><span class="checkmark"><i class="fa-solid fa-circle-check"></i></span> {{ $feature }}</li>
                                        @endforeach
                                        <li class="disabled"><span class="checkmark"><i class="fa-solid fa-circle-x"></i></span> Custom enterprise SLA</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif
    --}}

    <div class="tv-counter-section style-2 bg-light position-relative z-1">
        <div class="counter-inner lg-br-0 py-65 lg-py-40 position-relative mx-30 xxl-mx-0 overflow-hidden">
            <div class="bg image"><img src="{{ $assetPath('images/counter/hm1-bg01.webp') }}" alt=""></div>
            <div class="overlay bg-theme mbm-overlay"></div>
            <div class="container">
                <div class="row gy-30">
                    @foreach([
                        ['count' => $statistics['total_projects'], 'suffix' => '+', 'label' => 'Successful Projects', 'icon' => 'images/counter/hm1-icon01.webp'],
                        ['count' => $statistics['total_news'], 'suffix' => '+', 'label' => 'Published Articles', 'icon' => 'images/counter/hm1-icon02.webp'],
                        ['count' => 96, 'suffix' => '%', 'label' => 'Satisfaction Rates', 'icon' => 'images/counter/hm1-icon03.webp'],
                    ] as $counter)
                        <div class="col-lg-4 col-md-6">
                            <div class="counter-box {{ $loop->iteration === 2 ? 'justify-content-center ustify-content-md-center' : ($loop->iteration === 3 ? 'align-items-start align-items-lg-end' : '') }}">
                                <div class="icon"><img src="{{ $assetPath($counter['icon']) }}" alt=""></div>
                                <div class="content">
                                    <h4 class="title mb-0"><span class="count-number odometer" data-count="{{ max(1, $counter['count']) }}">0</span>{{ $counter['suffix'] }}</h4>
                                    <h6 class="text mb-0">{{ $counter['label'] }}</h6>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    {{-- Mid-page call-to-action block --}}
    <section class="tv-callus-section bg-light">
        <div class="callus-inner space position-relative mx-30 xxl-mx-0 overflow-hidden">
            <div class="bg image"><img src="{{ $assetPath('images/callus/hm1-bg01.webp') }}" alt=""></div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="title-wrap white three">
                            <div class="sub-title-2 two text-white"><i class="fa-solid fa-circle-check"></i>Get in Touch</div>
                            <h2 class="sec-title">Helping Organizations Turn <br>Daily Operations into <br>Reliable Digital Systems</h2>
                        </div>
                        <div class="callus-contact">
                            <a href="{{ route('frontend.projects.index') }}" class="theme-btn">
                            <span class="link-effect"><span class="effect-1">Discover More</span><span class="effect-1">Discover More</span></span>
                            {!! $themeArrow !!}
                            </a>
                            <div class="inner-contact">
                                <div class="icon"><img src="{{ $assetPath('images/callus/call-iocn.webp') }}" alt=""></div>
                                <div class="content">
                                    <h6 class="call-text">Need Help?</h6>
                                    <a class="call-phone" href="tel:{{ preg_replace('/[^0-9+]/', '', $contactPhone) }}"><span>Free :</span>{{ $contactPhone }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Latest blog posts preview --}}
    <section class="tv-blog-section space bg-color2">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="title-wrap text-center">
                        <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Latest Blog</div>
                        <h2 class="sec-title">Read our Latest Insights from <br>Update Blog Posts</h2>
                    </div>
                </div>
            </div>
            <div class="row gy-25">
                @foreach($newsItems as $news)
                    <div class="col-lg-4 col-md-6 col-sm-6">
                        <article class="blog-single-box">
                            <div class="inner-box">
                                <div class="blog-image cms-home-blog-frame">
                                    <img class="cms-home-cover" width="392" height="284" loading="lazy" decoding="async" src="{{ $homeImage($news['image']) }}" alt="{{ $news['title'] }}">
                                    <div class="category-tag"><span></span>{{ $news['date'] }}</div>
                                </div>
                                <div class="blog-content">
                                    <h4 class="title"><a href="{{ $news['url'] }}">{{ $news['title'] }}</a></h4>
                                    <div class="pt-25 pb-30"><div class="border dark"></div></div>
                                    <div class="blog-meta">
                                        <a href="{{ $news['url'] }}" class="continue-reading">Explore More</a>
                                        <span>CMS</span>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Newsletter signup strip --}}
    <section class="newsletter-section mb--75">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="newsletter">
                        <div class="arrow-shape md-d-none"><img src="{{ $assetPath('images/newsletter/arrow-shape.webp') }}" alt=""></div>
                        <div class="bg image"><img class="br-30" src="{{ $assetPath('images/newsletter/hm1-bg01.webp') }}" alt=""></div>
                        <div class="thumb d-none d-xl-block">
                            <img src="{{ $assetPath('images/newsletter/img01.webp') }}" alt="thumb">
                        </div>
                        <div class="image-text">
                            <img src="{{ $assetPath('images/icons/check-circle2.png') }}" alt="">
                            <h3 class="title title-anim" data-animation="bounce-in">Subscribe Our Newsletter <br>For Latest Updates</h3>
                        </div>
                        <form class="newsletter-form" action="{{ route('frontend.newsletter.subscribe') }}" method="post">
                            @csrf
                            @include('frontend.partials.contact-spam-fields')
                            <input type="hidden" name="source" value="home-newsletter">
                            <div class="form-group">
                                <input type="email" name="email" class="email" value="{{ old('email') }}" placeholder="Email Address" autocomplete="email" required>
                                <button type="submit">
                                    <i class="far fa-paper-plane"></i>
                                    <span class="btn-title"></span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('frontend.partials.events-tip', [
        'tip_title' => 'Explore upcoming events',
        'tip_text' => 'Browse our events calendar for details. If registration is open, you can sign up from the event page.',
        'tip_href' => route('frontend.events.index'),
    ])
@endsection