// Header.jsx — sticky translucent pill nav (NL)
function Wordmark({ size = 22 }) {
  return (
    <span className="wm" style={{ fontSize: size }}>
      lptrdigital<span className="dot"></span>
    </span>
  );
}

function Header({ active = "werk", onNav }) {
  const items = [
    { id: "werk",     label: "Werk" },
    { id: "diensten", label: "Diensten" },
    { id: "stack",    label: "Stack" },
    { id: "over",     label: "Over ons" },
  ];
  return (
    <header className="hd container">
      <div className="hd-inner">
        <a href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} style={{ textDecoration: 'none' }}>
          <Wordmark />
        </a>
        <nav>
          {items.map(i => (
            <a
              key={i.id}
              href={"#" + i.id}
              className={active === i.id ? "active" : ""}
              onClick={(e) => { e.preventDefault(); onNav && onNav(i.id); }}
            >{i.label}</a>
          ))}
        </nav>
        <div className="right">
          <button className="btn ghost">NL · EN</button>
          <button className="btn" onClick={() => onNav && onNav("contact")}>
            Contact
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Header, Wordmark });