import { motion, useReducedMotion } from "framer-motion";
import { ArrowLeft, Home } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { Button } from "../shared/ui/Button";

export function NotFoundPage() {
  const navigate = useNavigate();
  const reduceMotion = useReducedMotion();

  return (
    <div className="grid min-h-[72vh] place-items-center px-4 py-16">
      <div className="max-w-2xl text-center">
        <svg
          viewBox="0 0 520 260"
          className="mx-auto w-full max-w-lg"
          role="img"
          aria-label="Потерянный документ в университетском архиве"
        >
          <rect x="40" y="50" width="440" height="170" rx="18" fill="#fffdf8" stroke="#d9d8d0" />
          <path d="M72 92h130M72 120h90M72 178h120" stroke="#d9d8d0" strokeWidth="10" strokeLinecap="round" />
          <motion.g
            animate={reduceMotion ? undefined : { y: [0, -9, 0], rotate: [-1, 1, -1] }}
            transition={{ duration: 3.2, repeat: Infinity, ease: "easeInOut" }}
          >
            <path d="M258 38h132l42 42v136H258z" fill="#f6ddd4" stroke="#123c36" strokeWidth="5" />
            <path d="M390 38v44h42" fill="none" stroke="#123c36" strokeWidth="5" />
            <path d="M288 112h104M288 142h74" stroke="#d65a3a" strokeWidth="9" strokeLinecap="round" />
            <circle cx="389" cy="180" r="29" fill="#123c36" />
            <path d="m409 201 22 22" stroke="#123c36" strokeWidth="10" strokeLinecap="round" />
            <path d="M378 180h22M389 169v22" stroke="#fff" strokeWidth="5" strokeLinecap="round" />
          </motion.g>
        </svg>
        <p className="mt-4 text-xs font-bold uppercase tracking-[0.18em] text-accent">Ошибка 404</p>
        <h1 className="mt-3 font-serif text-4xl sm:text-5xl">Такой страницы нет в архиве</h1>
        <p className="mx-auto mt-4 max-w-lg leading-7 text-muted">
          Возможно, материал переместили, адрес изменился или ссылка устарела.
        </p>
        <div className="mt-7 flex flex-wrap justify-center gap-3">
          <Button icon={<Home className="size-4" />} onClick={() => navigate("/")}>
            На главную
          </Button>
          <Button
            variant="secondary"
            icon={<ArrowLeft className="size-4" />}
            onClick={() => navigate(-1)}
          >
            Назад
          </Button>
        </div>
      </div>
    </div>
  );
}
