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

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

<svelte:head>
	<title>{status} — {is404 ? 'Paj la rivé périyòd…' : 'Erreur'} · ORGANISATION KA INTERNATIONALE</title>
	<meta name="robots" content="noindex" />
</svelte:head>

<section class="error-page container">
	<svg class="icon error-icon" aria-hidden="true"><use href="/icons.svg#ka" /></svg>
	<h1>{status}</h1>
	{#if is404}
		<p class="ka" lang="gcf">« Paj la rivé périyòd… »</p>
		<p class="fr">La page que vous cherchez n'existe pas ou a été déplacée. La route continue ailleurs.</p>
	{:else}
		<p class="fr">{page.error?.message ?? 'Une erreur est survenue.'}</p>
	{/if}
	<a class="btn" href="/">Retour à l'accueil</a>
</section>

<style>
	.error-page {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-3);
		padding: var(--space-5) var(--space-4);
	}

	.error-icon {
		width: 6rem;
		height: 6rem;
		color: var(--or-oki);
	}

	h1 {
		font-weight: 900;
		font-size: clamp(4rem, 15vw, 8rem);
	}

	.ka {
		font-size: 1.25rem;
		color: var(--or-oki);
	}

	.fr {
		max-width: 52ch;
		color: var(--muted);
	}
</style>
