@extends('layouts.public')

@section('title', __('Achievements & Accreditation'))
@section('meta_description', __('Awards, recognitions, accreditations and milestones earned across four decades of consulting.'))

@section('content')
    <x-page-hero :eyebrow="__('Track record')"
                 :title="__('Achievements & Accreditation')"
                 :subtitle="__('Milestones, recognitions and accreditations, in chronological order.')"
                 :breadcrumbs="[__('Achievements') => null]" />

    @if ($statistics->isNotEmpty())
        <section class="border-b border-border bg-surface" aria-label="{{ __('Organisation in numbers') }}">
            <div class="container-page grid gap-10 py-12 sm:grid-cols-2 lg:grid-cols-4" data-reveal-group>
                @foreach ($statistics->take(4) as $statistic)
                    <x-stat-counter :statistic="$statistic" />
                @endforeach
            </div>
        </section>
    @endif

    <section class="section">
        <div class="container-page">
            <div class="mb-12 flex flex-wrap gap-2">
                <a href="{{ route('achievements.index') }}" @class([blank($activeCategory) ? 'pill-active' : 'pill-idle'])>
                    {{ __('All') }}
                </a>
                @foreach ($categories as $key => $label)
                    <a href="{{ route('achievements.index', ['category' => $key]) }}"
                       @class([$activeCategory === $key ? 'pill-active' : 'pill-idle'])>{{ $label }}</a>
                @endforeach
            </div>

            @if ($achievements->isEmpty())
                <x-empty-state icon="trophy"
                               :title="__('No achievements listed yet')"
                               :message="__('Recognitions will appear here as they are published.')" />
            @else
                {{-- Chronological timeline, newest first. --}}
                <ol class="relative space-y-6 border-l border-border pl-8 sm:pl-12" data-reveal-group>
                    @foreach ($achievements as $achievement)
                        <li class="relative" data-reveal-child>
                            <span class="absolute -left-[2.35rem] top-7 flex size-3.5 items-center justify-center rounded-full border-2 border-background bg-primary sm:-left-[3.35rem]"></span>

                            <article class="card-interactive group flex flex-col gap-6 p-6 sm:flex-row sm:p-7">
                                @if ($achievement->image || $achievement->badge)
                                    <img src="{{ thumb_url($achievement->badge ?: $achievement->image) }}"
                                         alt="{{ $achievement->title }}" loading="lazy" decoding="async"
                                         class="h-24 w-full rounded-xl object-cover sm:w-36">
                                @endif

                                <div class="min-w-0 flex-1">
                                    <div class="flex flex-wrap items-center gap-3">
                                        <x-badge variant="brand">{{ $categories[$achievement->category] ?? $achievement->category }}</x-badge>

                                        @if ($achievement->achieved_on)
                                            <time class="meta-label" datetime="{{ $achievement->achieved_on->toDateString() }}">
                                                {{ $achievement->achieved_on->format('M Y') }}
                                            </time>
                                        @endif

                                        @if ($achievement->is_accreditation)
                                            <x-badge variant="success" icon="shield">{{ __('Accreditation') }}</x-badge>
                                        @endif
                                    </div>

                                    <h2 class="mt-3 font-display text-lg font-semibold leading-snug text-text">
                                        <a href="{{ route('achievements.show', $achievement) }}" class="transition group-hover:text-text-brand">
                                            {{ $achievement->title }}
                                            <span class="absolute inset-0" aria-hidden="true"></span>
                                        </a>
                                    </h2>

                                    @if ($achievement->awarding_body)
                                        <p class="mt-1.5 text-sm text-text-brand">{{ $achievement->awarding_body }}</p>
                                    @endif

                                    @if ($achievement->short_description)
                                        <p class="mt-3 text-sm leading-relaxed text-text-secondary">{{ $achievement->short_description }}</p>
                                    @endif
                                </div>
                            </article>
                        </li>
                    @endforeach
                </ol>
            @endif
        </div>
    </section>
@endsection