// ==== Agent OS chrome — minimal, editorial =========================
// Stripped of dashboardy theatre: no fake OS topbar, no live ticker,
// no dashed-circle spinning brand glyph, no "agent-os v0.26 / session active".
// What remains: a wordmark, a single contact CTA, a floating section rail.

function OSTopBar() {
  return (
    <header className="os-topbar" role="banner">
      <div className="brand">
        <a href="#hero" onClick={(e) => { e.preventDefault(); scrollToId("hero"); }} aria-label="Home">
          <span className="brand-mark">AK</span>
          <span className="brand-rule" />
          <span className="brand-name">Ayush Kumar</span>
        </a>
      </div>

      <nav className="topbar-nav" aria-label="primary">
        <a href="#projects" onClick={(e) => { e.preventDefault(); scrollToId("projects"); }}>Work</a>
        <a href="#about" onClick={(e) => { e.preventDefault(); scrollToId("about"); }}>About</a>
        <a href="#writing" onClick={(e) => { e.preventDefault(); scrollToId("writing"); }}>Writing</a>
        <a href="#contact" onClick={(e) => { e.preventDefault(); scrollToId("contact"); }} className="contact-cta">
          Contact <span aria-hidden="true">→</span>
        </a>
      </nav>
    </header>
  );
}

function OSDock({ active, sections }) {
  // Compact section dock — restrained, only shown on wide screens.
  return (
    <nav className="os-dock" role="navigation" aria-label="sections">
      {sections.map(s => (
        <button key={s.id}
          className={"dock-btn" + (active === s.id ? " active" : "")}
          onClick={() => scrollToId(s.id)}>
          {s.label}
        </button>
      ))}
    </nav>
  );
}

function OSRail({ active, sections }) {
  // Side rail: tick marks with a section index. Numbers are restrained
  // (pad2) and only appear on hover. No more giant "// 02 ·" eyebrows.
  return (
    <nav className="os-rail" aria-hidden="true">
      {sections.map((s, i) => (
        <div key={s.id}
          className={"r-item" + (active === s.id ? " active" : "")}
          onClick={() => scrollToId(s.id)}>
          <span className="r-tick" />
          <span className="r-label">{pad2(i + 1)} &mdash; {s.label}</span>
        </div>
      ))}
    </nav>
  );
}

Object.assign(window, { OSTopBar, OSDock, OSRail });