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

	let { data } = $props();
	const a = $derived(data.archive);

	const crumbs = $derived([
		{ name: 'Accueil', path: '/' },
		{ name: 'Archives', path: '/archives/' },
		{ name: a.titre, path: `/archives/${a.slug}/` }
	]);

	const articleNode = $derived({
		'@type': ['Article', 'CreativeWork'],
		'@id': `${SITE.url}/archives/${a.slug}/#document`,
		headline: a.titre,
		alternativeHeadline: 'Gong-Information — Journal du patriote guadeloupéen',
		description: a.chapeau,
		datePublished: a.iso,
		inLanguage: 'fr-FR',
		image: SITE.url + a.couverture,
		isPartOf: { '@id': `${SITE.url}/#website` },
		publisher: { '@id': `${SITE.url}/#organization` },
		about: { '@id': `${SITE.url}/#organization` },
		associatedMedia: { '@type': 'MediaObject', contentUrl: SITE.url + a.pdf, encodingFormat: 'application/pdf' }
	});
</script>

<Seo
	title={a.titre}
	description={a.chapeau}
	path={`/archives/${a.slug}/`}
	type="article"
	image={a.couverture}
	imageAlt={`Couverture de ${a.titre}`}
	publishedTime={a.iso}
	graph={[articleNode]}
	breadcrumb={crumbs}
/>

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

		<article>
			<header class="doc-head">
				<p class="kicker"><span class="flag-chip" aria-hidden="true"></span> Gong-Information · {a.date}</p>
				<h1>{a.titre}</h1>
				<p class="chapeau">{a.chapeau}</p>
				<a class="btn btn--ghost" href={a.pdf} rel="external noopener noreferrer" target="_blank">
					Télécharger le scan (PDF) <Icon name="download" size="1em" />
				</a>
			</header>

			<div class="doc-body">
				<figure class="cover">
					<img src={a.couverture} alt="Couverture de {a.titre}" width="800" height="612" loading="lazy" decoding="async" />
					<figcaption>Couverture du numéro. Fonds du GONG.</figcaption>
				</figure>

				<div class="prose transcription">
					<h2 class="sr-only">Transcription</h2>
					<!-- Contenu first-party (transcription du journal, fonds du GONG). -->
					{@html a.html}
				</div>
			</div>
		</article>

		<p><a class="btn btn--ghost" href="/archives/">← Tous les numéros</a></p>
	</div>
</main>

<style>
	.doc-head {
		max-width: var(--container-lecture);
		margin-bottom: var(--space-4);
	}
	.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);
	}
	.chapeau {
		font-size: 1.15rem;
		color: var(--muted);
		font-style: italic;
		margin-bottom: var(--space-2);
	}
	.doc-body {
		display: grid;
		grid-template-columns: 300px 1fr;
		gap: var(--space-4);
		align-items: start;
	}
	.cover {
		margin: 0;
		position: sticky;
		top: calc(var(--nav-h) + 1rem);
	}
	.cover img {
		width: 100%;
		border: 1px solid var(--line);
		border-radius: var(--radius-md);
		background: var(--noir-profond);
	}
	.cover figcaption {
		margin-top: 0.5rem;
		font-size: 0.8rem;
		color: var(--muted-fort);
	}
	.transcription {
		max-width: none;
	}
	@media (max-width: 800px) {
		.doc-body {
			grid-template-columns: 1fr;
		}
		.cover {
			position: static;
			max-width: 300px;
		}
	}
</style>
