import { useNavigate } from "framer/router";
import { motion } from "framer-motion";

export default function Home() {
  const navigate = useNavigate();

  return (
    <div className="w-full h-screen flex flex-col items-center justify-center bg-gradient-to-br from-[#1e0030] to-[#390057] text-white">
      <motion.h1
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1 }}
        className="text-5xl font-light tracking-wide mb-4"
      >
        LUMENAE
      </motion.h1>
      <motion.p
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1, duration: 1 }}
        className="text-xl text-purple-200 mb-12"
      >
        A mirror for the undivided self
      </motion.p>
      <motion.button
        onClick={() => navigate("/entry")}
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        className="px-6 py-3 bg-white/10 backdrop-blur text-white border border-white/20 rounded-full"
      >
        Enter the Field
      </motion.button>
    </div>
  );
}