@php
    $settingsService = app(\App\Services\SettingsService::class);
    $contactPhone = $settingsService->get('contact_phone', '+263 78 691 2342');
    $callablePhone = preg_replace('/(?!^\+)[^0-9]/', '', (string) collect(preg_split('/\s*(?:\/|,|;|\r\n|\r|\n)\s*/', (string) $contactPhone))->filter()->first());
    $projectCount = max(1, \App\Models\Project::active()->count());
    $serviceCount = max(1, \App\Models\Service::active()->count());
    $yearsExperience = max(1, (int) $settingsService->get('about_years_experience', 2));
    $generatedWebsiteImages = [
        'collaboration' => 'storage/uploads/generated/ndarama-collaboration.png',
        'engineer' => 'storage/uploads/generated/ndarama-engineer.png',
        'support' => 'storage/uploads/generated/ndarama-support.png',
    ];
    $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);
    };
    $teamImage = function (?string $path, string $fallback) use ($storedAsset, $assetPath) {
        if (!$path) {
            $fallback = trim($fallback);

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

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

            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, 'images/')) {
            return asset('storage/' . $path);
        }

        return $assetPath($path);
    };
    $settingEnabled = fn (string $key, bool $default = true) => filter_var($settingsService->get($key, $default ? 'true' : 'false'), FILTER_VALIDATE_BOOLEAN);
    $partnerHeading = $settingsService->get('about_partner_heading', 'Trusted technology partners');
    $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' => trim((string) $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();
    $teamMembers = (isset($featuredTeams)
        ? $featuredTeams
        : \App\Models\Team::active()->with(['department'])->orderBy('sort_order')->orderBy('name')->take(3)->get())
        ->take(3);
    $teamCount = isset($totalTeamMembers) ? (int) $totalTeamMembers : \App\Models\Team::active()->count();
    $strategySteps = [
        ['image' => $generatedWebsiteImages['collaboration'], 'title' => 'Discover the Workflow', 'text' => 'We map users, pain points, compliance needs, data flows, and the operational results the system must deliver.'],
        ['image' => $generatedWebsiteImages['engineer'], 'title' => 'Design the Platform', 'text' => 'We shape the modules, permissions, dashboards, integrations, and rollout priorities around the actual business process.'],
        ['image' => $generatedWebsiteImages['support'], 'title' => 'Deliver and Improve', 'text' => 'We deploy, train teams, support adoption, and keep improving the system after launch.'],
    ];
@endphp

