// Eliks website kit — sticky header w/ mobile menu
function Header({ active, onNav }) {
  const [open, setOpen] = useState(false);
  const links = ['Services', 'Work', 'Process'];
  return (
    <header className="hdr">
      <div className="shell hdr__in">
        <a href="#top" onClick={() => onNav('top')}><img className="hdr__logo" src={LOGO} alt="Eliks" /></a>
        <nav className="hdr__nav">
          {links.map(l => (
            <a key={l} href={'#' + l.toLowerCase()}
               className={active === l.toLowerCase() ? 'active' : ''}
               onClick={() => onNav(l.toLowerCase())}>{l}</a>
          ))}
        </nav>
        <div className="hdr__cta">
          <a className="btn btn--ghost btn--sm" href="#work" onClick={() => onNav('work')}>See the work</a>
          <a className="btn btn--primary btn--sm" href="#contact">Start a project</a>
          <button className="hdr__burger" onClick={() => setOpen(!open)} aria-label="Menu">
            <Icon name={open ? 'x' : 'menu'} />
          </button>
        </div>
      </div>
      <div className={'mnav' + (open ? ' open' : '')}>
        {links.map(l => (
          <a key={l} href={'#' + l.toLowerCase()} onClick={() => { setOpen(false); onNav(l.toLowerCase()); }}>{l}</a>
        ))}
        <a href="#contact" onClick={() => setOpen(false)} style={{ color: 'var(--brand)' }}>Start a project</a>
      </div>
    </header>
  );
}
Object.assign(window, { Header });