<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: 'Orientation & stratégie', path: '/orientation/' }
	];
</script>

<Seo
	title="Orientation et stratégie de la lutte révolutionnaire"
	description="Le rapport d'orientation et de stratégie du GONG (1963) : lutte de masse et lutte de classe, suffrage universel, violence libératrice, voie révolutionnaire de la Guadeloupe. Texte intégral."
	path="/orientation/"
	type="article"
	graph={[webPage('/orientation/', 'Orientation et stratégie du GONG', 'Rapport stratégique du GONG (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> Document stratégique · 1963</p>
			<h1>Orientation & stratégie de la lutte révolutionnaire du peuple guadeloupéen</h1>
			<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">
				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="/charte/">La charte de 1963 →</a>
			<a class="btn btn--ghost" href="/histoire/">L'histoire du GONG →</a>
		</nav>
	</div>
</main>

<style>
	.doc-head {
		margin-bottom: var(--space-4);
	}
	.doc-head h1 {
		font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
	}
	.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>
