import { useEffect, useRef } from 'react';
// import { gsap } from 'gsap'; // GSAP DISABLED
import Container from '../container';
import NeuralNetwork from '../neural-network';

import BrainIcon from '../../icons/brain-icon';

function AIStars() {
  return (
    <div className="text-yellow-400 text-base sm:text-lg flex">
      {[...Array(5)].map((_, i) => (
        <span key={i} className="animate-pulse" style={{ animationDelay: `${i * 0.2}s` }}>⭐</span>
      ))}
    </div>
  );
}

export default function AITestimonials() {
  const sectionRef = useRef<HTMLElement>(null);
  // const statsRef = useRef<HTMLDivElement[]>([]); // GSAP DISABLED - Not used anymore
  const testimonialsRef = useRef<HTMLDivElement[]>([]);

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

    // GSAP ANIMATIONS DISABLED
    // const observer = new IntersectionObserver(
    //   (entries) => {
    //     if (entries[0].isIntersecting) {
    //       // Stats animation
    //       gsap.fromTo(statsRef.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)"
    //         }
    //       );

    //       // Testimonials animation
    //       gsap.fromTo(testimonialsRef.current,
    //         {
    //           opacity: 0,
    //           y: 30,
    //           scale: 0.95
    //         },
    //         {
    //           opacity: 1,
    //           y: 0,
    //           scale: 1,
    //           duration: 1,
    //           stagger: 0.3,
    //           delay: 0.4,
    //           ease: "back.out(1.7)"
    //         }
    //       );
    //     }
    //   },
    //   { threshold: 0.2 }
    // );

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



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


  const testimonials = [
    {
      quote: "El mapa digital ha revolucionado la manera en que conectamos con otros investigadores. Pudimos identificar 3 proyectos similares en nuestra región y establecer colaboraciones exitosas.",
      author: "Dra. Martha Guerra Muñoz",
      role: "Investigadora, Universidad Popular del Cesar-Colombia",
      company: "Universidad Popular del Cesar-Colombia",
    },
    {
      quote: "La visualización interactiva de metodologías nos ha permitido adaptar enfoques innovadores a nuestro contexto. La transferencia de conocimiento es realmente efectiva.",
      author: "Dr. Adolfo Arrieta Carrascal",
      role: "Investigador, Universidad de Sucre-Colombia",
      company: "Universidad de Sucre-Colombia",
    },
    {
      quote: "Es impresionante cómo la IA sugiere oportunidades de escalabilidad. Nuestro proyecto ahora tiene potencial de impacto en toda la región gracias a las conexiones identificadas.",
      author: "Dr. Gabriel Torres ",
      role: "Investigador, Universidad de Cartagena -Colombia",
      company: "Universidad de Cartagena -Colombia",
    },
  ];

  return (
    <section
      ref={sectionRef}
      id="testimonials"
      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/6 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/6 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={20} showDataFlow={true} />

      <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-emerald-50 dark:bg-emerald-900/30 px-4 sm:px-6 py-2 sm:py-3 border border-emerald-300 dark:border-emerald-700 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"> Investigadores Conectados</span>
          </div>

          <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold leading-tight">
            <span className="block text-slate-900 dark:text-white mb-2">
              Investigadores que buscan transformar y mejorar
            </span>
            <span className="block text-emerald-700 dark:text-emerald-400">
              la educación usando nuestro mapa
            </span>
          </h2>

          <p className="text-slate-700 dark:text-slate-300 text-sm sm:text-base lg:text-lg max-w-3xl mx-auto leading-relaxed px-4 sm:px-0">
            Únete a investigadores y académicos que han potenciado sus proyectos con{' '}
            <span className="text-emerald-700 dark:text-emerald-400 font-semibold">tecnología de mapeo interactivo</span>.
          </p>
        </div>


        {/* Testimonials Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 sm:gap-8">
          {testimonials.map((testimonial, index) => (
            <div
              key={index}
              ref={addToTestimonialsRefs}
              className="group relative overflow-hidden rounded-2xl sm:rounded-3xl border border-slate-300 dark:border-slate-700/50 bg-white/90 dark:bg-slate-800/40 backdrop-blur-sm p-6 sm:p-8 hover:bg-white dark:hover:bg-slate-700/50 hover:border-emerald-600/70 dark:hover:border-emerald-400/50 transition-all duration-500 hover:scale-105 hover:shadow-2xl hover:shadow-emerald-400/10"
            >
              {/* Quote Mark & Stars */}
              <div className="flex items-center justify-between mb-4 sm:mb-6">
                <div className="text-3xl sm:text-4xl text-slate-400 dark:text-slate-500 group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors duration-300">“</div>
                <AIStars />
              </div>

              {/* Quote */}
              <p className="text-slate-800 dark:text-slate-300 text-sm sm:text-base lg:text-lg leading-relaxed mb-6 sm:mb-8 italic group-hover:text-slate-900 dark:group-hover:text-white transition-colors duration-300">
                {testimonial.quote}
              </p>

              {/* Author Info */}
              <div className="space-y-3 sm:space-y-4">
                {/* Metric Badge */}
                {/* <div className="inline-flex items-center gap-2 rounded-full bg-emerald-100 dark:bg-emerald-800/30 px-3 sm:px-4 py-2 text-emerald-800 dark:text-emerald-300 text-xs sm:text-sm font-bold border border-emerald-300 dark:border-emerald-700">
                  <span className="text-lg"></span>
                  {testimonial.metric}
                </div> */}

                {/* Author Details */}
                <div className="flex items-center justify-between">
                  <div>
                    <div className="text-slate-900 dark:text-white font-semibold text-sm sm:text-base">
                      {testimonial.author}
                    </div>
                    <div className="text-slate-700 dark:text-slate-400 text-xs sm:text-sm">
                      {testimonial.role}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-slate-500 dark:text-slate-500 text-xs sm:text-sm">
                      {testimonial.company}
                    </div>
                  </div>
                </div>
              </div>

              {/* AI Processing Indicator */}
              <div className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <div className="flex items-center gap-1">
                  <BrainIcon className="w-3 h-3 text-emerald-600 dark:text-emerald-400" />
                  <div className="w-2 h-2 bg-emerald-600 dark:bg-emerald-400 rounded-full animate-pulse"></div>
                </div>
              </div>

              {/* Hover Glow Effect */}
              <div className="absolute inset-0 bg-emerald-600/5 dark:bg-emerald-400/3 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl sm:rounded-3xl"></div>
            </div>
          ))}
        </div>

      </Container>
    </section>
  );
}