const { Button } = window.JabberwockeeDesignSystem_646027;
function Nav({ onContact, onNav }) {
  const D = window.JW_DATA;
  const links = [["Projects", "projects"], ["Press", "press"], ["Awards", "awards"]];
  return (
    <header className="jw-nav">
      <a href="#top" onClick={(e) => { e.preventDefault(); onNav("top"); }} style={{ display: "flex", alignItems: "center", gap: 14, color: "var(--text-display)" }}>
        <img src={D.logo} alt="Jabberwockee Talkies" style={{ height: 44, width: "auto" }} />
        <span style={{ font: "400 24px/1 var(--font-serif-display)" }}>Jabberwockee</span>
      </a>
      <nav className="jw-nav-links">
        {links.map(([l, id]) => <a key={id} href={"#" + id} onClick={(e) => { e.preventDefault(); onNav(id); }} style={{ font: "var(--type-body-sm)", fontWeight: 500 }}>{l}</a>)}
      </nav>
      <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
        <Button size="sm" variant="secondary" onClick={onContact}>Contact</Button>
      </div>
    </header>
  );
}
window.Nav = Nav;