{{-- Organisation introduction (SOW 1.8) with the sector shortcuts (SOW 1.6). --}}
<section class="section">
    <div class="container-page grid items-start gap-14 lg:grid-cols-12">

        <div class="lg:col-span-6">
            <x-section-heading :eyebrow="__('About ABACO INFRA')"
                               :title="setting('home_about_title', __('Engineering excellence across Asia and Africa'))"
                               :subtitle="setting('home_about_intro')" />

            @if ($body = setting('home_about_body'))
                <div class="prose-content prose-measure mt-6">{!! $body !!}</div>
            @endif

            <div class="mt-9 flex flex-wrap gap-3" data-reveal>
                <x-button :href="route('about')" arrow>{{ __('Who We Are') }}</x-button>
                <x-button variant="outline" :href="route('projects.index')">{{ __('Explore Our Projects') }}</x-button>
            </div>
        </div>

        @if ($featuredSectors->isNotEmpty())
            <div class="lg:col-span-6">
                <p class="meta-label mb-4">{{ __('Sector shortcuts') }}</p>

                <div class="grid gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-2"
                     data-reveal-group>
                    @foreach ($featuredSectors as $sector)
                        <a href="{{ route('sectors.show', $sector) }}"
                           class="group flex items-start gap-4 bg-surface p-5 transition hover:bg-primary-50"
                           data-reveal-child>
                            <span class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary transition group-hover:bg-primary group-hover:text-white">
                                @if ($sector->icon)
                                    <img src="{{ asset_path($sector->icon) }}" alt="" class="size-5">
                                @else
                                    <x-icon name="grid" class="size-5" />
                                @endif
                            </span>

                            <span class="min-w-0">
                                <span class="block font-display text-sm font-semibold text-text">{{ $sector->name }}</span>
                                <span class="meta-label mt-1 block">
                                    {{ trans_choice(':count project|:count projects', $sector->projects_count, ['count' => $sector->projects_count]) }}
                                </span>
                            </span>
                        </a>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</section>