// About — institutional, English only, no founders feature.
function AboutPage({ onNav }) {
  return (
    <div>
      {/* HEADER */}
      <section style={{ padding: '80px var(--gb-gx) 140px', borderBottom: `1px solid ${GB_TOKENS.line2}` }}>
        <div className="gb-mono" style={{ color: GB_TOKENS.muted, marginBottom: 40 }}>
          About the Institute
        </div>
        <h1 className="gb-hero-h1">
          One bridge between<br/>sustainability and industry
        </h1>
        <div className="gb-split" style={{ marginTop: 80 }}>
          <div className="gb-mono" style={{ color: GB_TOKENS.muted }}>
            Institutional brief
          </div>
          <div style={{ fontSize: 20, lineHeight: 1.65, color: GB_TOKENS.ink2, maxWidth: 820 }}>
            GreenBridge believes that the global sustainability transition is, first and foremost, a question of people. The world&rsquo;s leading sustainability schools train cross-disciplinary talent. Emerging markets &mdash; across the GCC, Southeast Asia, and the wider Global South &mdash; are scaling green economies at unprecedented speed. Our purpose is to build a durable bridge between them.
          </div>
        </div>
      </section>

      {/* SPREAD IMAGE */}
      <section style={{ padding: '0 var(--gb-gx)' }}>
        <div className="img-ph" style={{ aspectRatio: '16/7', marginTop: -48 }}>
          <img src={(window.__resources && window.__resources.aboutSpread) || "https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=1200&q=55"} alt="" />
        </div>
        <div className="gb-split" style={{ marginTop: 24, paddingBottom: 80 }}>
          <div className="gb-mono" style={{ color: GB_TOKENS.muted }}>
            Areas of work
          </div>
          <div style={{ fontSize: 13, color: GB_TOKENS.muted, maxWidth: 620, lineHeight: 1.7 }}>
            From wetland restoration in the Yellow River Basin to maritime decarbonisation at COP30, GreenBridge&rsquo;s work follows one through-line: infrastructure as the core medium of sustainability resilience, with a new generation of professionals advancing the policy, industry, and capital that make it real.
          </div>
        </div>
      </section>

      {/* CONVICTION BAND */}
      <section style={{ padding: 'clamp(72px, 10vw, 120px) var(--gb-gx)', background: GB_TOKENS.ink, color: GB_TOKENS.bg }}>
        <div className="gb-serif" style={{ fontSize: 'clamp(30px, 4.6vw, 72px)', lineHeight: 1.1, letterSpacing: '-0.02em', maxWidth: 1280 }}>
          Sustainability action is also cultural action. <span style={{ color: 'rgba(250,250,249,0.55)' }}>It is a discipline, a vocation, an identity — and it requires the institutions to match.</span>
        </div>
      </section>

      {/* WHAT WE DO */}
      <section style={{ padding: 'clamp(72px, 10vw, 120px) var(--gb-gx)', borderTop: `1px solid ${GB_TOKENS.line2}` }}>
        <h2 className="gb-serif" style={{ fontSize: 'clamp(36px, 5vw, 80px)', lineHeight: 1.02, letterSpacing: '-0.02em', marginTop: 0, marginBottom: 64, maxWidth: 1000 }}>
          What we do
        </h2>
        <div className="gb-cardgrid gb-cardgrid-3">
          {[
            [
              'Research & Publication',
              'The Institute publishes annual research on the global sustainability talent market, including employer-demand maps, skills gaps, and emerging-market policy mechanisms.',
            ],
            [
              'Convening & Dialogue',
              'The Institute convenes the annual Global Sustainability Talent Forum, bringing universities, employers, policymakers, and sovereign capital together to set industry standards.',
            ],
            [
              'Programs & Translation',
              'The Institute co-designs training, fellowship, and matching programs with partner schools and employers, translating research into measurable industry impact.',
            ],
          ].map(([k, v], i) => (
            <div key={i} style={{ background: GB_TOKENS.bg, padding: '40px 32px' }}>
              <div className="gb-serif" style={{ fontSize: 28, letterSpacing: '-0.015em', lineHeight: 1.15, marginBottom: 16 }}>{k}</div>
              <div style={{ fontSize: 14.5, lineHeight: 1.65, color: GB_TOKENS.ink2 }}>{v}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage });
