<script lang="ts">
	import Seo from '$lib/components/Seo.svelte';
	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
	import Resume from '$lib/components/Resume.svelte';
	import SectionTitle from '$lib/components/SectionTitle.svelte';
	import Icon from '$lib/components/Icon.svelte';
	import { reveal } from '$lib/motion/reveal';
	import { webPage } from '$lib/seo';
	import { heritage as h, repression as r } from '$lib/data/gong';

	const crumbs = [
		{ name: 'Accueil', path: '/' },
		{ name: 'Héritage', path: '/heritage/' }
	];
</script>

<Seo
	title="L'héritage du GONG"
	description="Répression, dissolution puis postérité : l'UPLG, l'UGTG, l'UTA et le mouvement indépendantiste guadeloupéen sont nés dans le sillage du GONG. Œuvres, mémoire et commémorations de Mé 67."
	path="/heritage/"
	type="article"
	graph={[webPage('/heritage/', 'Héritage du GONG', 'Répression, mouvements issus, mémoire et postérité culturelle.')]}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />
		<h1>Héritage</h1>

		<div class="lecture">
			<Resume
				lead="Décapité par la répression de 1967-1968, le GONG n'a pas disparu sans laisser de traces. Il a ensemencé tout le mouvement indépendantiste et syndical guadeloupéen : l'UPLG, l'UGTG, l'UTA et d'autres en sont directement issus."
				points={[
					'70+ arrestations, dissolution du mouvement en 1968.',
					'L’UPLG (1978) : premier parti indépendantiste structuré, toujours actif.',
					'L’UGTG (1973) : syndicat de masse issu de la mouvance GONG/AGEG.',
					'Mé 67 est aujourd’hui une date de commémoration en Guadeloupe.'
				]}
			/>
		</div>

		<!-- RÉPRESSION -->
		<section class="section--tight">
			<SectionTitle title="La répression et la dissolution" as="h2" id="repression" />
			<div class="lecture prose">
				<p><strong>Arrestations.</strong> {r.arrestations}</p>
				<p><strong>Incarcération.</strong> {r.incarceration}. {r.dissolution}.</p>
				<h3>Conséquences</h3>
				<ul>
					{#each r.consequences as c (c)}
						<li>{c}</li>
					{/each}
				</ul>
				<h3>Les responsables de la répression</h3>
				<ul>
					{#each r.responsables as resp (resp.nom)}
						<li><strong>{resp.nom}</strong> — {resp.role}. {resp.note}</li>
					{/each}
				</ul>
			</div>
		</section>

		<!-- MOUVEMENTS ISSUS -->
		<section class="section--tight">
			<SectionTitle title="Les mouvements héritiers" as="h2" id="mouvements" />
			<ul class="grille">
				{#each h.mouvements as m, i (m.nom)}
					<li class="card card--vert" use:reveal={i}>
						{#if m.nom.startsWith('UPLG')}
							<img class="flag-illus" src="/images/drapeau-uplg.svg" alt="Drapeau proposé par l'UPLG pour une Guadeloupe indépendante : bandes vertes, rouge, blanche et jaune avec une étoile." width="120" height="60" loading="lazy" />
						{/if}
						<span class="date">{m.dateCreation}</span>
						<h3>{m.nom}</h3>
						<p>{m.description}</p>
					</li>
				{/each}
			</ul>
		</section>

		<!-- INFLUENCE CULTURELLE -->
		<section class="section--tight">
			<SectionTitle title="Dans la culture" as="h2" id="culture" />
			<ul class="oeuvres">
				{#each h.influenceCulturelle as o, i (o.oeuvre)}
					<li class="oeuvre" use:reveal={i}>
						<Icon name="book" size="1.4rem" />
						<div>
							<h3>{o.oeuvre} <span class="an">· {o.date}</span></h3>
							<p class="auteur">{o.auteur} — {o.type}</p>
							<p class="sujet">{o.sujet}</p>
						</div>
					</li>
				{/each}
			</ul>
		</section>

		<!-- MÉMOIRE -->
		<section class="section--tight">
			<SectionTitle title="La mémoire" as="h2" id="memoire" />
			<ul class="lecture prose">
				{#each h.memoire as mem (mem)}
					<li>{mem}</li>
				{/each}
			</ul>
		</section>

		<p class="src lecture">Sources : {h.source}.</p>

		<nav class="suite" aria-label="Poursuivre la lecture">
			<a class="btn btn--ghost" href="/apres-le-gong/">Après le GONG : les organisations indépendantistes de 1968 à nos jours →</a>
		</nav>
	</div>
</main>

<style>
	.grille {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: var(--space-2);
	}
	.flag-illus {
		width: 120px;
		height: auto;
		border: 1px solid var(--line);
		border-radius: 2px;
		margin-bottom: 0.6rem;
	}
	.date {
		font-family: var(--font-display);
		font-weight: 700;
		color: var(--vert-gong);
		font-size: 0.85rem;
	}
	.grille h3 {
		font-size: 1.05rem;
		text-transform: none;
		margin: 0.3rem 0;
	}
	.grille p {
		color: var(--muted);
		margin: 0;
		font-size: 0.94rem;
	}
	.oeuvres {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: var(--space-2);
		max-width: var(--container-lecture);
	}
	.oeuvre {
		display: flex;
		gap: var(--space-2);
		background: var(--card-bg);
		border: 1px solid var(--line);
		border-radius: var(--radius-md);
		padding: var(--space-3);
	}
	.oeuvre h3 {
		margin: 0 0 0.2rem;
		font-size: 1.05rem;
		text-transform: none;
	}
	.oeuvre .an {
		color: var(--muted-fort);
		font-weight: 400;
	}
	.auteur {
		color: var(--accent);
		font-size: 0.88rem;
		margin: 0 0 0.3rem;
	}
	.sujet {
		color: var(--muted);
		margin: 0;
		font-size: 0.94rem;
	}
	.src {
		color: var(--muted-fort);
		font-size: 0.85rem;
		margin-top: var(--space-3);
	}
	.suite {
		display: flex;
		gap: 0.6rem;
		flex-wrap: wrap;
		margin-top: var(--space-4);
	}
</style>
