import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import Container from '../container';
import AIParticles from '../ai-particles';
import LightningIcon from '../../icons/lightning-icon';
import BrainIcon from '../../icons/brain-icon';
import TargetIcon from '../../icons/target-icon';
import UsersIcon from '../../icons/users-icon';

export default function AIStepConnect() {
  const sectionRef = useRef<HTMLElement>(null);
  const mainCardRef = useRef<HTMLDivElement>(null);
  const subCardsRef = useRef<HTMLDivElement[]>([]);

  useEffect(() => {
    if (!sectionRef.current) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          // Main card animation
          gsap.fromTo(mainCardRef.current,
            {
              opacity: 0,
              y: 50,
              scale: 0.9
            },
            {
              opacity: 1,
              y: 0,
              scale: 1,
              duration: 1,
              ease: "back.out(1.7)"
            }
          );

          // Sub cards animation
          gsap.fromTo(subCardsRef.current,
            {
              opacity: 0,
              y: 30,
              scale: 0.9
            },
            {
              opacity: 1,
              y: 0,
              scale: 1,
              duration: 0.8,
              stagger: 0.2,
              delay: 0.3,
              ease: "back.out(1.7)"
            }
          );
        }
      },
      { threshold: 0.2 }
    );

    observer.observe(sectionRef.current);
    return () => observer.disconnect();
  }, []);

  const addToSubRefs = (el: HTMLDivElement) => {
    if (el && !subCardsRef.current.includes(el)) {
      subCardsRef.current.push(el);
    }
  };

  const features = [
    {
      title: 'IA Neuronal Exclusiva',
      desc: '100% tuya, entrenada específicamente para tu negocio',
      icon: <LightningIcon className="w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12" />,
      color: 'from-yellow-400 to-orange-500',
      glow: 'shadow-yellow-400/20'
    },
    {
      title: 'Cualificación Inteligente',
      desc: 'Identifica automáticamente clientes con 99.9% de precisión',
      icon: <TargetIcon className="w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12" />,
      color: 'from-cyan-400 to-blue-500',
      glow: 'shadow-cyan-400/20'
    },
    {
      title: 'Remarketing Predictivo',
      desc: 'Revive leads muertos y ejecuta upselling automático',
      icon: <UsersIcon className="w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12" />,
      color: 'from-purple-400 to-pink-500',
      glow: 'shadow-purple-400/20'
    }
  ];

  return (
    <section
      ref={sectionRef}
      className="py-16 sm:py-20 lg:py-24 bg-gradient-to-br from-slate-50 via-purple-50 to-slate-50 dark:from-slate-800 dark:via-purple-900/30 dark:to-slate-900 relative overflow-hidden"
    >
      {/* Background Effects */}
      <div className="absolute inset-0">
        <div className="absolute top-1/3 left-1/3 w-64 h-64 sm:w-96 sm:h-96 bg-emerald-500/20 dark:bg-emerald-500/10 rounded-full blur-3xl animate-pulse"></div>
        <div className="absolute bottom-1/3 right-1/3 w-64 h-64 sm:w-96 sm:h-96 bg-cyan-500/20 dark:bg-cyan-500/10 rounded-full blur-3xl animate-pulse"></div>
      </div>

      {/* AI Particles */}
      <AIParticles density={15} />

      <Container className="relative z-10">
        {/* Section Header */}
        <div className="text-center space-y-4 sm:space-y-6 mb-12 sm:mb-16">
          <div className="inline-flex items-center gap-2 sm:gap-3 rounded-full bg-gradient-to-r from-emerald-600/30 to-cyan-600/30 dark:from-emerald-500/20 dark:to-cyan-500/20 px-4 sm:px-6 py-2 sm:py-3 border border-emerald-600/50 dark:border-emerald-400/30 backdrop-blur-sm">
            <div className="w-2 h-2 bg-emerald-600 dark:bg-emerald-400 rounded-full animate-pulse"></div>
            <span className="text-emerald-800 dark:text-emerald-300 text-xs sm:text-sm font-semibold">Paso 1: Activación Instantánea</span>
          </div>

          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
            <span className="block bg-gradient-to-r from-slate-900 via-slate-800 to-slate-700 dark:from-white dark:via-emerald-200 dark:to-cyan-200 bg-clip-text text-transparent mb-2">
              Tu IA Córdova se conecta
            </span>
            <span className="block bg-gradient-to-r from-emerald-700 to-cyan-700 dark:from-emerald-400 dark:to-cyan-400 bg-clip-text text-transparent">
              en segundos
            </span>
          </h2>

          <p className="text-slate-800 dark:text-slate-300 text-base sm:text-lg lg:text-xl max-w-3xl mx-auto leading-relaxed px-4 sm:px-0">
            Una <span className="text-emerald-800 dark:text-emerald-400 font-semibold">IA 100% tuya</span>, entrenada específicamente
            para convertir tus interacciones en <span className="text-cyan-800 dark:text-cyan-400 font-semibold">ventas automáticas</span>.
          </p>
        </div>

        {/* Main Connection Visual */}
        <div className="max-w-4xl mx-auto mb-12 sm:mb-16">
          <div
            ref={mainCardRef}
            className="relative rounded-3xl lg:rounded-[2rem] border border-emerald-600/30 dark:border-emerald-400/30 bg-gradient-to-br from-white/80 to-emerald-100/40 dark:from-slate-800/50 dark:to-emerald-900/20 p-8 sm:p-12 lg:p-16 text-center shadow-2xl backdrop-blur-sm hover:shadow-emerald-400/20 transition-all duration-500"
          >
            {/* Central AI Brain */}
            <div className="relative mx-auto mb-8 sm:mb-12">
              <div className="relative w-24 h-24 sm:w-32 sm:h-32 lg:w-40 lg:h-40 rounded-full border-2 border-dashed border-emerald-400/50 flex items-center justify-center group">
                {/* Animated brain with GSAP */}
                <div className="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-gradient-to-br from-emerald-400 to-cyan-500 rounded-full flex items-center justify-center text-white text-2xl sm:text-3xl lg:text-4xl group-hover:scale-110 transition-transform duration-300">
                  🧠
                </div>

                {/* Status Badge */}
                <div className="absolute -top-2 -right-2 sm:-top-3 sm:-right-3 bg-emerald-500 text-white text-xs sm:text-sm px-2 sm:px-3 py-1 sm:py-2 rounded-full animate-bounce font-bold">
                  IA
                </div>

                {/* Orbiting particles */}
                {[...Array(8)].map((_, i) => (
                  <div
                    key={i}
                    className="absolute w-2 h-2 sm:w-3 sm:h-3 bg-cyan-400 rounded-full animate-ping"
                    style={{
                      top: '50%',
                      left: '50%',
                      transform: `translate(-50%, -50%) rotate(${i * 45}deg) translateY(-50px)`,
                      animationDelay: `${i * 0.2}s`
                    }}
                  />
                ))}
              </div>

              {/* Status Message */}
              <div className="space-y-4 sm:space-y-6">
                <div className="inline-flex items-center gap-2 sm:gap-3 rounded-full bg-gradient-to-r from-emerald-600/30 to-cyan-600/30 dark:from-emerald-500/20 dark:to-cyan-500/20 px-4 sm:px-6 py-2 sm:py-3 text-emerald-800 dark:text-emerald-300 text-sm sm:text-lg font-semibold border border-emerald-600/50 dark:border-emerald-400/30 shadow-lg">
                  <BrainIcon className="w-4 h-4 sm:w-6 sm:h-6" />
                  Tu IA Córdova está lista y aprendiendo
                </div>

                <p className="text-slate-800 dark:text-slate-300 text-sm sm:text-base lg:text-lg max-w-2xl mx-auto">
                  En la versión real: Tu IA se activa <span className="text-emerald-800 dark:text-emerald-400 font-semibold">instantáneamente</span> y
                  empieza a procesar todas tus interacciones con <span className="text-cyan-800 dark:text-cyan-400 font-semibold">machine learning</span>.
                </p>
              </div>
            </div>

            {/* Data streams visualization */}
            <div className="absolute inset-0 overflow-hidden rounded-3xl pointer-events-none">
              {[...Array(6)].map((_, i) => (
                <div
                  key={i}
                  className="absolute w-1 h-1 bg-emerald-400 rounded-full opacity-60 data-flow"
                  style={{
                    left: `${20 + i * 15}%`,
                    top: `${20 + (i % 3) * 30}%`,
                    animationDelay: `${i * 0.5}s`
                  }}
                />
              ))}
            </div>
          </div>
        </div>

        {/* Feature Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 lg:gap-8">
          {features.map((feature, index) => (
            <div
              key={index}
              ref={addToSubRefs}
              className={`group text-center space-y-4 sm:space-y-6 p-6 sm:p-8 rounded-2xl sm:rounded-3xl bg-white/90 dark:bg-slate-800/40 backdrop-blur-sm border border-slate-300 dark:border-slate-700/50 hover:border-emerald-600/70 dark:hover:border-emerald-400/50 hover:bg-white dark:hover:bg-slate-700/50 transition-all duration-500 hover:scale-105 hover:shadow-2xl hover:${feature.glow}`}
            >
              {/* Icon */}
              <div className="flex justify-center">
                <div className={`p-3 sm:p-4 rounded-xl bg-gradient-to-br ${feature.color} text-white group-hover:scale-110 transition-transform duration-300 shadow-lg`}>
                  {feature.icon}
                </div>
              </div>

              {/* Content */}
              <div className="space-y-2 sm:space-y-3">
                <h3 className="font-bold text-slate-900 dark:text-white text-lg sm:text-xl lg:text-2xl leading-tight">
                  {feature.title}
                </h3>
                <p className="text-slate-700 dark:text-slate-400 text-sm sm:text-base leading-relaxed">
                  {feature.desc}
                </p>
              </div>

              {/* AI Processing Indicator */}
              <div className="flex items-center justify-center gap-2">
                <div className="w-2 h-2 bg-emerald-600 dark:bg-emerald-400 rounded-full animate-pulse"></div>
                <span className="text-emerald-700 dark:text-emerald-400 text-xs sm:text-sm font-medium">Procesando con IA</span>
              </div>
            </div>
          ))}
        </div>

        {/* Performance Metrics */}
        <div className="text-center mt-12 sm:mt-16">
          <div className="inline-flex flex-col sm:flex-row items-center gap-4 sm:gap-8 text-xs sm:text-sm text-slate-700 dark:text-slate-400 bg-white/80 dark:bg-slate-800/30 backdrop-blur-sm rounded-2xl px-6 sm:px-8 py-4 sm:py-6 border border-slate-300 dark:border-slate-700/30">
            <span className="flex items-center gap-2">
              <span className="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></span>
              <span className="font-medium">Tiempo de activación:</span>
              <span className="text-emerald-600 dark:text-emerald-400 font-bold">2.3 segundos</span>
            </span>
            <span className="flex items-center gap-2">
              <span className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></span>
              <span className="font-medium">Precisión de IA:</span>
              <span className="text-cyan-600 dark:text-cyan-400 font-bold">99.9%</span>
            </span>
            <span className="flex items-center gap-2">
              <span className="w-2 h-2 bg-purple-400 rounded-full animate-pulse"></span>
              <span className="font-medium">Procesamiento:</span>
              <span className="text-purple-600 dark:text-purple-400 font-bold">24/7 automático</span>
            </span>
          </div>
        </div>
      </Container>
    </section>
  );
}