// Shared UI primitives. Cool light-gray palette (Claude-cream removed), no italics anywhere.
const GB = {
  bg: '#f7f7f8',
  bg2: '#ececed',
  bg3: '#dededf',
  ink: '#1a2a44',
  ink2: '#3a4a62',
  muted: '#6b6e72',
  line: 'rgba(26,42,68,0.16)',
  line2: 'rgba(26,42,68,0.08)',
  sage: '#6b7a5a',
  serif: '"Cormorant Garamond", "Source Han Serif SC", "Songti SC", Georgia, serif',
  sans: '"Inter Tight", "PingFang SC", "Noto Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};
window.GB_TOKENS = GB;

if (typeof document !== 'undefined' && !document.getElementById('gb-base')) {
  const s = document.createElement('style');
  s.id = 'gb-base';
  s.textContent = `
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter+Tight:wght@300;400;500;600&family=Noto+Sans+SC:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');

    /* Fluid horizontal gutter — drives every section's left/right padding. */
    .gb-root { --gb-gx: 48px; font-family: ${GB.sans}; color: ${GB.ink}; background: ${GB.bg}; overflow-x: hidden; }
    @media (max-width: 1024px) { .gb-root { --gb-gx: 32px; } }
    @media (max-width: 640px)  { .gb-root { --gb-gx: 18px; } }

    .gb-root * { box-sizing: border-box; font-style: normal !important; }
    .gb-root img, .gb-root video { max-width: 100%; }
    .gb-root em, .gb-root i { font-style: normal !important; }
    .gb-serif { font-family: ${GB.serif}; font-weight: 400; letter-spacing: -0.01em; }
    .gb-mono { font-family: ${GB.mono}; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
    .gb-rule { height: 1px; background: ${GB.line}; width: 100%; }
    .gb-btn { display:inline-flex; align-items:center; gap:10px; padding: 13px 24px;
      border: 1px solid ${GB.ink}; color: ${GB.ink}; font-size: 13px; letter-spacing: 0.04em;
      text-transform: uppercase; cursor: pointer; background: transparent; transition: all .2s;
      text-decoration: none; font-family: ${GB.sans}; }
    .gb-btn:hover { background: ${GB.ink}; color: ${GB.bg}; }
    .gb-link { color: ${GB.ink}; text-decoration: none; border-bottom: 1px solid ${GB.line}; padding-bottom: 1px; }
    .gb-link:hover { border-bottom-color: ${GB.ink}; }
    .img-ph { background: ${GB.bg2}; position: relative; overflow: hidden; }
    .img-ph img { width: 100%; height: 100%; object-fit: cover; display: block;
      filter: saturate(0.92) contrast(1.0); transition: transform 1.2s cubic-bezier(.2,.7,.3,1); }
    .img-ph:hover img { transform: scale(1.03); }
    .hscroll { scrollbar-width: thin; scrollbar-color: ${GB.line} transparent; }
    .hscroll::-webkit-scrollbar { height: 2px; }
    .hscroll::-webkit-scrollbar-thumb { background: ${GB.line}; }
    .marquee-wrap { overflow: hidden; }
    .marquee { animation: gb-marquee 80s linear infinite; }
    @keyframes gb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .nav-link { cursor: pointer; font-size: 13px; letter-spacing: 0.02em; color: ${GB.ink2}; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: all .15s; text-decoration: none; }
    .nav-link:hover { color: ${GB.ink}; }
    .nav-link.active { color: ${GB.ink}; border-bottom-color: ${GB.ink}; }

    /* Hero h1 — lang-aware sizing so EN's wide display type doesn't crush CN. */
    .gb-hero-h1 { font-family: ${GB.serif}; font-weight: 400; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
    .gb-root[data-lang="EN"] .gb-hero-h1 { font-size: clamp(36px, 8.6vw, 156px); line-height: 0.96; letter-spacing: -0.03em; }
    .gb-root[data-lang="ZH"] .gb-hero-h1 { font-size: clamp(32px, 6vw, 104px); line-height: 1.18; letter-spacing: -0.01em; }
    .gb-root[data-lang="ZH"] .gb-hero-h1 br { line-height: inherit; }

    /* ---- Responsive layout primitives ---- */
    /* 1fr / 2fr label+body split that stacks on narrow screens */
    .gb-split { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; }
    @media (max-width: 900px) { .gb-split { grid-template-columns: 1fr; gap: 20px; } }
    @media (max-width: 900px) { .gb-legal-aside { position: static !important; } }

    /* NAV */
    .gb-nav { display: flex; align-items: center; justify-content: space-between;
      padding: 22px var(--gb-gx); border-bottom: 1px solid ${GB.line2};
      position: sticky; top: 0; background: ${GB.bg}f0; backdrop-filter: blur(8px); z-index: 50; }
    .gb-nav-links { display: flex; gap: 36px; }
    .gb-nav-cta { display: inline-flex; }
    .gb-burger { display: none; flex-direction: column; gap: 5px; width: 30px; height: 22px;
      background: transparent; border: none; cursor: pointer; padding: 0; justify-content: center; }
    .gb-burger span { display: block; height: 1.5px; width: 100%; background: ${GB.ink}; transition: transform .25s, opacity .2s; }
    .gb-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .gb-burger.open span:nth-child(2) { opacity: 0; }
    .gb-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    .gb-drawer { display: none; }
    @media (max-width: 760px) {
      .gb-nav-links { display: none; }
      .gb-nav-cta { display: none; }
      .gb-burger { display: flex; }
      .gb-drawer { display: flex; flex-direction: column; gap: 4px;
        position: absolute; top: 100%; left: 0; right: 0; background: ${GB.bg};
        border-bottom: 1px solid ${GB.line}; padding: 8px var(--gb-gx) 24px; }
      .gb-drawer a { padding: 16px 0; font-size: 18px; color: ${GB.ink}; text-decoration: none;
        border-bottom: 1px solid ${GB.line2}; cursor: pointer; }
      .gb-drawer a:last-child { border-bottom: none; }
    }

    /* FOOTER grid */
    .gb-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; }
    @media (max-width: 980px) { .gb-footer-grid { grid-template-columns: 1fr 1fr; gap: 44px 40px; } }
    @media (max-width: 560px) { .gb-footer-grid { grid-template-columns: 1fr; gap: 36px; } }

    /* PROGRAMS — year block */
    .gb-year { display: grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: start; }
    .gb-year-num { font-size: 140px; line-height: 0.9; position: sticky; top: 100px; }
    @media (max-width: 900px) {
      .gb-year { grid-template-columns: 1fr; gap: 4px; }
      .gb-year-num { font-size: 64px; position: static; }
    }

    /* PROGRAMS — collapsed row header */
    .gb-prow { display: grid; grid-template-columns: 120px 1fr 200px 48px; gap: 36px; align-items: start; cursor: pointer; }
    .gb-prow-date-inline { display: none; }
    @media (max-width: 900px) {
      .gb-prow { grid-template-columns: 1fr 32px; gap: 14px; }
      .gb-prow-date, .gb-prow-preview { display: none; }
      .gb-prow-date-inline { display: block; margin-bottom: 10px; }
    }

    /* PROGRAMS — expanded panel */
    .gb-pexp { display: grid; grid-template-columns: 120px 1fr 248px; gap: 36px; margin-top: 28px; }
    .gb-pexp-body { display: grid; grid-template-columns: 5fr 6fr; gap: 32px; }
    @media (max-width: 900px) {
      .gb-pexp { grid-template-columns: 1fr; gap: 0; }
      .gb-pexp-spacer { display: none; }
      .gb-pexp-body { grid-template-columns: 1fr; gap: 18px; }
    }

    /* Auto-fitting card grid (Home presence strip, About 'what we do') */
    .gb-cardgrid { display: grid; gap: 1px; background: ${GB.line2}; }
    .gb-cardgrid-4 { grid-template-columns: repeat(4, 1fr); }
    .gb-cardgrid-3 { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 1024px) { .gb-cardgrid-4 { grid-template-columns: repeat(2, 1fr); } .gb-cardgrid-3 { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px)  { .gb-cardgrid-4, .gb-cardgrid-3 { grid-template-columns: 1fr; } }
  `;
  document.head.appendChild(s);
}

const PARTNER_URL = 'https://hz7617rhzx.feishu.cn/share/base/form/shrcnGP5ukjrQ4ZcnZeRCf1V5vd';
const CONTACT_EMAIL = 'contact@greenbridgeinstitute.org';
window.GB_PARTNER_URL = PARTNER_URL;
window.GB_CONTACT_EMAIL = CONTACT_EMAIL;

// --- NAV ---
const { useState: useNavState } = React;
function Nav({ current = 'home', onNav }) {
  const [open, setOpen] = useState(false);
  const items = [
    { id: 'home', en: 'Home' },
    { id: 'about', en: 'About' },
    { id: 'presence', en: 'Programs' },
  ];
  const go = (id) => { setOpen(false); onNav && onNav(id); };
  return (
    <div className="gb-nav">
      <div style={{ cursor: 'pointer' }} onClick={() => go('home')}>
        <GBMark />
      </div>
      <nav className="gb-nav-links">
        {items.map((it) => (
          <a key={it.id} onClick={() => go(it.id)}
             className={'nav-link' + (current === it.id ? ' active' : '')}>
            {it.en}
          </a>
        ))}
      </nav>
      <a className="gb-mono gb-nav-cta" style={{ color: GB.ink, textDecoration: 'none', alignItems: 'center' }} href={PARTNER_URL} target="_blank" rel="noopener noreferrer">
        Partner With Us →
      </a>
      <button className={'gb-burger' + (open ? ' open' : '')} aria-label="Menu" onClick={() => setOpen(!open)}>
        <span></span><span></span><span></span>
      </button>
      {open && (
        <div className="gb-drawer">
          {items.map((it) => (
            <a key={it.id} onClick={() => go(it.id)}
               style={{ color: current === it.id ? GB.ink : GB.ink2 }}>{it.en}</a>
          ))}
          <a href={PARTNER_URL} target="_blank" rel="noopener noreferrer">Partner With Us →</a>
        </div>
      )}
    </div>
  );
}

function GBMark({ color }) {
  const c = color || GB.ink;
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, color: c, fontFamily: GB.serif }}>
      <div style={{ fontSize: 30, fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 1 }}>GB</div>
      <div style={{ width: 1, height: 22, background: c, opacity: 0.4, alignSelf: 'center' }} />
      <div style={{
        fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
        fontFamily: GB.sans, fontWeight: 500, paddingBottom: 2,
      }}>
        GreenBridge<br/>Institute
      </div>
    </div>
  );
}

