// Hatch Collection site chrome
function HatchChrome() {
  const navItems = ['New Arrivals','Dresses','Tops','Bottoms','Swim','Sleep','Sale'];
  return (
    <div className="hatch-site-header">
      <nav className="hatch-site-nav">
        {navItems.map((item, i) => (
          <a key={item} className={`hatch-site-nav__item${i===0?' is-active':''}${item==='Sale'?' is-sale':''}`}>{item}</a>
        ))}
      </nav>
      <div className="hatch-site-logo">
        <img src="assets/hatch-logo.png" alt="HATCH" />
      </div>
      <div className="hatch-site-actions">
        <span>Search</span>
        <span>Bag</span>
      </div>
    </div>
  );
}

Object.assign(window, { HatchChrome });