<script lang="ts">
	import Seo from '$lib/components/Seo.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 { SITE, presentation } from '$lib/data/gong';

	let { data } = $props();

	const parcours = [
		{ href: '/histoire/', icon: 'clock', titre: 'Histoire', desc: 'De la fondation en 1963 à la dissolution en 1968 : la chronologie complète.' },
		{ href: '/me-67/', icon: 'flag', titre: 'Mé 67', desc: "Les tueries de mai 1967 à Pointe-à-Pitre, longtemps occultées." },
		{ href: '/proces-1968/', icon: 'scale', titre: 'Procès de 1968', desc: '18 Guadeloupéens jugés à Paris ; Sartre et Césaire témoignent.' },
		{ href: '/militants/', icon: 'users', titre: 'Militants', desc: 'Sainton, Nestor, Manville, Bangou, Glaude… les femmes et les hommes du GONG.' },
		{ href: '/ideologie/', icon: 'glo', titre: 'Idéologie', desc: "Marxisme-léninisme, tiers-mondisme et lutte de libération nationale." },
		{ href: '/heritage/', icon: 'memory', titre: 'Héritage', desc: 'UPLG, UGTG, mémoire de Mé 67 : ce que le GONG a laissé.' },
		{ href: '/archives/', icon: 'book', titre: 'Archives', desc: 'Les numéros numérisés du journal Gong-Information (1966-1967).' }
	];

	const webPage = [
		{
			'@type': 'WebPage',
			'@id': `${SITE.url}/#webpage`,
			url: `${SITE.url}/`,
			name: `${SITE.nomComplet} — GONG`,
			description: SITE.description,
			isPartOf: { '@id': `${SITE.url}/#website` },
			about: { '@id': `${SITE.url}/#organization` },
			inLanguage: 'fr-FR'
		}
	];
</script>

<Seo
	title="GONG — Groupe d'Organisation Nationale de la Guadeloupe"
	description="Le GONG, organisation indépendantiste guadeloupéenne (1963-1968) : histoire, Mé 67, procès de 1968, militants et héritage. Un dossier documentaire sourcé."
	path="/"
	graph={webPage}
/>

