import { Link } from "@tanstack/react-router";

import { Button } from "@/client/components/ui/button";
import { paths } from "@/client/lib/paths";

export function NotFoundPage() {
  return (
    <div className="mx-auto flex max-w-md flex-col items-center gap-6 pt-12 text-center sm:pt-24">
      <p className="font-display text-5xl font-extrabold text-zinc-700">404</p>
      <h1 className="font-display text-3xl font-extrabold tracking-tight text-zinc-50">Page not found</h1>
      <p className="text-sm text-zinc-400">The page you're looking for doesn't exist on the control plane.</p>
      <Link to={paths.home}>
        <Button variant="secondary">Back to home</Button>
      </Link>
    </div>
  );
}