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

	let { data } = $props();

	const crumbs = [
		{ name: 'Accueil', path: '/' },
		{ name: 'Mentions légales', path: '/mentions-legales/' }
	];

	const aboutNode = {
		'@type': 'AboutPage',
		'@id': `${SITE.url}/mentions-legales/#aboutpage`,
		url: `${SITE.url}/mentions-legales/`,
		name: 'Mentions légales — GONG',
		isPartOf: { '@id': `${SITE.url}/#website` },
		about: { '@id': `${SITE.url}/#organization` },
		inLanguage: 'fr-FR'
	};
</script>

<Seo
	title="Mentions légales"
	description="Mentions légales du site gong.gp : éditeur (Organisation Ka Internationale), hébergeur, propriété intellectuelle (licence AGPL-3.0), gestion des données personnelles et droit applicable."
	path="/mentions-legales/"
	graph={[webPage('/mentions-legales/', 'Mentions légales — GONG', 'Mentions légales du site.'), aboutNode]}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />
		<h1>Mentions légales</h1>
		<!-- Contenu first-party (rendu markdown côté serveur). -->
		<div class="prose doc">{@html data.html}</div>
	</div>
</main>

<style>
	.doc :global(h2) {
		margin-top: var(--space-4);
		font-size: 1.25rem;
	}
</style>
