<!-- #region ErrorPage [C:2] [TYPE Page] [SEMANTICS sveltekit, error, status, fallback, navigation] -->
<!-- @BRIEF Global error page displaying HTTP status code and error message with navigation back to dashboard. -->
<!-- @LAYER Page -->
<!-- @UX_STATE Error -> Displays error code and message with "Back to Dashboard" link. -->
<script lang="ts">
    import { page } from "$app/state";
</script>

<div class="container mx-auto p-4 text-center mt-20">
    <h1 class="text-6xl font-bold text-gray-800 mb-4">{page.status}</h1>
    <p class="text-2xl text-gray-600 mb-8">
        {page.error?.message || "Page not found"}
    </p>
    <a
        href="/"
        class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary transition-colors"
    >
        Back to Dashboard
    </a>
</div>
<!-- #endregion ErrorPage -->
