import { Link } from 'react-router-dom'
import { usePageTitle } from '@/hooks/use-page-title'

export default function NotFoundPage() {
  usePageTitle('页面不存在')
  return (
    <section className="flex flex-col items-center px-6 py-28 text-center">
      <p className="font-mono text-[13px] tracking-[0.18em] text-accent">
        404 · NOT FOUND
      </p>
      <h1 className="mt-4 text-[28px] font-[650] tracking-[-0.02em]">
        这条事件流不存在
      </h1>
      <p className="mt-2 text-[15px] text-ink-2">
        地址可能已变更，回首页重新出发。
      </p>
      <Link
        to="/"
        className="mt-8 rounded-lg bg-accent px-6 py-2.5 text-[14.5px] font-medium text-ground transition-opacity hover:opacity-90"
      >
        回首页
      </Link>
    </section>
  )
}