<script lang="ts">
	import { page } from '$app/state';
	import Icon from './Icon.svelte';

	const primaires = [
		{ href: '/histoire/', label: 'Histoire' },
		{ href: '/me-67/', label: 'Mé 67' },
		{ href: '/militants/', label: 'Militants' },
		{ href: '/ideologie/', label: 'Idéologie' },
		{ href: '/heritage/', label: 'Héritage' },
		{ href: '/apres-le-gong/', label: 'Après le GONG' },
		{ href: '/archives/', label: 'Archives' },
		{ href: '/actualites/', label: 'Actualités' }
	];
	const secondaires = [
		{ href: '/proces-1968/', label: 'Procès de 1968' },
		{ href: '/responsables/', label: 'Les responsables' },
		{ href: '/publications/', label: 'Publications' },
		{ href: '/charte/', label: 'Charte de 1963' },
		{ href: '/orientation/', label: 'Orientation & stratégie' },
		{ href: '/sources/', label: 'Sources' },
		{ href: '/faq/', label: "Qu'est-ce que le GONG ?" },
		{ href: '/contact/', label: 'Contact' }
	];

	let menuOuvert = $state(false);
	let theme = $state<'dark' | 'light'>('dark');

	const chemin = $derived(page.url.pathname);
	function actif(href: string): boolean {
		return href === '/' ? chemin === '/' : chemin.startsWith(href);
	}

	$effect(() => {
		theme = document.documentElement.classList.contains('light-theme') ? 'light' : 'dark';
	});

	function basculerTheme() {
		const el = document.documentElement;
		const clair = el.classList.toggle('light-theme');
		theme = clair ? 'light' : 'dark';
		try {
			localStorage.setItem('gong-theme', clair ? 'light' : 'dark');
		} catch {
			/* localStorage indisponible */
		}
	}

	// Ferme le menu à chaque changement de route.
	$effect(() => {
		void chemin;
		menuOuvert = false;
	});
</script>

<svelte:window
	onkeydown={(e) => {
		if (e.key === 'Escape') menuOuvert = false;
	}}
/>

<header class="nav">
	<div class="nav__bar container">
		<a href="/" class="nav__brand no-underline" aria-label="GONG — accueil">
			<img src="/img/gong.png" alt="" width="40" height="40" class="nav__logo" />
			<span class="nav__name">GONG</span>
		</a>

		<nav class="nav__primary" aria-label="Navigation principale">
			{#each primaires as l (l.href)}
				<a href={l.href} class="nav__link no-underline" aria-current={actif(l.href) ? 'page' : undefined}>
					{l.label}
				</a>
			{/each}
		</nav>

		<div class="nav__actions">
			<button
				class="nav__icon-btn"
				onclick={basculerTheme}
				aria-label={theme === 'light' ? 'Passer au thème sombre' : 'Passer au thème clair'}
			>
				<Icon name={theme === 'light' ? 'moon' : 'sun'} />
			</button>
			<button
				class="nav__icon-btn nav__menu-btn"
				onclick={() => (menuOuvert = !menuOuvert)}
				aria-expanded={menuOuvert}
				aria-controls="menu-panneau"
				aria-label="Menu"
			>
				<Icon name={menuOuvert ? 'close' : 'menu'} />
			</button>
		</div>
	</div>
	<div class="flag-bar" aria-hidden="true"></div>
</header>

{#if menuOuvert}
	<button
		class="nav__scrim"
		aria-label="Fermer le menu"
		onclick={() => (menuOuvert = false)}
		tabindex="-1"
	></button>
{/if}

<div id="menu-panneau" class="nav__panel" class:open={menuOuvert} aria-hidden={!menuOuvert}>
	<nav aria-label="Toutes les sections">
		<p class="nav__group-title">Le mouvement</p>
		{#each primaires as l (l.href)}
			<a href={l.href} class="nav__panel-link no-underline" aria-current={actif(l.href) ? 'page' : undefined}>
				{l.label}
			</a>
		{/each}
		<p class="nav__group-title">Documents & mémoire</p>
		{#each secondaires as l (l.href)}
			<a href={l.href} class="nav__panel-link no-underline" aria-current={actif(l.href) ? 'page' : undefined}>
				{l.label}
			</a>
		{/each}
	</nav>
</div>

<style>
	.nav {
		position: sticky;
		top: 0;
		z-index: 100;
		background: color-mix(in srgb, var(--noir) 92%, transparent);
		backdrop-filter: blur(8px);
		border-bottom: 1px solid var(--line);
	}
	.nav__bar {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		height: var(--nav-h);
	}
	.nav__brand {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		color: var(--creme);
		flex: none;
	}
	.nav__logo {
		width: 40px;
		height: 40px;
	}
	.nav__name {
		font-family: var(--font-display);
		font-weight: 900;
		font-size: 1.4rem;
		letter-spacing: 0.02em;
	}
	.nav__primary {
		display: none;
		align-items: center;
		gap: 0.35rem;
		margin-left: auto;
	}
	.nav__link {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 0.82rem;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--muted);
		padding: 0.45rem 0.6rem;
		border-radius: var(--radius-sm);
		transition: color var(--dur-tanbou) var(--ease-ka);
	}
	.nav__link:hover,
	.nav__link[aria-current='page'] {
		color: var(--creme);
	}
	.nav__link[aria-current='page'] {
		box-shadow: inset 0 -2px 0 var(--accent);
	}
	.nav__actions {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		margin-left: auto;
	}
	.nav__primary + .nav__actions {
		margin-left: 0;
	}
	.nav__icon-btn {
		display: inline-grid;
		place-items: center;
		width: 42px;
		height: 42px;
		background: transparent;
		border: 1px solid transparent;
		border-radius: var(--radius-sm);
		color: var(--creme);
		cursor: pointer;
		transition:
			border-color var(--dur-tanbou) var(--ease-ka),
			color var(--dur-tanbou) var(--ease-ka);
	}
	.nav__icon-btn:hover {
		border-color: var(--line);
		color: var(--accent);
	}
	.nav__scrim {
		position: fixed;
		inset: 0;
		z-index: 98;
		background: rgba(0, 0, 0, 0.55);
		border: 0;
		cursor: pointer;
	}
	.nav__panel {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 99;
		width: min(88vw, 340px);
		height: 100dvh;
		overflow-y: auto;
		padding: calc(var(--nav-h) + var(--space-3)) var(--space-3) var(--space-4);
		background: var(--noir-profond);
		border-left: 1px solid var(--line);
		transform: translateX(100%);
		transition: transform var(--dur-mesure) var(--ease-ka);
	}
	.nav__panel.open {
		transform: translateX(0);
	}
	.nav__group-title {
		font-family: var(--font-display);
		text-transform: uppercase;
		font-size: 0.72rem;
		letter-spacing: 0.08em;
		color: var(--muted-fort);
		margin: var(--space-3) 0 0.5rem;
	}
	.nav__panel-link {
		display: block;
		font-family: var(--font-display);
		font-weight: 700;
		text-transform: uppercase;
		font-size: 0.95rem;
		color: var(--creme);
		padding: 0.65rem 0.5rem;
		border-bottom: 1px solid var(--line);
	}
	.nav__panel-link:hover,
	.nav__panel-link[aria-current='page'] {
		color: var(--accent);
	}

	@media (min-width: 960px) {
		.nav__primary {
			display: flex;
		}
		.nav__actions {
			margin-left: 0;
		}
		.nav__menu-btn {
			display: none;
		}
		.nav__panel,
		.nav__scrim {
			display: none;
		}
	}
</style>
