@extends('layouts.public')

@section('title', $sector->seoTitle())
@section('meta_description', $sector->seoDescription())
@section('meta_image', $sector->seoImage())
@section('meta_keywords', $sector->seoKeywords())

@section('content')
    <x-page-hero :eyebrow="__('Sector')"
                 :title="$sector->name"
                 :subtitle="$sector->tagline ?: $sector->short_description"
                 :image="image_url($sector->banner ?: $sector->thumbnail)"
                 :breadcrumbs="[__('Sectors') => route('sectors.index'), $sector->name => null]"
                 :meta="[
                     __('Projects') => $projectCounts['total'],
                     __('Completed') => $projectCounts['completed'],
                     __('Ongoing') => $projectCounts['ongoing'],
                 ]" />

    <section class="section" data-pin-scope>
        <div class="container-page grid gap-14 lg:grid-cols-12">

            <div class="min-w-0 lg:col-span-7 xl:col-span-8">
                @if ($sector->short_description)
                    <p class="prose-measure font-display text-xl leading-relaxed text-text" data-reveal>
                        {{ $sector->short_description }}
                    </p>
                @endif

                @if ($sector->description)
                    <div class="prose-content mt-8" data-reveal>{!! $sector->description !!}</div>
                @endif

                @if (filled($sector->services))
                    <section class="mt-14" data-reveal>
                        <h2 class="mb-6 font-display text-title font-bold text-text">{{ __('Specialised services') }}</h2>

                        <ul class="grid gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-2">
                            @foreach ($sector->services as $service)
                                <li class="flex items-start gap-3 bg-surface px-5 py-4 text-sm text-text-secondary">
                                    <x-icon name="check" class="mt-0.5 size-4 shrink-0 text-success" />
                                    {{ $service }}
                                </li>
                            @endforeach
                        </ul>
                    </section>
                @endif

                @if ($sector->outcomes)
                    <section class="mt-14" data-reveal>
                        <h2 class="mb-5 font-display text-title font-bold text-text">{{ __('Key outputs & outcomes') }}</h2>
                        <div class="prose-content">{!! $sector->outcomes !!}</div>
                    </section>
                @endif

                @if ($sector->accreditations)
                    <section class="mt-14 rounded-2xl bg-primary-50 p-7" data-reveal>
                        <h2 class="mb-4 flex items-center gap-3 font-display text-lg font-semibold text-primary">
                            <x-icon name="shield" class="size-5" /> {{ __('Accreditations & standards') }}
                        </h2>
                        <div class="prose-content">{!! $sector->accreditations !!}</div>
                    </section>
                @endif

                @if ($sector->impact_summary)
                    <section class="mt-14" data-reveal>
                        <h2 class="mb-5 font-display text-title font-bold text-text">{{ __('Impact & achievements') }}</h2>
                        <div class="prose-content">{!! $sector->impact_summary !!}</div>
                    </section>
                @endif
            </div>

            <aside class="lg:col-span-5 xl:col-span-4">
                <div data-pin-media class="space-y-5">
                    <div class="panel">
                        <p class="meta-label mb-5">{{ __('Sector at a glance') }}</p>

                        <dl class="space-y-4">
                            @foreach ([
                                __('Total projects') => $projectCounts['total'],
                                __('Completed') => $projectCounts['completed'],
                                __('Ongoing') => $projectCounts['ongoing'],
                            ] as $label => $value)
                                <div class="flex items-center justify-between gap-4 border-b border-border pb-4 last:border-0 last:pb-0">
                                    <dt class="text-sm text-text-secondary">{{ $label }}</dt>
                                    <dd class="font-display text-2xl font-bold text-primary">{{ $value }}</dd>
                                </div>
                            @endforeach
                        </dl>

                        <x-button :href="route('projects.index', ['sector' => $sector->slug])" class="mt-6 w-full" arrow>
                            {{ __('View sector projects') }}
                        </x-button>
                        <x-button variant="outline" :href="route('contact.index')" class="mt-2 w-full">
                            {{ __('Contact our experts') }}
                        </x-button>
                    </div>

                    @if ($achievements->isNotEmpty())
                        <div class="panel">
                            <p class="meta-label mb-4">{{ __('Sector achievements') }}</p>
                            <ul class="space-y-4">
                                @foreach ($achievements as $achievement)
                                    <li>
                                        <a href="{{ route('achievements.show', $achievement) }}" class="group block">
                                            <p class="text-sm font-medium text-text transition group-hover:text-text-brand">{{ $achievement->title }}</p>
                                            @if ($achievement->achieved_on)
                                                <p class="meta-label mt-1">{{ $achievement->achieved_on->format('M Y') }}</p>
                                            @endif
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if ($relatedMedia->isNotEmpty())
                        <div class="panel">
                            <p class="meta-label mb-4">{{ __('Related updates') }}</p>
                            <ul class="space-y-4">
                                @foreach ($relatedMedia as $item)
                                    <li>
                                        <a href="{{ route('media.show', $item) }}" class="group block">
                                            <p class="text-sm font-medium text-text transition group-hover:text-text-brand">{{ $item->title }}</p>
                                            <p class="meta-label mt-1">{{ $item->typeLabel() }}</p>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
            </aside>
        </div>
    </section>

    {{-- Full-bleed sector imagery: the work at the scale it is delivered. --}}
    @if ($sector->banner)
        <x-immersive-band :src="$sector->banner" :alt="$sector->name" height="md" overlay="brand">
            <div class="max-w-2xl" data-reveal>
                <p class="eyebrow mb-3 text-white/60">{{ $sector->name }}</p>

                @if ($sector->tagline)
                    <p class="font-display text-headline font-bold text-white">{{ $sector->tagline }}</p>
                @endif

                <x-button variant="on-dark" :href="route('contact.index')" class="mt-7" arrow>
                    {{ __('Discuss an assignment') }}
                </x-button>
            </div>
        </x-immersive-band>
    @endif

    @if ($featuredProjects->isNotEmpty())
        <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="__('Portfolio')"
                                       :title="__('Featured projects in :sector', ['sector' => $sector->name])" />

                    <x-button variant="outline" :href="route('projects.index', ['sector' => $sector->slug])" class="shrink-0" arrow>
                        {{ __('All sector projects') }}
                    </x-button>
                </div>

                <div class="mt-10">
                    @include('public.partials.project-grid', [
                        'projects' => $featuredProjects,
                        'columns' => 3,
                        'numbered' => true,
                    ])
                </div>
            </div>
        </section>
    @endif
@endsection