import { Link } from '@tanstack/react-router'

export const NotFoundComponent = () => {
  return (
    <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
      <div className="max-w-md w-full text-center space-y-6">
        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-100">
          <span className="text-3xl font-bold text-slate-400">404</span>
        </div>
        <div>
          <h1 className="text-2xl font-bold text-slate-900">页面不存在</h1>
          <p className="text-slate-500 mt-2">您访问的页面可能已被移除或地址有误</p>
        </div>
        <Link
          to="/"
          className="inline-block px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium transition-colors"
        >
          返回首页
        </Link>
      </div>
    </div>
  )
}