const NAV_LINKS = [
  { k: 'research',    label: 'Research' },
  { k: 'programs',    label: 'Programs' },
  { k: 'olympiad',    label: 'AI Olympiad' },
  { k: 'convenings',  label: 'Convenings' },
  { k: 'about',       label: 'About' },
  { k: 'press',       label: 'Press' },
];

const Header = ({ route, setRoute }) => {
  const [open, setOpen] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(false);
  React.useEffect(() => {
    const m = () => setIsMobile(window.innerWidth <= 860);
    m(); window.addEventListener('resize', m);
    return () => window.removeEventListener('resize', m);
  }, []);
  React.useEffect(() => { setOpen(false); }, [route]);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 30,
      padding: isMobile ? '14px 20px' : '18px 40px',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      borderBottom: '1px solid var(--rule)',
      background: 'rgba(245,241,234,0.92)',
      backdropFilter: 'blur(6px)',
      WebkitBackdropFilter: 'blur(6px)',
    }}>
      <div
        onClick={() => setRoute('home')}
        style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }}
      >
        <NexusMark size={26} />
        <span style={{ fontFamily: 'var(--serif)', fontSize: 18, letterSpacing: '-0.01em' }}>
          BRAIN <em style={{ fontStyle: 'italic', color: 'var(--ink-soft)' }}>Foundation</em>
        </span>
      </div>
      {!isMobile && (
        <nav style={{
          display: 'flex', gap: 24, alignItems: 'center',
          fontFamily: 'var(--mono)', fontSize: 11,
          letterSpacing: '0.12em', textTransform: 'uppercase',
        }}>
          {NAV_LINKS.map(l => (
            <a key={l.k}
               onClick={() => setRoute(l.k)}
               style={{
                 color: route === l.k ? 'var(--ink)' : 'var(--ink-soft)',
                 cursor: 'pointer', textDecoration: 'none',
                 transition: 'color 120ms cubic-bezier(0.2,0.7,0.2,1)',
                 borderBottom: route === l.k ? '1px solid var(--accent)' : '1px solid transparent',
                 paddingBottom: 3,
               }}>{l.label}</a>
          ))}
          <Button variant="primary" style={{ padding: '8px 14px', fontSize: 11 }} onClick={() => setRoute('support')}>
            Support us
          </Button>
        </nav>
      )}
      {isMobile && (
        <button onClick={() => setOpen(o => !o)} aria-label="Menu" style={{
          width: 42, height: 42, background: 'transparent', border: '1px solid var(--rule)',
          display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 5, cursor: 'pointer', padding: 0,
        }}>
          <span style={{ width: 18, height: 1.5, background: 'var(--ink)', transform: open ? 'translateY(3px) rotate(45deg)' : 'none', transition: 'transform 180ms' }}/>
          <span style={{ width: 18, height: 1.5, background: 'var(--ink)', opacity: open ? 0 : 1, transition: 'opacity 120ms' }}/>
          <span style={{ width: 18, height: 1.5, background: 'var(--ink)', transform: open ? 'translateY(-3px) rotate(-45deg)' : 'none', transition: 'transform 180ms' }}/>
        </button>
      )}
      {isMobile && open && (
        <div style={{
          position: 'fixed', top: 68, left: 0, right: 0, bottom: 0, zIndex: 29,
          background: 'var(--paper)', padding: '32px 24px',
          borderTop: '1px solid var(--rule)', overflowY: 'auto',
          display: 'flex', flexDirection: 'column', gap: 2,
        }}>
          {NAV_LINKS.map(l => (
            <a key={l.k} onClick={() => setRoute(l.k)} style={{
              padding: '20px 4px', borderBottom: '1px solid var(--rule)', cursor: 'pointer',
              fontFamily: 'var(--serif)', fontSize: 26, letterSpacing: '-0.01em',
              color: route === l.k ? 'var(--accent)' : 'var(--ink)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <span>{l.label}</span>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--ink-soft)' }}>→</span>
            </a>
          ))}
          <div style={{ marginTop: 28 }}>
            <Button variant="accent" onClick={() => setRoute('support')} style={{ width: '100%', justifyContent: 'center' }}>Support us</Button>
          </div>
          <div style={{ marginTop: 'auto', paddingTop: 32, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>
            Kupondole, Lalitpur · Nepal
          </div>
        </div>
      )}
    </header>
  );
};

