import React from 'react';
import { FiArrowRight, FiPlay, FiStar, FiUsers, FiAward, FiCheckCircle } from 'react-icons/fi';
import { FaGraduationCap } from 'react-icons/fa';

interface HeroSectionProps {
  onExploreClick: () => void;
  onOpenPreview: (courseId: string) => void;
}

export const HeroSection: React.FC<HeroSectionProps> = ({ onExploreClick, onOpenPreview }) => {
  return (
    <div className="relative overflow-hidden bg-slate-950 pt-10 pb-16 lg:pt-16 lg:pb-24 border-b border-slate-800/60">
      
      {/* Background glow effects */}
      <div className="absolute -top-40 -left-40 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute top-1/3 -right-40 w-96 h-96 bg-cyan-500/15 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute -bottom-20 left-1/3 w-80 h-80 bg-indigo-600/15 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
          
          {/* Left Column: Copy & CTAs */}
          <div className="lg:col-span-7 space-y-6 text-center lg:text-left">
            
            {/* Promo Pill */}
            <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold bg-gradient-to-r from-blue-500/15 to-cyan-500/15 border border-cyan-500/30 text-cyan-300">
              <span className="flex h-2 w-2 rounded-full bg-cyan-400 animate-ping" />
              <FaGraduationCap className="text-cyan-400 text-sm" />
              <span>Nuevos cursos actualizados para 2026</span>
            </div>

            {/* Main Headline */}
            <h1 className="text-3xl sm:text-5xl lg:text-6xl font-black text-white tracking-tight leading-[1.15]">
              Aprende las habilidades{' '}
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-teal-300">
                más demandadas
              </span>{' '}
              con expertos reales.
            </h1>

            {/* Subtitle */}
            <p className="text-base sm:text-lg text-slate-300 max-w-2xl mx-auto lg:mx-0 font-normal leading-relaxed">
              Cursos prácticos basados en proyectos reales. Desde <span className="text-cyan-300 font-medium">Desarrollo Web y Apps</span> hasta <span className="text-cyan-300 font-medium">Inteligencia Artificial y Ciberseguridad</span>. Aprende a tu propio ritmo y obtén certificaciones verificadas.
            </p>

            {/* Actions & Buttons */}
            <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-2">
              <button
                onClick={onExploreClick}
                className="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-blue-600 via-cyan-600 to-teal-500 hover:from-blue-500 hover:to-cyan-400 text-white font-bold rounded-xl text-base shadow-xl shadow-cyan-500/25 hover:shadow-cyan-500/40 hover:scale-[1.02] active:scale-[0.98] transition-all flex items-center justify-center gap-2"
              >
                <span>Explorar Catálogo</span>
                <FiArrowRight className="text-lg" />
              </button>

              <button
                onClick={() => onOpenPreview('course-1')}
                className="w-full sm:w-auto px-6 py-4 bg-slate-900/80 hover:bg-slate-800 text-slate-200 hover:text-white font-semibold rounded-xl text-base border border-slate-700 hover:border-slate-600 transition-all flex items-center justify-center gap-2"
              >
                <div className="w-6 h-6 rounded-full bg-cyan-500/20 text-cyan-400 flex items-center justify-center text-xs">
                  <FiPlay className="ml-0.5" />
                </div>
                <span>Ver Clase Muestra Gratis</span>
              </button>
            </div>

            {/* Trust checkmarks */}
            <div className="pt-3 flex flex-wrap items-center justify-center lg:justify-start gap-x-6 gap-y-2 text-xs text-slate-400">
              <span className="flex items-center gap-1.5">
                <FiCheckCircle className="text-emerald-400" /> Acceso de por vida
              </span>
              <span className="flex items-center gap-1.5">
                <FiCheckCircle className="text-emerald-400" /> Garantía de reembolso 30 días
              </span>
              <span className="flex items-center gap-1.5">
                <FiCheckCircle className="text-emerald-400" /> Certificado de finalización
              </span>
            </div>
          </div>

          {/* Right Column: Hero Visual Card */}
          <div className="lg:col-span-5 relative">
            <div className="relative mx-auto max-w-md lg:max-w-none">
              
              {/* Main Course Highlight Card */}
              <div className="rounded-2xl bg-gradient-to-b from-slate-800/80 to-slate-900/90 border border-slate-700/80 p-5 shadow-2xl backdrop-blur-md relative overflow-hidden group">
                
                {/* Thumbnail image */}
                <div className="relative rounded-xl overflow-hidden aspect-video mb-4 bg-slate-800">
                  <img
                    src="https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800&auto=format&fit=crop&q=80"
                    alt="React 19 Preview"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-slate-950/90 via-slate-950/20 to-transparent" />
                  
                  {/* Play badge */}
                  <button
                    onClick={() => onOpenPreview('course-1')}
                    className="absolute inset-0 m-auto w-14 h-14 rounded-full bg-gradient-to-r from-blue-600 to-cyan-500 text-white flex items-center justify-center shadow-lg shadow-cyan-500/50 hover:scale-110 active:scale-95 transition-transform"
                    aria-label="Reproducir video"
                  >
                    <FiPlay className="text-xl ml-1" />
                  </button>

                  <span className="absolute top-3 left-3 bg-amber-500/90 text-slate-950 text-[11px] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow">
                    🔥 Curso Más Vendido
                  </span>

                  <span className="absolute bottom-3 right-3 bg-slate-950/80 backdrop-blur-md text-white text-xs px-2 py-0.5 rounded font-mono">
                    38h 45m
                  </span>
                </div>

                {/* Course Meta in card */}
                <div className="space-y-3">
                  <div className="flex items-center justify-between text-xs text-slate-400">
                    <span className="font-semibold text-cyan-400">Desarrollo Web & Next.js</span>
                    <div className="flex items-center gap-1 text-amber-400">
                      <FiStar className="fill-amber-400" />
                      <span className="font-bold text-white">4.9</span>
                      <span>(1.4k reseñas)</span>
                    </div>
                  </div>

                  <h3 className="text-lg font-bold text-white leading-snug">
                    Master en React 19, Next.js 15 y TypeScript Profesional
                  </h3>

                  <div className="flex items-center justify-between pt-2 border-t border-slate-800">
                    <div className="flex items-center gap-2">
                      <img
                        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop&q=80"
                        alt="Instructor"
                        className="w-7 h-7 rounded-full object-cover ring-1 ring-cyan-400/50"
                      />
                      <span className="text-xs text-slate-300 font-medium">Ing. Carlos Mendoza</span>
                    </div>

                    <div className="flex items-baseline gap-2">
                      <span className="text-xs text-slate-500 line-through font-mono">$89.99</span>
                      <span className="text-xl font-black text-emerald-400 font-mono">$24.99</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Floating Stat Badge: Students Active */}
              <div className="absolute -bottom-6 -left-6 bg-slate-900/90 border border-slate-700/80 rounded-xl p-3.5 shadow-2xl backdrop-blur-md flex items-center gap-3 hidden sm:flex animate-bounce duration-1000">
                <div className="w-10 h-10 rounded-lg bg-blue-500/20 text-blue-400 flex items-center justify-center text-lg">
                  <FiUsers />
                </div>
                <div>
                  <p className="text-xs font-bold text-white">50,000+ Estudiantes</p>
                  <p className="text-[11px] text-slate-400">Aprendiendo activamente</p>
                </div>
              </div>

              {/* Floating Stat Badge: Top Rated */}
              <div className="absolute -top-6 -right-6 bg-slate-900/90 border border-slate-700/80 rounded-xl p-3.5 shadow-2xl backdrop-blur-md flex items-center gap-3 hidden sm:flex">
                <div className="w-10 h-10 rounded-lg bg-amber-500/20 text-amber-400 flex items-center justify-center text-lg">
                  <FiAward />
                </div>
                <div>
                  <p className="text-xs font-bold text-white">Calidad Top 1%</p>
                  <p className="text-[11px] text-slate-400">Instructores validados</p>
                </div>
              </div>

            </div>
          </div>

        </div>

        {/* Bottom stats banner */}
        <div className="mt-16 pt-10 border-t border-slate-800/80 grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
          <div className="p-4 rounded-xl bg-slate-900/40 border border-slate-800/60">
            <div className="text-2xl sm:text-3xl font-black text-white font-mono">1,200+</div>
            <div className="text-xs text-slate-400 mt-1">Cursos en Alta Definición</div>
          </div>
          <div className="p-4 rounded-xl bg-slate-900/40 border border-slate-800/60">
            <div className="text-2xl sm:text-3xl font-black text-cyan-400 font-mono">50,000+</div>
            <div className="text-xs text-slate-400 mt-1">Alumnos Graduados</div>
          </div>
          <div className="p-4 rounded-xl bg-slate-900/40 border border-slate-800/60">
            <div className="text-2xl sm:text-3xl font-black text-amber-400 font-mono">4.9 / 5.0</div>
            <div className="text-xs text-slate-400 mt-1">Puntuación Media</div>
          </div>
          <div className="p-4 rounded-xl bg-slate-900/40 border border-slate-800/60">
            <div className="text-2xl sm:text-3xl font-black text-emerald-400 font-mono">98%</div>
            <div className="text-xs text-slate-400 mt-1">Tasa de Contratación</div>
          </div>
        </div>

      </div>
    </div>
  );
};