@php
    $title = "Domaines d'action";
    $description = "Les domaines d'action documentés du parcours de Te Litho Tenge Didier : assainissement, environnement, urbanisme, sécurité, santé, éducation, action sociale et coopération institutionnelle.";
@endphp
<x-layout :title="$title" :description="$description">

    <section class="border-b border-ink-900/10 bg-paper-dim py-16">
        <div class="container-page">
            <p class="eyebrow">Actions et domaines d'expérience</p>
            <h1 class="h-display mt-3 text-4xl font-semibold text-ink-900 sm:text-5xl">Une gouvernance de proximité, par domaine</h1>
            <p class="mt-4 max-w-2xl text-ink-600">
                Chaque domaine distingue le contexte, le bilan documenté par les archives de terrain, et la vision
                portée pour l'avenir — sans jamais confondre l'un avec l'autre.
            </p>
        </div>
    </section>

    <div class="container-page py-16">
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($domains as $domain)
                <a href="{{ route('actions.show', $domain) }}" class="group flex flex-col rounded-2xl border border-ink-900/10 bg-white/60 p-7 transition hover:border-congo-800/30 hover:shadow-lg">
                    <span class="text-xs font-semibold uppercase tracking-wide text-gold-600">{{ $counts[$domain->media_category] ?? 0 }} archives documentées</span>
                    <h2 class="h-display mt-2 text-xl font-semibold text-ink-900 group-hover:text-congo-800">{{ $domain->title }}</h2>
                    <p class="mt-3 flex-1 text-sm leading-relaxed text-ink-500">{{ $domain->context }}</p>
                    <span class="mt-5 inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-congo-800">
                        Voir le dossier
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-3.5 w-3.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                    </span>
                </a>
            @endforeach
        </div>
    </div>
</x-layout>