import Link from "next/link";
import type { Metadata } from "next";

/**
 * 全局 404。
 *
 * 当请求路径无法匹配任何语言前缀（例如 /en/foo/bar 之外的情况）时，
 * Next.js 使用这个兜底页面。它位于根布局之下，没有 next-intl 上下文，
 * 因此文案是静态的，链接也直接指向默认语言。
 */
export const metadata: Metadata = {
	title: "页面不存在 · 404",
	description: "你访问的页面不存在，或者已经被移动到了别处。",
};

export default function NotFound() {
	return (
		<main className="mx-auto flex min-h-dvh w-full max-w-[720px] flex-col items-center justify-center px-lg text-center">
			<p className="font-mono text-micro-uppercase font-semibold uppercase tracking-[0.5px] text-brand-error">
				Error 404
			</p>

			<h1 className="mt-sm text-heading-2 font-semibold text-ink">
				页面走丢了
			</h1>

			<p className="mt-md max-w-[480px] text-subtitle text-steel">
				你访问的页面不存在，或者已经被移动到了别处。
			</p>

			<Link
				href="/"
				className="mt-xxl inline-flex h-10 items-center rounded-full bg-primary px-lg text-button-md font-medium text-on-primary transition-colors duration-150 active:bg-charcoal"
			>
				返回首页
			</Link>
		</main>
	);
}