<section class="tv-team-section style-2 bg-light position-relative z-2">
    <div class="team-inner space overflow-hidden position-relative mx-30 xxl-mx-0">
        <div class="bg image"><img src="{{ $assetPath('images/team/hm2-bg01.webp') }}" alt=""></div>
        <div class="container">
            <div class="row gy-30">
                <div class="col-lg-4 col-md-6">
                    <div class="team-content-wrap">
                        <div class="title-wrap white">
                            <div class="sub-title-2 text-white two"><i class="fa-solid fa-circle-check"></i>Our Team</div>
                            <h2 class="sec-title">Meet the Team Building Practical Digital Systems</h2>
                        </div>
                        <div class="team-btn-wrapper">
                            <div class="array-button">
                                <button class="array-prev"><i class="fa fa-arrow-left-long"></i></button>
                                <button class="array-next active"><i class="fa fa-arrow-right-long"></i></button>
                            </div>
                        </div>
                        <div class="team-social-wrapper">
                            <div class="client-social-proof">
                                <div class="social">
                                    @forelse($teamMembers->take(2) as $member)
                                        <img src="{{ $teamImage($member->image ?? null, $loop->first ? $generatedWebsiteImages['engineer'] : $generatedWebsiteImages['support']) }}" alt="{{ $member->name }}" width="48" height="48">
                                    @empty
                                        <span class="cms-about-proof-icon"><i class="fa-solid fa-user-plus"></i></span>
                                    @endforelse
                                    <h4>{{ $teamCount }}</h4>
                                </div>
                                <h4 class="text">Active Team <br> Members</h4>
                                <div class="scribble-shape scribble md-d-none">
                                    <img src="{{ $assetPath('images/team/hm2-scribble.webp') }}" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8 col-md-6">
                    <div class="tv-team-slider swiper">
                        <div class="swiper-wrapper">
                            @forelse($teamMembers as $member)
                                <div class="swiper-slide">
                                    <div class="tv-team-card style-2">
                                        <div class="team-photo cms-frame cms-frame--team">
                                            <img class="cms-img-cover" width="384" height="420" src="{{ $teamImage($member->image ?? null, $loop->first ? $generatedWebsiteImages['engineer'] : $generatedWebsiteImages['collaboration']) }}" alt="{{ $member->name }}">
                                        </div>
                                        <div class="team-info">
                                            <div class="info-inner">
                                                <h3 class="team-name text-white"><a href="{{ route('frontend.teams.index') }}">{{ $member->name }}</a></h3>
                                                <p class="team-role text-white">{{ $member->position ?? optional($member->department ?? null)->name ?? 'Digital Solutions' }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="swiper-slide">
                                    <div class="tv-team-card style-2 cms-about-team-empty">
                                        <div class="team-photo cms-frame cms-frame--team">
                                            <img class="cms-img-cover" width="384" height="420" src="{{ asset($generatedWebsiteImages['collaboration']) }}" alt="Ndarama Technologies team">
                                        </div>
                                        <div class="team-info">
                                            <div class="info-inner">
                                                <h3 class="team-name text-white"><a href="{{ route('frontend.teams.index') }}">Team Profiles</a></h3>
                                                <p class="team-role text-white">Add team members from the admin panel</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="tv-cta-section style-2 bg-light position-relative z-2">
    <div class="cta-inner py-65 overflow-hidden position-relative mx-30 xxl-mx-0">
        <div class="bg image"><img src="{{ $assetPath('images/cta/hm2-bg01.webp') }}" alt=""></div>
        <div class="overlay bg-theme mbm-overlay"></div>
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6"><div class="cta-left"><h2 class="sec-title text-white">Build Reliable Zimbabwean Digital Systems With Us</h2></div></div>
                <div class="col-lg-6">
                    <div class="cta-right text-right">
                        <a href="{{ route('frontend.contact') }}" class="theme-btn br-30"><span class="link-effect"><span class="effect-1">Join Our Team</span><span class="effect-1">Join Our Team</span></span></a>
                        <div class="arrow"><img src="{{ $assetPath('images/cta/arrow.webp') }}" alt=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="tv-achivement-section bg-light space-top overflow-hidden">
    <div class="container">
        <div class="row gy-30">
            <div class="col-lg-6 col-xxl-6">
                <div class="achivement-content-wrapper">
                    <div class="title-wrap three">
                        <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Achievement</div>
                        <h2 class="sec-title">Home-Grown Systems <br>Powering Real Operations</h2>
                        <p>Ndarama Technologies builds practical software for schools, SMEs, enterprises, government, and institutions that need reliable local digital infrastructure.</p>
                    </div>
                    <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:{{ $callablePhone }}">{{ $contactPhone }}</a></div>
                    </div>
                    <a href="{{ route('frontend.about') }}" class="theme-btn mt-40 br-30"><span class="link-effect"><span class="effect-1">Discover More</span><span class="effect-1">Discover More</span></span></a>
                </div>
            </div>
            <div class="col-lg-3 col-xxl-3 lpm-d-none">
                <div class="achivement-image-wrapper cms-about-achievement-visual">
                    <div class="thumb-bg"></div>
                    <div class="thumb img-anim-right"><img src="{{ asset($generatedWebsiteImages['collaboration']) }}" alt="Black African software professionals collaborating on Ndarama systems"></div>
                </div>
            </div>
            <div class="col-lg-3 col-xxl-3">
                <div class="achivement-right-wrapper">
                    <div class="content"><span><img class="spin2" src="{{ $assetPath('images/achivement/spin.webp') }}" alt=""></span><h4>Achievements</h4></div>
                    <div class="counter-box"><div class="counter-inner"><div class="icon"><img src="{{ $assetPath('images/achivement/hm2-icon01.webp') }}" alt=""></div><div class="count"><span class="count-number odometer" data-count="{{ $projectCount }}">0</span><span class="plus">+</span></div></div><p>Active Digital Projects</p></div>
                    <div class="counter-box"><div class="counter-inner"><div class="icon"><img src="{{ $assetPath('images/achivement/hm2-icon02.webp') }}" alt=""></div><div class="count"><span class="count-number odometer" data-count="{{ $serviceCount }}">0</span><span class="plus">+</span></div></div><p>Core Solutions and Services</p></div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="tv-brands-section bg-light position-relative z-3">
    <div class="brand-inner bg-light2 overflow-hidden position-relative space br-30 ml-br-0 mx-30 xxl-mx-0">
        <div class="container">
            <div class="sponsors-outer brand-outher bg-light2">
                <div class="trusted-partners d-flex align-items-center mb-60">
                    <span class="line"></span><div class="title">{{ $partnerHeading }}</div><span class="line"></span>
                </div>
                <div class="brands-slider-two swiper">
                    <div class="swiper-wrapper">
                        @foreach($partnerLogos as $partner)
                            <div class="swiper-slide">
                                <div class="brand-item">
                                    <a class="image" href="{{ $partner['url'] }}" aria-label="{{ $partner['name'] }}">
                                        <img src="{{ $partner['logo'] }}" alt="{{ $partner['name'] }}">
                                        <img src="{{ $partner['logo'] }}" alt="{{ $partner['name'] }}">
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="tv-process-section style-2 bg-light position-relative">
    <div class="process-inner mx-30 ml-mx-0 space overflow-hidden xxl-br-0 position-relative">
        <div class="container position-relative">
            <div class="title-wrap text-center three">
                <div class="sub-title-2"><i class="fa-solid fa-circle-check"></i>Strategy</div>
                <h2 class="sec-title text-dark">From Discovery to Deployment <br> Built Around Your Operations</h2>
            </div>
            <div class="row gx-0">
                @foreach($strategySteps as $step)
                    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
                        <div class="process-box {{ $loop->iteration === 2 ? 'style-2' : ($loop->iteration === 3 ? 'style-3' : '') }}">
                            <div class="process-img cms-about-strategy-img"><img src="{{ asset($step['image']) }}" alt="{{ $step['title'] }}" class="main-img"></div>
                            <h3>{{ $step['title'] }}</h3>
                            <p>{{ $step['text'] }}</p>
                            <div class="process-number"><span>{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>