Error 404

import Link from "next/link";
import { ArrowLeft, Search } from "lucide-react";

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

const escapes = [
  { label: "Documentation", href: "#" },
  { label: "Changelog", href: "#" },
  { label: "System status", href: "#" },
];

export default function Error404() {
  return (
    <section className="relative overflow-hidden bg-background">
      <div
        aria-hidden
        className="absolute inset-0 bg-grid-lg mask-[radial-gradient(ellipse_70%_70%_at_50%_40%,black,transparent)]"
      />
      <div className="relative mx-auto flex min-h-[70vh] w-full max-w-xl flex-col items-center justify-center px-6 py-20 text-center">
        <p className="font-mono text-sm text-muted-foreground">error 404</p>
        <h1 className="mt-3 text-5xl font-semibold tracking-tight sm:text-7xl">
          Off the grid
        </h1>
        <p className="mt-4 max-w-sm text-muted-foreground">
          This page doesn't exist — or it moved without leaving coordinates.
          Nothing broke on your side.
        </p>

        <form className="mt-8 flex w-full max-w-sm gap-2">
          <label htmlFor="search-404" className="sr-only">
            Search the site
          </label>
          <div className="relative flex-1">
            <Search className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
            <input
              id="search-404"
              type="search"
              placeholder="Search instead…"
              className="h-9 w-full rounded-lg border border-input bg-background pl-8 text-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
            />
          </div>
          <Button type="submit" variant="outline">
            Search
          </Button>
        </form>

        <div className="mt-8 flex flex-wrap items-center justify-center gap-x-5 gap-y-2">
          {escapes.map((escape) => (
            <Link
              key={escape.label}
              href={escape.href}
              className="text-sm text-muted-foreground underline-offset-4 transition-colors hover:text-foreground hover:underline"
            >
              {escape.label}
            </Link>
          ))}
        </div>

        <Button className="mt-10" render={<Link href="#" />}>
          <ArrowLeft data-icon="inline-start" />
          Back to safety
        </Button>
      </div>
    </section>
  );
}