// Presence page. Programs page removed. English only.
function PresencePage({ onNav }) {
  const D = window.GB_DATA;
  const monthIdx = (m) => {
    const map = { January:1, February:2, March:3, April:4, May:5, June:6, July:7, August:8, September:9, October:10, November:11, December:12 };
    return map[m] || 0;
  };
  const sorted = [...D.presence].sort((a, b) => {
    const dy = b.year.localeCompare(a.year);
    return dy !== 0 ? dy : monthIdx(b.date.en) - monthIdx(a.date.en);
  });
  const byYear = {};
  sorted.forEach(p => { (byYear[p.year] ||= []).push(p); });
  const years = Object.keys(byYear).sort().reverse();
  return (
    <div>
      <section style={{ padding: '80px var(--gb-gx) 80px' }}>
        <h1 className="gb-hero-h1">
          Engagement
        </h1>
        <div style={{ fontSize: 17, lineHeight: 1.7, color: GB_TOKENS.ink2, maxWidth: 820, marginTop: 40 }}>
          From the UN General Assembly to COP30, from Tsinghua to Hainan, from the Paris Agreement to the Club of Rome — the Institute turns commitments into visible work, across international partnerships, academic dialogues, and industry convenings.
        </div>
      </section>

      {years.map(y => (
        <section key={y} style={{ padding: '64px var(--gb-gx)', borderTop: `1px solid ${GB_TOKENS.line}` }}>
          <div className="gb-year">
            <div className="gb-serif gb-year-num" style={{ letterSpacing: '-0.04em', color: GB_TOKENS.ink }}>
              {y}
            </div>
            <div>
              {byYear[y].map((p, i) => (
                <PresenceRow key={p.id} p={p} first={i === 0} />
              ))}
            </div>
          </div>
        </section>
      ))}
    </div>
  );
}

function PresenceRow({ p, first }) {
  const [open, setOpen] = React.useState(false);
  return (
    <article style={{ borderTop: first ? 'none' : `1px solid ${GB_TOKENS.line2}`, padding: '36px 0' }}>
      <div className="gb-prow" onClick={() => setOpen(!open)}>
        <div className="gb-mono gb-prow-date" style={{ color: GB_TOKENS.muted, paddingTop: 8 }}>{p.date.en}</div>
        <div>
          <div className="gb-mono gb-prow-date-inline" style={{ color: GB_TOKENS.muted }}>{p.date.en}</div>
          <div className="gb-serif" style={{ fontSize: 'clamp(22px, 3.4vw, 30px)', letterSpacing: '-0.015em', lineHeight: 1.2 }}>{p.title.en}</div>
          <div className="gb-mono" style={{ color: GB_TOKENS.sage, marginTop: 14 }}>
            {p.attribution} at {p.place.en}
          </div>
        </div>
        <div className="gb-prow-preview" style={{ fontSize: 13.5, color: GB_TOKENS.ink2, lineHeight: 1.6, paddingTop: 8 }}>
          {!open && p.body.en.slice(0, 90) + '…'}
        </div>
        <div style={{ fontSize: 22, color: GB_TOKENS.muted, textAlign: 'right' }}>{open ? '−' : '+'}</div>
      </div>
      {open && (
        <div className="gb-pexp">
          <div className="gb-pexp-spacer" />
          <div className="gb-pexp-body">
            <div className="img-ph" style={{ aspectRatio: '4/3' }}>
              <img src={window.__img(p.image)} alt="" />
            </div>
            <div>
              <div style={{ fontSize: 15, lineHeight: 1.7, color: GB_TOKENS.ink2 }}>
                {p.body.en}
              </div>
              {p.video && (
                <a className="gb-btn" href={p.video} target="_blank" rel="noopener noreferrer"
                   style={{ marginTop: 22 }}>
                  Watch interview ↗
                </a>
              )}
            </div>
          </div>
        </div>
      )}
    </article>
  );
}

Object.assign(window, { PresencePage });