// learn-sections.jsx — premium upcoming-course poster, global learning platforms, channels, glossary

/* ===== designed announcement poster for the next upcoming course ===== */
function CoursePromo({ go, t, L, data }) {
  const all = (data && data.courses) || [];
  const upcoming = all.filter(c => (c.term || 'upcoming') === 'upcoming');
  const c = upcoming[0];
  const rest = upcoming.slice(1, 4);

  return (
    <section className="section">
      <div className="wrap">
        <Reveal>
          <div className="promo">
            {/* decorative layers */}
            <span className="promo-glow a" />
            <span className="promo-glow b" />
            <span className="promo-grid" />
            <span className="promo-ring r1" />
            <span className="promo-ring r2" />

            <div className="promo-inner">
              <div className="promo-left">
                <span className="promo-kicker"><Icon.rocket s={14} /> {t('promo_eyebrow')} · {t('promo_title')}</span>
                <h2 className="promo-h">{c ? L(c.title) : t('promo_empty_t')}</h2>
                <p className="promo-p">{c ? (L(c.objective) || t('promo_empty_d')) : t('promo_empty_d')}</p>

                {c && (
                  <div className="promo-meta">
                    {c.date && <span className="promo-tag"><Icon.clock s={14} /> {L(c.date)}</span>}
                    {c.dur && <span className="promo-tag"><Icon.clock s={14} /> {L(c.dur)}</span>}
                    {c.mode && <span className="promo-tag">{c.mode === 'onsite' ? <><Icon.pin s={14} /> {t('mode_onsite')}</> : <><Icon.globe s={14} /> {t('mode_virtual')}</>}</span>}
                    {c.presenter && <span className="promo-tag"><Icon.user s={14} /> {L(c.presenter)}</span>}
                  </div>
                )}

                <div className="promo-cta">
                  <button className="btn btn-primary btn-lg" onClick={() => go('courses')}>
                    <Icon.arrow s={18} /> {t('promo_join')}
                  </button>
                  <span className="promo-note"><Icon.spark s={14} /> {t('promo_free')}</span>
                </div>
              </div>

              <div className="promo-right">
                <div className="promo-date">
                  {c && c.date ? (
                    <>
                      <span className="promo-date-lbl">{t('course_date')}</span>
                      <span className="promo-date-v">{L(c.date)}</span>
                      {(c.target || c.target === 0) && c.target !== '' && (
                        <span className="promo-seats"><Icon.users s={15} /> {t('target_emp')}: <b>{c.target}</b></span>
                      )}
                      <span className="promo-limited">{t('promo_seats')}</span>
                    </>
                  ) : (
                    <>
                      <span className="promo-date-lbl">{t('soon')}</span>
                      <span className="promo-date-v" style={{ fontSize: 30 }}>2026</span>
                      <span className="promo-limited">{t('promo_seats')}</span>
                    </>
                  )}
                </div>
              </div>
            </div>
          </div>
        </Reveal>

        {rest.length > 0 && (
          <div style={{ marginTop: 28 }}>
            <div className="eyebrow"><Icon.rocket s={14} /> {t('more_upcoming')}</div>
            <div className="grid g3" style={{ marginTop: 16 }}>
              {rest.map((x, i) => (
                <Reveal key={x.id} delay={i * 80}>
                  <button className="card hoverable home-course" onClick={() => go('courses')}>
                    <span className="badge gold"><Icon.rocket s={13} /> {t('soon')}</span>
                    <h3 style={{ fontSize: 16.5, marginTop: 12 }}>{L(x.title)}</h3>
                    <div className="muted" style={{ fontSize: 13, marginTop: 8, display: 'grid', gap: 4 }}>
                      {x.date && <span style={{ display: 'flex', gap: 7, alignItems: 'center' }}><Icon.clock s={13} /> {L(x.date)}</span>}
                      {x.presenter && <span style={{ display: 'flex', gap: 7, alignItems: 'center' }}><Icon.user s={13} /> {L(x.presenter)}</span>}
                    </div>
                  </button>
                </Reveal>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

/* ===== global free learning platforms + channels ===== */
function LearningHub({ t, L }) {
  return (
    <section className="section" style={{ background: 'linear-gradient(180deg, rgba(255,255,255,.02), transparent)' }}>
      <div className="wrap">
        <Reveal><Head eyebrow={t('learn_eyebrow')} title={t('learn_title')} sub={t('learn_sub')} icon="award" /></Reveal>
        <div className="grid g3" style={{ marginTop: 34 }}>
          {LEARN_PLATFORMS.map((p, i) => (
            <Reveal key={p.name} delay={(i % 3) * 70}>
              <a className="card hoverable card-pad plat-card" href={p.url} target="_blank" rel="noopener">
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                  <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})` }}><Icon.award s={22} /></span>
                  <span className={`badge ${p.accent}`}>{L(p.tag)}</span>
                </div>
                <h3 style={{ fontSize: 17, marginTop: 15 }}>{p.name}</h3>
                {p.ar && <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>{p.ar}</div>}
                <p className="muted" style={{ fontSize: 14, marginTop: 9, lineHeight: 1.6 }}>{L(p.desc)}</p>
                <span className="back-link" style={{ marginTop: 14, color: 'var(--accent)', fontWeight: 700 }}>{t('visit')} <Icon.arrow s={15} /></span>
              </a>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div style={{ marginTop: 52 }}>
            <Head eyebrow={t('learn_eyebrow')} title={t('channels_title')} icon="play" />
            <div className="grid g4" style={{ marginTop: 24 }}>
              {LEARN_CHANNELS.map((ch, i) => (
                <a key={ch.name} className="card hoverable card-pad" href={ch.url} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
                  <span style={{ width: 40, height: 40, borderRadius: 11, display: 'grid', placeItems: 'center', background: `color-mix(in srgb, var(--${ch.accent}) 16%, transparent)`, color: `var(--${ch.accent})` }}><Icon.play s={19} /></span>
                  <b style={{ fontSize: 15.5, display: 'block', marginTop: 13 }}>{ch.name}</b>
                  <p className="muted" style={{ fontSize: 13.5, marginTop: 7, lineHeight: 1.6 }}>{L(ch.desc)}</p>
                </a>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== innovation glossary (EN ⇄ AR) ===== */
function Glossary({ t, L }) {
  const [g, setG] = React.useState('all');
  const [q, setQ] = React.useState('');
  const needle = q.trim().toLowerCase();
  const list = INNOVATION_TERMS.filter(x =>
    (g === 'all' || x.group === g) &&
    (!needle || x.en.toLowerCase().includes(needle) || x.ar.includes(q.trim()))
  );
  return (
    <section className="section">
      <div className="wrap">
        <Reveal><Head eyebrow={t('terms_eyebrow')} title={t('terms_title')} sub={t('terms_sub')} icon="hash" /></Reveal>
        <Reveal>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap', marginTop: 26 }}>
            <div className="tabs">
              {TERM_GROUPS.map(x => (
                <button key={x.id} className={`tab ${g === x.id ? 'on' : ''}`} onClick={() => setG(x.id)}>{L(x.label)}</button>
              ))}
            </div>
            <input className="input" style={{ maxWidth: 260 }} value={q} onChange={e => setQ(e.target.value)} placeholder={t('search_term')} />
          </div>
        </Reveal>
        {list.length === 0 ? (
          <p className="muted center" style={{ padding: '30px 0' }}>{t('no_results')}</p>
        ) : (
          <div className="grid g2" style={{ marginTop: 26 }}>
            {list.map((x, i) => (
              <Reveal key={x.en} delay={Math.min(i, 6) * 45}>
                <div className="card card-pad term-card">
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
                    <b className="term-en" dir="ltr">{x.en}</b>
                    <span className="term-ar">{x.ar}</span>
                  </div>
                  <p className="muted" style={{ fontSize: 14, marginTop: 9, lineHeight: 1.65 }}>{L(x.def)}</p>
                </div>
              </Reveal>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { CoursePromo, LearningHub, Glossary });