// home.jsx — Home page with 3 selectable hero directions + shared home sections

function Home({ go, t, L, data, heroVariant, lang }) {
  return (
    <div>
      {heroVariant === 'split' && <HeroSplit {...{ go, t, L, data }} />}
      {heroVariant === 'centered' && <HeroCentered {...{ go, t, L, data }} />}
      {heroVariant === 'editorial' && <HeroEditorial {...{ go, t, L, data }} />}
      <StatsBar t={t} data={data} />
      <Pillars go={go} t={t} />
      <Process t={t} />
      <CoursePromo go={go} t={t} L={L} data={data} />
      <HomeCourses go={go} t={t} L={L} data={data} />
      <Activities go={go} t={t} L={L} data={data} />
      <AIBand go={go} t={t} L={L} />
      <Academy go={go} t={t} L={L} onMore={() => go('academy')} />
      <Inspiration t={t} L={L} />
      <Articles t={t} L={L} />
      <LearningHub t={t} L={L} />
      <Glossary t={t} L={L} />
      <GlobalSources t={t} L={L} />
      <Contact t={t} L={L} data={data} />
    </div>
  );
}

function HeroStats({ t, data }) {
  const items = [
    ['ideas', data.stats.ideas, 'hero_stat_ideas', 'bulb'],
    ['courses', data.stats.courses, 'hero_stat_courses', 'book'],
    ['patents', data.stats.patents, 'hero_stat_patents', 'award'],
  ];
  return (
    <div style={{ display: 'flex', gap: 26, flexWrap: 'wrap' }}>
      {items.map(([k, v, lbl, ic]) => {
        const I = Icon[ic];
        return (
          <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ color: 'var(--accent)' }}><I s={20} /></span>
            <div>
              <div className="kpi-num" style={{ fontSize: 26 }}><CountUp to={v} /></div>
              <div className="muted" style={{ fontSize: 13 }}>{t(lbl)}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ---- Variant A: Split ----
function HeroSplit({ go, t, L, data }) {
  return (
    <header className="hero section" style={{ paddingTop: 70 }}>
      <div className="blob" style={{ width: 460, height: 460, background: 'var(--purple)', top: -120, insetInlineEnd: -80 }} />
      <div className="wrap hero-split" style={{ display: 'grid', gap: 56, alignItems: 'center' }}>
        <div>
          <Reveal>
            <div className="chip on" style={{ marginBottom: 22 }}><Icon.spark s={14} /> {t('hero_eyebrow')}</div>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontSize: 'clamp(34px, 5vw, 60px)', lineHeight: 1.05 }}>{L(data.hero.headline)}</h1>
          </Reveal>
          <Reveal delay={160}>
            <p className="muted" style={{ fontSize: 18, marginTop: 22, maxWidth: 540, lineHeight: 1.7 }}>{L(data.hero.sub)}</p>
          </Reveal>
          <Reveal delay={240}>
            <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={() => go('idea')}><Icon.bulb s={18} /> {t('cta_idea')}</button>
              <button className="btn btn-ghost btn-lg" onClick={() => go('courses')}><Icon.book s={18} /> {t('cta_explore')}</button>
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div className="hr" style={{ margin: '34px 0 26px' }} />
            <HeroStats t={t} data={data} />
          </Reveal>
        </div>
        <Reveal delay={200}>
          <div style={{ position: 'relative' }}>
            <BrainCanvas h={440} />
          </div>
        </Reveal>
      </div>
    </header>
  );
}

// ---- Variant B: Centered bold ----
function HeroCentered({ go, t, L, data }) {
  const cards = [
    ['p_idea_t', 'bulb', 'idea', 'mint'], ['p_course_t', 'book', 'courses', 'purple'],
    ['p_patent_t', 'award', 'patents', 'gold'], ['p_ai_t', 'cpu', 'ai', 'purple'],
  ];
  return (
    <header className="hero section dotgrid" style={{ paddingTop: 96, textAlign: 'center' }}>
      <div className="blob" style={{ width: 520, height: 520, background: 'var(--mint)', top: -160, insetInlineStart: '50%', transform: 'translateX(-50%)', opacity: .25 }} />
      <div className="wrap" style={{ position: 'relative' }}>
        <Reveal><div className="chip on" style={{ margin: '0 auto' }}><Icon.spark s={14} /> {t('hero_eyebrow')}</div></Reveal>
        <Reveal delay={80}>
          <h1 style={{ fontSize: 'clamp(36px, 6.5vw, 78px)', lineHeight: 1.02, maxWidth: 980, margin: '24px auto 0' }}>{L(data.hero.headline)}</h1>
        </Reveal>
        <Reveal delay={160}>
          <p className="muted" style={{ fontSize: 19, margin: '24px auto 0', maxWidth: 660, lineHeight: 1.7 }}>{L(data.hero.sub)}</p>
        </Reveal>
        <Reveal delay={240}>
          <div style={{ display: 'flex', gap: 14, marginTop: 34, justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-primary btn-lg" onClick={() => go('idea')}><Icon.bulb s={18} /> {t('cta_idea')}</button>
            <button className="btn btn-ghost btn-lg" onClick={() => go('courses')}><Icon.book s={18} /> {t('cta_explore')}</button>
          </div>
        </Reveal>
        <Reveal delay={300}>
          <div style={{ maxWidth: 900, margin: '46px auto 0' }}>
            <BrainCanvas h={340} />
          </div>
        </Reveal>
        <Reveal delay={320}>
          <div className="grid g4" style={{ marginTop: 40 }}>
            {cards.map(([k, ic, pg, ac], i) => {
              const I = Icon[ic];
              return (
                <button key={k} className="card hoverable card-pad" onClick={() => go(pg)} style={{ textAlign: 'start', cursor: 'pointer', background: 'rgba(255,255,255,.035)' }}>
                  <span style={{ width: 44, height: 44, borderRadius: 12, display: 'grid', placeItems: 'center', background: `color-mix(in srgb, var(--${ac}) 18%, transparent)`, color: `var(--${ac})` }}><I s={22} /></span>
                  <div style={{ fontWeight: 700, fontSize: 16, marginTop: 16 }}>{t(k)}</div>
                  <div className="back-link" style={{ marginTop: 10, color: 'var(--accent)' }}>{t('explore')} <Icon.arrow s={15} /></div>
                </button>
              );
            })}
          </div>
        </Reveal>
      </div>
    </header>
  );
}

// ---- Variant C: Editorial / asymmetric ----
function HeroEditorial({ go, t, L, data }) {
  return (
    <header className="hero section" style={{ paddingTop: 64 }}>
      <div className="blob" style={{ width: 420, height: 420, background: 'var(--purple)', bottom: -140, insetInlineStart: -100 }} />
      <div className="wrap">
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
            <div className="chip on"><Icon.spark s={14} /> {t('hero_eyebrow')}</div>
            <div className="chip"><Icon.clock s={13} /> {L(data.hero.note)}</div>
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h1 style={{ fontSize: 'clamp(40px, 9vw, 116px)', lineHeight: .98, margin: '20px 0 0', letterSpacing: '-.02em' }}>
            {L(data.hero.headline)}
          </h1>
        </Reveal>
        <div className="hero-editorial" style={{ display: 'grid', gap: 40, marginTop: 40, alignItems: 'end' }}>
          <Reveal delay={160}>
            <BrainCanvas h={320} />
          </Reveal>
          <Reveal delay={220}>
            <div>
              <p className="muted" style={{ fontSize: 18, lineHeight: 1.7 }}>{L(data.hero.sub)}</p>
              <div style={{ display: 'flex', gap: 12, marginTop: 26, flexWrap: 'wrap' }}>
                <button className="btn btn-primary btn-lg" onClick={() => go('idea')}><Icon.bulb s={18} /> {t('cta_idea')}</button>
                <button className="btn btn-dark btn-lg" onClick={() => go('academy')}><Icon.award s={18} /> {t('nav_academy')}</button>
                <button className="btn btn-dark btn-lg" onClick={() => go('courses')}>{t('cta_explore')}</button>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </header>
  );
}

// ---- Stats strip ----
function StatsBar({ t, data }) {
  const items = [
    [data.stats.ideas, 'hero_stat_ideas', 'bulb', 'mint'],
    [data.stats.courses, 'hero_stat_courses', 'book', 'purple'],
    [data.stats.patents, 'hero_stat_patents', 'award', 'gold'],
    [data.stats.employees, 'hero_stat_emp', 'users', 'mint'],
  ];
  return (
    <section className="section tight">
      <div className="wrap">
        <div className="grid g4">
          {items.map(([v, lbl, ic, ac], i) => {
            const I = Icon[ic];
            return (
              <Reveal key={lbl} delay={i * 70}>
                <div className="card card-pad" style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                  <span style={{ width: 50, height: 50, flex: 'none', borderRadius: 14, display: 'grid', placeItems: 'center', background: `color-mix(in srgb, var(--${ac}) 16%, transparent)`, color: `var(--${ac})` }}><I s={24} /></span>
                  <div>
                    <div className="kpi-num" style={{ fontSize: 34 }}><CountUp to={v} /></div>
                    <div className="muted" style={{ fontSize: 13.5 }}>{t(lbl)}</div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---- Pillars ----
function Pillars({ go, t }) {
  const items = [
    ['p_idea_t', 'p_idea_d', 'bulb', 'idea', 'mint'],
    ['p_course_t', 'p_course_d', 'book', 'courses', 'purple'],
    ['p_patent_t', 'p_patent_d', 'award', 'patents', 'gold'],
    ['p_ai_t', 'p_ai_d', 'cpu', 'ai', 'purple'],
  ];
  return (
    <section className="section">
      <div className="wrap">
        <Reveal><Head eyebrow={t('pillars_eyebrow')} title={t('pillars_title')} icon="grid" /></Reveal>
        <div className="grid g2" style={{ marginTop: 44 }}>
          {items.map(([tt, dd, ic, pg, ac], i) => {
            const I = Icon[ic];
            return (
              <Reveal key={tt} delay={(i % 2) * 90}>
                <button className="card hoverable card-pad" onClick={() => go(pg)} style={{ textAlign: 'start', cursor: 'pointer', display: 'flex', gap: 20, alignItems: 'flex-start', width: '100%' }}>
                  <span style={{ width: 56, height: 56, flex: 'none', borderRadius: 16, display: 'grid', placeItems: 'center', background: `color-mix(in srgb, var(--${ac}) 16%, transparent)`, color: `var(--${ac})` }}><I s={28} /></span>
                  <div>
                    <h3 style={{ fontSize: 21 }}>{t(tt)}</h3>
                    <p className="muted" style={{ marginTop: 10, fontSize: 15.5, lineHeight: 1.65 }}>{t(dd)}</p>
                    <div className="back-link" style={{ marginTop: 14, color: 'var(--accent)', fontWeight: 700 }}>{t('explore')} <Icon.arrow s={16} /></div>
                  </div>
                </button>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---- Process ----
function Process({ t }) {
  const steps = [
    ['proc_1t', 'proc_1d', 'pen'], ['proc_2t', 'proc_2d', 'target'], ['proc_3t', 'proc_3d', 'flask'],
    ['proc_4t', 'proc_4d', 'rocket'], ['proc_5t', 'proc_5d', 'shield'],
  ];
  return (
    <section className="section" style={{ background: 'linear-gradient(180deg, rgba(255,255,255,.02), transparent)' }}>
      <div className="wrap">
        <Reveal><Head center eyebrow={t('proc_eyebrow')} title={t('proc_title')} icon="layers" /></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 16, marginTop: 50 }} className="proc-grid">
          {steps.map(([tt, dd, ic], i) => {
            const I = Icon[ic];
            return (
              <Reveal key={tt} delay={i * 90}>
                <div className="card card-pad" style={{ height: '100%', position: 'relative' }}>
                  <div style={{ fontFamily: 'Space Grotesk', fontSize: 13, fontWeight: 700, color: 'var(--faint)' }}>0{i + 1}</div>
                  <span style={{ color: 'var(--accent)', display: 'inline-flex', marginTop: 12 }}><I s={26} /></span>
                  <h3 style={{ fontSize: 18, marginTop: 12 }}>{t(tt)}</h3>
                  <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.6 }}>{t(dd)}</p>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
      <style>{`@media(max-width:920px){.proc-grid{grid-template-columns:repeat(2,1fr)!important}}@media(max-width:560px){.proc-grid{grid-template-columns:1fr!important}}`}</style>
    </section>
  );
}

// ---- Gallery preview ----
function GalleryPreview({ go, t, L }) {
  const items = GALLERY.slice(0, 3);
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 20, flexWrap: 'wrap' }}>
          <Reveal><Head eyebrow={t('gallery_eyebrow')} title={t('gallery_title')} icon="grid" /></Reveal>
          <Reveal delay={120}><button className="btn btn-ghost" onClick={() => go('gallery')}>{t('explore')} <Icon.arrow s={16} /></button></Reveal>
        </div>
        <div className="grid g3" style={{ marginTop: 40 }}>
          {items.map((g, i) => (
            <Reveal key={g.id} delay={i * 90}><GalleryCard g={g} t={t} L={L} /></Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Home = Home;
window.GalleryPreview = GalleryPreview;

// ---- AI band: professional AI brain emblem ----
function AIBand({ go, t, L }) {
  const feats = ['ai_f1', 'ai_f2', 'ai_f3'];
  return (
    <section className="section ai-band">
      <div className="wrap">
        <div className="card" style={{ overflow: 'hidden', padding: 0 }}>
          <div className="ai-band-grid">
            <div style={{ padding: 44 }}>
              <div className="eyebrow"><Icon.cpu s={15} /> {t('ai_eyebrow')}</div>
              <h2 style={{ fontSize: 'clamp(26px,3.4vw,38px)', marginTop: 14 }}>{t('ai_band_title')}</h2>
              <p className="muted" style={{ fontSize: 16.5, marginTop: 14, lineHeight: 1.7, maxWidth: 520 }}>{t('ai_band_desc')}</p>
              <div style={{ display: 'grid', gap: 12, marginTop: 22 }}>
                {feats.map((k) => (
                  <div key={k} style={{ display: 'flex', gap: 11, alignItems: 'center', fontSize: 15, fontWeight: 600 }}>
                    <span style={{ width: 26, height: 26, flex: 'none', borderRadius: 8, display: 'grid', placeItems: 'center', background: 'color-mix(in srgb, var(--purple) 20%, transparent)', color: '#b6a4ff' }}><Icon.check s={15} /></span>
                    {t(k)}
                  </div>
                ))}
              </div>
              <button className="btn btn-primary btn-lg" style={{ marginTop: 28 }} onClick={() => go('ai')}><Icon.cpu s={18} /> {t('ai_band_cta')}</button>
            </div>
            <div className="ai-band-art">
              <div className="ai-orb" />
              <AIBrain s={300} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.AIBand = AIBand;