// Home page — English only. No Five Programs section, no video slots.
const { useState, useEffect, useRef } = React;

function HomePage({ onNav }) {
  const D = window.GB_DATA;
  const [scroll, setScroll] = useState(0);
  useEffect(() => {
    const f = () => setScroll(window.scrollY);
    window.addEventListener('scroll', f);
    return () => window.removeEventListener('scroll', f);
  }, []);

  return (
    <div>
      {/* HERO */}
      <section style={{ position: 'relative', height: '100vh', minHeight: 'min(720px, 88vh)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0 }}>
          <img
            src={(window.__resources && window.__resources.hero) || "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=55"}
            alt=""
            style={{
              width: '100%', height: '100%', objectFit: 'cover',
              filter: 'saturate(0.6) contrast(1.05) brightness(0.92)',
              transform: `scale(${1 + scroll * 0.0002}) translateY(${scroll * 0.15}px)`,
              transition: 'transform .1s linear',
            }}
          />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(26,42,68,0.32) 0%, rgba(26,42,68,0.18) 40%, rgba(250,250,249,0.78) 100%)',
          }} />
        </div>
        <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: '0 var(--gb-gx) 72px' }}>
          <h1 className="gb-serif" style={{
            fontSize: 'clamp(34px, 9vw, 148px)', lineHeight: 0.96, letterSpacing: '-0.025em',
            color: '#fff', margin: 0, maxWidth: 1400, fontWeight: 400, textWrap: 'balance',
          }}>
            Where the next sustainability <br/>leaders begin
          </h1>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 56, flexWrap: 'wrap', gap: 32 }}>
            <div style={{ color: '#fff', fontSize: 17, lineHeight: 1.55, maxWidth: 540, opacity: 0.92 }}>
              A global platform connecting sustainability education, emerging-market employers, and early-stage innovation across the Global South.
            </div>
            <div style={{ display: 'flex', gap: 14 }}>
              <button className="gb-btn" style={{ borderColor: '#fff', color: '#fff' }}
                onMouseEnter={(e) => { e.currentTarget.style.background='#fff'; e.currentTarget.style.color=GB_TOKENS.ink; }}
                onMouseLeave={(e) => { e.currentTarget.style.background='transparent'; e.currentTarget.style.color='#fff'; }}
                onClick={() => onNav('about')}>
                About the Institute ↗
              </button>
              <button className="gb-btn" style={{ borderColor: 'rgba(255,255,255,0.5)', color: '#fff' }}
                onClick={() => onNav('presence')}>
                Programs
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* PRESENCE teaser */}
      <PresenceStrip
        presence={['shanghai-climate-week','cop30-china-pavilion','karen-fii','club-of-rome']
          .map(id => D.presence.find(p => p.id === id))
          .filter(Boolean)}
        onNav={onNav} />

      {/* CTA */}
      <CTABanner />
    </div>
  );
}

function PresenceStrip({ presence, onNav }) {
  return (
    <section style={{ padding: '100px var(--gb-gx) 120px', borderTop: `1px solid ${GB_TOKENS.line2}` }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 56, gap: 32, flexWrap: 'wrap' }}>
        <h2 className="gb-serif" style={{ fontSize: 'clamp(30px, 4.5vw, 72px)', lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0, maxWidth: 1000 }}>
          From COP30 to the UN General Assembly, our record shows we always deliver
        </h2>
        <button className="gb-btn" onClick={() => onNav('presence')}>
          All engagements →
        </button>
      </div>
      <div className="gb-cardgrid gb-cardgrid-4">
        {presence.map((p, i) => (
          <div key={i} style={{ background: GB_TOKENS.bg, padding: '28px 26px 32px', display: 'flex', flexDirection: 'column', gap: 18, cursor: 'pointer' }}
               onClick={() => onNav('presence')}>
            <div className="img-ph" style={{ aspectRatio: '4/3' }}>
              <img src={window.__img(p.image)} alt="" />
            </div>
            <div className="gb-mono" style={{ color: GB_TOKENS.sage }}>{p.attribution} at {p.place.en}</div>
            <div className="gb-serif" style={{ fontSize: 22, lineHeight: 1.2, letterSpacing: '-0.01em' }}>{p.title.en}</div>
            <div style={{ fontSize: 13, lineHeight: 1.55, color: GB_TOKENS.ink2 }}>
              {p.body.en.slice(0, 150)}…
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CTABanner() {
  return (
    <section style={{ padding: 'clamp(80px, 12vw, 160px) var(--gb-gx)', background: GB_TOKENS.ink, color: GB_TOKENS.bg }}>
      <div className="gb-serif" style={{ fontSize: 'clamp(40px, 6vw, 108px)', lineHeight: 0.98, letterSpacing: '-0.025em', maxWidth: 1280 }}>
        We are building a coalition of sustainability schools — starting now.
      </div>
      <div style={{ display: 'flex', gap: 16, marginTop: 56, flexWrap: 'wrap' }}>
        <a className="gb-btn" style={{ borderColor: GB_TOKENS.bg, color: GB_TOKENS.bg }}
          href={window.GB_PARTNER_URL} target="_blank" rel="noopener noreferrer"
          onMouseEnter={(e) => { e.currentTarget.style.background=GB_TOKENS.bg; e.currentTarget.style.color=GB_TOKENS.ink; }}
          onMouseLeave={(e) => { e.currentTarget.style.background='transparent'; e.currentTarget.style.color=GB_TOKENS.bg; }}>
          Partner With Us ↗
        </a>
        <a className="gb-btn" style={{ borderColor: 'rgba(250,250,249,0.4)', color: GB_TOKENS.bg }}
          href={`mailto:${window.GB_CONTACT_EMAIL}`}>
          Email the Institute ↗
        </a>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage });