import type { Metadata } from "next";
import Link from "next/link";
import { Footer } from "./components/sections";
import { Eyebrow, Nav, WaitlistForm } from "./components/ui";

export const metadata: Metadata = {
  title: "Seite nicht gefunden",
  description:
    "Diese Seite gibt es nicht — oder noch nicht. Zurück zur Startseite oder auf die Warteliste.",
  robots: { index: false, follow: true },
};

/**
 * Catches both notFound() and any URL the app does not route. The root
 * layout renders only {children}, so the chrome has to come from here —
 * without it the 404 would be the one page on the site with no way out
 * of it.
 */
export default function NotFound() {
  return (
    <>
      <Nav />

      <main
        id="hauptinhalt"
        className="relative isolate flex flex-1 items-center overflow-hidden px-4 pb-24 pt-36 sm:pt-44"
      >
        {/* The hero's backdrop, quieted down. Same room, lights lower. */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 -z-10 overflow-hidden"
        >
          <div className="aurora absolute inset-0 opacity-60" />
          <div
            className="blob absolute left-1/2 top-[-30%] size-[720px] -translate-x-1/2 rounded-full opacity-40"
            style={{
              background:
                "radial-gradient(circle, rgba(244,192,12,0.45) 0%, transparent 70%)",
              filter: "blur(90px)",
            }}
          />
        </div>

        <div className="mx-auto w-full max-w-[640px] text-center">
          <Eyebrow>Fehler 404</Eyebrow>

          <h1 className="mt-7 font-display text-[clamp(2.5rem,7vw,4rem)] font-semibold leading-[1] tracking-[-0.05em] text-ink">
            Diese Seite gibt es{" "}
            <span className="brand-text italic">nicht.</span>
          </h1>

          <p className="mx-auto mt-6 max-w-[460px] text-body-lg text-slate-body">
            Vielleicht ein alter Link, vielleicht ein Tippfehler — vielleicht
            auch etwas, das wir noch bauen. Kumasy ist in der Pilotphase, es
            kommt also laufend etwas dazu.
          </p>

          <div className="mx-auto mt-9 max-w-[520px]">
            <WaitlistForm source="404-Seite" />
          </div>

          <p className="mt-8 text-body text-slate-helper">
            Oder{" "}
            <Link
              href="/"
              className="font-medium text-ink underline decoration-amber decoration-2 underline-offset-4 transition-opacity duration-200 hover:opacity-60"
            >
              zurück zur Startseite
            </Link>
            .
          </p>
        </div>
      </main>

      <Footer />
    </>
  );
}