// Header.jsx — sticky dark nav
const Header = ({ route, onNav, cartCount = 0, onCartOpen }) => {
  const [open, setOpen] = React.useState(false);
  const links = [
    { id:'home',    label:'Work' },
    { id:'series',  label:'Series' },
    { id:'about',   label:'About' },
    { id:'collect', label:'Collect' },
  ];
  const go = (id) => { onNav(id); setOpen(false); };
  const isActive = (id) => id === 'series'
    ? (route.startsWith('series') || route.startsWith('work'))
    : route === id;

  return (
    <header className="hdr">
      <div className="wrap hdr-inner">
        <div className="wordmark" onClick={() => go('home')}>
          <span>Drury Bynum</span>
          <span className="flare-dot sm" aria-hidden="true"></span>
          <span>Art</span>
        </div>
        <nav className={"hdr-nav" + (open ? " open" : "")}>
          {links.map(l => (
            <a key={l.id} className={"hdr-link" + (isActive(l.id) ? " active" : "")}
               onClick={() => go(l.id)}>{l.label}</a>
          ))}
        </nav>
        <button className="hdr-cart" aria-label={"Cart" + (cartCount ? ", " + cartCount + " items" : "")}
                onClick={onCartOpen}>
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor"
               strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M1 1h2.5l1.6 8h8.4l1.5-5.5H4.5"/>
            <circle cx="7.5" cy="15" r="1"/>
            <circle cx="13.5" cy="15" r="1"/>
          </svg>
          {cartCount > 0 && <span className="hdr-cart-count">{cartCount}</span>}
        </button>
        <button className="hdr-burger" aria-label="Menu" onClick={() => setOpen(o => !o)}>
          <span></span><span></span><span></span>
        </button>
      </div>
    </header>
  );
};
Object.assign(window, { Header });