import type { Metadata } from "next";
import Link from "next/link";
import { Compass } from "lucide-react";
import { Button } from "@/components/ui";
import { SpinzaWordmark } from "@/components/brand/logo";

export const metadata: Metadata = { title: "Page not found", robots: { index: false } };

export default function NotFound() {
  return (
    <div className="relative flex min-h-dvh flex-col items-center justify-center px-4 py-16 text-center">
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_50%_20%,rgba(201,169,97,0.12),transparent_55%)]" />
      <Link href="/" className="relative mb-10 focus-ring rounded-md" aria-label="Spinza home">
        <SpinzaWordmark />
      </Link>
      <div className="relative">
        <div className="mx-auto mb-6 grid h-16 w-16 place-items-center rounded-full metal text-accent-2">
          <Compass className="h-7 w-7" />
        </div>
        <div className="font-mono text-[12px] tracking-[0.3em] text-fg-4">404</div>
        <h1 className="mt-2 text-3xl font-semibold tracking-[-0.03em] sm:text-4xl">This reel doesn&apos;t exist.</h1>
        <p className="mx-auto mt-3 max-w-md text-[15px] text-fg-3">The page you were looking for has moved or was never here. Your credits and progress are unaffected.</p>
        <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
          <Button href="/" size="lg">
            Back to the lobby
          </Button>
          <Button href="/games" variant="secondary" size="lg">
            Browse games
          </Button>
        </div>
      </div>
      <p className="relative mt-16 text-[12px] text-fg-4">Virtual credits only. No deposits. No withdrawals. No cash value. 18+.</p>
    </div>
  );
}