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

	let { data } = $props();

	const crumbs = [
		{ name: 'Accueil', path: '/' },
		{ name: 'Après le GONG', path: '/apres-le-gong/' }
	];
</script>

<Seo
	title="Après le GONG — les organisations indépendantistes guadeloupéennes (1968-2025)"
	description="UTA, UGTG, UPLG, GLA, ARC, LKP : l'histoire des organisations indépendantistes et pro-indépendantistes guadeloupéennes après la disparition du GONG, de 1968 à nos jours."
	path="/apres-le-gong/"
	type="article"
	graph={[webPage('/apres-le-gong/', 'Après le GONG', 'Les organisations indépendantistes guadeloupéennes de 1968 à nos jours.')]}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />
		<h1>Après le GONG</h1>

		<!-- Texte d'introduction (content/apres-le-gong/_index.md, rendu markdown côté serveur). -->
		<div class="prose intro">{@html data.index.html}</div>

		<figure class="filiation">
			<img
				src="/img/filiation-mouvement-independantiste.png"
				alt="Schéma des filiations du mouvement indépendantiste guadeloupéen après 1968"
				loading="lazy"
				decoding="async"
			/>
			<figcaption>Schéma des filiations du mouvement indépendantiste guadeloupéen après 1968</figcaption>
		</figure>

		<ul class="grille">
			{#each data.pages as p, i (p.slug)}
				<li>
					<a class="card card--link" href="/apres-le-gong/{p.slug}/" use:reveal={i}>
						<span class="ordre">Page {p.ordre}</span>
						<h2>{p.titre}</h2>
						<p>{p.chapeau}</p>
					</a>
				</li>
			{/each}
		</ul>
	</div>
</main>

<style>
	.intro {
		max-width: var(--container-lecture);
	}
	.filiation {
		margin: var(--space-3) 0;
		max-width: 900px;
	}
	.filiation img {
		width: 100%;
		border-radius: var(--radius-md);
		border: 1px solid var(--line);
	}
	.filiation figcaption {
		font-size: 0.85rem;
		color: var(--muted-fort);
		margin-top: 0.4rem;
	}
	.grille {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: var(--space-3);
	}
	.ordre {
		font-size: 0.8rem;
		color: var(--muted-fort);
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
	.grille h2 {
		font-size: 1.2rem;
		text-transform: none;
		margin: 0.3rem 0;
	}
	.grille p {
		color: var(--muted);
		margin: 0;
	}
</style>
