@if ($leadership->isNotEmpty())
    {{-- Team & expertise (SOW 3). --}}
    <section class="section">
        <div class="container-page">
            <div class="flex flex-wrap items-end justify-between gap-6">
                <x-section-heading :eyebrow="__('Our people')"
                                   :title="__('Expertise behind the work')"
                                   :subtitle="__('Engineers, planners, economists and social specialists leading assignments in the field.')" />

                <div class="flex shrink-0 items-center gap-6">
                    @if ($teamCount)
                        <p class="hidden sm:block">
                            <span class="font-display text-3xl font-bold text-primary">{{ $teamCount }}</span>
                            <span class="meta-label ml-1">{{ __('professionals') }}</span>
                        </p>
                    @endif

                    <x-button variant="outline" :href="route('team.index')">{{ __('Meet the team') }}</x-button>
                </div>
            </div>

            <div class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4" data-reveal-group>
                @foreach ($leadership as $member)
                    <article class="group relative" data-reveal-child>
                        <x-image :src="$member->photo" :alt="$member->name" ratio="3/4" zoom rounded="rounded-xl">
                            <div class="scrim opacity-80"></div>

                            <div class="absolute inset-x-0 bottom-0 p-5">
                                <h3 class="font-display text-base font-semibold text-white">
                                    <a href="{{ route('team.show', $member) }}">
                                        {{ $member->name }}
                                        <span class="absolute inset-0" aria-hidden="true"></span>
                                    </a>
                                </h3>

                                @if ($member->designation)
                                    <p class="mt-0.5 text-xs text-white/75">{{ $member->designation }}</p>
                                @endif

                                @if ($member->sector)
                                    <p class="meta-label mt-2 text-white/55">{{ $member->sector->name }}</p>
                                @endif
                            </div>
                        </x-image>
                    </article>
                @endforeach
            </div>
        </div>
    </section>
@endif