<script lang="ts">
	import Seo from '$lib/components/Seo.svelte';
	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
	import { SITE } from '$lib/data/gong';

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

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

	const articleNode = $derived({
		'@type': 'Article',
		'@id': `${SITE.url}/actualites/${a.slug}/#article`,
		headline: a.titre,
		description: a.chapeau,
		datePublished: a.iso,
		dateModified: a.iso,
		inLanguage: 'fr-FR',
		...(a.couverture ? { image: SITE.url + a.couverture } : {}),
		author: { '@id': `${SITE.url}/#organization` },
		publisher: { '@id': `${SITE.url}/#organization` },
		isPartOf: { '@id': `${SITE.url}/#website` },
		mainEntityOfPage: `${SITE.url}/actualites/${a.slug}/`
	});
</script>

<Seo
	title={a.titre}
	description={a.chapeau}
	path={`/actualites/${a.slug}/`}
	type="article"
	image={a.couverture ?? '/gong-logo.png'}
	imageAlt={a.couvertureAlt ?? a.titre}
	publishedTime={a.iso}
	modifiedTime={a.iso}
	graph={[articleNode]}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />
		<article>
			<header class="art-head">
				<time datetime={a.iso} class="date">{a.date}</time>
				<h1>{a.titre}</h1>
				<p class="chapeau">{a.chapeau}</p>
			</header>
			{#if a.couverture}
				<figure class="art-cover">
					<img src={a.couverture} alt={a.couvertureAlt} width="1200" height="800" />
				</figure>
			{/if}
			<!-- Contenu first-party (Sveltia CMS, rendu markdown côté serveur). -->
			<div class="prose art-body">{@html a.html}</div>
		</article>

		<p><a class="btn btn--ghost" href="/actualites/">← Toutes les actualités</a></p>
	</div>
</main>

<style>
	.art-head {
		max-width: var(--container-lecture);
	}
	.date {
		font-size: 0.85rem;
		color: var(--muted-fort);
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
	.chapeau {
		font-size: 1.2rem;
		color: var(--muted);
		font-style: italic;
	}
	.art-cover {
		margin: var(--space-3) 0;
		max-width: 900px;
	}
	.art-cover img {
		width: 100%;
		border-radius: var(--radius-md);
		border: 1px solid var(--line);
	}
	.art-body {
		margin-top: var(--space-3);
	}
	.art-body :global(.video-thumb) {
		display: block;
		max-width: 480px;
		margin: var(--space-2) 0;
	}
	.art-body :global(.video-thumb img) {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--radius-md);
		border: 1px solid var(--line);
		transition:
			border-color var(--dur-tanbou) var(--ease-ka),
			transform var(--dur-tanbou) var(--ease-ka);
	}
	.art-body :global(.video-thumb:hover img) {
		border-color: var(--accent);
		transform: translateY(-2px);
	}
</style>
