@if ($allSectors->isNotEmpty())
    {{-- Sectors overview (SOW 1.10 / 5). --}}
    <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="__('Areas of expertise')"
                                   :title="__('Sectors & Services')"
                                   :subtitle="__('Multidisciplinary engineering and development services, delivered from feasibility through to construction supervision.')" />

                <x-button variant="outline" :href="route('sectors.index')" class="shrink-0">
                    {{ __('All sectors') }}
                </x-button>
            </div>

            <div class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3" data-reveal-group>
                @foreach ($allSectors->take(6) as $sector)
                    <x-sector-card :sector="$sector" :count="$sector->projects_count" />
                @endforeach
            </div>

            @if ($allSectors->count() > 6)
                <div class="mt-8 flex flex-wrap gap-2" data-reveal>
                    <span class="meta-label self-center">{{ __('Also covering') }}</span>
                    @foreach ($allSectors->skip(6) as $sector)
                        <a href="{{ route('sectors.show', $sector) }}" class="pill-idle">{{ $sector->name }}</a>
                    @endforeach
                </div>
            @endif
        </div>
    </section>
@endif