"use client";

import Link from "next/link";
import { useLocale } from "next-intl";
import { motion } from "framer-motion";

export default function NotFound() {
  const locale = useLocale();
  const isEs = locale === "es";

  return (
    <div className="min-h-[70vh] flex items-center justify-center px-4">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        className="text-center max-w-lg"
      >
        <h1 className="text-8xl font-bold text-[#1a1a24] mb-4">404</h1>
        <h2 className="text-2xl font-semibold text-[#f5f5f7] mb-4">
          {isEs ? "Página no encontrada" : "Page Not Found"}
        </h2>
        <p className="text-[#a0a0a8] mb-8 leading-relaxed">
          {isEs
            ? "La página que buscas no existe o ha sido movida."
            : "The page you are looking for does not exist or has been moved."}
        </p>
        <Link
          href={`/${locale}`}
          className="inline-block px-8 py-3 bg-[#d4a574] text-[#0a0a0f] font-semibold rounded-xl hover:bg-[#e8c4a0] transition-colors"
        >
          {isEs ? "Volver al inicio" : "Go back home"}
        </Link>
      </motion.div>
    </div>
  );
}