// Header — sticky topbar with announce bar + main nav

function Announce() {
  return (
    <div className="announce">
      Free shipping on orders over $99
      <span aria-hidden="true">·</span>
      Take 15% off your first order with code <b style={{fontWeight: 600}}>RESTWELL</b>
      <span aria-hidden="true">·</span>
      Money-back guarantee
    </div>
  );
}

function SiteHeader({ cartCount, onCartOpen }) {
  return (
    <>
      <Announce />
      <header className="site">
        <div className="container">
          <div className="nav">
            <div className="nav-l">
              <a href="#" className="logo" aria-label="Aulv Health">
                <span className="logo-mark" aria-hidden="true"></span>
                Aulv
              </a>
              <a href="#" className="link">Shop</a>
              <a href="#" className="link">Science</a>
              <a href="#" className="link">Journal</a>
            </div>
            <div className="nav-r">
              <button className="icon-btn" aria-label="Search"><IconSearch /></button>
              <button className="icon-btn" aria-label="Account"><IconUser /></button>
              <button className="icon-btn cart-btn" aria-label="Cart" onClick={onCartOpen}>
                <IconCart />
                <span className={`cart-count ${cartCount > 0 ? "show" : ""}`}>{cartCount}</span>
              </button>
            </div>
          </div>
        </div>
      </header>
    </>
  );
}

function Crumbs() {
  return (
    <div className="container">
      <div className="crumbs">
        <a href="#">Shop</a>
        <span className="sep">/</span>
        <a href="#">Sleep</a>
        <span className="sep">/</span>
        <span>Sleep Truffles</span>
      </div>
    </div>
  );
}

Object.assign(window, { SiteHeader, Crumbs });