function SectionHead({ kicker, title, lead, pad = '120px var(--gb-gx) 48px' }) {
  return (
    <div className="gb-split" style={{ padding: pad, gridTemplateColumns: '120px 1fr', gap: 48, borderTop: `1px solid ${GB.line2}` }}>
      <div className="gb-mono" style={{ color: GB.muted }}>{kicker}</div>
      <div>
        <div className="gb-serif" style={{ fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1.02, letterSpacing: '-0.02em', maxWidth: 900 }}>
          {title}
        </div>
        {lead && <div style={{ marginTop: 28, fontSize: 17, lineHeight: 1.55, color: GB.ink2, maxWidth: 640 }}>{lead}</div>}
      </div>
    </div>
  );
}

// --- FOOTER ---
function Footer({ onNav }) {
  const D = window.GB_DATA;
  return (
    <footer style={{ marginTop: 0, background: GB.ink, color: GB.bg, padding: '88px var(--gb-gx) 36px' }}>
      <div className="gb-footer-grid" style={{ paddingBottom: 56, borderBottom: '1px solid rgba(250,250,249,0.14)' }}>
        <div>
          <GBMark color={GB.bg} />
          <div className="gb-serif" style={{ fontSize: 30, lineHeight: 1.15, marginTop: 36, maxWidth: 380, letterSpacing: '-0.015em' }}>
            Where the next sustainability leaders begin
          </div>
        </div>

        <FooterCol title="Institute" items={[
          { label: 'About', onClick: () => onNav('about') },
          { label: 'Programs', onClick: () => onNav('presence') },
        ]} />
        <FooterCol title="Engage" items={[
          { label: 'Partner With Us', href: PARTNER_URL },
          { label: 'Press & Media', href: PARTNER_URL },
          { label: 'Newsletter', href: PARTNER_URL },
        ]} />
        <FooterCol title="Contact" items={[
          { label: D.contact.addr, plain: true },
          { label: CONTACT_EMAIL, href: `mailto:${CONTACT_EMAIL}` },
        ]} />
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 28, fontSize: 12, opacity: 0.6, flexWrap: 'wrap', gap: 16 }}>
        <div>© 2026 GreenBridge Institute. All rights reserved. &nbsp;·&nbsp; Hong Kong &nbsp;·&nbsp; Company Limited by Guarantee</div>
        <div style={{ display: 'flex', gap: 24 }}>
          <a style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }} onClick={() => onNav('terms')}>Terms of Use</a>
          <a style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }} onClick={() => onNav('privacy')}>Privacy Policy</a>
        </div>
      </div>
    </footer>
  );
}
function FooterCol({ title, items }) {
  return (
    <div>
      <div className="gb-mono" style={{ opacity: 0.5, marginBottom: 18 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map((it, i) => (
          <li key={i} style={{ fontSize: it.small ? 12.5 : 14, opacity: it.plain ? 0.8 : 0.9, lineHeight: 1.55 }}>
            {it.plain ? (
              <span>{it.label}</span>
            ) : it.href ? (
              <a href={it.href} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>{it.label}</a>
            ) : (
              <span style={{ cursor: 'pointer' }} onClick={it.onClick}>{it.label}</span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Nav, GBMark, SectionHead, Footer });