// macOS window chrome — matches the v27 RalphX app design.
// Single row: traffic lights · breadcrumb · search · bell · theme · zoom.

function WindowChrome({ breadcrumb = ["Workspace", "Agents", "New run"] }) {
  return (
    <div className="ws-chrome">
      <div className="traffic"><span /><span /><span /></div>

      <div className="ws-breadcrumb">
        {breadcrumb.map((seg, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="ws-bc-sep">/</span>}
            <span className={`ws-bc-seg ${i === breadcrumb.length - 1 ? "is-last" : ""}`}>
              {seg}
            </span>
          </React.Fragment>
        ))}
      </div>

      <div className="ws-spacer" />

      <div className="ws-search">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="11" cy="11" r="7" />
          <path d="M21 21l-4.3-4.3" />
        </svg>
        <span className="ws-search-placeholder">Search runs, projects, agents…</span>
        <span className="ws-search-kbd">⌘K</span>
      </div>

      <button className="ws-bell" aria-label="Notifications">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="6" cy="6" r="2" />
          <circle cx="18" cy="18" r="2" />
          <path d="M8 6h8a4 4 0 0 1 0 8H8" />
        </svg>
        <span className="ws-bell-badge">2</span>
      </button>

      <button className="ws-pill-btn ws-pill-trigger">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
        </svg>
        <span>Dark</span>
        <svg className="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
      </button>

      <button className="ws-pill-btn ws-pill-trigger">
        <span className="ws-zoom-icon">Aa</span>
        <span>100%</span>
        <svg className="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>
      </button>
    </div>
  );
}

Object.assign(window, { WindowChrome });