// innovation-engineering.jsx — هندسة الابتكار: the Academy's flagship discipline (curriculum, workshops, library, certification)

function InnovationEngineering({ t, L, go, store, auth }) {
  const [openMod, setOpenMod] = React.useState(IE_MODULES[0].code);
  const totalHours = IE_MODULES.reduce((a, m) => a + m.hours, 0);
  const facts = [[IE_MODULES.length, t('ie_f_mods')], [totalHours, t('ie_f_hours')], [IE_WORKSHOPS.length, t('ie_f_ws')], [IE_STAGES.length, t('ie_f_lvls')]];

  return (
    <section className="section" id="acad-ie">
      <div className="wrap">
        {/* banner */}
        <Reveal>
          <div className="card card-pad ie-band">
            <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', alignItems: 'center' }}>
              <div style={{ flex: '1 1 380px' }}>
                <div className="eyebrow" style={{ color: 'var(--gold)' }}><Icon.target s={15} /> {t('ie_eyebrow')}</div>
                <h2 style={{ fontSize: 'clamp(26px, 3.8vw, 40px)', marginTop: 12, lineHeight: 1.14 }}>{t('ie_title')}</h2>
                <p className="muted" style={{ fontSize: 15.5, marginTop: 14, lineHeight: 1.8 }}>{t('ie_sub')}</p>
                <div style={{ display: 'flex', gap: 12, marginTop: 22, flexWrap: 'wrap' }}>
                  <a className="btn btn-primary" href="#acad-enroll"><Icon.rocket s={16} /> {t('ie_join')}</a>
                  <a className="btn btn-ghost" href="#ie-curriculum"><Icon.book s={16} /> {t('ie_curr')}</a>
                </div>
              </div>
              <div className="ie-facts">
                {facts.map(([v, k], i) => (
                  <div key={i} className="vault-stat"><b><CountUp to={v} /></b><span>{k}</span></div>
                ))}
              </div>
            </div>
          </div>
        </Reveal>

        {/* what it is — principles */}
        <Reveal><Head eyebrow={t('ie_what')} title={t('ie_what_t')} sub={t('ie_what_d')} icon="layers" /></Reveal>
        <div className="grid g4" style={{ marginTop: 26 }}>
          {IE_PRINCIPLES.map((p, i) => {
            const I = Icon[p.icon];
            return (
              <Reveal key={i} delay={(i % 4) * 60}>
                <div className="card card-pad hoverable" style={{ height: '100%' }}>
                  <span style={{ width: 44, height: 44, borderRadius: 13, display: 'grid', placeItems: 'center', background: `color-mix(in srgb, var(--${p.accent}) 16%, transparent)`, color: `var(--${p.accent})` }}><I s={21} /></span>
                  <b style={{ fontSize: 16, display: 'block', marginTop: 13 }}>{L(p.title)}</b>
                  <p className="muted" style={{ fontSize: 13.5, marginTop: 8, lineHeight: 1.7 }}>{L(p.desc)}</p>
                </div>
              </Reveal>
            );
          })}
        </div>

        {/* full curriculum */}
        <div id="ie-curriculum" style={{ marginTop: 56 }}>
          <Reveal><Head eyebrow={t('ie_curr')} title={t('ie_curr_t')} sub={t('ie_curr_d')} icon="book" /></Reveal>
          <div style={{ display: 'grid', gap: 12, marginTop: 26 }}>
            {IE_MODULES.map((m, i) => {
              const isOpen = openMod === m.code;
              return (
                <Reveal key={m.code} delay={Math.min(i, 5) * 50}>
                  <div className={`card act-row ${isOpen ? 'open' : ''}`}>
                    <button className="act-head" onClick={() => setOpenMod(isOpen ? null : m.code)} aria-expanded={isOpen}>
                      <span className="ie-code" style={{ background: `color-mix(in srgb, var(--${m.accent}) 14%, transparent)`, color: `var(--${m.accent})`, borderColor: `color-mix(in srgb, var(--${m.accent}) 34%, transparent)` }} dir="ltr">{m.code}</span>
                      <span style={{ flex: 1, minWidth: 0, textAlign: 'start' }}>
                        <b style={{ fontSize: 16, display: 'block' }}>{L(m.name)}</b>
                        <span className="muted" style={{ fontSize: 12.5 }}>{m.hours} {t('acad_hours')}</span>
                      </span>
                      <span className="act-chev" style={{ flex: 'none', color: 'var(--accent)' }}><Icon.chevR s={18} /></span>
                    </button>
                    {isOpen && (
                      <div className="act-body">
                        <p style={{ fontSize: 14.5, lineHeight: 1.75, margin: 0 }}>{L(m.desc)}</p>
                        <div style={{ marginTop: 16 }}>
                          <div className="eyebrow"><Icon.check s={14} /> {t('ie_outcomes')}</div>
                          <ul className="acad-topics">
                            {m.outcomes.map((o, k) => (
                              <li key={k}><span style={{ color: `var(--${m.accent})`, flex: 'none' }}><Icon.check s={16} /></span>{L(o)}</li>
                            ))}
                          </ul>
                        </div>
                      </div>
                    )}
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>

        {/* certification stages */}
        <div style={{ marginTop: 56 }}>
          <Reveal><Head eyebrow={t('ie_stages')} title={t('ie_stages_t')} sub={t('ie_stages_d')} icon="award" /></Reveal>
          <div className="grid g3" style={{ marginTop: 26 }}>
            {IE_STAGES.map((s, i) => (
              <Reveal key={s.code} delay={i * 70}>
                <div className="card card-pad" style={{ height: '100%', borderColor: `color-mix(in srgb, var(--${s.accent}) 28%, transparent)` }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span className="ie-code" dir="ltr" style={{ background: `color-mix(in srgb, var(--${s.accent}) 14%, transparent)`, color: `var(--${s.accent})`, borderColor: `color-mix(in srgb, var(--${s.accent}) 34%, transparent)` }}>{s.code}</span>
                    <span className="muted" style={{ fontSize: 12.5 }}>{s.hours} {t('acad_hours')}</span>
                  </div>
                  <b style={{ fontSize: 17, display: 'block', marginTop: 13 }}>{L(s.name)}</b>
                  <p className="muted" style={{ fontSize: 13.5, marginTop: 8, lineHeight: 1.7 }}>{L(s.req)}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>

        {/* workshops */}
        <div style={{ marginTop: 56 }}>
          <Reveal><Head eyebrow={t('ie_ws')} title={t('ie_ws_t')} sub={t('ie_ws_d')} icon="flask" /></Reveal>
          <div className="grid g3" style={{ marginTop: 26 }}>
            {IE_WORKSHOPS.map((w, i) => {
              const I = Icon[w.icon];
              return (
                <Reveal key={i} delay={(i % 3) * 70}>
                  <div className="card card-pad hoverable" style={{ height: '100%' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
                      <span style={{ width: 44, height: 44, borderRadius: 13, display: 'grid', placeItems: 'center', background: `color-mix(in srgb, var(--${w.accent}) 16%, transparent)`, color: `var(--${w.accent})` }}><I s={21} /></span>
                      <span className="chip"><Icon.clock s={14} /> {L(w.dur)}</span>
                    </div>
                    <b style={{ fontSize: 16, display: 'block', marginTop: 13 }}>{L(w.title)}</b>
                    <p className="muted" style={{ fontSize: 13.5, marginTop: 8, lineHeight: 1.7 }}>{L(w.desc)}</p>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>

        {/* library */}
        <div style={{ marginTop: 56 }}>
          <Reveal><Head eyebrow={t('ie_books')} title={t('ie_books_t')} sub={t('ie_books_d')} icon="book" /></Reveal>
          <div className="grid g2" style={{ marginTop: 26 }}>
            {IE_BOOKS.map((b, i) => (
              <Reveal key={b.id} delay={(i % 2) * 70}>
                <div className="card hoverable" style={{ display: 'flex', gap: 14, padding: 18, height: '100%', alignItems: 'flex-start' }}>
                  <span style={{ flex: 'none', width: 46, height: 62, borderRadius: 6, background: `linear-gradient(140deg, color-mix(in srgb, var(--${b.accent}) 34%, transparent), color-mix(in srgb, var(--${b.accent}) 10%, transparent))`, border: '1px solid color-mix(in srgb, var(--' + b.accent + ') 40%, transparent)', display: 'grid', placeItems: 'center', color: `var(--${b.accent})`, boxShadow: 'inset 4px 0 0 -1px color-mix(in srgb, var(--' + b.accent + ') 55%, transparent)' }}><Icon.book s={20} /></span>
                  <div style={{ minWidth: 0 }}>
                    <b style={{ fontSize: 15.5, display: 'block', lineHeight: 1.4 }}>{L(b.title)}</b>
                    <div className="muted" style={{ fontSize: 12.5, marginTop: 3 }} dir="ltr">{b.en}</div>
                    <div style={{ fontSize: 13, marginTop: 7, color: 'var(--accent)', fontWeight: 600 }}>{L(b.author)}{b.year ? ' · ' + b.year : ''}</div>
                    <p className="muted" style={{ fontSize: 13.5, marginTop: 8, lineHeight: 1.65 }}>{L(b.why)}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <p className="muted" style={{ fontSize: 13.5, marginTop: 20, lineHeight: 1.7 }}>{t('ie_note')}</p>
        </div>

        {/* owner-updatable book shelf */}
        {store && <ResourceShelf t={t} L={L} store={store} auth={auth} bucket="ie" accent="gold"
          eyebrow={t('shelf_ie_eyebrow')} title={t('shelf_ie_title')} sub={t('shelf_ie_sub')} kindLabel={t('shelf_add_ie')} />}
      </div>
    </section>
  );
}

window.InnovationEngineering = InnovationEngineering;
