import React from 'react'
import { motion } from 'framer-motion'

export default function AIBanner() {
  // Generate Data Stream particles for the left side (Cyan)
  const dataParticles = Array.from({ length: 100 }).map((_, i) => ({
    id: `dp-${i}`,
    y: 10 + Math.random() * 80, // spread vertically between 10% and 90%
    size: Math.random() > 0.8 ? 6 : Math.random() * 3 + 1.5, // slightly larger
    isSquare: Math.random() > 0.6,
    duration: Math.random() * 2 + 1.5, // faster
    delay: Math.random() * 3,
    opacity: Math.random() * 0.7 + 0.3
  }))

  // Generate Neural Network nodes for the right side (Purple/Fuchsia)
  const neuralNodes = [
    { x: 10, y: 50 }, { x: 30, y: 25 }, { x: 35, y: 75 },
    { x: 55, y: 45 }, { x: 75, y: 15 }, { x: 70, y: 85 },
    { x: 90, y: 55 }, { x: 80, y: 40 }, { x: 50, y: 90 },
    { x: 20, y: 95 }, { x: 95, y: 20 }, { x: 45, y: 10 },
    { x: 85, y: 75 }, { x: 15, y: 20 }
  ]
  const neuralLines = [
    [0, 1], [0, 2], [1, 3], [2, 3], [1, 4], [3, 4], 
    [3, 6], [2, 5], [3, 5], [5, 6], [4, 7], [6, 7],
    [2, 8], [5, 8], [0, 9], [2, 9], [4, 10], [7, 10],
    [1, 11], [4, 11], [6, 12], [5, 12], [0, 13], [1, 13]
  ]

  return (
    <div className="absolute inset-0 w-full h-full overflow-hidden bg-[#080d17]">
      {/* Background glow matching the logo's dual tone */}
      <div className="absolute top-1/2 left-[15%] w-[800px] h-[800px] bg-cyan-600/15 rounded-full blur-[150px] -translate-y-1/2 mix-blend-screen pointer-events-none" />
      <div className="absolute top-1/2 right-[15%] w-[800px] h-[800px] bg-fuchsia-600/15 rounded-full blur-[150px] -translate-y-1/2 mix-blend-screen pointer-events-none" />

      {/* Background dark stone texture (simulated) */}
      <div className="absolute inset-0 opacity-20 pointer-events-none mix-blend-overlay" style={{
        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
        backgroundSize: '150px 150px'
      }} />

      {/* DYNAMIC DATA STREAM: Cyan Data Stream & Pixels (Flowing right and naturally fading out via Mask) */}
      <div 
        className="absolute inset-y-0 left-0 w-[65%] pointer-events-none"
        style={{
          // This mask ensures absolutely smooth fading. 100% visible on the left, completely 0% visible by the time it reaches the right neural net.
          maskImage: 'linear-gradient(to right, black 0%, black 60%, transparent 100%)',
          WebkitMaskImage: 'linear-gradient(to right, black 0%, black 60%, transparent 100%)'
        }}
      >
        {dataParticles.map(p => (
          <motion.div
            key={p.id}
            className={`absolute bg-cyan-400 ${p.isSquare ? 'rounded-sm' : 'rounded-full'}`}
            style={{ 
              width: p.size, height: p.size, 
              top: `${p.y}%`,
              boxShadow: p.isSquare ? '0 0 12px 3px rgba(6,182,212,0.9)' : '0 0 8px 2px rgba(6,182,212,0.6)'
            }}
            initial={{ x: '-10vw', opacity: 0 }}
            animate={{ 
              x: '75vw', 
              opacity: [0, p.opacity, p.opacity, 0] 
            }}
            transition={{
              duration: p.duration * 3.5, // Significantly slower! (approx 7 to 17 seconds)
              repeat: Infinity,
              delay: p.delay,
              ease: "linear"
            }}
          />
        ))}
        {/* Horizontal glowing fiber streaks shooting from left to right */}
        <div className="absolute top-1/2 left-0 w-full h-[80%] -translate-y-1/2 flex flex-col justify-between opacity-70">
           {Array.from({length: 20}).map((_, i) => (
             <motion.div 
               key={`streak-${i}`}
               className="h-[2px] bg-gradient-to-r from-transparent via-cyan-400 to-transparent"
               style={{ width: `${Math.random() * 40 + 20}%`, filter: 'drop-shadow(0 0 5px rgba(6,182,212,0.8))' }}
               initial={{ x: '-50%', opacity: 0 }}
               animate={{ x: '150%', opacity: [0, 1, 1, 0] }}
               transition={{ 
                 duration: 7 + Math.random() * 6, // Significantly slower! (7 to 13 seconds)
                 repeat: Infinity, 
                 delay: Math.random() * 4, 
                 ease: "linear" 
               }}
             />
           ))}
        </div>
      </div>

      {/* RIGHT SIDE: Fuchsia/Purple Neural Network */}
      <div className="absolute inset-y-0 right-0 w-[45%] flex items-center justify-end pr-[5%] pointer-events-none">
        <svg viewBox="0 0 100 100" className="w-full max-w-[500px] h-[80%] overflow-visible" style={{ filter: 'drop-shadow(0 0 10px rgba(217,70,239,0.6))' }}>
          {/* Neural Lines */}
          {neuralLines.map((line, i) => {
            const n1 = neuralNodes[line[0]]
            const n2 = neuralNodes[line[1]]
            return (
              <motion.line 
                key={`line-${i}`}
                x1={n1.x} y1={n1.y} x2={n2.x} y2={n2.y} 
                stroke="rgba(217,70,239,0.5)" 
                strokeWidth="0.5"
                initial={{ pathLength: 0, opacity: 0 }}
                animate={{ pathLength: [0, 1, 1, 0], opacity: [0, 1, 1, 0] }}
                transition={{ duration: 10, repeat: Infinity, ease: "easeInOut", delay: i * 0.3 }}
              />
            )
          })}
          {/* Neural Nodes */}
          {neuralNodes.map((node, i) => (
            <motion.circle 
              key={`node-${i}`}
              cx={node.x} cy={node.y} r="1.5" 
              fill="#d946ef"
              animate={{ r: [1.5, 2.5, 1.5], opacity: [0.4, 0.9, 0.4] }}
              transition={{ duration: 4.5, repeat: Infinity, delay: i * 0.4 }}
            />
          ))}
        </svg>
      </div>

      {/* CENTRAL ELEGANT CONNECTION (Subtle, thin flowing lines connecting left and right) */}
      <div className="absolute top-1/2 left-0 w-full h-[600px] -translate-y-1/2 pointer-events-none opacity-60 mix-blend-screen flex items-center justify-center">
         <svg viewBox="0 0 200 100" preserveAspectRatio="none" className="w-full h-full overflow-visible">
            <defs>
              <linearGradient id="elegant-grad" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stopColor="#06b6d4" stopOpacity="0" />
                <stop offset="25%" stopColor="#06b6d4" stopOpacity="0.8" />
                <stop offset="50%" stopColor="#8b5cf6" stopOpacity="0.5" />
                <stop offset="75%" stopColor="#d946ef" stopOpacity="0.8" />
                <stop offset="100%" stopColor="#d946ef" stopOpacity="0" />
              </linearGradient>
            </defs>
            {/* Draw a few extremely elegant, thin sweeping curves spanning the entire width */}
            {Array.from({length: 4}).map((_, i) => (
              <motion.path 
                key={`line-${i}`}
                d={`M -20 ${30 + i*10} C 60 ${10 + i*5}, 140 ${90 - i*5}, 220 ${70 - i*10}`}
                fill="none" 
                stroke="url(#elegant-grad)" 
                strokeWidth={0.2 + (i * 0.05)}
                animate={{ 
                  strokeDasharray: ["0, 400", "400, 0"], 
                  opacity: [0.3, 0.7, 0.3] 
                }}
                transition={{ 
                  duration: 16 + i * 4, // Very slow sweeping movement! (16 to 28 seconds)
                  repeat: Infinity, 
                  ease: "easeInOut",
                  delay: i * 2
                }}
              />
            ))}
         </svg>
      </div>
    </div>
  )
}
