spb/spinza

1"use client";23import { useEffect } from "react";4import Link from "next/link";5import { RefreshCw, TriangleAlert } from "lucide-react";6import { Button } from "@/components/ui";7import { SpinzaWordmark } from "@/components/brand/logo";89/** Route-level error boundary. Keeps the brand, offers a retry, reassures about progress. */10export default function ErrorPage({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {11  useEffect(() => {12    console.error(error);13  }, [error]);1415  return (16    <div className="relative flex min-h-dvh flex-col items-center justify-center px-4 py-16 text-center">17      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_50%_20%,rgba(255,92,122,0.10),transparent_55%)]" />18      <Link href="/" className="relative mb-10 focus-ring rounded-md" aria-label="Spinza home">19        <SpinzaWordmark />20      </Link>21      <div className="relative" role="alert">22        <div className="mx-auto mb-6 grid h-16 w-16 place-items-center rounded-full metal text-danger">23          <TriangleAlert className="h-7 w-7" />24        </div>25        <h1 className="text-3xl font-semibold tracking-[-0.03em] sm:text-4xl">Something went wrong.</h1>26        <p className="mx-auto mt-3 max-w-md text-[15px] text-fg-3">An unexpected error interrupted this screen. Your credits, streak and progress are safe on the server — try again or head back to the lobby.</p>27        {error.digest ? <p className="mt-2 font-mono text-[11px] text-fg-4">Reference {error.digest}</p> : null}28        <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">29          <Button size="lg" onClick={reset}>30            <RefreshCw className="h-4 w-4" /> Try again31          </Button>32          <Button href="/" variant="secondary" size="lg">33            Back to the lobby34          </Button>35        </div>36      </div>37      <p className="relative mt-16 text-[12px] text-fg-4">Virtual credits only. No deposits. No withdrawals. No cash value. 18+.</p>38    </div>39  );40}41