import { motion } from "framer-motion";

export const FrontendVector = () => {
  return (
    <div className="relative w-full h-96 flex items-center justify-center">
      {/* Browser Window */}
      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
        className="relative z-10"
      >
        <div className="w-80 h-56 bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg shadow-2xl">
          {/* Browser Header */}
          <div className="h-8 bg-gray-700 rounded-t-lg flex items-center px-4 space-x-2">
            <div className="w-3 h-3 bg-red-500 rounded-full"></div>
            <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
            <div className="w-3 h-3 bg-green-500 rounded-full"></div>
            <div className="flex-1 bg-gray-600 rounded ml-4 h-4 flex items-center px-2">
              <span className="text-gray-300 text-xs font-manrope">localhost:3000</span>
            </div>
          </div>
          
          {/* Browser Content */}
          <div className="p-4 space-y-3">
            {/* Navigation */}
            <div className="flex justify-between items-center">
              <div className="h-3 bg-gradient-to-r from-blue-500 to-purple-500 rounded w-20"></div>
              <div className="flex space-x-2">
                <div className="w-12 h-3 bg-gray-600 rounded"></div>
                <div className="w-12 h-3 bg-gray-600 rounded"></div>
                <div className="w-12 h-3 bg-accent rounded"></div>
              </div>
            </div>
            
            {/* Hero Section */}
            <div className="space-y-2">
              <div className="h-4 bg-white/80 rounded w-3/4"></div>
              <div className="h-3 bg-white/60 rounded w-1/2"></div>
              <div className="h-6 bg-gradient-to-r from-accent to-purple-500 rounded w-24 mt-2"></div>
            </div>
            
            {/* Cards Grid */}
            <div className="grid grid-cols-3 gap-2 mt-4">
              {Array.from({ length: 6 }).map((_, i) => (
                <motion.div
                  key={i}
                  initial={{ scale: 0 }}
                  animate={{ scale: 1 }}
                  transition={{ duration: 0.3, delay: i * 0.1 + 1 }}
                  className="h-8 bg-gradient-to-br from-gray-600 to-gray-700 rounded"
                />
              ))}
            </div>
          </div>
        </div>
      </motion.div>

      {/* Floating UI Components */}
      <motion.div
        initial={{ opacity: 0, x: -30 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ duration: 0.8, delay: 0.5 }}
        className="absolute left-8 top-16"
      >
        <div className="space-y-3">
          {/* Button Component */}
          <motion.div
            whileHover={{ scale: 1.05 }}
            className="w-20 h-8 bg-gradient-to-r from-blue-500 to-blue-600 rounded flex items-center justify-center shadow-lg cursor-pointer"
          >
            <span className="text-white text-xs font-manrope">Button</span>
          </motion.div>
          
          {/* Input Component */}
          <motion.div
            whileHover={{ scale: 1.05 }}
            className="w-24 h-6 bg-gray-700 border border-gray-500 rounded flex items-center px-2"
          >
            <div className="w-2 h-2 bg-blue-400 animate-pulse"></div>
          </motion.div>
          
          {/* Card Component */}
          <motion.div
            whileHover={{ scale: 1.05 }}
            className="w-20 h-12 bg-gradient-to-br from-gray-700 to-gray-800 rounded shadow-lg border border-gray-600"
          >
            <div className="p-2 space-y-1">
              <div className="h-1 bg-gray-400 rounded w-3/4"></div>
              <div className="h-1 bg-gray-500 rounded w-1/2"></div>
            </div>
          </motion.div>
        </div>
      </motion.div>

      {/* Floating Code Snippets */}
      <motion.div
        initial={{ opacity: 0, x: 30 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ duration: 0.8, delay: 0.7 }}
        className="absolute right-8 top-20"
      >
        <div className="space-y-3">
          {/* JSX Code */}
          <div className="w-28 h-10 bg-gray-800 rounded border border-gray-600 p-2">
            <div className="space-y-1">
              <div className="flex items-center space-x-1">
                <div className="text-purple-400 text-xs font-manrope">&lt;</div>
                <div className="text-blue-400 text-xs font-manrope">div</div>
                <div className="text-purple-400 text-xs font-manrope">&gt;</div>
              </div>
              <div className="h-1 bg-green-400 rounded w-2/3 ml-2"></div>
            </div>
          </div>
          
          {/* CSS Code */}
          <div className="w-24 h-8 bg-gray-800 rounded border border-gray-600 p-1.5">
            <div className="space-y-0.5">
              <div className="text-orange-400 text-xs font-manrope">.btn</div>
              <div className="h-0.5 bg-blue-400 rounded w-1/2 ml-2"></div>
            </div>
          </div>
        </div>
      </motion.div>

      {/* Technology Icons */}
      <motion.div
        animate={{ y: [0, -10, 0] }}
        transition={{ duration: 3, repeat: Infinity }}
        className="absolute bottom-16 left-16 w-12 h-12 bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-xl flex items-center justify-center shadow-lg"
      >
        <span className="text-white text-lg font-manrope">⚛️</span>
      </motion.div>

      <motion.div
        animate={{ y: [0, -15, 0] }}
        transition={{ duration: 4, repeat: Infinity, delay: 0.5 }}
        className="absolute bottom-20 right-20 w-10 h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center shadow-lg"
      >
        <span className="text-white text-sm font-manrope">V</span>
      </motion.div>

      <motion.div
        animate={{ y: [0, -12, 0] }}
        transition={{ duration: 3.5, repeat: Infinity, delay: 1 }}
        className="absolute top-12 right-32 w-11 h-11 bg-gradient-to-br from-red-500 to-red-600 rounded-lg flex items-center justify-center shadow-lg"
      >
        <span className="text-white text-sm font-manrope">A</span>
      </motion.div>

      {/* Responsive Design Indicators */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1, delay: 1.5 }}
        className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-3"
      >
        <div className="flex items-center space-x-1">
          <div className="w-4 h-3 bg-blue-500 rounded-sm"></div>
          <span className="text-gray-400 text-xs font-manrope">Desktop</span>
        </div>
        <div className="flex items-center space-x-1">
          <div className="w-3 h-4 bg-green-500 rounded-sm"></div>
          <span className="text-gray-400 text-xs font-manrope">Tablet</span>
        </div>
        <div className="flex items-center space-x-1">
          <div className="w-2 h-4 bg-purple-500 rounded-sm"></div>
          <span className="text-gray-400 text-xs font-manrope">Mobile</span>
        </div>
      </motion.div>

      {/* Interactive Elements */}
      <svg className="absolute inset-0 w-full h-full pointer-events-none opacity-30">
        <defs>
          <radialGradient id="frontendGradient" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#3B82F6" stopOpacity="0.6" />
            <stop offset="50%" stopColor="#E5195E" stopOpacity="0.4" />
            <stop offset="100%" stopColor="#8B5CF6" stopOpacity="0.6" />
          </radialGradient>
        </defs>
        
        <motion.circle
          cx="50%" cy="50%" r="100"
          stroke="url(#frontendGradient)"
          strokeWidth="2"
          fill="none"
          strokeDasharray="8,8"
          initial={{ rotate: 0 }}
          animate={{ rotate: 360 }}
          transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
        />
      </svg>
    </div>
  );
};