import { useEffect, useRef } from 'react';
import type React from 'react';
// import { gsap } from 'gsap'; // GSAP DISABLED
import Container from '../container';
import NeuralNetwork from '../neural-network';
import EyeIcon from '../../icons/eye-icon';
import BrainIcon from '../../icons/brain-icon';
import TargetIcon from '../../icons/target-icon';
import { BotMessageSquare, Boxes, Handshake, MessageSquareText } from 'lucide-react';

export default function AIFeaturesTop() {
  const sectionRef = useRef<HTMLElement>(null);
  const cardsRef = useRef<HTMLDivElement[]>([]);

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

    // GSAP ANIMATIONS DISABLED
    // const observer = new IntersectionObserver(
    //   (entries) => {
    //     if (entries[0].isIntersecting) {
    //       // Animate cards in sequence
    //       gsap.fromTo(cardsRef.current,
    //         {
    //           opacity: 0,
    //           y: 50,
    //           scale: 0.9
    //         },
    //         {
    //           opacity: 1,
    //           y: 0,
    //           scale: 1,
    //           duration: 0.8,
    //           stagger: 0.2,
    //           ease: "back.out(1.7)"
    //         }
    //       );
    //     }
    //   },
    //   { threshold: 0.2 }
    // );

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

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

  const features = [
    {
      title: 'Visualización Interactiva',
      desc: 'Mapa digital con proyectos de investigación geolocalizados ,  resúmenes detallados, videos ilustrativos,  fichas replicables de experiencias  y enlaces de acceso a repositorios de documentos en extenso o divulgación asociada',
      icon: <EyeIcon className="w-10 h-10 sm:w-12 sm:h-12" />,
      color: 'bg-emerald-500',
      bgGlow: 'group-hover:shadow-emerald-500/20'
    },
    {
      title: 'Co-lecciones',
      desc: 'Almacenamiento de proyectos con opciones de agregar, editar y actualizar información',
      icon: <Boxes className="w-10 h-10 sm:w-12 sm:h-12" />,
      color: 'bg-emerald-600',
      bgGlow: 'group-hover:shadow-emerald-600/20'
    },
    {
      title: 'Interacción Colaborativa',
      desc: 'Registro de investigadores, espacios para compartir metodologías y construcción de comunidad',
      icon: <Handshake className="w-10 h-10 sm:w-12 sm:h-12" />,
      color: 'bg-emerald-700',
      bgGlow: 'group-hover:shadow-emerald-700/20'
    },
    {
      title: ' PIERCE IA',
      desc: 'Es nuestro Asistente conversacional  inteligente   que sugiere colaboraciones  entre proyectos de investigación terminados, organiza  y busca patrones, generando recomendaciones teórica-metodológicas  desde categorías dinámicas',
      icon: <BotMessageSquare className="w-10 h-10 sm:w-12 sm:h-12" />,
      color: 'bg-emerald-800',
      bgGlow: 'group-hover:shadow-emerald-800/20',
      link: 'https://drive.google.com/file/d/1RH-8t5mPWmZa0mi-AdeTkZOKL9hvEmvq/view?usp=sharing'
    }
  ];

  return (
    <section
      ref={sectionRef}
      id="features"
      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-cyan-500/5 rounded-full blur-3xl animate-pulse"></div>
      </div>

      {/* AI Particles */}
      <NeuralNetwork density={15} showDataFlow={true} />

      <Container className="relative z-10">
        <div className="text-center space-y-4">
          <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-slate-800 dark:text-white">
            ¿Tienes un proyecto de innovación educativa?
          </h2>
          <p className="text-slate-600 dark:text-slate-300 text-lg sm:text-xl">
            Únete a nuestra comunidad y comparte tu investigación con otros educadores
          </p>
        </div>

        {/* Features Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8 mt-6">
          {features.map((feature, index) => {
            const cardClass = `group relative overflow-hidden rounded-2xl sm:rounded-3xl bg-white/90 dark:bg-slate-800/40 backdrop-blur-sm p-6 sm:p-8 border border-slate-300 dark:border-slate-700/50 hover:border-emerald-600/70 dark:hover:border-emerald-400/50 transition-all duration-500 hover:scale-105 hover:shadow-2xl ${feature.bgGlow} cursor-pointer`;
            const inner = (
              <>
                {/* Gradient background on hover */}
                <div className={`absolute inset-0 ${feature.color} opacity-0 group-hover:opacity-5 transition-opacity duration-500`}></div>

                {/* Content */}
                <div className="relative z-10 text-center space-y-4 sm:space-y-6">
                  {/* Icon */}
                  <div className="flex justify-center">
                    <div className={`p-3 sm:p-4 rounded-xl ${feature.color} text-white group-hover:scale-110 transition-transform duration-300 shadow-lg`}>
                      {feature.icon}
                    </div>
                  </div>

                  {/* Text */}
                  <div className="space-y-2 sm:space-y-3">
                    <h3 className="font-bold text-slate-900 dark:text-white text-lg sm:text-xl 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>

                  {/* Educational Status Indicator */}
                  <div className="flex items-center justify-center gap-2 mt-4">
                    <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 font-medium">Sistema Activo</span>
                  </div>
                </div>

                {/* Floating elements */}
                <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <div className="w-3 h-3 bg-emerald-600 dark:bg-emerald-400 rounded-full animate-ping"></div>
                </div>
              </>
            );
            return feature.link ? (
              <a
                key={index}
                ref={addToRefs as unknown as React.RefCallback<HTMLAnchorElement>}
                href={feature.link}
                target="_blank"
                rel="noopener noreferrer"
                className={cardClass}
              >
                {inner}
              </a>
            ) : (
              <div
                key={index}
                ref={addToRefs}
                className={cardClass}
              >
                {inner}
              </div>
            );
          })}
        </div>

        <div className="text-center mt-12 sm:mt-16">
          <div className="inline-flex items-center gap-4 sm:gap-6 text-xs sm:text-sm text-slate-700 dark:text-slate-400 bg-white/80 dark:bg-slate-800/30 backdrop-blur-sm rounded-full px-4 sm:px-6 py-2 sm:py-3 border border-slate-300 dark:border-slate-700/30">
            <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>
              17+ proyectos mapeados inicialmente
            </span>
            <span className="hidden sm:flex items-center gap-2">
              <span className="w-2 h-2 bg-emerald-700 dark:bg-emerald-500 rounded-full animate-pulse"></span>
              Escalabilidad a Latinoamérica
            </span>
            <span className="flex items-center gap-2">
              <span className="w-2 h-2 bg-emerald-800 dark:bg-emerald-600 rounded-full animate-pulse"></span>
              Transferencia de metodologías CC
            </span>
          </div>
        </div>
      </Container>
    </section>
  );
}