// academy.jsx — أكاديمية المبتكرين: graduation path (4 tiers) + pillars

function Academy({ go, t, L, onMore }) {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section acad" id="academy">
      <span className="acad-glow" />
      <div className="wrap" style={{ position: 'relative' }}>
        {onMore && (
        <Reveal>
          <div className="center" style={{ maxWidth: 720, margin: '0 auto' }}>
            <span className="acad-seal">
              <Icon.award s={26} />
            </span>
            <div className="eyebrow" style={{ justifyContent: 'center', marginTop: 16 }}><Icon.spark s={15} /> {t('acad_eyebrow')}</div>
            <h2 style={{ fontSize: 'clamp(28px, 4.2vw, 44px)', marginTop: 14 }}>{t('acad_title')}</h2>
            <p className="muted" style={{ fontSize: 17, marginTop: 14, lineHeight: 1.7 }}>{t('acad_sub')}</p>
          </div>
        </Reveal>
        )}

        {/* graduation path */}
        <div style={{ marginTop: 44 }}>
          <div className="eyebrow"><Icon.layers s={14} /> {t('acad_path')}</div>
          <div className="acad-track">
            {ACADEMY_LEVELS.map((lv, i) => {
              const I = Icon[lv.icon];
              const isOpen = open === i;
              return (
                <Reveal key={lv.lvl} delay={i * 80}>
                  <button className={`card acad-card ${isOpen ? 'on' : ''}`} onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{ '--lv': `var(--${lv.accent})` }}>
                    <span className="acad-step">{lv.lvl}</span>
                    <span className="acad-ic" style={{ background: `color-mix(in srgb, var(--${lv.accent}) 16%, transparent)`, color: `var(--${lv.accent})` }}><I s={24} /></span>
                    <b style={{ fontSize: 17, marginTop: 14, display: 'block' }}>{L(lv.name)}</b>
                    <span className="acad-code" dir="ltr">{lv.code}</span>
                    <span className="chip" style={{ marginTop: 12, padding: '4px 11px', fontSize: 12 }}><Icon.clock s={12} /> {lv.weeks} {t('acad_weeks')}</span>
                    {isOpen && (
                      <span className="acad-body">
                        <span className="acad-row">
                          <span className="muted">{t('acad_goal')}</span>
                          <span>{L(lv.goal)}</span>
                        </span>
                        <span className="acad-row">
                          <span className="muted">{t('acad_reqs')}</span>
                          <span>{L(lv.reqs)}</span>
                        </span>
                      </span>
                    )}
                  </button>
                </Reveal>
              );
            })}
          </div>
        </div>

        {/* pillars */}
        <div style={{ marginTop: 46 }}>
          <div className="eyebrow"><Icon.target s={14} /> {t('acad_pillars')}</div>
          <div className="grid g4" style={{ marginTop: 18 }}>
            {ACADEMY_PILLARS.map((p, i) => {
              const I = Icon[p.icon];
              return (
                <Reveal key={i} delay={(i % 4) * 70}>
                  <div className="card card-pad" style={{ height: '100%' }}>
                    <span style={{ width: 44, height: 44, borderRadius: 12, display: 'grid', placeItems: 'center', background: `color-mix(in srgb, var(--${p.accent}) 16%, transparent)`, color: `var(--${p.accent})` }}><I s={22} /></span>
                    <b style={{ fontSize: 16, display: 'block', marginTop: 14 }}>{L(p.title)}</b>
                    <p className="muted" style={{ fontSize: 13.8, marginTop: 8, lineHeight: 1.65 }}>{L(p.desc)}</p>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>

        {onMore && (
          <Reveal>
            <div className="center" style={{ marginTop: 40 }}>
              <button className="btn btn-primary btn-lg" onClick={onMore}><Icon.rocket s={18} /> {t('acad_apply')}</button>
            </div>
          </Reveal>
        )}
      </div>
    </section>
  );
}

window.Academy = Academy;