import { motion } from "framer-motion";
import { AcademicCapIcon, SparklesIcon } from "@heroicons/react/24/outline";

export default function Training() {
  return (
    <main className="flex flex-col items-center justify-center h-full min-h-[60vh] bg-white dark:bg-dark-900 px-6 text-center">
      <motion.div
        className="flex flex-col items-center justify-center"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
      >
        <motion.div
          className="relative mb-6"
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{
            delay: 0.2,
            duration: 0.5,
            type: "spring",
            stiffness: 200,
          }}
        >
          <div className="relative">
            <AcademicCapIcon className="w-24 h-24 sm:w-32 sm:h-32 text-primary-500 dark:text-primary-400" />
            <motion.div
              className="absolute -top-2 -right-2"
              animate={{
                scale: [1, 1.2, 1],
                rotate: [0, 10, -10, 0],
              }}
              transition={{
                duration: 2,
                repeat: Infinity,
                ease: "easeInOut",
              }}
            >
              <SparklesIcon className="w-8 h-8 text-warning-500" />
            </motion.div>
          </div>
        </motion.div>

        <motion.h1
          className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 text-gray-900 dark:text-white select-none"
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4, duration: 0.6 }}
        >
          بخش آموزش
        </motion.h1>

        <motion.p
          className="max-w-lg text-lg sm:text-xl mb-2 px-4 text-gray-600 dark:text-dark-300 font-medium"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.6, duration: 0.6 }}
        >
          این بخش در دست توسعه است!
        </motion.p>

        <motion.p
          className="max-w-md text-sm sm:text-base px-4 text-gray-500 dark:text-dark-400"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.8, duration: 0.6 }}
        >
          به زودی ویدیوهای آموزشی سامانه رصدام در این بخش قرار خواهد گرفت.
        </motion.p>

        <motion.div
          className="mt-8 flex gap-2"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1, duration: 0.6 }}
        >
          <motion.div
            className="w-2 h-2 rounded-full bg-primary-500"
            animate={{
              scale: [1, 1.3, 1],
              opacity: [0.5, 1, 0.5],
            }}
            transition={{
              duration: 1.5,
              repeat: Infinity,
              ease: "easeInOut",
            }}
          />
          <motion.div
            className="w-2 h-2 rounded-full bg-primary-500"
            animate={{
              scale: [1, 1.3, 1],
              opacity: [0.5, 1, 0.5],
            }}
            transition={{
              duration: 1.5,
              repeat: Infinity,
              delay: 0.2,
              ease: "easeInOut",
            }}
          />
          <motion.div
            className="w-2 h-2 rounded-full bg-primary-500"
            animate={{
              scale: [1, 1.3, 1],
              opacity: [0.5, 1, 0.5],
            }}
            transition={{
              duration: 1.5,
              repeat: Infinity,
              delay: 0.4,
              ease: "easeInOut",
            }}
          />
        </motion.div>
      </motion.div>
    </main>
  );
}
