@php
    $title = $domain->title;
    $description = $domain->context;
@endphp
<x-layout :title="$title" :description="$description">

    <section class="border-b border-ink-900/10 bg-congo-950 py-16 text-paper">
        <div class="container-page">
            <nav class="flex flex-wrap gap-2 text-xs" aria-label="Fil d'ariane">
                <a href="{{ route('actions.index') }}" class="text-paper/60 hover:text-gold-300">Actions</a>
                <span class="text-paper/30">/</span>
                <span class="text-paper/90">{{ $domain->title }}</span>
            </nav>
            <h1 class="h-display mt-3 text-4xl font-semibold sm:text-5xl">{{ $domain->title }}</h1>
            <p class="mt-4 max-w-2xl text-paper/70">{{ $domain->context }}</p>
        </div>
    </section>

    <div class="container-page grid gap-10 py-16 lg:grid-cols-12">
        <div class="space-y-8 lg:col-span-4">
            @if($domain->bilan)
                <div class="rounded-2xl border border-ink-900/10 bg-white/60 p-6">
                    <p class="eyebrow">Bilan documenté</p>
                    <p class="mt-3 leading-relaxed text-ink-700">{{ $domain->bilan }}</p>
                </div>
            @endif
            @if($domain->vision)
                <div class="rounded-2xl bg-gold-100 p-6">
                    <p class="eyebrow">Vision portée</p>
                    <p class="mt-3 leading-relaxed text-congo-950">{{ $domain->vision }}</p>
                </div>
            @endif
        </div>

        <div class="lg:col-span-8">
            <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                @forelse ($media as $item)
                    <a href="{{ route('galerie.index', ['categorie' => $domain->media_category]) }}" class="group overflow-hidden rounded-xl">
                        <x-media-picture :media="$item" size="medium" img-class="aspect-[4/3] w-full object-cover transition duration-500 group-hover:scale-105" />
                    </a>
                @empty
                    <p class="col-span-full text-ink-500">Archives en cours de classement pour ce domaine.</p>
                @endforelse
            </div>
            @if($media->hasPages())
                <div class="mt-8">{{ $media->links() }}</div>
            @endif
        </div>
    </div>
</x-layout>