@extends('layouts.public')

@section('title', __('Our Team'))
@section('meta_description', __('Leadership, senior consultants, project leads and technical professionals delivering ABACO INFRA assignments.'))

@section('content')
    <x-page-hero :eyebrow="__('Our people')"
                 :title="__('Meet our experts')"
                 :subtitle="__('Engineers, planners, economists and social specialists leading assignments in the field.')"
                 :image="image_url(setting('team_banner'))"
                 :breadcrumbs="[__('Our Team') => null]" />

    <section class="section">
        <div class="container-page">
            <form method="GET" class="mb-12 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
                <div>
                    <p class="meta-label mb-3">{{ __('Filter by sector') }}</p>
                    <div class="flex flex-wrap gap-2">
                        <a href="{{ route('team.index') }}" @class([blank($activeSector) ? 'pill-active' : 'pill-idle'])>
                            {{ __('All departments') }}
                        </a>
                        @foreach ($sectors as $sector)
                            <a href="{{ route('team.index', ['sector' => $sector->slug]) }}"
                               @class([$activeSector === $sector->slug ? 'pill-active' : 'pill-idle'])>{{ $sector->name }}</a>
                        @endforeach
                    </div>
                </div>

                <div class="relative w-full lg:w-72 lg:shrink-0">
                    <label for="team-search" class="meta-label mb-3 block">{{ __('Search') }}</label>
                    <x-icon name="search" class="pointer-events-none absolute left-3.5 top-[2.6rem] size-4 text-text-muted" />
                    <input id="team-search" type="search" name="q" value="{{ request('q') }}"
                           placeholder="{{ __('Name or role…') }}" class="form-input pl-10">
                    @if ($activeSector)
                        <input type="hidden" name="sector" value="{{ $activeSector }}">
                    @endif
                </div>
            </form>

            @if ($groups->isEmpty() && $ungrouped->isEmpty())
                <x-empty-state icon="users"
                               :title="__('No team members match this filter')"
                               :message="__('Try clearing the search or selecting a different department.')" />
            @endif

            @foreach ($groups as $group)
                <section class="mb-16 last:mb-0">
                    <div class="mb-8 flex flex-wrap items-baseline gap-4" data-reveal>
                        <h2 class="font-display text-title font-bold text-text">{{ $group->name }}</h2>
                        <span class="h-px flex-1 bg-border"></span>
                        <span class="meta-label">
                            {{ trans_choice(':count member|:count members', $group->activeMembers->count(), ['count' => $group->activeMembers->count()]) }}
                        </span>
                    </div>

                    @if ($group->description)
                        <p class="prose-measure mb-8 text-sm text-text-secondary">{{ $group->description }}</p>
                    @endif

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

            @if ($ungrouped->isNotEmpty())
                <section class="mb-16">
                    <div class="mb-8 flex items-baseline gap-4">
                        <h2 class="font-display text-title font-bold text-text">{{ __('Other professionals') }}</h2>
                        <span class="h-px flex-1 bg-border"></span>
                    </div>

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

    <section class="relative overflow-hidden bg-dark">
        <div class="absolute inset-0 bg-blueprint-dark opacity-50" aria-hidden="true"></div>

        <div class="container-page relative flex flex-col items-center gap-6 py-16 text-center">
            <h2 class="font-display text-headline font-bold text-white">{{ __('Connect with our experts') }}</h2>
            <p class="prose-measure text-white/70">
                {{ __('Looking for specialist input on an assignment? Our sector leads are available for consultation.') }}
            </p>
            <div class="flex flex-wrap justify-center gap-3">
                <x-button :href="route('contact.index')" arrow>{{ __('Request consulting support') }}</x-button>
                <x-button variant="on-dark" :href="route('sectors.index')">{{ __('Explore our services') }}</x-button>
            </div>
        </div>
    </section>
@endsection