const HERO_VIDEOS = [
  'assets/hero-build.mp4',
  'assets/young-engineers.mp4',
  'assets/advanced-creators.mp4',
  'assets/early-builders.mp4',
  'assets/christmas.mp4',
];

function Hero() {
  const { t } = window.useT();
  const heroVideo = React.useMemo(() => HERO_VIDEOS[Math.floor(Math.random() * HERO_VIDEOS.length)], []);
  return (
    <section id="top" className="relative px-4 sm:px-8 pt-10 pb-16 sm:pt-16 sm:pb-24 overflow-hidden">
      {/* Background blobs */}
      <div aria-hidden className="absolute inset-0 -z-10">
        <div className="absolute -top-32 -left-32 w-[520px] h-[520px] rounded-full opacity-60" style={{background:'radial-gradient(circle at 30% 30%, #E5D2FB 0%, transparent 60%)'}}/>
        <div className="absolute top-40 -right-40 w-[600px] h-[600px] rounded-full opacity-70" style={{background:'radial-gradient(circle at 70% 30%, #FFE7B7 0%, transparent 60%)'}}/>
        <div className="absolute bottom-0 left-1/4 w-[500px] h-[500px] rounded-full opacity-50" style={{background:'radial-gradient(circle at 50% 50%, #FFC8A3 0%, transparent 60%)'}}/>
      </div>

      <div className="mx-auto max-w-7xl grid lg:grid-cols-[1.15fr_1fr] gap-10 lg:gap-14 items-center">
        {/* LEFT: Copy */}
        <div className="relative">
          <div className="inline-flex items-center gap-2 rounded-full bg-cream border border-brand-100 px-3.5 py-1.5 mb-6 shadow-soft">
            <span className="w-2 h-2 rounded-full bg-mint-400 animate-pulse"/>
            <span className="text-[12px] font-extrabold tracking-wide text-brand-700">{t.hero.pill}</span>
          </div>

          <h1 className="font-display font-extrabold text-brand-800 leading-[1.0] text-[40px] sm:text-[56px] lg:text-[68px] tracking-tight">
            {t.hero.title1} <span className="relative inline-block">
              <span className="scribble-underline">{t.hero.titleFuture}</span>
            </span>{t.hero.titleComma}<br/>
            {t.hero.titleOne} <span className="relative inline-block px-3 mx-1">
              <span className="absolute inset-0 rounded-2xl rotate-[-3deg] bg-tang-400"/>
              <span className="relative text-cream">{t.hero.titleBlock}</span>
            </span> {t.hero.titleAt}
          </h1>

          <p className="mt-6 text-[18px] sm:text-[20px] text-brand-700/80 max-w-xl leading-relaxed font-medium">
            {t.hero.sub}<b className="text-brand-700">{t.hero.subCity}</b>{t.hero.subTail}
          </p>

          <div className="mt-8 flex flex-wrap items-center gap-4">
            <a href="#programs" className="bg-brand-600 text-cream font-extrabold px-7 py-4 rounded-2xl btn-3d text-[16px] inline-flex items-center gap-2">
              {t.hero.cta1}
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" className="rtl:rotate-180"><path d="M5 12h14 M13 6l6 6-6 6"/></svg>
            </a>
            <a href="#join" className="bg-sun-400 text-brand-800 font-extrabold px-7 py-4 rounded-2xl btn-3d-light text-[16px] inline-flex items-center gap-2">
              {t.hero.cta2}
              <span className="text-xl">✦</span>
            </a>
          </div>

          <div className="mt-10 flex flex-wrap items-center gap-x-8 gap-y-3">
            <div className="flex -space-x-2 rtl:space-x-reverse">
              {[ '#FFC93C','#FF8A3D','#7846E4','#52CCA0','#3DA9FF' ].map((c,i)=>(
                <div key={i} className="w-9 h-9 rounded-full border-[3px] border-cream" style={{background:c}}/>
              ))}
            </div>
            <div className="text-[13px] font-bold text-brand-700/80 leading-tight">
              <div className="text-brand-800 text-[15px] font-extrabold">{t.hero.trustNum}</div>
              {t.hero.trustText}
            </div>
            <div className="hidden sm:flex items-center gap-2 text-[13px] font-bold text-brand-700/80">
              <span className="text-sun-500">★★★★★</span>
              <span>{t.hero.trustStars}</span>
            </div>
          </div>
        </div>

        {/* RIGHT: Vertical video */}
        <div className="relative">
          <div className="relative mx-auto w-full max-w-[400px] aspect-[9/16] rounded-[40px] bg-brand-700 shadow-card overflow-hidden border-[6px] border-brand-800">
            <video
              key={heroVideo}
              src={heroVideo}
              autoPlay muted loop playsInline
              className="absolute inset-0 w-full h-full object-cover"
            />
            <div className="absolute top-0 inset-x-0 p-4 flex items-center justify-between text-cream/90 z-10">
              <div className="flex items-center gap-2 px-2.5 py-1 rounded-full bg-black/30 backdrop-blur text-[11px] font-extrabold tracking-wide">
                <span className="w-1.5 h-1.5 rounded-full bg-tang-400 animate-pulse"/> {t.hero.live}
              </div>
              <div className="text-[11px] font-bold opacity-80">00:42</div>
            </div>
            <div className="absolute bottom-0 inset-x-0 p-5 z-10">
              <div className="rounded-2xl bg-cream/95 backdrop-blur p-3.5">
                <div className="text-[11px] font-extrabold text-tang-500 uppercase tracking-wider">{t.hero.mission}</div>
                <div className="text-[15px] font-extrabold text-brand-800 leading-tight">{t.hero.missionText}</div>
              </div>
            </div>
          </div>

          <div className="absolute -top-6 -left-6 float-slow">
            <div className="bg-sun-400 rounded-2xl px-4 py-3 shadow-pop border-2 border-brand-800 rotate-[-12deg]">
              <div className="font-display font-extrabold text-brand-800 text-sm leading-tight">{t.hero.badge1a}</div>
              <div className="text-[11px] font-bold text-brand-700">{t.hero.badge1b}</div>
            </div>
          </div>
          <div className="absolute -bottom-8 right-2 sm:right-6 float-med">
            <div className="bg-mint-400 rounded-2xl p-3 shadow-pop border-2 border-brand-800 rotate-[6deg] flex items-center gap-2">
              <div className="w-8 h-8 rounded-lg bg-cream grid place-items-center text-lg">🤖</div>
              <div className="leading-tight">
                <div className="font-display font-extrabold text-brand-800 text-sm">{t.hero.badge2a}</div>
                <div className="text-[10px] font-bold text-brand-800/70">{t.hero.badge2b}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Marquee strip — language-agnostic terms */}
      <div className="relative mt-16 -mx-4 sm:-mx-8 py-4 bg-brand-800 text-cream overflow-hidden">
        <div className="flex marquee whitespace-nowrap font-display font-extrabold text-2xl items-center">
          {Array.from({length: 2}).map((_,k) => (
            <div key={k} className="flex items-center gap-10 pr-10 shrink-0">
              {['LEGO® WeDo','Scratch','SPIKE™ Prime','FIRST LEGO League','Arduino','Sensors','3D Design','Python','Teamwork'].map((tl,i)=>(
                <span key={i} className="flex items-center gap-10">
                  <span>{tl}</span>
                  <span className="text-tang-400">✦</span>
                </span>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;