import { useEffect, useRef } from 'react';
// import { gsap } from 'gsap'; // GSAP DISABLED
import Container from '../container';
import NeuralBackground from '../neural-background';
import NeuralNetwork from '../neural-network';
import ColombiaMap from '../colombia-map';
import EyeIcon from '../../icons/eye-icon';
import LightningIcon from '../../icons/lightning-icon';
import TargetIcon from '../../icons/target-icon';
import { useProjectStats } from '../../../hooks/useProjectData';

export default function AIHero() {
  const heroRef = useRef<HTMLElement>(null);
  const titleRef = useRef<HTMLHeadingElement>(null);
  const subtitleRef = useRef<HTMLParagraphElement>(null);
  const ctaRef = useRef<HTMLDivElement>(null);
  const statsRef = useRef<HTMLDivElement>(null);
  const { stats: projectStats } = useProjectStats();

  useEffect(() => {
    if (!heroRef.current) return;
  }, []);

  return (
    <section
      ref={heroRef}
      className="relative min-h-screen flex items-center overflow-hidden bg-white dark:bg-gradient-to-br dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 pt-44 sm:pt-48 lg:pt-52"
    >
      {/* Neural Background */}
      <NeuralBackground />

      {/* Neural Network */}
      <NeuralNetwork density={30} showDataFlow={true} />

      {/* Main Content */}
      <Container className="relative z-10 py-8 sm:py-12 lg:py-8">
        <div className="grid lg:grid-cols-[1fr_1.2fr] gap-8 lg:gap-16 items-center">

          {/* Left Column - Map */}
          <div className="order-2 lg:order-1">
            <div
              className="relative w-full cursor-pointer group rounded-2xl overflow-hidden shadow-2xl hover:shadow-emerald-400/30 transition-all duration-300 hover:scale-[1.02] border-2 border-emerald-400/30 hover:border-emerald-400/60"
              onClick={() => window.location.href = '/map'}
              role="button"
              tabIndex={0}
              onKeyPress={(e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  window.location.href = '/map';
                }
              }}
              aria-label="Explorar mapa interactivo de proyectos"
            >
              {/* Overlay with "Click to explore" */}
              <div className="absolute inset-0 bg-gradient-to-t from-emerald-900/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 flex items-end justify-center pb-8">
                <div className="bg-white dark:bg-slate-800 px-6 py-3 rounded-full shadow-lg border-2 border-emerald-400">
                  <span className="text-emerald-700 dark:text-emerald-300 font-bold text-lg">
                    Click para explorar el mapa →
                  </span>
                </div>
              </div>

              {/* Colombia Map Visualization */}
              <ColombiaMap className="w-full h-[400px] lg:h-[500px]" />
            </div>
          </div>

          {/* Right Column - Content */}
          <div className="order-1 lg:order-2 space-y-6 sm:space-y-8">
            {/* Description Text */}
            <p className="text-slate-600 dark:text-slate-300 text-base sm:text-lg leading-relaxed">
              Compartimos <span className="text-slate-800 dark:text-white font-semibold">experiencias, buenas prácticas y lecciones aprendidas.</span> Nos autoevaluamos reconociendo la innovación educativa y la visibilizamos conectando comunidades académicas a través de un mapa interactivo que permite el trabajo colaborativo en red y el aprendizaje colectivo desde lo que hemos comprendido investigando.
            </p>

            <p className="text-emerald-600 dark:text-emerald-300 text-base sm:text-lg font-semibold">
              Favorecemos la transferencia de metodologías y la escalabilidad de resultados educativos
            </p>
          </div>
        </div>

        {/* Section Header */}
        <div className="text-center space-y-4 sm:space-y-6 mb-12 sm:mb-16 mt-10">
          <h2 className="text-3xl md:text-5xl font-bold">
            <span className="block text-slate-900 dark:text-white mb-2">
              Plataforma integral de
            </span>
            <span className="block text-emerald-700 dark:text-emerald-400">
              Reconocimiento de la innovación desde la investigación educativa
            </span>
          </h2>

          <p className="text-slate-700 dark:text-slate-300 text-base sm:text-lg lg:text-xl max-w-3xl mx-auto leading-relaxed px-4 sm:px-0">
            Nuestro sistema conecta <span className="text-emerald-700 dark:text-emerald-400 font-semibold">investigadores, comunidades e instituciones educativas</span> a través de un{' '}
            <span className="text-emerald-800 dark:text-emerald-300 font-semibold">mapa interactivo</span> que facilita la transferencia y la escalabilidad de metodologías educativas innovadoras.
          </p>
        </div>
      </Container>
    </section>
  );
}