/* Topbar.jsx */

function Topbar({ active }) {
  const items = [
    { id: 'hero',      label: 'Overview' },
    { id: 'tempos',    label: 'Three tempos' },
    { id: 'absorb',    label: 'Pump anomaly' },
    { id: 'pressures', label: 'Pressures' },
    { id: 'inverse',   label: 'Inverse design' },
    { id: 'cascade',   label: 'Cascade' },
    { id: 'offerings', label: 'Offerings' },
    { id: 'close',     label: 'Closing' },
  ];
  const go = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    window.scrollTo({ top: el.offsetTop - 56, behavior: 'smooth' });
  };
  return (
    <div className="topbar">
      <div className="topbar-inner">
        <div className="brand"><span className="dot" />Risk Architecture · Aotearoa</div>
        <div className="tnav">
          {items.map(it => (
            <a key={it.id}
               className={active === it.id ? 'active' : ''}
               onClick={() => go(it.id)}>
              {it.label}
            </a>
          ))}
        </div>
        <div className="t-meta">v0.1 · Patrick read</div>
      </div>
    </div>
  );
}

window.Topbar = Topbar;