import { motion } from 'motion/react';
import { SeyarMascot } from '@/mascots/SeyarMascot';

/** تا وقتی نشستِ قبلی بررسی می‌شود نمایش داده می‌شود. */
export function SplashScreen() {
  return (
    <div className="flex h-full flex-col items-center justify-center bg-rose">
      <motion.div
        initial={{ scale: 0.5, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ type: 'spring', stiffness: 220, damping: 18 }}
        className="flex flex-col items-center gap-4"
      >
        <div className="rounded-[32px] bg-white/15 p-6 backdrop-blur-sm">
          <SeyarMascot char="sigma" mood="happy" size={130} />
        </div>
        <h1 className="text-3xl font-black text-white">تدریسینو</h1>
        <p className="text-sm text-white/75">ریاضی، قدم‌به‌قدم، با همراه‌هات</p>
      </motion.div>
      <motion.div
        animate={{ rotate: 360 }}
        transition={{ duration: 1.8, repeat: Infinity, ease: 'linear' }}
        className="absolute bottom-20 h-6 w-6 rounded-full border-2 border-white/25 border-t-white"
      />
    </div>
  );
}