@if ($achievements->isNotEmpty() || $accreditations->isNotEmpty())
    {{-- Achievements & accreditation (SOW 1.14 / 16). --}}
    <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="__('Track record')"
                                   :title="__('Achievements & Accreditation')" />

                <x-button variant="outline" :href="route('achievements.index')" class="shrink-0">
                    {{ __('All recognitions') }}
                </x-button>
            </div>

            @if ($achievements->isNotEmpty())
                <div class="mt-10 grid gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-4"
                     data-reveal-group>
                    @foreach ($achievements as $achievement)
                        <a href="{{ route('achievements.show', $achievement) }}"
                           class="group flex flex-col bg-surface p-7 transition hover:bg-primary-50" data-reveal-child>
                            <span class="mb-5 flex size-10 items-center justify-center rounded-lg bg-primary-50 text-primary transition group-hover:bg-primary group-hover:text-white">
                                <x-icon name="trophy" class="size-5" />
                            </span>

                            @if ($achievement->achieved_on)
                                <span class="meta-label mb-2">{{ $achievement->achieved_on->format('Y') }}</span>
                            @endif

                            <h3 class="font-display text-base font-semibold leading-snug text-text">{{ $achievement->title }}</h3>

                            @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 line-clamp-3 text-sm text-text-secondary">{{ $achievement->short_description }}</p>
                            @endif
                        </a>
                    @endforeach
                </div>
            @endif

            @if ($accreditations->isNotEmpty())
                <div class="mt-10 flex flex-wrap items-center gap-x-10 gap-y-6 rounded-2xl border border-border bg-surface px-8 py-6"
                     data-reveal>
                    <span class="meta-label">{{ __('Accredited to') }}</span>

                    @foreach ($accreditations as $badge)
                        <img src="{{ image_url($badge->badge ?: $badge->image) }}" alt="{{ $badge->title }}"
                             title="{{ $badge->title }}" loading="lazy" decoding="async"
                             class="h-10 w-auto opacity-80 transition hover:opacity-100">
                    @endforeach
                </div>
            @endif
        </div>
    </section>
@endif