<script lang="ts">
	import Seo from '$lib/components/Seo.svelte';
	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
	import { webPage } from '$lib/seo';

	let { data } = $props();
	const p = $derived(data.page);

	const crumbs = $derived([
		{ name: 'Accueil', path: '/' },
		{ name: 'Après le GONG', path: '/apres-le-gong/' },
		{ name: p.titre, path: `/apres-le-gong/${p.slug}/` }
	]);
</script>

<Seo
	title={p.titre}
	description={p.chapeau}
	path={`/apres-le-gong/${p.slug}/`}
	type="article"
	graph={[webPage(`/apres-le-gong/${p.slug}/`, p.titre, p.chapeau)]}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />
		<article>
			<header class="art-head">
				<p class="kicker">Après le GONG · page {p.ordre} sur 7</p>
				<h1>{p.titre}</h1>
				<p class="chapeau">{p.chapeau}</p>
			</header>
			<!-- Contenu first-party (rendu markdown côté serveur, notes [^N^] traitées). -->
			<div class="prose art-body">{@html p.html}</div>
		</article>

		<nav class="suite" aria-label="Pages de la section">
			{#if data.precedente}
				<a class="btn btn--ghost" href="/apres-le-gong/{data.precedente.slug}/">← {data.precedente.titre}</a>
			{/if}
			<a class="btn btn--ghost" href="/apres-le-gong/">← Après le GONG</a>
			{#if data.suivante}
				<a class="btn btn--ghost" href="/apres-le-gong/{data.suivante.slug}/">{data.suivante.titre} →</a>
			{/if}
		</nav>
	</div>
</main>

<style>
	.art-head {
		max-width: var(--container-lecture);
	}
	.kicker {
		font-size: 0.85rem;
		color: var(--muted-fort);
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
	.chapeau {
		font-size: 1.2rem;
		color: var(--muted);
		font-style: italic;
	}
	.art-body {
		margin-top: var(--space-3);
	}
	.suite {
		display: flex;
		gap: 0.6rem;
		flex-wrap: wrap;
		margin-top: var(--space-4);
	}
</style>
