import { motion } from "framer-motion";

export const EngagementModelsVector = () => {
  const models = [
    { name: "Fixed Price", icon: "💰", color: "from-blue-500 to-blue-600", position: { x: 20, y: 30 } },
    { name: "Time & Material", icon: "⏱️", color: "from-green-500 to-green-600", position: { x: 80, y: 30 } },
    { name: "Dedicated Team", icon: "👥", color: "from-accent to-pink-600", position: { x: 50, y: 70 } }
  ];

  return (
    <div className="relative w-full h-96 flex items-center justify-center">
      {/* Central Business Hub */}
      <motion.div
        initial={{ opacity: 0, scale: 0 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.8 }}
        className="relative z-10"
      >
        <div className="w-32 h-32 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl flex items-center justify-center shadow-2xl">
          <div className="w-20 h-20 bg-gradient-to-br from-accent to-purple-600 rounded-xl flex items-center justify-center">
            <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0V6a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V8a2 2 0 012-2V6" />
            </svg>
          </div>
        </div>
      </motion.div>

      {/* Engagement Model Options */}
      {models.map((model, index) => (
        <motion.div
          key={model.name}
          initial={{ opacity: 0, scale: 0 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.6, delay: index * 0.2 + 0.4 }}
          className="absolute"
          style={{
            left: `${model.position.x}%`,
            top: `${model.position.y}%`,
            transform: 'translate(-50%, -50%)'
          }}
        >
          <motion.div
            whileHover={{ scale: 1.1, y: -5 }}
            className={`w-20 h-20 bg-gradient-to-br ${model.color} rounded-xl flex flex-col items-center justify-center shadow-lg cursor-pointer`}
          >
            <span className="text-2xl mb-1">{model.icon}</span>
            <span className="text-white text-xs font-manrope text-center leading-tight">
              {model.name.split(' ').map((word, i) => (
                <div key={i}>{word}</div>
              ))}
            </span>
          </motion.div>
          
          {/* Model Benefits */}
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: index * 0.2 + 1 }}
            className="absolute -bottom-12 left-1/2 transform -translate-x-1/2 text-center"
          >
            <div className="text-gray-400 text-xs font-manrope">
              {model.name === "Fixed Price" && "Predictable Cost"}
              {model.name === "Time & Material" && "High Flexibility"}
              {model.name === "Dedicated Team" && "Full Control"}
            </div>
          </motion.div>
        </motion.div>
      ))}

      {/* Connection Lines */}
      <svg className="absolute inset-0 w-full h-full pointer-events-none">
        <defs>
          <linearGradient id="engagementGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#3B82F6" stopOpacity="0.6" />
            <stop offset="50%" stopColor="#E5195E" stopOpacity="0.8" />
            <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.6" />
          </linearGradient>
        </defs>
        
        {models.map((model, index) => (
          <motion.line
            key={index}
            x1="50%"
            y1="50%"
            x2={`${model.position.x}%`}
            y2={`${model.position.y}%`}
            stroke="url(#engagementGradient)"
            strokeWidth="2"
            strokeDasharray="4,4"
            initial={{ pathLength: 0, opacity: 0 }}
            animate={{ pathLength: 1, opacity: 0.7 }}
            transition={{ duration: 1, delay: index * 0.3 + 1.5 }}
          />
        ))}
      </svg>

      {/* Business Metrics */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1, delay: 2 }}
        className="absolute top-8 left-1/2 transform -translate-x-1/2 flex space-x-6"
      >
        <div className="text-center">
          <div className="text-green-400 text-lg font-manrope">95%</div>
          <div className="text-gray-400 text-xs font-manrope">Success Rate</div>
        </div>
        <div className="text-center">
          <div className="text-blue-400 text-lg font-manrope">500+</div>
          <div className="text-gray-400 text-xs font-manrope">Projects</div>
        </div>
        <div className="text-center">
          <div className="text-purple-400 text-lg font-manrope">98%</div>
          <div className="text-gray-400 text-xs font-manrope">Satisfaction</div>
        </div>
      </motion.div>

      {/* Project Types */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1, delay: 2.5 }}
        className="absolute bottom-8 left-1/2 transform -translate-x-1/2"
      >
        <div className="flex space-x-3">
          <div className="px-3 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded-full text-sm font-manrope">
            MVP
          </div>
          <div className="px-3 py-1 bg-green-500/20 text-green-300 border border-green-500/30 rounded-full text-sm font-manrope">
            Enterprise
          </div>
          <div className="px-3 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded-full text-sm font-manrope">
            Scale-up
          </div>
        </div>
      </motion.div>

      {/* Floating Decision Factors */}
      <motion.div
        animate={{ y: [0, -8, 0] }}
        transition={{ duration: 3, repeat: Infinity }}
        className="absolute top-24 left-8 w-16 h-12 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-lg flex items-center justify-center shadow-lg"
      >
        <div className="text-center">
          <div className="text-white text-xs font-manrope">Budget</div>
          <div className="text-white text-xs font-manrope">🎯</div>
        </div>
      </motion.div>

      <motion.div
        animate={{ y: [0, -12, 0] }}
        transition={{ duration: 4, repeat: Infinity, delay: 0.5 }}
        className="absolute top-32 right-8 w-16 h-12 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-lg flex items-center justify-center shadow-lg"
      >
        <div className="text-center">
          <div className="text-white text-xs font-manrope">Timeline</div>
          <div className="text-white text-xs font-manrope">⏰</div>
        </div>
      </motion.div>

      <motion.div
        animate={{ y: [0, -10, 0] }}
        transition={{ duration: 3.5, repeat: Infinity, delay: 1 }}
        className="absolute bottom-20 left-8 w-16 h-12 bg-gradient-to-br from-teal-500 to-teal-600 rounded-lg flex items-center justify-center shadow-lg"
      >
        <div className="text-center">
          <div className="text-white text-xs font-manrope">Scope</div>
          <div className="text-white text-xs font-manrope">📋</div>
        </div>
      </motion.div>

      {/* ROI Indicator */}
      <motion.div
        initial={{ opacity: 0, rotate: -45 }}
        animate={{ opacity: 1, rotate: 0 }}
        transition={{ duration: 0.8, delay: 3 }}
        className="absolute bottom-16 right-8"
      >
        <div className="w-20 h-8 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center shadow-lg">
          <span className="text-white text-sm font-manrope">ROI ↗</span>
        </div>
      </motion.div>

      {/* Selection Process Flow */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1, delay: 3.5 }}
        className="absolute bottom-24 right-16"
      >
        <div className="text-right space-y-1">
          <div className="text-gray-400 text-xs font-manrope">1. Analyze Requirements</div>
          <div className="text-gray-400 text-xs font-manrope">2. Compare Models</div>
          <div className="text-gray-400 text-xs font-manrope">3. Select Best Fit</div>
          <div className="text-gray-400 text-xs font-manrope">4. Start Project</div>
        </div>
      </motion.div>
    </div>
  );
};