// ============================================================
// CHROME — site header + footer (no "Available", "Home" not "Index")
// ============================================================

function SiteHeader({ route, go }) {
  const items = [
    { id: 'home', label: 'Home' },
    { id: 'writing', label: 'Writing' },
    { id: 'about', label: 'About' },
  ];
  const active = (route === 'case') ? 'work' : route;
  const [open, setOpen] = React.useState(false);
  return (
    <header className="site-header">
      <div className="container">
        <button className="brand" onClick={() => go('home')} aria-label="Vivekarasan, home">
          Vivekarasan
        </button>
        <nav className="nav">
          {items.map((it) => (
            <button key={it.id}
              className={`nav-link ${active === it.id ? 'active' : ''}`}
              onClick={() => go(it.id)}>
              {it.label}
            </button>
          ))}
          <button className="nav-link nav-contact" onClick={() => go('home', 'contact')}>Contact</button>
          <ThemeToggle />
        </nav>
        <button className="nav-toggle" aria-label="Menu" onClick={() => setOpen((o) => !o)}>
          <Icon name={open ? 'x' : 'menu'} size={20} />
        </button>
      </div>
      {open && (
        <div className="nav-mobile">
          {items.map((it) => (
            <button key={it.id} className={`nav-link ${active === it.id ? 'active' : ''}`}
              onClick={() => { setOpen(false); go(it.id); }}>{it.label}</button>
          ))}
          <button className="nav-link" onClick={() => { setOpen(false); go('home', 'contact'); }}>Contact</button>
          <div className="nav-mobile-foot"><ThemeToggle /></div>
        </div>
      )}
    </header>
  );
}

function SiteFooter({ go }) {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <h3>Bringing clarity to complex product decisions.</h3>
            <div style={{ marginTop: 'var(--space-5)' }}>
              <a className="btn btn-secondary" href={`mailto:${PROFILE.email}`}>
                Start a conversation <Icon name="arrow-up-right" size={16} />
              </a>
            </div>
          </div>
          <div className="footer-col">
            <div className="ft-label">Site</div>
            <ul>
              <li><a onClick={() => go('work')}>Selected work</a></li>
              <li><a onClick={() => go('writing')}>Writing</a></li>
              <li><a onClick={() => go('about')}>About</a></li>
              <li><a onClick={() => go('home', 'contact')}>Contact</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <div className="ft-label">Elsewhere</div>
            <ul>
              <li><a href={PROFILE.linkedin} target="_blank" rel="noopener">LinkedIn</a></li>
              <li><a href={`mailto:${PROFILE.email}`}>Email</a></li>
              <li><a href={PROFILE.substack} target="_blank" rel="noopener">Quiet Signals</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-base">
          <span>© 2026 Vivekarasan</span>
          <span>Built on judgement, not templates</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { SiteHeader, SiteFooter });