<script lang="ts">
	import { onMount } from 'svelte';
	import '$lib/styles/oki.css';
	import LangSwitch from '$lib/components/LangSwitch.svelte';
	import { initLang, t } from '$lib/i18n/store.svelte';

	let { children } = $props();

	onMount(() => {
		initLang();
	});
</script>

<div class="app">
	<header class="entete">
		<a href="/" class="logo" aria-label="JWE — accueil">
			<svg viewBox="0 0 32 32" width="30" height="30" aria-hidden="true">
				<circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="2.5" />
				<path d="M16 7 L21 22 L16 18.5 L11 22 Z" fill="currentColor" />
			</svg>
			<span>{t().app.titre}</span>
		</a>
		<nav class="nav-lang">
			<a href="/explorer" class="lien-explorer">{t().modes.explorer}</a>
			<LangSwitch />
		</nav>
	</header>
	<main>
		{@render children()}
	</main>
</div>

<style>
	.app {
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
	}

	.entete {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.6rem 1rem;
		background: var(--oki-vert);
		color: #fff;
	}

	.logo {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		color: #fff;
		text-decoration: none;
		font-size: 1.4rem;
		font-weight: 800;
		letter-spacing: 0.04em;
	}

	.nav-lang {
		display: flex;
		align-items: center;
		gap: 0.8rem;
	}

	.lien-explorer {
		color: var(--oki-vert-doux);
		text-decoration: none;
		font-weight: 600;
		font-size: 0.95rem;
	}

	.lien-explorer:hover {
		color: #fff;
	}

	main {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
</style>