const Footer = ({ setRoute }) => (
  <footer style={{ padding: '80px 40px 40px', background: 'var(--ink)', color: 'var(--paper)', marginTop: 0 }}>
    <div style={{ maxWidth: 1160, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '2.2fr 1fr 1fr 1fr 1fr', gap: 40 }} className="footer-grid">
        <div>
          <NexusMark size={40} knockout />
          <div style={{
            marginTop: 22,
            fontFamily: 'var(--serif)', fontSize: 28, lineHeight: 1.15,
            letterSpacing: '-0.015em', fontWeight: 300, maxWidth: 360,
          }}>
            An independent nonprofit <em style={{ fontStyle: 'italic', color: 'var(--accent-soft)' }}>stewarding AI in the public interest</em> — from Kathmandu, for the world.
          </div>
          <div style={{
            marginTop: 28, fontFamily: 'var(--mono)', fontSize: 11,
            letterSpacing: '0.1em', textTransform: 'uppercase',
            color: 'var(--paper-200)', lineHeight: 1.8,
          }}>
            Registered 2026<br/>
            Reg. No. 4821 · Nepal<br/>
            Kupondole, Lalitpur
          </div>
        </div>
        {[
          ['Work', [
            ['Research', 'research'],
            ['Programs', 'programs'],
            ['AI Olympiad', 'olympiad'],
            ['Convenings', 'convenings'],
          ]],
          ['Foundation', [
            ['About', 'about'],
            ['Team', 'team'],
            ['Partners', 'partners'],
            ['Careers', 'careers'],
          ]],
          ['Resources', [
            ['Press', 'press'],
            ['Newsletter', 'press'],
            ['Reports', 'research'],
            ['Contact', 'contact'],
          ]],
          ['Support', [
            ['Donate', 'support'],
            ['Fellowships', 'programs'],
            ['Partner with us', 'partners'],
            ['Volunteer', 'contact'],
          ]],
        ].map(([h, items]) => (
          <div key={h}>
            <h5 style={{
              fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em',
              textTransform: 'uppercase', color: 'var(--accent-soft)',
              margin: '0 0 18px', fontWeight: 500,
            }}>{h}</h5>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, fontSize: 13, lineHeight: 2.0, color: 'var(--paper-200)' }}>
              {items.map(([label, k]) => (
                <li key={label}>
                  <a onClick={() => setRoute && setRoute(k)} style={{ cursor: 'pointer', textDecoration: 'none', color: 'inherit' }}>
                    {label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* Newsletter */}
      <div style={{
        marginTop: 64, padding: '28px 0', borderTop: '1px solid rgba(245,241,234,0.15)',
        borderBottom: '1px solid rgba(245,241,234,0.15)',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center',
      }} className="footer-newsletter">
        <div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent-soft)', marginBottom: 10 }}>The Quarterly</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 24, lineHeight: 1.2, color: 'var(--paper)' }}>
            Four letters a year — <em style={{ fontStyle: 'italic', color: 'var(--accent-soft)' }}>no more, no less.</em>
          </div>
        </div>
        <form onSubmit={e => e.preventDefault()} style={{ display: 'flex', gap: 8 }}>
          <input type="email" placeholder="your@email.address" style={{
            flex: 1, padding: '12px 14px', background: 'transparent',
            border: '1px solid rgba(245,241,234,0.25)', borderRadius: 2,
            color: 'var(--paper)', fontFamily: 'var(--sans)', fontSize: 13,
          }}/>
          <Button variant="accent">Subscribe</Button>
        </form>
      </div>

      <div style={{
        marginTop: 32,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em',
        textTransform: 'uppercase', color: 'var(--paper-200)', opacity: 0.6,
      }} className="footer-legal">
        <span>© BRAIN Foundation · MMXXVI</span>
        <span>Building · Responsible · A.I. · Nexus</span>
        <span style={{ display: 'flex', gap: 20 }}>
          <a style={{ cursor: 'pointer' }}>Privacy</a>
          <a style={{ cursor: 'pointer' }}>Terms</a>
          <a style={{ cursor: 'pointer' }}>RSS</a>
        </span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Header, Footer, NAV_LINKS });