import { motion } from "framer-motion";

export const QATestingVector = () => {
  return (
    <div className="relative w-full h-96 flex items-center justify-center">
      {/* Testing Dashboard */}
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        className="relative z-10"
      >
        <div className="w-72 h-48 bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg shadow-2xl p-4">
          {/* Header */}
          <div className="flex justify-between items-center mb-4">
            <div className="text-white font-semibold font-manrope">Test Results</div>
            <div className="flex space-x-1">
              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
              <div className="text-green-400 text-xs font-manrope">Running</div>
            </div>
          </div>
          
          {/* Test Cases */}
          <div className="space-y-2">
            {[
              { name: "Login Flow", status: "passed", color: "green" },
              { name: "Payment Gateway", status: "passed", color: "green" },
              { name: "User Registration", status: "running", color: "yellow" },
              { name: "API Validation", status: "passed", color: "green" },
              { name: "Mobile Responsive", status: "failed", color: "red" }
            ].map((test, index) => (
              <motion.div
                key={test.name}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 + 0.3 }}
                className="flex items-center justify-between p-2 bg-gray-700 rounded"
              >
                <div className="flex items-center space-x-2">
                  <motion.div
                    animate={test.status === "running" ? { rotate: 360 } : {}}
                    transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
                    className={`w-3 h-3 rounded-full ${
                      test.color === "green" ? "bg-green-500" :
                      test.color === "yellow" ? "bg-yellow-500" : "bg-red-500"
                    }`}
                  />
                  <span className="text-white text-sm font-manrope">{test.name}</span>
                </div>
                <span className={`text-xs font-manrope ${
                  test.color === "green" ? "text-green-400" :
                  test.color === "yellow" ? "text-yellow-400" : "text-red-400"
                }`}>
                  {test.status}
                </span>
              </motion.div>
            ))}
          </div>
          
          {/* Statistics */}
          <div className="flex justify-between mt-4 pt-3 border-t border-gray-600">
            <div className="text-center">
              <div className="text-green-400 font-bold font-manrope">85%</div>
              <div className="text-gray-400 text-xs font-manrope">Passed</div>
            </div>
            <div className="text-center">
              <div className="text-yellow-400 font-bold font-manrope">10%</div>
              <div className="text-gray-400 text-xs font-manrope">Running</div>
            </div>
            <div className="text-center">
              <div className="text-red-400 font-bold font-manrope">5%</div>
              <div className="text-gray-400 text-xs font-manrope">Failed</div>
            </div>
          </div>
        </div>
      </motion.div>

      {/* Testing Tools */}
      <motion.div
        initial={{ opacity: 0, x: -50 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ duration: 0.8, delay: 0.4 }}
        className="absolute left-8 top-1/2 transform -translate-y-1/2"
      >
        <div className="space-y-3">
          {/* Selenium */}
          <motion.div
            whileHover={{ scale: 1.1 }}
            className="w-14 h-14 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
          >
            <span className="text-white text-xs font-manrope">Selenium</span>
          </motion.div>
          
          {/* Cypress */}
          <motion.div
            whileHover={{ scale: 1.1 }}
            className="w-14 h-14 bg-gradient-to-br from-gray-600 to-gray-700 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
          >
            <span className="text-white text-xs font-manrope">Cypress</span>
          </motion.div>
          
          {/* Jest */}
          <motion.div
            whileHover={{ scale: 1.1 }}
            className="w-14 h-14 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
          >
            <span className="text-white text-xs font-manrope">Jest</span>
          </motion.div>
        </div>
      </motion.div>

      {/* Bug Tracking */}
      <motion.div
        initial={{ opacity: 0, x: 50 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ duration: 0.8, delay: 0.6 }}
        className="absolute right-8 top-16"
      >
        <div className="w-24 h-32 bg-gradient-to-br from-red-600 to-red-800 rounded-lg p-3 shadow-lg">
          <div className="text-white text-sm font-manrope mb-2">Bug Report</div>
          <div className="space-y-2">
            <div className="flex items-center space-x-1">
              <div className="w-2 h-2 bg-red-400 rounded-full"></div>
              <span className="text-red-200 text-xs font-manrope">#001</span>
            </div>
            <div className="flex items-center space-x-1">
              <div className="w-2 h-2 bg-yellow-400 rounded-full"></div>
              <span className="text-yellow-200 text-xs font-manrope">#002</span>
            </div>
            <div className="flex items-center space-x-1">
              <div className="w-2 h-2 bg-green-400 rounded-full"></div>
              <span className="text-green-200 text-xs font-manrope">#003</span>
            </div>
          </div>
        </div>
      </motion.div>

      {/* Performance Metrics */}
      <motion.div
        initial={{ opacity: 0, y: 50 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, delay: 0.8 }}
        className="absolute bottom-16 left-1/2 transform -translate-x-1/2"
      >
        <div className="flex space-x-6">
          {/* Load Time */}
          <div className="text-center">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ duration: 0.5, delay: 1.2 }}
              className="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mb-2"
            >
              <span className="text-white text-xs font-manrope">1.2s</span>
            </motion.div>
            <div className="text-gray-400 text-xs font-manrope">Load Time</div>
          </div>
          
          {/* Coverage */}
          <div className="text-center">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ duration: 0.5, delay: 1.4 }}
              className="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mb-2"
            >
              <span className="text-white text-xs font-manrope">95%</span>
            </motion.div>
            <div className="text-gray-400 text-xs font-manrope">Coverage</div>
          </div>
          
          {/* Success Rate */}
          <div className="text-center">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ duration: 0.5, delay: 1.6 }}
              className="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center mb-2"
            >
              <span className="text-white text-xs font-manrope">99.2%</span>
            </motion.div>
            <div className="text-gray-400 text-xs font-manrope">Success</div>
          </div>
        </div>
      </motion.div>

      {/* Floating Test Icons */}
      <motion.div
        animate={{ y: [0, -10, 0] }}
        transition={{ duration: 3, repeat: Infinity }}
        className="absolute top-20 left-20 w-10 h-10 bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-lg flex items-center justify-center shadow-lg"
      >
        <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </motion.div>

      <motion.div
        animate={{ y: [0, -15, 0] }}
        transition={{ duration: 4, repeat: Infinity, delay: 0.5 }}
        className="absolute top-32 right-24 w-8 h-8 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg flex items-center justify-center shadow-lg"
      >
        <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </motion.div>

      {/* Test Automation Flow */}
      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30">
        <defs>
          <linearGradient id="testFlow" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#10B981" stopOpacity="0.6" />
            <stop offset="50%" stopColor="#E5195E" stopOpacity="0.8" />
            <stop offset="100%" stopColor="#3B82F6" stopOpacity="0.6" />
          </linearGradient>
        </defs>
        
        <motion.circle
          cx="50%" cy="50%" r="120"
          stroke="url(#testFlow)"
          strokeWidth="2"
          fill="none"
          strokeDasharray="10,10"
          initial={{ rotate: 0 }}
          animate={{ rotate: 360 }}
          transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
        />
      </svg>

      {/* Quality Labels */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1, delay: 1.8 }}
        className="absolute bottom-8 right-8 flex flex-col space-y-1"
      >
        <div className="px-2 py-1 bg-green-500/20 text-green-300 border border-green-500/30 rounded text-xs font-manrope">
          Automated Testing
        </div>
        <div className="px-2 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded text-xs font-manrope">
          Performance Testing
        </div>
        <div className="px-2 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded text-xs font-manrope">
          Security Testing
        </div>
      </motion.div>
    </div>
  );
};