@php
    $title = $period->title;
    $description = $period->summary;
@endphp
<x-layout :title="$title" :description="$description">

    <section class="border-b border-ink-900/10 bg-paper-dim py-14">
        <div class="container-page">
            <nav class="flex flex-wrap gap-2 text-xs" aria-label="Fil d'ariane">
                <a href="{{ route('chronologie.index') }}" class="text-ink-500 hover:text-congo-800">Chronologie</a>
                <span class="text-ink-300">/</span>
                <span class="text-ink-700">{{ $period->title }}</span>
            </nav>
            <p class="eyebrow mt-4">{{ $period->start_year }}{{ $period->end_year ? '–'.$period->end_year : ' — aujourd\'hui' }}</p>
            <h1 class="h-display mt-2 text-4xl font-semibold text-ink-900">{{ $period->title }}</h1>
            <p class="mt-3 max-w-2xl text-ink-600">{{ $period->summary }}</p>

            <div class="mt-6 flex flex-wrap gap-2">
                @foreach ($periods as $p)
                    <a href="{{ route('chronologie.show', $p) }}"
                       class="rounded-full px-4 py-2 text-xs font-semibold uppercase tracking-wide {{ $p->id === $period->id ? 'bg-congo-900 text-paper' : 'border border-ink-900/15 text-ink-600 hover:border-congo-800/40' }}">
                        {{ $p->title }}
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <div class="container-page py-16">
        <div class="mx-auto max-w-3xl space-y-14">
            @forelse ($period->events as $event)
                @php $cover = $event->cover(); @endphp
                <article>
                    @if($cover)
                        <div class="mb-6 overflow-hidden rounded-2xl">
                            <x-media-picture :media="$cover" size="large" img-class="w-full max-h-[420px] object-cover" />
                        </div>
                    @endif
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="h-display text-sm font-semibold text-congo-800">
                            {{ $event->year_start }}{{ $event->year_end && $event->year_end !== $event->year_start ? '–'.$event->year_end : '' }}
                        </span>
                        <x-confidence-badge :confidence="$event->confidence" />
                    </div>
                    <h2 class="h-display mt-2 text-2xl font-semibold text-ink-900">{{ $event->title }}</h2>
                    @if($event->function_title)
                        <p class="mt-1 text-sm font-semibold text-ink-500">{{ $event->function_title }}</p>
                    @endif
                    @if($event->location)
                        <p class="mt-1 text-xs uppercase tracking-wide text-gold-600">{{ $event->location }}</p>
                    @endif

                    @if($event->context)
                        <p class="mt-4 leading-relaxed text-ink-600">{{ $event->context }}</p>
                    @endif
                    <p class="mt-4 leading-relaxed text-ink-800">{{ $event->summary }}</p>
                    @if($event->body)
                        <div class="prose prose-neutral mt-4 max-w-none text-ink-700">{!! nl2br(e($event->body)) !!}</div>
                    @endif

                    @if($event->source_label)
                        <p class="mt-5 border-t border-ink-900/10 pt-4 text-xs text-ink-500">
                            Source :
                            @if($event->source_url)
                                <a href="{{ $event->source_url }}" target="_blank" rel="noopener noreferrer" class="underline hover:text-congo-800">{{ $event->source_label }}</a>
                            @else
                                {{ $event->source_label }}
                            @endif
                        </p>
                    @endif
                </article>
            @empty
                <p class="text-ink-500">Aucun évènement publié pour cette période pour le moment.</p>
            @endforelse
        </div>
    </div>
</x-layout>