@php
    $title = 'Chronologie';
    $description = "La chronologie sourcée du parcours de Te Litho Tenge Didier, de sa formation à son engagement actuel.";
@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">
            <p class="eyebrow text-gold-300">Chronologie</p>
            <h1 class="h-display mt-3 text-4xl font-semibold sm:text-5xl">Un parcours, année après année</h1>
            <p class="mt-4 max-w-2xl text-paper/70">
                Chaque étape indique son niveau de confiance documentaire. Aucune fonction n'est présentée comme
                actuelle sans preuve datée — le détail des sources est disponible sur chaque évènement.
            </p>

            <nav class="mt-8 flex flex-wrap gap-2" aria-label="Aller à une période">
                @foreach ($periods as $period)
                    <a href="#{{ $period->slug }}" class="rounded-full border border-paper/25 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-paper/80 hover:border-gold-400 hover:text-gold-300">
                        {{ $period->start_year }}{{ $period->end_year ? '–'.$period->end_year : '+' }}
                    </a>
                @endforeach
            </nav>
        </div>
    </section>

    @php
        // Chaque periode recoit sa propre ambiance (teinte issue de la meme
        // palette limitee — bleu Congo / or / encre / papier), pour que le
        // visiteur ressente le passage du temps sans qu'aucune nouvelle
        // couleur ne soit introduite.
        $ambiances = [
            ['section' => 'bg-congo-950 text-paper', 'eyebrow' => 'text-gold-300', 'spine' => 'border-gold-500/40', 'year' => 'text-gold-400', 'title' => 'text-paper', 'body' => 'text-paper/75', 'meta' => 'text-paper/60'],
            ['section' => 'bg-paper text-ink-900', 'eyebrow' => 'text-gold-600', 'spine' => 'border-congo-800/30', 'year' => 'text-congo-800', 'title' => 'text-ink-900', 'body' => 'text-ink-700', 'meta' => 'text-ink-500'],
            ['section' => 'bg-congo-900 text-paper', 'eyebrow' => 'text-gold-300', 'spine' => 'border-gold-500/40', 'year' => 'text-gold-400', 'title' => 'text-paper', 'body' => 'text-paper/75', 'meta' => 'text-paper/60'],
            ['section' => 'bg-gold-100 text-congo-950', 'eyebrow' => 'text-gold-600', 'spine' => 'border-congo-800/30', 'year' => 'text-congo-800', 'title' => 'text-congo-950', 'body' => 'text-ink-700', 'meta' => 'text-ink-500'],
            ['section' => 'bg-ink-900 text-paper', 'eyebrow' => 'text-gold-300', 'spine' => 'border-gold-500/40', 'year' => 'text-gold-400', 'title' => 'text-paper', 'body' => 'text-paper/75', 'meta' => 'text-paper/60'],
        ];
    @endphp

    <div class="space-y-0">
        @foreach ($periods as $i => $period)
            @php
                $amb = $ambiances[$i % count($ambiances)];
                $cover = $period->events->map(fn ($e) => $e->cover())->filter()->first();
            @endphp
            <section id="{{ $period->slug }}" class="reveal scroll-mt-24 {{ $amb['section'] }} py-20">
                <div class="container-page">
                    @if ($cover)
                        <div class="relative mb-12 overflow-hidden rounded-3xl shadow-xl">
                            <x-media-picture :media="$cover" size="large" img-class="aspect-[21/9] w-full object-cover" />
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent"></div>
                            <div class="absolute inset-x-0 bottom-0 p-6 sm:p-8">
                                <p class="text-xs font-semibold uppercase tracking-[0.25em] text-gold-300">
                                    {{ $period->start_year }}{{ $period->end_year ? '–'.$period->end_year : ' — aujourd\'hui' }}
                                </p>
                                <h2 class="h-section mt-2 font-semibold text-paper">{{ $period->title }}</h2>
                            </div>
                        </div>
                    @endif

                    <div class="grid gap-8 lg:grid-cols-12">
                        <div class="lg:col-span-4">
                            @unless ($cover)
                                <p class="text-xs font-semibold uppercase tracking-widest {{ $amb['eyebrow'] }}">
                                    {{ $period->start_year }}{{ $period->end_year ? '–'.$period->end_year : ' — aujourd\'hui' }}
                                </p>
                                <h2 class="h-section mt-2 font-semibold {{ $amb['title'] }}">{{ $period->title }}</h2>
                            @endunless
                            <p class="mt-3 {{ $amb['body'] }}">{{ $period->summary }}</p>
                            <a href="{{ route('chronologie.show', $period) }}" class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold {{ $amb['year'] }} hover:underline">
                                Détail de cette période
                                <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>
                            </a>
                        </div>

                        <ol class="space-y-8 border-l-2 {{ $amb['spine'] }} pl-6 lg:col-span-8">
                            @foreach ($period->events as $event)
                                <li>
                                    <div class="flex flex-wrap items-center gap-2">
                                        <span class="h-display text-sm font-semibold {{ $amb['year'] }}">
                                            {{ $event->year_start }}{{ $event->year_end && $event->year_end !== $event->year_start ? '–'.$event->year_end : '' }}
                                        </span>
                                        <x-confidence-badge :confidence="$event->confidence" />
                                    </div>
                                    <h3 class="h-display mt-1 text-xl font-semibold {{ $amb['title'] }}">{{ $event->title }}</h3>
                                    @if($event->function_title)
                                        <p class="text-sm font-medium {{ $amb['meta'] }}">{{ $event->function_title }}</p>
                                    @endif
                                    <p class="mt-2 leading-relaxed {{ $amb['body'] }}">{{ $event->summary }}</p>
                                </li>
                            @endforeach
                        </ol>
                    </div>
                </div>
            </section>
        @endforeach
    </div>
</x-layout>