<!-- [DEF:ErrorPage:Page] -->
<script>
    /**
     * @TIER: STANDARD
     * @PURPOSE: Global error page displaying HTTP status and messages
     * @LAYER: UI
     * @UX_STATE: Error -> Displays error code and message with home link
     */
    import { page } from "$app/stores";
</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-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition-colors"
    >
        Back to Dashboard
    </a>
</div>
<!-- [/DEF:ErrorPage:Page] -->
