@extends('layouts.public')

@section('title', setting('about_title', __('About ABACO INFRA')))
@section('meta_description', setting('about_intro'))

@section('content')
    <x-page-hero :eyebrow="__('Overview')"
                 :title="setting('about_title', __('Overview of the Organization'))"
                 :subtitle="setting('site_tagline')"
                 :image="image_url(setting('about_banner'))"
                 :breadcrumbs="[__('About') => null]"
                 :meta="[
                     __('Established') => setting('about_established'),
                     __('Headquarters') => setting('about_headquarters'),
                     __('Certification') => setting('about_certification'),
                     __('Sectors') => $sectors->count(),
                 ]" />

    {{-- Split editorial band: the introduction beside a single premium image. --}}
    @if ($splitImage = setting('about_split_image', setting('about_banner')))
        <section class="section">
            <div class="container-page">
                <x-split-media :src="$splitImage"
                               :alt="setting('about_title', __('About ABACO INFRA'))"
                               :eyebrow="__('Who we are')"
                               :caption="setting('about_headquarters')"
                               ratio="4/3">
                    <h2 class="font-display text-headline font-bold text-text">
                        {{ setting('home_about_title', __('Engineering excellence across Asia and Africa')) }}
                    </h2>

                    @if ($intro = setting('about_intro'))
                        <p class="prose-measure mt-5 text-lg leading-relaxed text-text-secondary">{{ $intro }}</p>
                    @endif

                    <dl class="mt-8 grid grid-cols-1 gap-6 border-t border-border pt-6 xs:grid-cols-2">
                        @foreach ([
                            __('Established') => setting('about_established'),
                            __('Certification') => setting('about_certification'),
                        ] as $label => $value)
                            @if (filled($value))
                                <div>
                                    <dt class="meta-label">{{ $label }}</dt>
                                    <dd class="mt-1 font-display text-lg font-semibold text-text">{{ $value }}</dd>
                                </div>
                            @endif
                        @endforeach
                    </dl>
                </x-split-media>
            </div>
        </section>
    @endif

    {{-- Introduction and background (SOW 2.2 / 2.3) --}}
    <section class="section" data-pin-scope>
        <div class="container-page grid gap-14 lg:grid-cols-12">
            <div class="min-w-0 lg:col-span-7 xl:col-span-8">
                @if ($body = setting('about_body'))
                    <div class="prose-content" data-reveal>{!! $body !!}</div>
                @elseif (! setting('about_split_image') && ! setting('about_banner'))
                    {{-- No editorial band was rendered above, so carry the intro here. --}}
                    <p class="prose-measure font-display text-xl leading-relaxed text-text" data-reveal>
                        {{ setting('about_intro') }}
                    </p>
                @endif

                {{-- Timeline from establishment to current presence (SOW 2.13) --}}
                @if ($milestones = setting()->json('about_timeline'))
                    <section class="mt-16" data-reveal>
                        <h2 class="mb-8 font-display text-title font-bold text-text">{{ __('Our journey') }}</h2>

                        <ol class="relative space-y-7 border-l border-border pl-8">
                            @foreach ($milestones as $milestone)
                                <li class="relative">
                                    <span class="absolute -left-[2.35rem] top-1.5 size-3.5 rounded-full border-2 border-background bg-primary"></span>
                                    <p class="meta-label">{{ $milestone['year'] ?? '' }}</p>
                                    <p class="mt-1 text-text-secondary">{{ $milestone['text'] ?? $milestone }}</p>
                                </li>
                            @endforeach
                        </ol>
                    </section>
                @endif
            </div>

            <aside class="lg:col-span-5 xl:col-span-4">
                <div data-pin-media class="space-y-5">
                    <div class="panel">
                        <p class="meta-label mb-5">{{ __('Company profile') }}</p>

                        <dl class="space-y-3.5 text-sm">
                            @foreach ([
                                __('Established') => setting('about_established'),
                                __('Headquarters') => setting('about_headquarters'),
                                __('Registration') => setting('about_registration'),
                                __('Certification') => setting('about_certification'),
                            ] as $label => $value)
                                @if (filled($value))
                                    <div class="border-b border-border pb-3.5 last:border-0 last:pb-0">
                                        <dt class="meta-label">{{ $label }}</dt>
                                        <dd class="mt-1 font-medium text-text">{{ $value }}</dd>
                                    </div>
                                @endif
                            @endforeach
                        </dl>

                        @if ($profileDownloads->isNotEmpty())
                            <div class="mt-6 space-y-2 border-t border-border pt-5">
                                @foreach ($profileDownloads as $download)
                                    <x-button variant="outline" size="sm" :href="route('downloads.file', $download)" class="w-full">
                                        <x-icon name="download" class="size-4" /> {{ $download->title }}
                                    </x-button>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    @if ($accreditations->isNotEmpty())
                        <div class="panel">
                            <p class="meta-label mb-4">{{ __('Accreditation') }}</p>
                            <div class="flex flex-wrap items-center gap-5">
                                @foreach ($accreditations as $badge)
                                    <img src="{{ image_url($badge->badge ?: $badge->image) }}" alt="{{ $badge->title }}"
                                         title="{{ $badge->title }}" loading="lazy" decoding="async" class="h-10 w-auto">
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </aside>
        </div>
    </section>

    {{-- Organisational statistics (SOW 2.11) --}}
    @if ($statistics->isNotEmpty())
        <section class="relative overflow-hidden bg-dark" aria-label="{{ __('Organisation in numbers') }}">
            <div class="absolute inset-0 bg-blueprint-dark opacity-50" aria-hidden="true"></div>

            <div class="container-page relative grid gap-10 py-16 sm:grid-cols-2 lg:grid-cols-4" data-reveal-group>
                @foreach ($statistics->take(4) as $statistic)
                    <x-stat-counter :statistic="$statistic" tone="dark" />
                @endforeach
            </div>
        </section>
    @endif

    {{-- Core sectors (SOW 2.4) --}}
    @if ($sectors->isNotEmpty())
        <section class="section">
            <div class="container-page">
                <x-section-heading align="center" :eyebrow="__('Expertise')"
                                   :title="__('Core sectors of operation')"
                                   :subtitle="__('Eight disciplines, delivered by multidisciplinary teams under one roof.')" />

                <div class="mt-12 grid gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-4"
                     data-reveal-group>
                    @foreach ($sectors as $sector)
                        <a href="{{ route('sectors.show', $sector) }}"
                           class="group bg-surface p-7 transition hover:bg-primary-50" data-reveal-child>
                            <span class="mb-5 flex size-10 items-center justify-center rounded-lg bg-primary-50 text-primary transition group-hover:bg-primary group-hover:text-white">
                                @if ($sector->icon)
                                    <img src="{{ asset_path($sector->icon) }}" alt="" class="size-5">
                                @else
                                    <x-icon name="grid" class="size-5" />
                                @endif
                            </span>

                            <p class="font-display font-semibold text-text">{{ $sector->name }}</p>

                            @if ($sector->short_description)
                                <p class="mt-2 line-clamp-2 text-sm text-text-secondary">{{ $sector->short_description }}</p>
                            @endif
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- Leadership insight (SOW 2.10) --}}
    @if ($quote = setting('about_leadership_quote'))
        <section class="section bg-surface-muted/60">
            <div class="container-page">
                <figure class="mx-auto max-w-3xl text-center" data-reveal>
                    <x-icon name="quote" class="mx-auto size-8 text-primary-200" />

                    <blockquote class="mt-6 font-display text-2xl leading-relaxed text-text">{{ $quote }}</blockquote>

                    <figcaption class="mt-8">
                        @if ($photo = setting('about_leadership_photo'))
                            <img src="{{ asset_path($photo) }}" alt="" loading="lazy" decoding="async"
                                 class="mx-auto size-16 rounded-full object-cover">
                        @endif
                        <p class="mt-3 font-semibold text-text">{{ setting('about_leadership_name') }}</p>
                        <p class="text-sm text-text-secondary">{{ setting('about_leadership_role') }}</p>
                    </figcaption>
                </figure>
            </div>
        </section>
    @endif

    {{-- Leadership team --}}
    @if ($leadership->isNotEmpty())
        <section class="section">
            <div class="container-page">
                <div class="flex flex-wrap items-end justify-between gap-6">
                    <x-section-heading :eyebrow="__('Leadership')" :title="__('Directing the practice')" />
                    <x-button variant="outline" :href="route('team.index')" class="shrink-0">{{ __('Full team') }}</x-button>
                </div>

                <div class="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4" data-reveal-group>
                    @foreach ($leadership as $member)
                        @include('public.partials.team-card', ['member' => $member])
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- Achievements (SOW 2.9) --}}
    @if ($achievements->isNotEmpty())
        <section class="section bg-surface-muted/60">
            <div class="container-page">
                <div class="flex flex-wrap items-end justify-between gap-6">
                    <x-section-heading :eyebrow="__('Recognition')" :title="__('Achievements & recognition')" />
                    <x-button variant="outline" :href="route('achievements.index')" class="shrink-0">
                        {{ __('All achievements') }}
                    </x-button>
                </div>

                <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3" data-reveal-group>
                    @foreach ($achievements as $achievement)
                        <a href="{{ route('achievements.show', $achievement) }}" class="card-interactive group p-7" data-reveal-child>
                            @if ($achievement->achieved_on)
                                <p class="meta-label mb-3">{{ $achievement->achieved_on->format('Y') }}</p>
                            @endif

                            <h3 class="font-display text-base font-semibold leading-snug text-text transition group-hover:text-text-brand">
                                {{ $achievement->title }}
                            </h3>

                            @if ($achievement->short_description)
                                <p class="mt-3 line-clamp-3 text-sm text-text-secondary">{{ $achievement->short_description }}</p>
                            @endif
                        </a>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- Geographical presence (SOW 2.5) --}}
    @include('public.partials.locations-cta')

    {{-- Calls to action (SOW 2.14) --}}
    <section class="section-tight">
        <div class="container-page flex flex-wrap justify-center gap-3">
            <x-button :href="route('projects.index')" arrow>{{ __('Explore our projects') }}</x-button>
            <x-button variant="outline" :href="route('sectors.index')">{{ __('View sector expertise') }}</x-button>
            <x-button variant="outline" :href="route('contact.index')">{{ __('Contact our experts') }}</x-button>
        </div>
    </section>
@endsection