@if ($flagshipProjects->isNotEmpty())
    {{-- Flagship project highlights, filtered by sector without a page reload (SOW 1.7). --}}
    <section class="section" x-data="fragmentFilter('{{ route('fragments.home.flagship') }}', { sector: 'all' })">
        <div class="container-page">
            <div class="flex flex-wrap items-end justify-between gap-6">
                <x-section-heading :eyebrow="__('Portfolio')"
                                   :title="__('Flagship Project Highlights')"
                                   :subtitle="__('Selected assignments across transportation, energy, water and urban development.')" />

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

            <div class="mt-10 flex flex-wrap gap-2" role="tablist" aria-label="{{ __('Filter projects by sector') }}">
                @foreach ($projectTabs as $slug => $label)
                    <button type="button" role="tab" @click="apply({ sector: '{{ $slug }}' })"
                            :aria-selected="is('sector', '{{ $slug }}')"
                            :class="is('sector', '{{ $slug }}') ? 'pill-active' : 'pill-idle'">
                        {{ $label }}
                    </button>
                @endforeach
            </div>

            <div x-ref="results" class="mt-8 transition-opacity duration-200" :class="loading && 'opacity-40'"
                 aria-live="polite" aria-busy="false" :aria-busy="loading">
                @include('public.partials.project-grid', [
                    'projects' => $flagshipProjects,
                    'columns' => 3,
                    'numbered' => true,
                ])
            </div>
        </div>
    </section>
@endif