/**
 * 根级 404
 *
 * Server Component。覆盖未匹配路由（结合 `notFound()` 调用）。
 * 不启用 v16 实验性 `global-not-found.js`，避免 `next.config.ts` 变更。
 */

import Link from "next/link";

import { ROUTES } from "@/router/routes";

export default function NotFound() {
  return (
    <div className="flex flex-1 flex-col items-center justify-center gap-md p-lg">
      <h1
        className="text-2xl font-semibold"
        style={{ color: "var(--color-text-primary)" }}
      >
        Page not found
      </h1>
      <p
        className="max-w-md text-center text-sm"
        style={{ color: "var(--color-text-secondary)" }}
      >
        The page you&apos;re looking for doesn&apos;t exist or has been moved.
      </p>
      <Link
        href={ROUTES.splash}
        className="rounded-md px-lg py-sm text-sm"
        style={{
          background: "var(--color-accent)",
          color: "var(--color-text-primary)",
        }}
      >
        Return to start
      </Link>
    </div>
  );
}