// New content sections — Why us, Bundles, Certifications, Numbers, Roadmap,
// FAQ, inClass deep-dive modal. All bilingual via window.useI18n.

const { useI18n } = window;

// ──────────────────────────── WHY US ────────────────────────────
function WhyUs() {
  const { t } = useI18n();
  const items = t('why.items');
  return (
    <section className="shell whyus" id="why">
      <div className="section-head">
        <div>
          <div className="eyebrow">{t('why.eyebrow')}</div>
          <h2 className="section-title">{t('why.title')}</h2>
        </div>
        <div className="section-sub">{t('why.sub')}</div>
      </div>
      <div className="why-grid">
        {items.map((it) => (
          <div className="why-card" key={it.k}>
            <span className="why-num">{it.k}</span>
            <h3 className="why-t">{it.t}</h3>
            <p className="why-d">{it.d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// ──────────────────────────── BUNDLES ────────────────────────────
function Bundles() {
  const { t } = useI18n();
  const items = t('bundles.items');
  const [active, setActive] = React.useState(0);
  const cur = items[active];

  return (
    <section className="shell bundles" id="bundles">
      <div className="section-head">
        <div>
          <div className="eyebrow">{t('bundles.eyebrow')}</div>
          <h2 className="section-title">{t('bundles.title')}</h2>
        </div>
        <div className="section-sub">{t('bundles.sub')}</div>
      </div>

      <div className="bundle-tabs">
        {items.map((b, i) => (
          <button
            key={b.id}
            className={`bundle-tab ${i === active ? 'active' : ''}`}
            onClick={() => setActive(i)}
          >
            <span className="bt-tag">{b.tag}</span>
            <span className="bt-nm">{b.nm}</span>
          </button>
        ))}
      </div>

      <div className="bundle-stage" key={cur.id}>
        <div className="bundle-meta">
          <div className="bm-tag">{cur.tag}</div>
          <h3 className="bm-title">{cur.nm}</h3>
          <p className="bm-desc">{cur.desc}</p>
          <div className="bm-fit">{cur.fit}</div>
        </div>
        <div className="bundle-parts">
          <div className="bp-head">
            <span>WHAT'S INCLUDED</span>
            <span className="bp-count">{cur.parts.length}</span>
          </div>
          <ol className="bp-list">
            {cur.parts.map((p, i) => (
              <li key={i}>
                <span className="bp-num">{String(i + 1).padStart(2, '0')}</span>
                <span className="bp-txt">{p}</span>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────── CERTIFICATIONS ────────────────────────────
function Certs() {
  const { t } = useI18n();
  const items = t('certs.items');
  return (
    <section className="shell certs">
      <div className="section-head">
        <div>
          <div className="eyebrow">{t('certs.eyebrow')}</div>
          <h2 className="section-title">{t('certs.title')}</h2>
        </div>
        <div className="section-sub">{t('certs.sub')}</div>
      </div>
      <div className="cert-grid">
        {items.map((c) => (
          <div className="cert-card" key={c.k}>
            <div className="cert-shield">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                <path d="M9 12l2 2 4-4"/>
              </svg>
            </div>
            <div className="cert-k">{c.k}</div>
            <div className="cert-d">{c.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ──────────────────────────── NUMBERS (PeopleLink global stats) ──────────
function Numbers() {
  const { t } = useI18n();
  const items = t('numbers.items');
  return (
    <section className="numbers">
      <div className="shell">
        <div className="section-head numbers-head">
          <div>
            <div className="eyebrow">{t('numbers.eyebrow')}</div>
            <h2 className="section-title">{t('numbers.title')}</h2>
          </div>
        </div>
        <div className="numbers-grid">
          {items.map((n, i) => (
            <div className="cell" key={i}>
              <span className="tag">{String(i + 1).padStart(2, '0')}</span>
              <div className="big">{n.k}</div>
              <div className="lbl">{n.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────── ROADMAP ────────────────────────────
function Roadmap() {
  const { t } = useI18n();
  const items = t('roadmap.items');
  return (
    <section className="shell roadmap">
      <div className="section-head">
        <div>
          <div className="eyebrow">{t('roadmap.eyebrow')}</div>
          <h2 className="section-title">{t('roadmap.title')}</h2>
        </div>
        <div className="section-sub">{t('roadmap.sub')}</div>
      </div>
      <ol className="roadmap-list">
        {items.map((it) => (
          <li className="rm-step" key={it.p}>
            <div className="rm-rail">
              <span className="rm-dot"></span>
            </div>
            <div className="rm-body">
              <span className="rm-num">{it.p}</span>
              <h3 className="rm-t">{it.k}</h3>
              <p className="rm-d">{it.d}</p>
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}

// ──────────────────────────── FAQ ────────────────────────────
function FAQ() {
  const { t } = useI18n();
  const items = t('faq.items');
  const [open, setOpen] = React.useState(0);
  return (
    <section className="shell faq" id="faq">
      <div className="section-head">
        <div>
          <div className="eyebrow">{t('faq.eyebrow')}</div>
          <h2 className="section-title">{t('faq.title')}</h2>
        </div>
      </div>
      <div className="faq-list">
        {items.map((it, i) => (
          <div className={`faq-item ${i === open ? 'open' : ''}`} key={i}>
            <button className="faq-q" onClick={() => setOpen(i === open ? -1 : i)}>
              <span className="fq-num">{String(i + 1).padStart(2, '0')}</span>
              <span className="fq-text">{it.q}</span>
              <span className="fq-mark">{i === open ? '−' : '+'}</span>
            </button>
            {i === open && (
              <div className="faq-a"><p>{it.a}</p></div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

// ──────────────────────────── inClass DEEP DIVE MODAL ─────────────────────
function InClassModal({ onClose, onContact }) {
  const { t } = useI18n();
  const pillars = t('inclass_dive.pillars');
  const features = t('inclass_dive.features');

  React.useEffect(() => {
    const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onEsc);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onEsc);
      document.body.style.overflow = prev;
    };
  }, [onClose]);

  return (
    <div className="ic-overlay" onClick={onClose} role="dialog" aria-modal="true">
      <div className="ic-modal" onClick={(e) => e.stopPropagation()}>
        <button className="ic-close" onClick={onClose} aria-label="Close">×</button>

        <header className="ic-head">
          <div className="ic-eyebrow">{t('inclass_dive.eyebrow')}</div>
          <h2 className="ic-title">{t('inclass_dive.title')}</h2>
          <p className="ic-sub">{t('inclass_dive.sub')}</p>
        </header>

        <section className="ic-pillars">
          {pillars.map((p, i) => (
            <div className="ic-pillar" key={i}>
              <span className="ic-p-num">0{i + 1}</span>
              <h3 className="ic-p-k">{p.k}</h3>
              <p className="ic-p-d">{p.d}</p>
            </div>
          ))}
        </section>

        <section className="ic-features">
          <div className="ic-features-h">FEATURES</div>
          <ul className="ic-features-list">
            {features.map((f, i) => (
              <li key={i}>
                <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 8l3 3 7-7"/>
                </svg>
                <span>{f}</span>
              </li>
            ))}
          </ul>
        </section>

        <footer className="ic-foot">
          <button className="btn btn-ghost" onClick={onClose}>{t('inclass_dive.cta_back')}</button>
          <button className="btn btn-primary" onClick={() => { onClose(); onContact(); }}>
            {t('inclass_dive.cta_request')} <span className="arrow">→</span>
          </button>
        </footer>
      </div>
    </div>
  );
}

Object.assign(window, { WhyUs, Bundles, Certs, Numbers, Roadmap, FAQ, InClassModal });