// Header: logo lockup + section nav + language switch.
function Header({ view, onNav, t, lang, onLang }) {
  return (
    <header className="c-header" style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '18px var(--page-gutter)',
      background: 'var(--surface-page)',
      borderBottom: 'var(--border-width-hairline) solid var(--border-default)',
      position: 'sticky', top: 0, zIndex: 20,
    }}>
      <img src="../../assets/corner-logo.png" style={{ height: 34, cursor: 'pointer' }} onClick={() => onNav('home')} />
      <nav className="c-nav" style={{ display: 'flex', gap: 32 }}>
        {['home', 'menu', 'about', 'contact'].map((v) => (
          <span
            key={v}
            onClick={() => onNav(v)}
            style={{
              font: 'var(--text-label-caps)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase',
              cursor: 'pointer',
              color: view === v ? 'var(--red-500)' : 'var(--text-primary)',
            }}
          >
            {t.nav[v]}
          </span>
        ))}
      </nav>
      <LangToggle lang={lang} onChange={onLang} />
    </header>
  );
}
window.Header = Header;