import { motion } from "framer-motion";

export const FullStackVector = () => {
  return (
    <div className="relative w-full h-96 flex items-center justify-center overflow-hidden font-manrope">
      {/* Subtle Background */}
      <div className="absolute inset-0 opacity-5">
        <svg className="w-full h-full" viewBox="0 0 400 400" fill="none">
          <defs>
            <radialGradient id="bgGradient" cx="50%" cy="50%" r="30%">
              <stop offset="0%" stopColor="#E5195E" stopOpacity="0.04" />
              <stop offset="100%" stopColor="#3B82F6" stopOpacity="0.02" />
            </radialGradient>
          </defs>
          <circle cx="200" cy="200" r="80" fill="url(#bgGradient)" />
        </svg>
      </div>

      <div className="relative z-20 flex items-center justify-center space-x-12">
        {/* Database Component */}
        <motion.div
          initial={{ opacity: 0, x: -40 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="flex flex-col items-center"
        >
          {/* Database Icon */}
          <div className="relative">
            <motion.div
              animate={{ y: [0, -4, 0] }}
              transition={{ duration: 3, repeat: Infinity }}
              className="w-16 h-20 bg-gradient-to-b from-blue-600 to-blue-800 rounded-lg flex flex-col justify-between p-2 shadow-lg border border-blue-500/20"
            >
              {/* Database layers */}
              <div className="w-full h-2 bg-blue-400/30 rounded-full"></div>
              <div className="w-full h-2 bg-blue-400/30 rounded-full"></div>
              <div className="w-full h-2 bg-blue-400/30 rounded-full"></div>
              <div className="w-full h-2 bg-blue-400/30 rounded-full"></div>
            </motion.div>
            
            {/* Database Label */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5, delay: 0.8 }}
              className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-xs text-white font-manrope whitespace-nowrap"
            >
              Database
            </motion.div>
          </div>
        </motion.div>

        {/* Server Stack */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          className="flex flex-col items-center"
        >
          {/* Server Stack */}
          <div className="relative">
            <div className="flex flex-col space-y-1">
              {Array.from({ length: 4 }).map((_, i) => (
                <motion.div
                  key={i}
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.4, delay: 0.6 + i * 0.1 }}
                  className="relative"
                >
                  <div className="w-20 h-6 bg-gradient-to-r from-green-600 to-green-700 rounded flex items-center justify-between px-2 border border-green-500/20">
                    {/* Server indicator */}
                    <motion.div
                      animate={{ scale: [1, 1.2, 1] }}
                      transition={{ duration: 2, repeat: Infinity, delay: i * 0.5 }}
                      className="w-2 h-2 bg-green-400 rounded-full"
                    ></motion.div>
                    
                    {/* Server number */}
                    <span className="text-xs text-white font-manrope">#{i + 1}</span>
                  </div>
                </motion.div>
              ))}
            </div>
            
            {/* API Label */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5, delay: 1.2 }}
              className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-xs text-white font-manrope whitespace-nowrap"
            >
              API Server
            </motion.div>
          </div>
        </motion.div>

        {/* Gateway Component */}
        <motion.div
          initial={{ opacity: 0, x: 40 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8, delay: 0.6 }}
          className="flex flex-col items-center"
        >
          {/* Gateway Icon */}
          <div className="relative">
            <motion.div
              animate={{ rotate: [0, 360] }}
              transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
              className="w-16 h-16 bg-gradient-to-br from-purple-600 to-purple-800 rounded-xl flex items-center justify-center shadow-lg border border-purple-500/20"
            >
              <motion.div
                animate={{ scale: [1, 1.1, 1] }}
                transition={{ duration: 2, repeat: Infinity }}
                className="text-white text-lg font-manrope"
              >
                ⚡
              </motion.div>
            </motion.div>
            
            {/* Gateway Label */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.5, delay: 1.0 }}
              className="absolute -bottom-8 left-1/2 transform -translate-x-1/2 text-xs text-white font-manrope whitespace-nowrap"
            >
              Gateway
            </motion.div>
          </div>
        </motion.div>
      </div>

      {/* Connection Lines */}
      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20 z-15">
        <defs>
          <linearGradient id="connectionGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#3B82F6" stopOpacity="0.4" />
            <stop offset="50%" stopColor="#E5195E" stopOpacity="0.3" />
            <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.4" />
          </linearGradient>
        </defs>
        
        <motion.line
          x1="35%" y1="50%" x2="60%" y2="50%"
          stroke="url(#connectionGradient)"
          strokeWidth="2"
          strokeDasharray="3,3"
          initial={{ pathLength: 0 }}
          animate={{ pathLength: 1 }}
          transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }}
        />
        
        <motion.line
          x1="60%" y1="50%" x2="85%" y2="50%"
          stroke="url(#connectionGradient)"
          strokeWidth="2"
          strokeDasharray="3,3"
          initial={{ pathLength: 0 }}
          animate={{ pathLength: 1 }}
          transition={{ duration: 2, repeat: Infinity, repeatType: "reverse", delay: 0.5 }}
        />
      </svg>

      {/* Performance Metrics */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, delay: 1.4 }}
        className="absolute top-8 right-8 z-25"
      >
        <div className="bg-black/30 backdrop-blur-sm rounded-lg p-3 border border-white/10">
          <div className="space-y-2">
            <div className="flex items-center space-x-2">
              <motion.div
                animate={{ scale: [1, 1.2, 1] }}
                transition={{ duration: 2, repeat: Infinity }}
                className="w-2 h-2 bg-green-400 rounded-full"
              ></motion.div>
              <span className="text-green-400 text-xs font-manrope">99.9% Uptime</span>
            </div>
            <div className="flex items-center space-x-2">
              <motion.div
                animate={{ scale: [1, 1.2, 1] }}
                transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
                className="w-2 h-2 bg-blue-400 rounded-full"
              ></motion.div>
              <span className="text-blue-400 text-xs font-manrope">50ms Response</span>
            </div>
          </div>
        </div>
      </motion.div>

      {/* Technology Stack */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, delay: 1.6 }}
        className="absolute bottom-8 left-8 z-25"
      >
        <div className="bg-black/30 backdrop-blur-sm rounded-lg p-2 border border-white/10">
          <div className="flex space-x-2">
            {[
              { name: "Node.js", color: "bg-green-600" },
              { name: "SQL", color: "bg-blue-600" },
              { name: "Redis", color: "bg-red-600" }
            ].map((tech, index) => (
              <motion.div
                key={tech.name}
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                transition={{ duration: 0.3, delay: 1.8 + index * 0.1 }}
                className={`px-2 py-1 ${tech.color}/20 border border-white/10 rounded text-xs text-white font-manrope`}
              >
                {tech.name}
              </motion.div>
            ))}
          </div>
        </div>
      </motion.div>

      {/* Data Flow Indicator */}
      <motion.div
        initial={{ opacity: 0, scale: 0 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.5, delay: 2 }}
        className="absolute bottom-8 right-8 z-25"
      >
        <motion.div
          animate={{ rotate: [0, 360] }}
          transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
          className="w-8 h-8 border-2 border-gray-600 border-t-accent rounded-full"
        ></motion.div>
      </motion.div>
    </div>
  );
};