import { motion } from "framer-motion";

export const UIUXVector = () => {
  return (
    <div className="relative w-full h-96 flex items-center justify-center">
      {/* Design Canvas */}
      <motion.div
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.8 }}
        className="relative z-10"
      >
        <div className="w-64 h-48 bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg shadow-2xl p-4">
          {/* Figma Interface */}
          <div className="h-full bg-white rounded overflow-hidden relative">
            {/* Header */}
            <div className="h-6 bg-gray-100 flex items-center px-2 space-x-1">
              <div className="w-2 h-2 bg-red-500 rounded-full"></div>
              <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
              <div className="flex-1 text-center">
                <span className="text-gray-600 text-xs font-manrope">Design System</span>
              </div>
            </div>
            
            {/* Design Elements */}
            <div className="p-3 space-y-2">
              {/* Wireframe Elements */}
              <div className="flex space-x-2">
                <motion.div
                  initial={{ width: 0 }}
                  animate={{ width: "60%" }}
                  transition={{ duration: 0.8, delay: 0.5 }}
                  className="h-3 bg-gradient-to-r from-blue-400 to-blue-500 rounded"
                />
                <motion.div
                  initial={{ width: 0 }}
                  animate={{ width: "30%" }}
                  transition={{ duration: 0.8, delay: 0.7 }}
                  className="h-3 bg-accent rounded"
                />
              </div>
              
              <div className="flex space-x-1">
                {Array.from({ length: 4 }).map((_, i) => (
                  <motion.div
                    key={i}
                    initial={{ height: 0 }}
                    animate={{ height: "12px" }}
                    transition={{ duration: 0.5, delay: i * 0.1 + 0.9 }}
                    className="flex-1 bg-gray-300 rounded"
                  />
                ))}
              </div>
              
              {/* Component Grid */}
              <div className="grid grid-cols-3 gap-1 mt-3">
                {Array.from({ length: 6 }).map((_, i) => (
                  <motion.div
                    key={i}
                    initial={{ scale: 0, rotate: 180 }}
                    animate={{ scale: 1, rotate: 0 }}
                    transition={{ duration: 0.3, delay: i * 0.1 + 1.2 }}
                    className="aspect-square bg-gradient-to-br from-purple-300 to-purple-400 rounded"
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </motion.div>

      {/* Design Tools Palette */}
      <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">
          {/* Figma */}
          <motion.div
            whileHover={{ scale: 1.1 }}
            className="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
          >
            <svg className="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 12a4 4 0 108 0 4 4 0 00-8 0z"/>
              <path d="M4 16a4 4 0 018 0v-4H8a4 4 0 00-4 4z"/>
              <path d="M4 8a4 4 0 014-4h4v8H8a4 4 0 01-4-4z"/>
              <path d="M12 4h4a4 4 0 010 8h-4V4z"/>
            </svg>
          </motion.div>
          
          {/* Sketch */}
          <motion.div
            whileHover={{ scale: 1.1 }}
            className="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
          >
            <span className="text-white font-bold font-manrope">S</span>
          </motion.div>
          
          {/* Adobe XD */}
          <motion.div
            whileHover={{ scale: 1.1 }}
            className="w-12 h-12 bg-gradient-to-br from-pink-500 to-pink-600 rounded-xl flex items-center justify-center shadow-lg cursor-pointer"
          >
            <span className="text-white font-bold font-manrope">Xd</span>
          </motion.div>
        </div>
      </motion.div>

      {/* User Journey Flow */}
      <motion.div
        initial={{ opacity: 0, y: 50 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, delay: 0.6 }}
        className="absolute bottom-12 left-1/2 transform -translate-x-1/2"
      >
        <div className="flex items-center space-x-4">
          {/* User Persona */}
          <motion.div
            whileHover={{ scale: 1.1 }}
            className="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
          </motion.div>
          
          {/* Flow Arrow */}
          <motion.div
            initial={{ width: 0 }}
            animate={{ width: "24px" }}
            transition={{ duration: 0.5, delay: 1.5 }}
            className="h-0.5 bg-gradient-to-r from-blue-500 to-purple-500"
          />
          
          {/* Wireframe */}
          <motion.div
            whileHover={{ scale: 1.1 }}
            className="w-10 h-10 bg-gradient-to-br from-gray-500 to-gray-600 rounded border-2 border-gray-400 flex items-center justify-center shadow-lg"
          >
            <div className="w-4 h-4 border border-gray-300 rounded-sm"></div>
          </motion.div>
          
          {/* Flow Arrow */}
          <motion.div
            initial={{ width: 0 }}
            animate={{ width: "24px" }}
            transition={{ duration: 0.5, delay: 1.7 }}
            className="h-0.5 bg-gradient-to-r from-gray-500 to-accent"
          />
          
          {/* Prototype */}
          <motion.div
            whileHover={{ scale: 1.1 }}
            className="w-10 h-10 bg-gradient-to-br from-accent to-pink-600 rounded 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="M12 18h.01M8 21h8a1 1 0 001-1V4a1 1 0 00-1-1H8a1 1 0 00-1 1v16a1 1 0 001 1z" />
            </svg>
          </motion.div>
        </div>
        
        <div className="flex justify-between mt-2 text-xs text-gray-400 font-manrope">
          <span>Research</span>
          <span>Design</span>
          <span>Prototype</span>
        </div>
      </motion.div>

      {/* Color Palette */}
      <motion.div
        initial={{ opacity: 0, x: 50 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ duration: 0.8, delay: 0.8 }}
        className="absolute right-8 top-16"
      >
        <div className="space-y-2">
          <div className="text-white text-sm font-manrope mb-2">Colors</div>
          <div className="flex space-x-1">
            <motion.div
              whileHover={{ scale: 1.2 }}
              className="w-6 h-6 bg-blue-500 rounded cursor-pointer shadow-lg"
            />
            <motion.div
              whileHover={{ scale: 1.2 }}
              className="w-6 h-6 bg-accent rounded cursor-pointer shadow-lg"
            />
            <motion.div
              whileHover={{ scale: 1.2 }}
              className="w-6 h-6 bg-purple-500 rounded cursor-pointer shadow-lg"
            />
          </div>
          
          {/* Typography */}
          <div className="mt-4">
            <div className="text-white text-sm font-manrope mb-2">Typography</div>
            <div className="space-y-1">
              <div className="text-white text-lg font-manrope">Aa</div>
              <div className="text-gray-400 text-sm font-manrope">Manrope</div>
            </div>
          </div>
        </div>
      </motion.div>

      {/* User Testing Elements */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1, delay: 1.2 }}
        className="absolute top-8 left-16"
      >
        <div className="flex items-center space-x-2">
          <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
            <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="M5 13l4 4L19 7" />
            </svg>
          </div>
          <div className="text-green-400 text-sm font-manrope">Usability: 95%</div>
        </div>
      </motion.div>

      {/* Accessibility Icon */}
      <motion.div
        initial={{ opacity: 0, rotate: -180 }}
        animate={{ opacity: 1, rotate: 0 }}
        transition={{ duration: 0.8, delay: 1.4 }}
        className="absolute top-12 right-32"
      >
        <div className="w-10 h-10 bg-gradient-to-br from-teal-500 to-teal-600 rounded-full 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
      </motion.div>

      {/* Design System Components */}
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1, delay: 1.6 }}
        className="absolute bottom-8 right-8 flex space-x-2"
      >
        <div className="px-2 py-1 bg-blue-500/20 text-blue-300 border border-blue-500/30 rounded text-xs font-manrope">
          Components
        </div>
        <div className="px-2 py-1 bg-purple-500/20 text-purple-300 border border-purple-500/30 rounded text-xs font-manrope">
          Design System
        </div>
      </motion.div>

      {/* Interactive Design Flow */}
      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-20">
        <defs>
          <linearGradient id="designFlow" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#8B5CF6" stopOpacity="0.6" />
            <stop offset="50%" stopColor="#E5195E" stopOpacity="0.8" />
            <stop offset="100%" stopColor="#3B82F6" stopOpacity="0.6" />
          </linearGradient>
        </defs>
        
        <motion.path
          d="M 10% 80% Q 50% 20% 90% 80%"
          stroke="url(#designFlow)"
          strokeWidth="2"
          fill="none"
          strokeDasharray="5,5"
          initial={{ pathLength: 0 }}
          animate={{ pathLength: 1 }}
          transition={{ duration: 3, repeat: Infinity, repeatType: "reverse" }}
        />
      </svg>
    </div>
  );
};