import React from 'react';
import { 
  PenTool,
  Users, 
  Figma,
  MousePointer,
  Palette,
  Layers,
  Eye,
  Heart,
  Lightbulb,
  Target,
  Monitor,
  Smartphone,
  Tablet,
  RefreshCcw,
  CheckCircle2,
  Star,
  TrendingUp,
  Zap
} from 'lucide-react';

// UI/UX Design Animation Component
export const UIUXDesignAnimation = () => {
  return (
    <div className="w-full h-full relative rounded-xl overflow-hidden border border-gray-800/50 bg-gradient-to-br from-gray-900/50 to-gray-800/30 backdrop-blur-sm">
      <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 to-purple-500/5 rounded-xl"></div>
      
      {/* Main Design Hub Visualization */}
      <div className="relative z-10 w-full h-full flex items-center justify-center p-8">
        
        {/* Central Design Hub - Similar to Cloud Hub */}
        <div className="relative">
          {/* Main Design Container */}
          <div className="w-32 h-32 relative">
            {/* Primary Design Shape */}
            <div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/30 to-purple-500/30 rounded-2xl animate-pulse">
              <div className="absolute inset-4 bg-gradient-to-br from-pink-500/40 to-violet-500/40 rounded-2xl animate-[float_3s_ease-in-out_infinite]">
                <div className="absolute inset-4 bg-gradient-to-br from-white/20 to-white/10 rounded-xl flex items-center justify-center">
                  <PenTool className="w-8 h-8 text-white animate-pulse" />
                </div>
              </div>
            </div>
          </div>
          
          {/* Orbiting Design Elements */}
          <div className="absolute inset-0">
            {/* User Research Node */}
            <div className="absolute -top-6 -right-6 w-12 h-12 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-xl flex items-center justify-center animate-[orbit_8s_linear_infinite] shadow-lg">
              <Users className="w-6 h-6 text-white" />
            </div>
            
            {/* Prototyping Node */}
            <div className="absolute -bottom-4 -left-6 w-10 h-10 bg-gradient-to-r from-green-500 to-emerald-400 rounded-lg flex items-center justify-center animate-[orbit_6s_linear_infinite_reverse] shadow-lg">
              <MousePointer className="w-5 h-5 text-white" />
            </div>
            
            {/* Design Systems Node */}
            <div className="absolute top-1/2 -left-12 w-9 h-9 bg-gradient-to-r from-purple-500 to-violet-400 rounded-full flex items-center justify-center animate-[orbit_10s_linear_infinite] shadow-lg">
              <Layers className="w-4 h-4 text-white" />
            </div>
            
            {/* User Testing Node */}
            <div className="absolute top-1/4 -right-10 w-11 h-11 bg-gradient-to-r from-orange-500 to-yellow-500 rounded-2xl flex items-center justify-center animate-[orbit_7s_linear_infinite_reverse] shadow-lg">
              <Eye className="w-5 h-5 text-white" />
            </div>
          </div>
        </div>
        
        {/* Design Process Flow Lines */}
        <div className="absolute inset-0 pointer-events-none">
          {/* Animated Connection Lines for Design Flow */}
          <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <linearGradient id="designFlowGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor="#E5195E" stopOpacity="0.6" />
                <stop offset="50%" stopColor="#EC4899" stopOpacity="0.4" />
                <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.6" />
              </linearGradient>
              <filter id="designGlow">
                <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                <feMerge> 
                  <feMergeNode in="coloredBlur"/>
                  <feMergeNode in="SourceGraphic"/>
                </feMerge>
              </filter>
            </defs>
            
            {/* Dynamic user journey flow lines */}
            <path
              d="M 100 200 Q 200 100 300 200 T 500 200"
              stroke="url(#designFlowGradient)"
              strokeWidth="2"
              fill="none"
              filter="url(#designGlow)"
              className="animate-pulse"
            />
            <path
              d="M 150 300 Q 250 200 350 300 T 550 300"
              stroke="url(#designFlowGradient)"
              strokeWidth="1.5"
              fill="none"
              filter="url(#designGlow)"
              className="animate-pulse"
              style={{ animationDelay: '1s' }}
            />
            
            {/* Additional design process flow lines */}
            <path
              d="M 50 150 Q 150 50 250 150 T 450 150"
              stroke="url(#designFlowGradient)"
              strokeWidth="1"
              fill="none"
              filter="url(#designGlow)"
              className="animate-pulse"
              style={{ animationDelay: '2s' }}
            />
          </svg>
        </div>
        
        {/* Floating Design Elements & Wireframe Components */}
        <div className="absolute inset-0 pointer-events-none">
          {/* Design element particles */}
          {Array.from({ length: 6 }).map((_, i) => (
            <div
              key={i}
              className={`absolute w-2 h-2 bg-gradient-to-r from-[#E5195E]/80 to-pink-400/80 rounded-full animate-[float_${3 + (i % 3)}s_ease-in-out_infinite] shadow-sm`}
              style={{
                top: `${20 + (i * 12)}%`,
                left: `${15 + (i * 9)}%`,
                animationDelay: `${i * 0.4}s`
              }}
            />
          ))}
          
          {/* Additional floating UI elements */}
          <div className="absolute top-1/6 right-1/4 w-1 h-1 bg-violet-400/60 rounded-full animate-[float_2s_ease-in-out_infinite] shadow-sm" style={{ animationDelay: '0.5s' }} />
          <div className="absolute bottom-1/4 left-1/5 w-1.5 h-1.5 bg-pink-400/70 rounded-full animate-[float_4s_ease-in-out_infinite] shadow-sm" style={{ animationDelay: '1.5s' }} />
          <div className="absolute top-2/3 right-1/6 w-1 h-1 bg-blue-400/60 rounded-full animate-[float_3s_ease-in-out_infinite] shadow-sm" style={{ animationDelay: '2.5s' }} />
        </div>
        
        {/* Design Performance Metrics */}
        <div className="absolute bottom-8 left-8 flex items-center gap-4">
          <div className="flex items-center gap-2 px-3 py-1 bg-pink-500/20 backdrop-blur-sm rounded-full border border-pink-500/30">
            <TrendingUp className="w-3 h-3 text-pink-400" />
            <span className="text-xs text-pink-400 font-medium">85% Conversion</span>
          </div>
          <div className="flex items-center gap-2 px-3 py-1 bg-green-500/20 backdrop-blur-sm rounded-full border border-green-500/30">
            <Star className="w-3 h-3 text-green-400" />
            <span className="text-xs text-green-400 font-medium">4.9/5 Rating</span>
          </div>
        </div>
        
        {/* Accessibility & User Experience Badge */}
        <div className="absolute top-8 right-8 flex items-center gap-2 px-3 py-1 bg-purple-500/20 backdrop-blur-sm rounded-full border border-purple-500/30">
          <Heart className="w-3 h-3 text-purple-400" />
          <span className="text-xs text-purple-400 font-medium">Accessible Design</span>
        </div>
        
        {/* UI/UX Design Badge */}
        <div className="absolute top-8 left-8 flex items-center gap-2 px-3 py-1 bg-[#E5195E]/20 backdrop-blur-sm rounded-full border border-[#E5195E]/30">
          <Figma className="w-3 h-3 text-[#E5195E]" />
          <span className="text-xs text-[#E5195E] font-medium">UI/UX Design</span>
        </div>
        
        {/* User Satisfaction Indicator */}
        <div className="absolute bottom-8 right-8 flex items-center gap-2">
          <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
          <span className="text-xs text-white/70 font-medium">Users Engaged</span>
        </div>
        
        {/* Additional Design Elements */}
        <div className="absolute top-1/3 left-1/6">
          <div className="flex items-center gap-1 px-2 py-1 bg-blue-500/20 backdrop-blur-sm rounded-lg border border-blue-500/30">
            <Monitor className="w-2 h-2 text-blue-400" />
            <span className="text-xs text-blue-400 font-medium">Web</span>
          </div>
        </div>
        
        <div className="absolute bottom-1/3 right-1/6">
          <div className="flex items-center gap-1 px-2 py-1 bg-green-500/20 backdrop-blur-sm rounded-lg border border-green-500/30">
            <Smartphone className="w-2 h-2 text-green-400" />
            <span className="text-xs text-green-400 font-medium">Mobile</span>
          </div>
        </div>
        
        {/* Design System Component */}
        <div className="absolute top-2/3 left-1/4">
          <div className="flex items-center gap-1 px-2 py-1 bg-purple-500/20 backdrop-blur-sm rounded-lg border border-purple-500/30">
            <Palette className="w-2 h-2 text-purple-400" />
            <span className="text-xs text-purple-400 font-medium">Branding</span>
          </div>
        </div>
        
        {/* User Research Insight */}
        <div className="absolute top-1/4 right-1/3">
          <div className="flex items-center gap-1 px-2 py-1 bg-cyan-500/20 backdrop-blur-sm rounded-lg border border-cyan-500/30">
            <Lightbulb className="w-2 h-2 text-cyan-400" />
            <span className="text-xs text-cyan-400 font-medium">Insights</span>
          </div>
        </div>
        
        {/* A/B Testing Component */}
        <div className="absolute bottom-1/2 left-1/8">
          <div className="flex items-center gap-1 px-2 py-1 bg-orange-500/20 backdrop-blur-sm rounded-lg border border-orange-500/30">
            <RefreshCcw className="w-2 h-2 text-orange-400" />
            <span className="text-xs text-orange-400 font-medium">A/B Test</span>
          </div>
        </div>
        
        {/* Device Responsive Indicators */}
        <div className="absolute top-1/2 right-1/8">
          <div className="flex items-center gap-1 px-2 py-1 bg-indigo-500/20 backdrop-blur-sm rounded-lg border border-indigo-500/30">
            <Tablet className="w-2 h-2 text-indigo-400" />
            <span className="text-xs text-indigo-400 font-medium">Tablet</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default UIUXDesignAnimation;