@extends('layouts.public')

@section('title', __('Sectors & Services'))
@section('meta_description', __('Transportation, hydropower and energy, water supply and sanitation, urban development, irrigation, water resources, GIS and mapping, and capacity building.'))

@section('content')
    <x-page-hero :eyebrow="__('Areas of expertise')"
                 :title="__('Sectors & Services')"
                 :subtitle="__('Multidisciplinary engineering and development services, delivered from feasibility through to construction supervision.')"
                 :image="image_url(setting('sectors_banner'))"
                 :breadcrumbs="[__('Sectors') => null]" />

    <section class="section">
        <div class="container-page">
            @if ($sectors->isEmpty())
                <x-empty-state icon="grid"
                               :title="__('Sectors are being published')"
                               :message="__('Sector pages will appear here once the content team publishes them.')" />
            @else
                <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4" data-reveal-group>
                    @foreach ($sectors as $sector)
                        <x-sector-card :sector="$sector" :count="$sector->projects_count" />
                    @endforeach
                </div>
            @endif
        </div>
    </section>

    <section class="section-tight bg-surface-muted/60">
        <div class="container-page flex flex-col items-center gap-5 text-center">
            <h2 class="font-display text-title font-bold text-text">{{ __('Not sure which service you need?') }}</h2>
            <p class="prose-measure text-text-secondary">
                {{ __('Describe the assignment and our sector leads will advise on scope, methodology and the team required.') }}
            </p>
            <div class="flex flex-wrap justify-center gap-3">
                <x-button :href="route('contact.index')" arrow>{{ __('Contact our experts') }}</x-button>
                <x-button variant="outline" :href="route('projects.index')">{{ __('Browse the portfolio') }}</x-button>
            </div>
        </div>
    </section>
@endsection