<script lang="ts">
    import { page } from "$app/stores";
    import * as m from "$lib/paraglide/messages";
    import { LanguageSwitcher } from "$lib/components";
</script>

<div class="min-h-screen flex items-center justify-center bg-[#0a121f]">
    <div class="flex flex-col items-center gap-16">
        <div
            class="flex flex-col items-center text-center text-white font-['Comic_Sans_MS',cursive,sans-serif] font-bold italic capitalize"
        >
            <h1 class="text-[128px] md:text-[80px] m-0 leading-none">
                {$page.status}
            </h1>
            <p class="text-[48px] md:text-[32px] m-0">
                {#if $page.status === 404}
                    {m.kv_error_not_found()}
                {:else}
                    {$page.error?.message ?? "Error"}
                {/if}
            </p>
        </div>
        <p
            class="font-['Comic_Sans_MS',cursive,sans-serif] font-bold italic text-[32px] md:text-[20px] text-white/50 text-center m-0 px-4"
        >
            {m.kv_error_hint()}
        </p>
    </div>
</div>

<LanguageSwitcher />
