<script lang="ts">
	// SEO / AI-Overview : meta + OpenGraph + Twitter + hreflang + JSON-LD @graph.
	// Organization + WebSite sont toujours présents ; les pages ajoutent leurs nœuds
	// (WebPage, BreadcrumbList, Person, Event, Article, FAQPage…) via `graph`.
	import { SITE } from '$lib/data/gong';

	interface Props {
		title: string;
		description: string;
		path: string; // chemin canonique, ex. '/me-67/'
		type?: string; // og:type
		image?: string; // chemin absolu ou relatif au site
		imageAlt?: string;
		publishedTime?: string;
		modifiedTime?: string;
		/** Nœuds schema.org additionnels, fusionnés dans @graph. */
		graph?: Record<string, unknown>[];
		/** Fil d'Ariane : [{name, path}]. Génère un BreadcrumbList. */
		breadcrumb?: { name: string; path: string }[];
	}
	let {
		title,
		description,
		path,
		type = 'website',
		image = '/gong-logo.png',
		imageAlt = 'Logo du GONG',
		publishedTime,
		modifiedTime,
		graph = [],
		breadcrumb
	}: Props = $props();

	const base = SITE.url;
	const canonical = $derived(base + path);
	const imageAbs = $derived(image.startsWith('http') ? image : base + image);
	const fullTitle = $derived(path === '/' ? title : `${title} | ${SITE.nom}`);

	const orgNode = {
		'@type': ['Organization', 'PoliticalParty'],
		'@id': `${base}/#organization`,
		name: SITE.nomComplet,
		alternateName: 'GONG',
		url: base,
		slogan: SITE.slogan,
		foundingDate: '1963-06-23',
		dissolutionDate: '1968',
		foundingLocation: 'Paris, France',
		areaServed: 'Guadeloupe',
		logo: { '@type': 'ImageObject', url: `${base}/gong-logo.png`, width: 512, height: 512 },
		founder: [
			{ '@type': 'Person', name: 'Pierre Sainton' },
			{ '@type': 'Person', name: 'Serge Glaude' }
		],
		sameAs: ['https://fr.wikipedia.org/wiki/Groupe_d%27organisation_nationale_de_la_Guadeloupe']
	};

	const siteNode = {
		'@type': 'WebSite',
		'@id': `${base}/#website`,
		url: base,
		name: SITE.nom,
		description: SITE.description,
		inLanguage: 'fr-FR',
		publisher: { '@id': `${base}/#organization` }
	};

	const breadcrumbNode = $derived(
		breadcrumb && breadcrumb.length
			? [
					{
						'@type': 'BreadcrumbList',
						'@id': `${canonical}#breadcrumb`,
						itemListElement: breadcrumb.map((b, i) => ({
							'@type': 'ListItem',
							position: i + 1,
							name: b.name,
							...(i < breadcrumb.length - 1 ? { item: base + b.path } : {})
						}))
					}
				]
			: []
	);

	const jsonLd = $derived(
		JSON.stringify({ '@context': 'https://schema.org', '@graph': [orgNode, siteNode, ...breadcrumbNode, ...graph] })
	);
</script>

<svelte:head>
	<title>{fullTitle}</title>
	<meta name="description" content={description} />
	<meta name="author" content={SITE.nomComplet} />
	<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
	<link rel="canonical" href={canonical} />
	<link rel="alternate" hreflang="fr" href={canonical} />
	<link rel="alternate" hreflang="x-default" href={canonical} />

	<meta property="og:title" content={fullTitle} />
	<meta property="og:description" content={description} />
	<meta property="og:type" content={type} />
	<meta property="og:url" content={canonical} />
	<meta property="og:site_name" content={SITE.nomComplet} />
	<meta property="og:locale" content="fr_FR" />
	<meta property="og:image" content={imageAbs} />
	<meta property="og:image:alt" content={imageAlt} />
	<meta property="og:image:width" content="512" />
	<meta property="og:image:height" content="512" />
	{#if publishedTime}<meta property="article:published_time" content={publishedTime} />{/if}
	{#if modifiedTime}<meta property="article:modified_time" content={modifiedTime} />{/if}

	<meta name="twitter:card" content="summary_large_image" />
	<meta name="twitter:site" content={SITE.twitter} />
	<meta name="twitter:creator" content={SITE.twitter} />
	<meta name="twitter:title" content={fullTitle} />
	<meta name="twitter:description" content={description} />
	<meta name="twitter:image" content={imageAbs} />
	<meta name="twitter:image:alt" content={imageAlt} />

	<!-- eslint-disable-next-line svelte/no-at-html-tags — JSON-LD first-party -->
	{@html `<script type="application/ld+json">${jsonLd.replace(/<\//g, '<\\/')}</` + `script>`}
</svelte:head>
