import { useNavigate } from "@tanstack/react-router";
import { motion } from "framer-motion";
import { HOME } from "../routes/paths";

export default function NotFound() {
  const navigate = useNavigate();
  return (
    <main className="flex flex-col items-center justify-center h-full bg-white dark:bg-dark-900  px-6 text-center text-gray-100">
      <motion.h1
        className="text-7xl sm:text-8xl md:text-9xl font-bold mb-4 select-none text-gray-900 dark:text-white"
        initial={{ opacity: 0, y: -40 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1, ease: "easeOut" }}
      >
        ۴۰۴
      </motion.h1>

      <motion.p
        className="max-w-lg text-lg sm:text-xl mb-10 px-4 text-gray-900 dark:text-white"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.6, duration: 1 }}
      >
        متأسفیم، صفحه‌ای که دنبال آن هستید یافت نشد!
      </motion.p>

      <motion.button
        className="px-8 py-3 cursor-pointer rounded-full bg-primary-600 hover:bg-primary-500 focus:outline-none focus:ring-4 focus:ring-primary-400 text-white font-semibold shadow-lg"
        initial={{ opacity: 0, scale: 0.85 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ delay: 1, duration: 0.3, ease: "easeOut" }}
        onClick={() => navigate({ to: HOME })}
        aria-label="بازگشت به صفحه اصلی"
      >
        بازگشت به صفحه اصلی
      </motion.button>
    </main>
  );
}
