import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import Container from '../container';
import PrimaryButton from '../primary-button';
import SecondaryButton from '../secondary-button';
import AIParticles from '../ai-particles';
import BrainIcon from '../../icons/brain-icon';
import LightningIcon from '../../icons/lightning-icon';
import TargetIcon from '../../icons/target-icon';

export default function AIFinalCTA() {
  const sectionRef = useRef<HTMLElement>(null);
  const ctaCardRef = useRef<HTMLDivElement>(null);
  const buttonsRef = useRef<HTMLDivElement>(null);

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

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

          // Buttons animation
          gsap.fromTo(buttonsRef.current?.children || [],
            {
              opacity: 0,
              y: 30,
              scale: 0.9
            },
            {
              opacity: 1,
              y: 0,
              scale: 1,
              duration: 0.8,
              stagger: 0.2,
              delay: 0.4,
              ease: "back.out(1.7)"
            }
          );
        }
      },
      { threshold: 0.2 }
    );

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

  return (
    <section
      ref={sectionRef}
      className="py-16 sm:py-20 lg:py-24 bg-white dark:bg-slate-900 relative overflow-hidden"
    >
      {/* Background Effects */}
      <div className="absolute inset-0">
        <div className="absolute top-1/4 left-1/4 w-64 h-64 sm:w-96 sm:h-96 bg-emerald-500/10 dark:bg-emerald-500/5 rounded-full blur-3xl animate-pulse"></div>
        <div className="absolute bottom-1/4 right-1/4 w-64 h-64 sm:w-96 sm:h-96 bg-emerald-600/10 dark:bg-emerald-600/5 rounded-full blur-3xl animate-pulse"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 sm:w-[600px] sm:h-[600px] bg-emerald-700/5 dark:bg-emerald-700/3 rounded-full blur-3xl"></div>
      </div>

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

      <Container className="relative z-10">
        <div
          ref={ctaCardRef}
          className="max-w-5xl mx-auto text-center"
        >
          {/* Main CTA Card */}
          <div className="relative rounded-3xl bg-white/90 dark:bg-slate-800/60 backdrop-blur-sm border border-emerald-300 dark:border-emerald-700 p-6 sm:p-8 lg:p-12 shadow-2xl hover:shadow-emerald-400/20 transition-all duration-500 overflow-hidden">

            {/* Background Solid Animation */}
            <div className="absolute inset-0 bg-emerald-500/5 dark:bg-emerald-500/3 opacity-0 hover:opacity-100 transition-opacity duration-1000"></div>

            {/* Content */}
            <div className="relative z-10 space-y-4 sm:space-y-6 lg:space-y-8">

              {/* Map Icon Central */}
              <div className="flex justify-center mb-4 sm:mb-6 lg:mb-8">
                <div className="relative">
                  <div className="w-16 h-16 sm:w-20 sm:h-20 lg:w-24 lg:h-24 bg-emerald-600 rounded-full flex items-center justify-center text-white text-2xl sm:text-3xl lg:text-4xl animate-pulse shadow-2xl">
                    🗺️
                  </div>

                  {/* Orbiting Educational Elements */}
                  {[
                    { icon: <LightningIcon className="w-4 h-4" />, delay: 0, color: 'bg-yellow-400' },
                    { icon: <TargetIcon className="w-4 h-4" />, delay: 1, color: 'bg-cyan-400' },
                    { icon: <BrainIcon className="w-4 h-4" />, delay: 2, color: 'bg-purple-400' },
                  ].map((item, i) => (
                    <div
                      key={i}
                      className={`absolute w-6 h-6 sm:w-8 sm:h-8 ${item.color} rounded-full flex items-center justify-center text-white text-xs animate-ping shadow-lg`}
                      style={{
                        top: '50%',
                        left: '50%',
                        transform: `translate(-50%, -50%) rotate(${i * 120}deg) translateY(-45px)`,
                        animationDelay: `${item.delay}s`
                      }}
                    >
                      {item.icon}
                    </div>
                  ))}
                </div>
              </div>

              {/* Headlines */}
              <div className="space-y-4 sm:space-y-6">
                <h2 className="text-2xl sm:text-3xl lg:text-4xl xl:text-5xl font-extrabold leading-tight">
                  <span className="block text-slate-900 dark:text-white mb-2 sm:mb-3">
                    ¿Listo para conectar
                  </span>
                  <span className="block text-emerald-700 dark:text-emerald-400">
                    tu proyecto educativo?
                  </span>
                </h2>

                <p className="text-slate-700 dark:text-slate-300 text-base sm:text-lg lg:text-xl max-w-4xl mx-auto leading-relaxed px-4 sm:px-0">
                  Únete a los <span className="text-emerald-700 dark:text-emerald-400 font-bold">17+ investigadores</span> que ya están{' '}
                  <span className="text-emerald-800 dark:text-emerald-300 font-bold">compartiendo metodologías</span> a través del{' '}
                  <span className="text-emerald-900 dark:text-emerald-200 font-bold">mapa digital más innovador</span>.
                </p>
              </div>

              {/* CTA Buttons */}
              <div
                ref={buttonsRef}
                className="flex flex-col sm:flex-row gap-4 sm:gap-6 lg:gap-8 justify-center items-center max-w-3xl mx-auto"
              >
                <PrimaryButton
                  href="/register"
                  className="group text-base sm:text-lg lg:text-xl px-6 sm:px-8 lg:px-12 py-3 sm:py-4 lg:py-5 bg-emerald-600 hover:bg-emerald-500 text-white font-bold rounded-2xl shadow-2xl hover:scale-105 transform transition-all duration-300 border-none w-full sm:w-auto"
                >
                  <div className="flex items-center justify-center gap-2 sm:gap-3">
                    <BrainIcon className="w-5 h-5 sm:w-6 sm:h-6 group-hover:animate-pulse" />
                    <span>Registrar mi proyecto</span>
                    <span className="text-lg sm:text-xl">🌍</span>
                  </div>
                </PrimaryButton>

                <SecondaryButton
                  href="#contact"
                  className="text-base sm:text-lg lg:text-xl px-6 sm:px-8 lg:px-12 py-3 sm:py-4 lg:py-5 rounded-2xl border-2 border-emerald-400/50 hover:border-emerald-400 bg-emerald-400/10 hover:bg-emerald-400/20 text-emerald-800 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-200 font-semibold backdrop-blur-sm transition-all duration-300 w-full sm:w-auto"
                >
                  <div className="flex items-center justify-center gap-2 sm:gap-3">
                    <span>�</span>
                    <span>Explorar metodologías</span>
                  </div>
                </SecondaryButton>
              </div>

              {/* Trust Indicators */}
              <div className="flex flex-col items-center gap-4 sm:gap-6">
                <div className="text-xs sm:text-sm text-slate-700 dark:text-slate-400">
                  <span className="flex items-center gap-2 justify-center">
                    <span className="w-2 h-2 bg-emerald-600 dark:bg-emerald-400 rounded-full animate-pulse"></span>
                    Acceso gratuito • Licencia Creative Commons • Comunidad académica activa
                  </span>
                </div>

                <div className="text-center">
                  <p className="text-xs sm:text-sm text-slate-500 dark:text-slate-500 mb-2">
                    ¿Ya eres parte de la comunidad?{' '}
                    <a
                      href="/login"
                      className="text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 underline font-medium transition-colors"
                    >
                      Inicia sesión con tu IA
                    </a>
                  </p>
                </div>
              </div>

              {/* Final Trust Bar */}
              <div className="pt-6 sm:pt-8 border-t border-slate-400/50 dark:border-slate-700/50">
                <div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-8 text-xs sm:text-sm text-slate-700 dark:text-slate-400">
                  <span className="flex items-center gap-2">
                    <BrainIcon className="w-4 h-4 text-purple-600 dark:text-purple-400" />
                    <span className="font-medium">500+ empresas con IA activa</span>
                  </span>
                  <span className="flex items-center gap-2">
                    <span className="w-2 h-2 bg-cyan-600 dark:bg-cyan-400 rounded-full animate-pulse"></span>
                    <span className="font-medium">50M+ interacciones de IA procesadas</span>
                  </span>
                  <span className="flex items-center gap-2">
                    <span className="w-2 h-2 bg-emerald-600 dark:bg-emerald-400 rounded-full animate-pulse"></span>
                    <span className="font-medium">99.9% de precisión neuronal</span>
                  </span>
                </div>
              </div>
            </div>

            {/* Floating Elements */}
            <div className="absolute top-4 right-4 sm:top-6 sm:right-6 opacity-50 hover:opacity-100 transition-opacity duration-300">
              <div className="w-4 h-4 sm:w-6 sm:h-6 bg-purple-600 dark:bg-purple-400 rounded-full animate-ping"></div>
            </div>
            <div className="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 opacity-50 hover:opacity-100 transition-opacity duration-300">
              <div className="w-3 h-3 sm:w-5 sm:h-5 bg-cyan-600 dark:bg-cyan-400 rounded-full animate-pulse"></div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}