import type { Metadata } from "next";
import Link from "next/link";
import { ArrowRight } from "lucide-react";

import { RequestedPath } from "@/modules/shared/ui/components/requested-path";
import { Magnetic } from "@/modules/shared/ui/components/magnetic";

export const metadata: Metadata = {
  title: "Seite nicht gefunden",
};

// Renders inside the root layout, so header, footer and the shared theme
// still apply — this is the same dark, oversized-type language as the hero.
export default function NotFound() {
  return (
    <section
      aria-labelledby="not-found-title"
      data-theme="dark"
      className="flex min-h-svh flex-col justify-center py-32"
    >
      <div className="container-site flex flex-col items-start">
        <p className="font-mono text-label text-fg-muted">(Fehler 404)</p>

        <h1
          id="not-found-title"
          aria-label="Seite nicht gefunden"
          className="mt-6 text-mega leading-none type-poster text-outline"
        >
          404
        </h1>

        <p className="type-body mt-6 max-w-[46ch] text-lead text-fg-muted">
          Diese Seite gibt es nicht, oder sie ist umgezogen. Der Link war
          vielleicht veraltet oder es hat sich jemand vertippt.
        </p>

        <RequestedPath />

        <Magnetic strength={0.3} className="mt-10">
          <Link
            href="/"
            className="group inline-flex h-14 items-center gap-2 rounded-full bg-white px-7 font-medium text-black transition-[scale] duration-500 ease-out-expo hover:scale-105"
          >
            Zur Startseite
            <ArrowRight
              aria-hidden
              className="size-4 transition-transform duration-500 ease-out-expo group-hover:translate-x-1"
            />
          </Link>
        </Magnetic>
      </div>
    </section>
  );
}