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

	const is404 = $derived(page.status === 404);
</script>

<svelte:head>
	<title>{page.status} — GONG</title>
	<meta name="robots" content="noindex" />
</svelte:head>

<main id="contenu" class="erreur container">
	<Icon name="ka" size="4.5rem" />
	<p class="code">{page.status}</p>
	{#if is404}
		<h1 lang="gcf">Paj-la pa la</h1>
		<p class="lead">
			Cette page n'existe pas ou a été déplacée. Mais l'histoire du GONG, elle, est toujours là.
		</p>
	{:else}
		<h1>Erreur {page.status}</h1>
		<p class="lead">{page.error?.message ?? 'Une erreur est survenue.'}</p>
	{/if}
	<div class="liens">
		<a class="btn btn--fill" href="/">Retour à l'accueil</a>
		<a class="btn" href="/histoire/">L'histoire du GONG</a>
	</div>
</main>

<style>
	.erreur {
		min-height: 68dvh;
		display: grid;
		place-content: center;
		justify-items: center;
		text-align: center;
		gap: 0.6rem;
		padding-block: var(--space-5);
	}
	.code {
		font-family: var(--font-display);
		font-weight: 900;
		font-size: clamp(3rem, 2rem + 6vw, 6rem);
		line-height: 1;
		color: var(--accent);
		margin: 0;
	}
	.lead {
		max-width: 46ch;
		color: var(--muted);
	}
	.liens {
		display: flex;
		gap: 0.6rem;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: var(--space-2);
	}
</style>
