const PROGRAM_META = [
  { id: 'early', age: '6–8', accent: '#FF8A3D', bg: '#FFE7D5', video: 'assets/early-builders.mp4', icon: '🧱' },
  { id: 'advanced', age: '9–12', accent: '#5A1FD0', bg: '#E5D2FB', video: 'assets/advanced-creators.mp4', icon: '⚙️' },
  { id: 'engineers', age: '13+', accent: '#3DA9FF', bg: '#D6ECFF', video: 'assets/young-engineers.mp4', icon: '🔌' },
];

function ProgramCard({ meta, copy, idx, hovered, setHovered, t }) {
  const videoRef = React.useRef(null);
  const isHover = hovered === meta.id;

  React.useEffect(() => {
    const v = videoRef.current; if (!v) return;
    if (isHover) { v.currentTime = 0; v.play().catch(()=>{}); }
    else { v.pause(); }
  }, [isHover]);

  return (
    <div
      onMouseEnter={() => setHovered(meta.id)}
      onMouseLeave={() => setHovered(null)}
      className="card-lift relative bg-cream rounded-blob border-2 border-brand-800 shadow-card overflow-hidden flex flex-col"
      style={{ minHeight: 560 }}
    >
      <div className="h-3 studs" style={{ background: `radial-gradient(circle at 50% 50%, ${meta.accent} 22%, transparent 23%) 0 0/24px 24px, ${meta.accent}` }}/>

      <div className="relative h-[240px] overflow-hidden" style={{ background: meta.bg }}>
        <video
          ref={videoRef}
          src={meta.video}
          muted loop playsInline preload="metadata"
          className={"absolute inset-0 w-full h-full object-cover transition-opacity duration-300 " + (isHover ? 'opacity-100' : 'opacity-0')}
        />
        <div className={"absolute inset-0 grid place-items-center transition-opacity duration-300 " + (isHover ? 'opacity-0' : 'opacity-100')}>
          <div className="relative">
            <div className="absolute inset-0 rounded-full blur-2xl opacity-50" style={{background: meta.accent}}/>
            <div className="relative w-28 h-28 rounded-3xl grid place-items-center text-6xl shadow-pop border-2 border-brand-800" style={{background: '#fff'}}>
              {meta.icon}
            </div>
          </div>
        </div>
        <div className={"absolute top-3 end-3 z-10 transition-all " + (isHover ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2')}>
          <div className="px-2.5 py-1 rounded-full bg-cream text-brand-800 text-[10px] font-extrabold tracking-wider uppercase shadow-soft border border-brand-800/10">{t.curriculum.watch}</div>
        </div>
        <div className="absolute top-3 start-3 z-10">
          <div className="px-3 py-1.5 rounded-full bg-brand-800 text-cream text-[12px] font-extrabold tracking-wide shadow-pop">{t.curriculum.ages} {meta.age}</div>
        </div>
        <div className="absolute -bottom-4 -end-2 font-display font-extrabold text-[120px] leading-none opacity-15 select-none" style={{color: meta.accent}}>0{idx+1}</div>
      </div>

      <div className="p-6 sm:p-7 flex flex-col gap-4 flex-1">
        <div>
          <h3 className="font-display font-extrabold text-[28px] text-brand-800 leading-tight">{copy.title}</h3>
          <p className="text-brand-700/70 text-[15px] font-semibold mt-1">{copy.tagline}</p>
        </div>

        <div>
          <div className="text-[10px] font-extrabold uppercase tracking-[0.16em] text-brand-700/50 mb-2">{t.curriculum.toolkit}</div>
          <div className="flex flex-wrap gap-1.5">
            {copy.tools.map(tl => (
              <span key={tl} className="text-[12px] font-bold text-brand-800 bg-brand-50 border border-brand-100 px-2.5 py-1 rounded-lg">{tl}</span>
            ))}
          </div>
        </div>

        <div>
          <div className="text-[10px] font-extrabold uppercase tracking-[0.16em] text-brand-700/50 mb-2">{t.curriculum.skills}</div>
          <ul className="space-y-1.5">
            {copy.skills.map(s => (
              <li key={s} className="flex items-center gap-2 text-[14px] font-semibold text-brand-700">
                <span className="w-4 h-4 rounded grid place-items-center text-cream text-[10px]" style={{background: meta.accent}}>✓</span>
                {s}
              </li>
            ))}
          </ul>
        </div>

        <div className="mt-auto pt-4 border-t-2 border-dashed border-brand-100 flex items-center justify-between">
          <div className="text-[13px] font-bold text-brand-700/70">{copy.duration}</div>
          <a href="#join" className="inline-flex items-center gap-1 text-[14px] font-extrabold text-brand-800 hover:gap-2 transition-all">
            {t.curriculum.enroll} <span className="rtl:rotate-180 inline-block">→</span>
          </a>
        </div>
      </div>
    </div>
  );
}

function Curriculum() {
  const { t } = window.useT();
  const [hovered, setHovered] = React.useState(null);
  return (
    <section id="programs" className="relative px-4 sm:px-8 py-20 sm:py-28">
      <div className="mx-auto max-w-7xl">
        <div className="grid sm:grid-cols-[auto_1fr] items-end gap-6 mb-12">
          <div>
            <div className="inline-flex items-center gap-2 rounded-full bg-tang-400/15 px-3.5 py-1.5 mb-4 border border-tang-400/30">
              <span className="text-tang-500 font-extrabold text-[12px] tracking-wider uppercase">{t.curriculum.pill}</span>
            </div>
            <h2 className="font-display font-extrabold text-brand-800 text-[40px] sm:text-[56px] leading-[0.98] tracking-tight max-w-3xl">
              {t.curriculum.title1}<br/>
              {t.curriculum.title2} <span className="relative"><span className="absolute inset-0 -inset-x-1 rounded-xl bg-sun-400 -rotate-1 -z-10"/>{t.curriculum.titleHi}</span> {t.curriculum.title3}
            </h2>
          </div>
          <p className="text-brand-700/75 font-semibold max-w-md sm:text-end text-[16px] leading-relaxed">
            {t.curriculum.sub}
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
          {PROGRAM_META.map((m,i) => (
            <ProgramCard key={m.id} meta={m} copy={t.curriculum.programs[i]} idx={i} hovered={hovered} setHovered={setHovered} t={t}/>
          ))}
        </div>

        <div className="mt-10 hidden md:flex items-center justify-center gap-4 text-brand-700/70 font-bold text-[13px]">
          <span>{t.curriculum.progress[0]}</span>
          <span className="h-px w-16 bg-brand-200"/>
          <span>{t.curriculum.progress[1]}</span>
          <span className="h-px w-16 bg-brand-200"/>
          <span>{t.curriculum.progress[2]}</span>
        </div>
      </div>
    </section>
  );
}
window.Curriculum = Curriculum;