JWE/app/src/routes/+page.svelte

<script lang="ts">
	import { goto } from '$app/navigation';
	import CarteRegions from '$lib/components/CarteRegions.svelte';
	import { t } from '$lib/i18n/store.svelte';
	import type { GameMode, Region } from '$lib/types';

	type ChoixRegion = Region | 'TOUTES';

	let region = $state<ChoixRegion>('TOUTES');
	let mode = $state<GameMode>('monument');
	let timer = $state(false);

	const modes: { id: GameMode; emoji: string }[] = [
		{ id: 'monument', emoji: '🏛️' },
		{ id: 'lieu', emoji: '📍' },
		{ id: 'defi', emoji: '⛰️' }
	];

	function jouer(): void {
		const params = new URLSearchParams();
		if (region !== 'TOUTES') params.set('region', region);
		if (timer) params.set('timer', '1');
		goto(`/jeu/${mode}${params.size ? `?${params}` : ''}`);
	}

	/** Génère une seed lisible (alphabet sans ambiguïté : pas de 0/O, 1/I/L) et ouvre le défi partagé. */
	function creerLienDefi(): void {
		const alphabet = 'ABCDEFGHJKMNPQRSTUVWXYZ23456789';
		const octets = new Uint8Array(8);
		crypto.getRandomValues(octets);
		const seed = Array.from(octets, (b) => alphabet[b % alphabet.length]).join('');
		goto(`/defi/${seed}`);
	}
</script>

<svelte:head>
	<title>{t().app.titre} — {t().app.sousTitre}</title>
	<meta name="description" content={t().app.sousTitre} />
</svelte:head>

<div class="accueil">
	<section class="hero">
		<h1>{t().app.titre}</h1>
		<p class="accroche">{t().micro.kiteSaYe}</p>
		<p class="sous-titre">{t().app.sousTitre}</p>
	</section>

	<section aria-labelledby="titre-regions">
		<h2 id="titre-regions">{t().accueil.choixRegion}</h2>
		<div class="carte-accueil">
			<CarteRegions bind:selection={region} />
			<button
				type="button"
				class="btn btn-secondaire toutes"
				class:choisi={region === 'TOUTES'}
				aria-pressed={region === 'TOUTES'}
				onclick={() => (region = 'TOUTES')}
			>
				{t().regions.TOUTES}
			</button>
		</div>
	</section>

	<section aria-labelledby="titre-modes">
		<h2 id="titre-modes">{t().accueil.choixMode}</h2>
		<div class="grille modes">
			{#each modes as m (m.id)}
				<button
					type="button"
					class="carte-mode"
					class:choisi={mode === m.id}
					aria-pressed={mode === m.id}
					onclick={() => (mode = m.id)}
				>
					<span class="emoji" aria-hidden="true">{m.emoji}</span>
					<span class="nom">{t().modes[m.id]}</span>
					<span class="desc">{t().modes[`${m.id}Desc`]}</span>
				</button>
			{/each}
			<a href="/explorer" class="carte-mode explorer">
				<span class="emoji" aria-hidden="true">🧭</span>
				<span class="nom">{t().modes.explorer}</span>
				<span class="desc">{t().modes.explorerDesc}</span>
			</a>
		</div>
		{#if mode === 'defi'}
			<button type="button" class="btn btn-secondaire lien-defi" onclick={creerLienDefi}>
				{t().accueil.creerLienDefi}
			</button>
		{/if}
	</section>

	<section class="options" aria-labelledby="titre-options">
		<h2 id="titre-options">{t().accueil.options}</h2>
		<label class="option-timer">
			<input type="checkbox" bind:checked={timer} />
			<span>{t().accueil.timer}</span>
		</label>
	</section>

	<div class="zone-pouce">
		<button type="button" class="btn btn-primaire jouer" onclick={jouer}>
			{t().accueil.jouer}
		</button>
	</div>
</div>

<style>
	.accueil {
		width: 100%;
		max-width: 860px;
		margin: 0 auto;
		padding: 1.25rem 1rem 7rem; /* espace pour le bouton fixe en zone pouce */
		display: flex;
		flex-direction: column;
		gap: 1.6rem;
	}

	.hero {
		text-align: center;
	}

	.hero h1 {
		margin: 0;
		font-size: 3rem;
		font-weight: 800;
		color: var(--oki-vert);
		letter-spacing: 0.06em;
	}

	.accroche {
		margin: 0.2rem 0 0;
		font-size: 1.25rem;
		font-weight: 650;
		color: var(--oki-vert-clair);
		font-style: italic;
	}

	.sous-titre {
		margin: 0.4rem 0 0;
		color: var(--oki-encre-doux);
	}

	h2 {
		font-size: 1.05rem;
		color: var(--oki-vert);
		margin: 0 0 0.6rem;
	}

	.grille {
		display: grid;
		gap: 0.7rem;
	}

	.modes {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}

	/* Carte SVG des régions + bouton « Toutes les régions » */
	.carte-accueil {
		max-width: 560px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.6rem;
	}

	.toutes {
		border: 2px solid transparent;
	}

	.toutes.choisi {
		border-color: var(--oki-vert);
		background: var(--oki-vert-doux);
	}

	/* Bouton secondaire « Créer un lien de défi », sous la grille des modes */
	.lien-defi {
		display: block;
		margin: 0.8rem auto 0;
	}

	.carte-mode {
		border: 2px solid transparent;
		border-radius: var(--oki-radius);
		background: var(--oki-blanc);
		box-shadow: var(--oki-ombre);
		cursor: pointer;
		text-align: center;
		color: var(--oki-encre);
		text-decoration: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.35rem;
		padding: 1rem 0.8rem;
	}

	.carte-mode .emoji {
		font-size: 1.6rem;
	}

	.carte-mode .nom {
		font-weight: 750;
		color: var(--oki-vert);
	}

	.carte-mode .desc {
		font-size: 0.85rem;
		color: var(--oki-encre-doux);
	}

	.carte-mode:hover {
		border-color: var(--oki-vert-clair);
	}

	.carte-mode.choisi {
		border-color: var(--oki-vert);
		background: var(--oki-vert-doux);
	}

	.options {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
	}

	.option-timer {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		font-size: 1rem;
		cursor: pointer;
	}

	.option-timer input {
		width: 1.2rem;
		height: 1.2rem;
		accent-color: var(--oki-vert);
	}

	/* Bouton « Jouer » : fixe en zone du pouce sur mobile */
	.zone-pouce {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
		background: linear-gradient(transparent, var(--oki-sable) 35%);
		display: flex;
		justify-content: center;
		z-index: 10;
	}

	.jouer {
		width: min(420px, 100%);
		padding: 1rem;
		font-size: 1.2rem;
	}

	@media (min-width: 768px) {
		.hero h1 {
			font-size: 3.6rem;
		}
	}
</style>