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

	let { data } = $props();

	const crumbs = [
		{ name: 'Accueil', path: '/' },
		{ name: 'Charte de 1963', path: '/charte/' }
	];
</script>

<Seo
	title="La Charte du GONG (juin 1963)"
	description="Le texte intégral de la Charte du GONG adoptée en assemblée générale en juin 1963 : le droit du peuple guadeloupéen à disposer de lui-même, la souveraineté nationale et les objectifs de la révolution."
	path="/charte/"
	type="article"
	graph={[webPage('/charte/', 'Charte du GONG (1963)', 'Texte fondateur du GONG adopté en juin 1963.')]}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />
		<header class="doc-head">
			<p class="doc-kicker"><span class="flag-chip" aria-hidden="true"></span> Texte fondateur · Juin 1963</p>
			<h1>La Charte du GONG</h1>
			<a class="btn btn--ghost" href="/assets/charte-du-gong-1963.pdf" rel="external noopener noreferrer" target="_blank">
				Voir l'original (PDF) <Icon name="download" size="1em" />
			</a>
		</header>

		<article class="prose doc">
			<!-- Contenu first-party (transcription du document de 1963, rendu markdown côté serveur). -->
			{@html data.html}
		</article>

		<nav class="suite" aria-label="Poursuivre la lecture">
			<a class="btn btn--ghost" href="/orientation/">Orientation & stratégie →</a>
			<a class="btn btn--ghost" href="/ideologie/">L'idéologie du GONG →</a>
		</nav>
	</div>
</main>

<style>
	.doc-head {
		margin-bottom: var(--space-4);
	}
	.doc-kicker {
		display: inline-flex;
		flex-direction: column;
		gap: 0.5rem;
		font-family: var(--font-display);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-size: 0.85rem;
		color: var(--muted);
	}
	.doc-head .btn {
		margin-top: var(--space-2);
	}
	.doc :global(h2) {
		margin-top: var(--space-4);
		padding-top: var(--space-2);
		border-top: 1px solid var(--line);
		font-size: 1.35rem;
	}
	.doc :global(h3) {
		color: var(--accent);
		font-size: 1.1rem;
	}
	.doc :global(blockquote) {
		font-size: 1.05rem;
	}
	.suite {
		display: flex;
		gap: 0.6rem;
		flex-wrap: wrap;
		margin-top: var(--space-4);
	}
</style>
