import { Button } from "@/components/ui/Button";

/** 404 page for unknown routes, games and categories. */
export default function NotFound() {
  return (
    <div className="shell flex flex-col items-center py-24 text-center">
      <p
        aria-hidden="true"
        className="text-6xl font-black text-slate-800"
      >
        404
      </p>
      <h1 className="mt-4 text-2xl font-bold text-white">Page not found</h1>
      <p className="mt-2 max-w-md text-slate-400">
        The page you&apos;re looking for doesn&apos;t exist, or the game may
        have been removed or disabled.
      </p>
      <div className="mt-6 flex flex-wrap justify-center gap-3">
        <Button href="/">Back home</Button>
        <Button href="/games" variant="secondary">
          Browse games
        </Button>
      </div>
    </div>
  );
}