<main id="contenu">
	<!-- HERO -->
	<section class="hero">
		<div class="container hero__inner">
			<img class="hero__logo" src="/img/gong.png" alt="Logo du GONG" width="132" height="132" />
			<img class="hero__flag" src="/img/gong-drapeau.png" alt="Drapo Gwadlup (GONG)" width="220" height="147" />
			<h1 class="hero__title">GONG</h1>
			<p class="hero__full">{presentation.nomComplet}</p>
			<p class="hero__slogan">« Briser les urnes colonialistes.<br />Conquérir l'indépendance nationale. »</p>
			<p class="hero__creole" lang="gcf">Listwa a on pèp ki goumé pou libèté a-y.</p>
			<div class="hero__cta">
				<a class="btn btn--fill" href="/histoire/">Découvrir l'histoire</a>
				<a class="btn" href="/me-67/">Comprendre Mé 67</a>
			</div>
		</div>
	</section>

	<!-- RÉSUMÉ (zone A AI-Overview) -->
	<section class="section--tight">
		<div class="container lecture">
			<Resume
				titre="Qu'est-ce que le GONG ?"
				lead="Le GONG (Groupe d'Organisation Nationale de la Guadeloupe) était une organisation politique indépendantiste et anticolonialiste guadeloupéenne, fondée le 23 juin 1963 à Paris et dissoute de facto en 1968 après la répression des émeutes de mai 1967 et le procès de ses militants."
				points={[
					'Fondé le 23 juin 1963 par d’anciens étudiants de l’AGEG (dont Pierre Sainton).',
					'Objectif : l’indépendance nationale de la Guadeloupe et une révolution socialiste.',
					'Impliqué dans les événements de « Mé 67 » (26-28 mai 1967).',
					'18 de ses membres jugés à Paris en 1968 : 13 acquittés, 6 condamnés avec sursis.'
				]}
			/>
		</div>
	</section>

	<!-- CHIFFRES CLÉS -->
	<section class="section--tight">
		<div class="container">
			<div class="stats">
				<div class="stat" use:reveal={0}>
					<span class="stat__num">1963</span><span class="stat__lab">Fondation, à Paris</span>
				</div>
				<div class="stat" use:reveal={1}>
					<span class="stat__num">26 mai 1967</span><span class="stat__lab">Première victime : Jacques Nestor</span>
				</div>
				<div class="stat" use:reveal={2}>
					<span class="stat__num">80–200</span><span class="stat__lab">Victimes estimées de Mé 67</span>
				</div>
				<div class="stat" use:reveal={3}>
					<span class="stat__num">18</span><span class="stat__lab">Accusés au procès de 1968</span>
				</div>
			</div>
		</div>
	</section>

	<!-- PARCOURS -->
	<section class="section">
		<div class="container">
			<SectionTitle title="Parcourir le dossier" />
			<div class="grid-cards">
				{#each parcours as p, i (p.href)}
					<a class="card card--link" href={p.href} use:reveal={i}>
						<Icon name={p.icon} size="1.8rem" />
						<h3>{p.titre}</h3>
						<p>{p.desc}</p>
						<span class="card__more">Lire <Icon name="arrow-right" size="1em" /></span>
					</a>
				{/each}
			</div>
		</div>
	</section>

	<!-- DOCUMENTS FONDATEURS -->
	<section class="section">
		<div class="container">
			<SectionTitle title="Les textes fondateurs" />
			<div class="grid-cards grid-cards--2">
				<article class="card card--vert" use:reveal={0}>
					<Icon name="document" size="1.6rem" />
					<h3>La Charte du GONG</h3>
					<p class="muted">Juin 1963 — le texte adopté en assemblée générale qui pose le droit du peuple guadeloupéen à disposer de lui-même.</p>
					<div class="card__actions">
						<a class="btn btn--ghost" href="/charte/">Lire la charte</a>
						<a class="btn btn--ghost" href="/assets/charte-du-gong-1963.pdf" rel="external noopener noreferrer" target="_blank">
							PDF <Icon name="download" size="1em" />
						</a>
					</div>
				</article>
				<article class="card card--vert" use:reveal={1}>
					<Icon name="document" size="1.6rem" />
					<h3>Orientation & stratégie</h3>
					<p class="muted">Le rapport sur la lutte révolutionnaire du peuple guadeloupéen : lutte de masse, suffrage universel, voie révolutionnaire.</p>
					<div class="card__actions">
						<a class="btn btn--ghost" href="/orientation/">Lire le document</a>
						<a class="btn btn--ghost" href="/assets/orientation-et-strategie-de-la-lutte-revolutionnaire-du-peuple-guadeloupeen-1963.pdf" rel="external noopener noreferrer" target="_blank">
							PDF <Icon name="download" size="1em" />
						</a>
					</div>
				</article>
			</div>
		</div>
	</section>

	<!-- ARCHIVES — GONG-INFORMATION -->
	{#if data.archives.length}
		<section class="section archives-home">
			<div class="container">
				<SectionTitle title="Les documents originaux" />
				<p class="archives-home__intro">
					Les numéros numérisés de <strong>Gong-Information</strong>, le journal du GONG (1966-1967) :
					transcription intégrale et scan à l'appui.
				</p>
				<div class="archives-home__grid">
					{#each data.archives as a, i (a.slug)}
						<a class="issue" href="/archives/{a.slug}/" use:reveal={i}>
							<img src={a.couverture} alt="Couverture de {a.titre}" width="800" height="612" loading="lazy" decoding="async" />
							<span class="issue__label">{a.numero} · {a.date}</span>
						</a>
					{/each}
				</div>
				<p class="center"><a class="btn btn--ghost" href="/archives/">Toutes les archives</a></p>
			</div>
		</section>
	{/if}

	<!-- ACTUALITÉS -->
	{#if data.actualites.length}
		<section class="section">
			<div class="container">
				<SectionTitle title="Actualités & mémoire" />
				<div class="grid-cards">
					{#each data.actualites as a, i (a.slug)}
						<a class="card card--link" href="/actualites/{a.slug}/" use:reveal={i}>
							{#if a.couverture}
								<img class="card__cover" src={a.couverture} alt={a.couvertureAlt} loading="lazy" decoding="async" />
							{/if}
							<time datetime={a.iso} class="card__date">{a.date}</time>
							<h3>{a.titre}</h3>
							<p class="muted">{a.chapeau}</p>
						</a>
					{/each}
				</div>
				<p class="center"><a class="btn btn--ghost" href="/actualites/">Toutes les actualités</a></p>
			</div>
		</section>
	{/if}

	<!-- CTA FINAL -->
	<section class="section cta-final">
		<div class="container lecture center">
			<SectionTitle title="Se souvenir, transmettre" />
			<p>
				Le GONG a été effacé des mémoires officielles pendant des décennies. Ce site rassemble des
				sources académiques, journalistiques et archivistiques pour rendre son histoire accessible à
				tous.
			</p>
			<div class="hero__cta center-cta">
				<a class="btn btn--fill" href="/faq/">Questions fréquentes</a>
				<a class="btn" href="/sources/">Voir les sources</a>
			</div>
		</div>
	</section>
</main>

<style>
	.hero {
		text-align: center;
		padding-top: var(--space-5);
		background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--rouge-gong) 12%, transparent), transparent 60%);
	}
	.hero__inner {
		padding-bottom: var(--space-5);
	}
	.hero__logo {
		width: 132px;
		height: 132px;
		margin: 0 auto var(--space-2);
	}
	.hero__flag {
		width: 220px;
		height: 147px;
		margin: 0 auto var(--space-2);
	}
	.hero__kicker {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		font-family: var(--font-display);
		text-transform: uppercase;
		letter-spacing: 0.15em;
		font-size: 0.85rem;
		color: var(--muted);
	}
	.hero__title {
		font-size: clamp(3.5rem, 2rem + 9vw, 8rem);
		margin: 0.25rem 0 0;
		letter-spacing: 0.02em;
	}
	.hero__full {
		font-family: var(--font-display);
		font-weight: 700;
		text-transform: uppercase;
		font-size: clamp(1rem, 0.9rem + 0.6vw, 1.3rem);
		color: var(--creme);
		margin-bottom: var(--space-3);
	}
	.hero__slogan {
		font-family: var(--font-display);
		font-weight: 800;
		text-transform: uppercase;
		font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem);
		line-height: 1.15;
		color: var(--accent);
		margin-bottom: 0.6rem;
	}
	.hero__creole {
		color: var(--muted);
		font-style: italic;
		margin-bottom: var(--space-4);
	}
	.hero__cta {
		display: flex;
		gap: var(--space-2);
		justify-content: center;
		flex-wrap: wrap;
	}
	.center-cta {
		margin-top: var(--space-3);
	}

	.stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: var(--space-2);
	}
	.stat {
		background: var(--card-bg);
		border: 1px solid var(--line);
		border-top: 3px solid var(--accent);
		border-radius: var(--radius-md);
		padding: var(--space-3);
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
	}
	.stat__num {
		font-family: var(--font-display);
		font-weight: 900;
		font-size: 1.7rem;
		color: var(--creme);
		line-height: 1;
	}
	.stat__lab {
		font-size: 0.88rem;
		color: var(--muted);
	}

	.grid-cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: var(--space-3);
	}
	.grid-cards--2 {
		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	}
	.card h3 {
		margin: 0.6rem 0 0.4rem;
	}
	.card p {
		color: var(--muted);
		margin: 0;
	}
	.card .muted {
		color: var(--muted);
	}
	.card__more {
		margin-top: 0.8rem;
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		font-family: var(--font-display);
		text-transform: uppercase;
		font-size: 0.78rem;
		letter-spacing: 0.05em;
		color: var(--accent);
	}
	.card__cover {
		width: calc(100% + 2 * var(--space-3));
		margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-2);
		border-radius: var(--radius-md) var(--radius-md) 0 0;
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
	.card__date {
		font-size: 0.8rem;
		color: var(--muted-fort);
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
	.card__actions {
		display: flex;
		gap: 0.6rem;
		flex-wrap: wrap;
		margin-top: 0.8rem;
	}

	.center {
		text-align: center;
	}
	.center .btn {
		margin-inline: auto;
	}
	.cta-final {
		background: var(--noir-profond);
		border-block: 1px solid var(--line);
	}

	.archives-home {
		background: var(--noir-profond);
		border-block: 1px solid var(--line);
	}
	.archives-home__intro {
		color: var(--muted);
		max-width: var(--container-lecture);
		margin-top: -0.5rem;
		margin-bottom: var(--space-3);
	}
	.archives-home__grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: var(--space-3);
		margin-bottom: var(--space-3);
	}
	.issue {
		display: block;
		position: relative;
		border: 1px solid var(--line);
		border-radius: var(--radius-md);
		overflow: hidden;
		background: var(--noir);
		transition:
			transform var(--dur-mesure) var(--ease-ka),
			border-color var(--dur-mesure) var(--ease-ka);
	}
	.issue:hover {
		transform: translateY(-4px);
		border-color: var(--accent);
	}
	.issue img {
		width: 100%;
		aspect-ratio: 800 / 612;
		object-fit: cover;
		object-position: top;
	}
	.issue__label {
		display: block;
		padding: 0.5rem 0.75rem;
		font-family: var(--font-display);
		font-weight: 700;
		text-transform: uppercase;
		font-size: 0.78rem;
		letter-spacing: 0.03em;
		color: var(--accent);
		border-top: 1px solid var(--line);
	}
</style>
