/* Top navigation + footer for the Five Eyes website kit. */

function Nav({ current, onNav }) {
  const items = [
    { id: 'home', label: 'Home' },
    { id: 'services', label: 'Services' },
    { id: 'careers', label: 'Careers' },
    { id: 'contact', label: 'Contact' },
  ];
  return (
    <nav className="site-nav" data-screen-label="Top nav">
      <button className="site-nav__brand" onClick={() => onNav('home')} aria-label="Five Eyes - home">
        <img src="./assets/logo-mark.svg" alt="" />
        <span className="wordmark">FIVE&nbsp;EYES</span>
      </button>
      <div className="site-nav__items">
        {items.map((it) => (
          <button
            key={it.id}
            className={'site-nav__item' + (current === it.id ? ' is-active' : '')}
            aria-current={current === it.id ? 'page' : undefined}
            onClick={() => onNav(it.id)}
          >
            {it.label}
          </button>
        ))}
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="site-foot" data-screen-label="Footer">
      <div className="site-foot__row">
        <div className="site-foot__lockup">
          <img src="./assets/logo-mark-bone.svg" alt="" />
          <span className="wordmark">FIVE&nbsp;EYES</span>
        </div>
        <div className="site-foot__meta">
          <span>ABN 35 643 459 527</span>
          <span aria-hidden="true">·</span>
          <span>© Five Eyes Consulting Pty Ltd</span>
        </div>
        <div className="site-foot__disp">
          <img src="./assets/seal-disp.svg" alt="" />
          <span>DISP Member</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Footer });