@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
    @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.');
        $aboutCompanyLabel = $settingsService->get('about_company_label', 'Get to Know Us');
        $aboutCompanyHeading = $settingsService->get('about_company_heading', 'Empowering Businesses with Innovative IT Solutions');
        $aboutCompanyIntro = trim((string) $settingsService->get('about_company_intro', '')) ?: $siteDescription;
        $aboutCompanyBody = trim((string) $settingsService->get('about_company_body', ''));
        $aboutYearsExperience = max(1, (int) $settingsService->get('about_years_experience', 2));
        $aboutWhyChooseLabel = $settingsService->get('about_why_choose_label', 'Why Choose Us');
        $aboutWhyChooseHeading = $settingsService->get('about_why_choose_heading', 'Integrated IT Solutions for Success');
        $aboutWhyChooseItems = $settingsService->get('about_why_choose_items', []);
        if (is_string($aboutWhyChooseItems)) {
            $aboutWhyChooseItems = json_decode($aboutWhyChooseItems, true) ?: [];
        }
        $aboutWhyChooseItems = collect($aboutWhyChooseItems)->filter(fn ($item) => !empty($item['title']))->values();
        if ($aboutWhyChooseItems->isEmpty()) {
            $aboutWhyChooseItems = collect([
                ['title' => 'Proven National-Scale Experience', 'description' => 'Experience delivering reliable systems for complex organizations.', 'icon' => 'fa-solid fa-diagram-project'],
                ['title' => 'Digital Process Transformation', 'description' => 'We turn manual workflows into clear, measurable digital operations.', 'icon' => 'fa-solid fa-gears'],
                ['title' => 'Local Expertise', 'description' => 'Zimbabwean-built solutions shaped by local realities and global standards.', 'icon' => 'fa-solid fa-globe-africa'],
            ]);
        }
        $generatedWebsiteImages = [
            'collaboration' => asset('storage/uploads/generated/ndarama-collaboration.png'),
            'engineer' => asset('storage/uploads/generated/ndarama-engineer.png'),
            'support' => asset('storage/uploads/generated/ndarama-support.png'),
        ];
        $projectCount = max(1, (int) ($statistics['total_projects'] ?? 1));
        $teamCount = isset($totalTeamMembers) ? (int) $totalTeamMembers : (isset($featuredTeams) ? $featuredTeams->count() : 0);
        $teamPreviewMembers = isset($featuredTeams) ? $featuredTeams->filter(fn ($member) => !empty($member->image))->take(2) : collect();
        $aboutProfile = isset($featuredTeams) ? $featuredTeams->firstWhere('image') : null;
        $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
        $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;
    @endphp

    @include('frontend.layouts.breadcrumb', ['title' => 'About Us'])

    <section class="tv-feature-section bg-light space-top">
        <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">
                                @forelse($teamPreviewMembers as $member)
                                    <img src="{{ asset('storage/' . $member->image) }}" alt="{{ $member->name }}">
                                @empty
                                    <span class="cms-about-proof-icon"><i class="fa-solid fa-diagram-project"></i></span>
                                    <span class="cms-about-proof-icon"><i class="fa-solid fa-users-gear"></i></span>
                                @endforelse
                                <h4>{{ $projectCount }}+</h4>
                            </div>
                            <div class="count-box mt-30"><span class="count-number odometer" data-count="{{ $teamCount }}">0</span></div>
                            <div class="rating-viewers">team members profiled</div>
                            <a href="{{ route('frontend.contact') }}" 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 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>

    <section class="tv-about-section style-3 space bg-light">
        <div class="container">
            <div class="row gy-30 align-items-center">
                <div class="col-lg-4">
                    <div class="about-left">
                        <div class="about-thumb">
                            <img class="br-20 cms-img-cover" src="{{ $generatedWebsiteImages['collaboration'] }}" alt="Black African software professionals collaborating on Ndarama digital systems">
                        </div>
                        <div class="pt-50 pb-30 md-d-none">
                            <div class="border"></div>
                        </div>
                        <div class="counter">
                            <div class="about-counter">
                            <div class="count-box"><span class="count-number odometer" data-count="{{ $aboutYearsExperience }}">0</span></div>
                            <div class="text"><span>+</span><p>Years of <br> Experience</p></div>
                                <div class="scribble md-d-none"><img src="{{ $assetPath('images/icons/scribble-2.webp') }}" alt=""></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 col-md-6 col-sm-6">
                    <div class="about-content-wrap">
                        <div class="title-wrap three">
                            <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>{{ $aboutCompanyLabel }}</div>
                            <h2 class="sec-title">{{ $aboutCompanyHeading }}</h2>
                            <p>{{ $aboutCompanyIntro }}</p>
                            @if($aboutCompanyBody !== '')
                                <p>{{ $aboutCompanyBody }}</p>
                            @endif
                        </div>
                        <div class="skills">
                            <div class="skill-item">
                                <div class="skill-header"><div class="skill-title">Custom Software Systems</div></div>
                                <div class="skill-bar"><div class="bar-inner"><div class="bar progress-line" data-width="92"><div class="skill-percentage"><div class="count-box"><span class="count-text" data-speed="3000" data-stop="92">0</span>%</div></div></div></div></div>
                            </div>
                            <div class="skill-item">
                                <div class="skill-header"><div class="skill-title">Implementation and Support</div></div>
                                <div class="skill-bar"><div class="bar-inner"><div class="bar progress-line" data-width="86"><div class="skill-percentage"><div class="count-box"><span class="count-text" data-speed="3000" data-stop="86">0</span>%</div></div></div></div></div>
                            </div>
                        </div>
                        <a href="{{ route('frontend.contact') }}" 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>
                            {!! $themeArrow !!}
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 d-flex align-items-end">
                    <div class="about-right ml-40 xs-ml-0">
                        <div class="video-box">
                            <div class="circle-box">
                                <a class="logo-box popup-video" href="https://www.youtube.com/watch?v=SMKPKGW083c" 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="about-rotating-path"></path>
                                        <text><textPath href="#about-rotating-path" startOffset="0%">TECHNOLOGY BUSINESS SOLUTION INNOVATION</textPath></text>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="profile-card overlay-anim1 mt-40">
                            <img class="image overlay-anim1" src="{{ $aboutProfile?->image ? asset('storage/' . $aboutProfile->image) : $generatedWebsiteImages['engineer'] }}" alt="{{ $aboutProfile?->name ?? 'Ndarama Technologies team member' }}">
                            <div class="profile-details">
                                <h5 class="name">{{ $aboutProfile?->name ?? $siteName }}</h5>
                                <p class="title">{{ $aboutProfile?->position ?? 'Digital Solutions Team' }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('frontend.partials.theme-marquee', ['marqueeWrapClass' => 'slider__marquee clearfix marquee-wrap style-2 br-0'])

    <section class="tv-choose-section space bg-light">
        <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>{{ $aboutWhyChooseLabel }}</div>
                <h2 class="sec-title">{{ $aboutWhyChooseHeading }}</h2>
            </div>
            <div class="row gy-30">
                @foreach($aboutWhyChooseItems as $item)
                    <div class="col-xl-4 col-lg-6 col-md-6">
                        <div class="tv-choose-single-box cms-about-why-card wow fadeInUp" data-wow-delay="{{ '.' . (($loop->iteration + 2) * 1) . 's' }}">
                            <div class="box-top-content mb-20">
                                <div class="icon-top"><i class="{{ $item['icon'] ?? 'fa-solid fa-circle-check' }}"></i></div>
                                <h4 class="title">{{ $item['title'] }}</h4>
                            </div>
                            <p>{{ $item['description'] ?? '' }}</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>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    @include('frontend.partials.about-template-extras')
    @include('frontend.partials.newsletter')
@endsection