<script lang="ts">
	import '$lib/styles/oki-tokens.css';
	import '$lib/styles/base.css';
	import { page } from '$app/state';

	const { children } = $props();

	const NAVIGATION = [
		{ href: '/', libelle: 'Tableau de bord' },
		{ href: '/recherche', libelle: 'Recherche' },
		{ href: '/calendrier', libelle: 'Calendrier' },
		{ href: '/methode', libelle: 'Méthode' },
		{ href: '/a-propos', libelle: 'À propos' }
	];

	const actif = (href: string) =>
		href === '/' ? page.url.pathname === '/' : page.url.pathname.startsWith(href);
</script>

<a class="lien-evitement" href="#contenu">Aller au contenu</a>

<header class="entete-site">
	<div class="contenant barre">
		<a class="marque" href="/">
			<span class="monogramme" aria-hidden="true">VL</span>
			<span class="titre">
				<strong>Veille législative</strong>
				<small>Gwadloup · libertés, associations, entreprises</small>
			</span>
		</a>

		<nav aria-label="Navigation principale">
			<ul>
				{#each NAVIGATION as entree (entree.href)}
					<li>
						<a href={entree.href} aria-current={actif(entree.href) ? 'page' : undefined}>
							{entree.libelle}
						</a>
					</li>
				{/each}
			</ul>
		</nav>

		<button
			type="button"
			class="bascule-theme"
			aria-label="Basculer entre thème sombre et thème clair"
			onclick={() => {
				const racine = document.documentElement;
				const clair = racine.classList.toggle('light-theme');
				try {
					localStorage.setItem('theme', clair ? 'clair' : 'sombre');
				} catch {
					/* stockage indisponible : le choix ne survivra pas au rechargement */
				}
			}}
		>
			<span aria-hidden="true">◐</span>
		</button>
	</div>
	<!-- Signature de marque : une seule occurrence pleine largeur par écran. -->
	<div class="flag-bar"></div>
</header>

<main id="contenu" class="contenant">
	{@render children()}
</main>

<footer class="pied-site">
	<div class="contenant">
		<p class="doctrine">
			Aucune donnée législative n'est inventée. Chaque fait porte sa source, sa date et son
			niveau de confiance. Ce qui n'est pas établi est marqué « à vérifier ».
		</p>
		<p class="federe">
			<span class="monogramme petit" aria-hidden="true">OKI</span>
			Un service libre opéré par
			<a href="https://o-k-i.net" rel="noopener">ORGANISATION KA INTERNATIONALE</a>
			· o-k-i.net
		</p>
	</div>
</footer>

<style>
	.entete-site {
		position: sticky;
		top: 0;
		z-index: 20;
		background: var(--noir-oki);
		border-bottom: 1px solid var(--line);
	}

	.barre {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		padding-block: 0.7rem;
		flex-wrap: wrap;
	}

	.marque {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		text-decoration: none;
		color: var(--blanc-creme);
		margin-right: auto;
	}

	.monogramme {
		font-family: var(--font-display);
		font-weight: 900;
		font-size: 0.95rem;
		letter-spacing: -0.02em;
		color: var(--noir-oki);
		background: var(--or-oki);
		padding: 0.28em 0.45em;
		border-radius: var(--radius-sm);
		flex: none;
	}
	.monogramme.petit {
		font-size: 0.7rem;
		padding: 0.2em 0.35em;
	}

	.titre {
		display: flex;
		flex-direction: column;
		line-height: 1.15;
	}
	.titre strong {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 0.98rem;
		text-transform: uppercase;
		letter-spacing: -0.01em;
	}
	.titre small {
		font-size: 0.72rem;
		color: var(--muted-fort);
	}

	nav ul {
		list-style: none;
		display: flex;
		gap: 0.15rem;
		margin: 0;
		padding: 0;
		flex-wrap: wrap;
	}
	nav a {
		display: block;
		padding: 0.35rem 0.65rem;
		border-radius: var(--radius-sm);
		font-size: 0.85rem;
		color: var(--blanc-creme);
		text-decoration: none;
		border: 1px solid transparent;
	}
	nav a:hover {
		color: var(--or-oki);
		border-color: var(--line);
	}
	nav a[aria-current='page'] {
		color: var(--or-oki);
		border-color: color-mix(in srgb, var(--or-oki) 55%, transparent);
		background: color-mix(in srgb, var(--or-oki) 10%, transparent);
	}

	.bascule-theme {
		background: transparent;
		border: 1px solid var(--line);
		border-radius: var(--radius-sm);
		color: var(--blanc-creme);
		cursor: pointer;
		font-size: 1rem;
		line-height: 1;
		padding: 0.35rem 0.55rem;
	}
	.bascule-theme:hover {
		color: var(--or-oki);
		border-color: var(--or-oki);
	}

	main {
		min-height: 60vh;
		padding-block: var(--space-3) var(--space-5);
	}

	.pied-site {
		border-top: 1px solid var(--line);
		padding-block: var(--space-3);
		font-size: 0.82rem;
		color: var(--muted-fort);
	}
	.doctrine {
		max-width: 62ch;
		margin-bottom: var(--space-2);
	}
	.federe {
		display: flex;
		align-items: center;
		gap: 0.45rem;
		flex-wrap: wrap;
		margin: 0;
	}

	@media (max-width: 640px) {
		.marque {
			margin-right: 0;
		}
		nav ul {
			gap: 0;
		}
		nav a {
			padding: 0.3rem 0.45rem;
			font-size: 0.8rem;
		}
	}
</style>
