<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 Icon from '$lib/components/Icon.svelte';
	import { reveal } from '$lib/motion/reveal';
	import { webPage } from '$lib/seo';
	import { publications as pubs } from '$lib/data/gong';

	const crumbs = [
		{ name: 'Accueil', path: '/' },
		{ name: 'Publications', path: '/publications/' }
	];
</script>

<Seo
	title="Les publications du GONG"
	description="Gong-Information (« Journal du Patriote Guadeloupéen »), Révolution Caraïbe, tracts clandestins et affiches électorales de 1967 : les organes de propagande et de théorie du GONG."
	path="/publications/"
	type="article"
	graph={[webPage('/publications/', 'Publications du GONG', 'Journaux, tracts et affiches du GONG.')]}
	breadcrumb={crumbs}
/>

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

		<div class="lecture">
			<Resume
				lead="Le GONG diffusait ses idées par un journal clandestin, Gong-Information, imprimé en Belgique avec l'appui du Parti communiste belge prochinois, ainsi que par des tracts et des affiches électorales — dont les célèbres « Briser les urnes colonialistes » de 1967."
				points={[
					'Gong-Information : organe politique et théorique (1964-1967).',
					'Imprimé en Belgique, diffusé clandestinement en France et en Guadeloupe.',
					'Affiches de 1967 saisies par la police sur le port de Pointe-à-Pitre.'
				]}
			/>
		</div>

		<p class="lecture cta-archives">
			<Icon name="book" size="1.2rem" /> Les numéros de <strong>Gong-Information</strong> ont été numérisés :
			<a href="/archives/">consulter les archives</a> (transcription + scan PDF).
		</p>

		<ul class="pubs">
			{#each pubs as p, i (p.titre)}
				<li class="card" use:reveal={i}>
					<Icon name="book" size="1.6rem" />
					<h2>{p.titre}</h2>
					{#if p.sousTitre}<p class="sous">« {p.sousTitre} »</p>{/if}
					<p class="meta"><span class="tag">{p.type}</span> <span class="tag tag--vert">{p.periode}</span></p>
					<p class="contenu">{p.contenu}</p>
					{#if p.lieuImpression}<p class="detail"><strong>Impression :</strong> {p.lieuImpression}</p>{/if}
					{#if p.lieuDiffusion}<p class="detail"><strong>Diffusion :</strong> {p.lieuDiffusion}</p>{/if}
					{#if p.extraitProgramme}<blockquote>{p.extraitProgramme}</blockquote>{/if}
					{#if p.note}<p class="note">{p.note}</p>{/if}
					<p class="src">Source : {p.source}.</p>
				</li>
			{/each}
		</ul>
	</div>
</main>

<style>
	.cta-archives {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		flex-wrap: wrap;
		background: color-mix(in srgb, var(--accent) 8%, transparent);
		border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
		border-radius: var(--radius-md);
		padding: var(--space-2) var(--space-3);
		margin-bottom: var(--space-4);
	}
	.pubs {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: var(--space-3);
		max-width: var(--container-lecture);
	}
	.pubs h2 {
		font-size: 1.3rem;
		margin: 0.5rem 0 0.2rem;
		text-transform: none;
	}
	.sous {
		color: var(--accent);
		font-style: italic;
		margin: 0 0 0.5rem;
	}
	.meta {
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;
		margin: 0 0 0.6rem;
	}
	.contenu {
		color: var(--creme);
		margin: 0 0 0.6rem;
	}
	.detail {
		color: var(--muted);
		font-size: 0.92rem;
		margin: 0 0 0.3rem;
	}
	.note {
		color: var(--muted);
		font-style: italic;
		font-size: 0.92rem;
	}
	.src {
		color: var(--muted-fort);
		font-size: 0.82rem;
		margin: 0.5rem 0 0;
	}
</style>
