<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 { membres } from '$lib/data/gong';

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

<Seo
	title="Les militants et fondateurs du GONG"
	description="Pierre Sainton, Jacques Nestor, Marcel Manville, Henri Bangou, Serge Glaude… Portraits des femmes et des hommes qui ont fait le Groupe d'Organisation Nationale de la Guadeloupe."
	path="/militants/"
	graph={[webPage('/militants/', 'Militants et fondateurs du GONG', 'Portraits des militants du GONG.')]}
	breadcrumb={crumbs}
/>

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

		<div class="lecture">
			<Resume
				lead="Le GONG a été porté par quelques dizaines de militants — étudiants, ouvriers, médecins, avocats. Voici les figures documentées : ses fondateurs, ses théoriciens, ses martyrs."
				points={[
					'Pierre Sainton : fondateur principal et idéologue.',
					'Jacques Nestor : leader de masse, première victime de Mé 67.',
					'Serge Glaude : co-fondateur, auteur de « Le GONG c quoi ? ».',
					'Abert Béville : précurseur, mort avant la fondation.'
				]}
			/>
		</div>

		<ul class="grille">
			{#each membres as m, i (m.slug)}
				<li>
					<a class="card card--link" href="/militants/{m.slug}/" use:reveal={i}>
						<Icon name="users" size="1.5rem" />
						<h2 class="nom">{m.nom}</h2>
						<p class="role">{m.role}</p>
						<p class="prof">{m.profession}</p>
						<span class="more">Voir la fiche <Icon name="arrow-right" size="1em" /></span>
					</a>
				</li>
			{/each}
		</ul>
	</div>
</main>

<style>
	.grille {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: var(--space-3);
	}
	.nom {
		font-size: 1.2rem;
		margin: 0.6rem 0 0.2rem;
		text-transform: none;
	}
	.role {
		color: var(--accent);
		font-weight: 600;
		font-size: 0.9rem;
		margin: 0 0 0.2rem;
	}
	.prof {
		color: var(--muted);
		font-size: 0.9rem;
		margin: 0;
	}
	.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.75rem;
		letter-spacing: 0.05em;
		color: var(--accent);
	}
</style>
