/* TopBar — breadcrumbs, search, profile actions */
function TopBar() {
  return (
    <div className="topbar">
      <div className="crumbs"><b>Overview</b> · Dogger Bank A</div>
      <div className="search">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" strokeWidth="1.75" strokeLinecap="round">
          <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
        </svg>
        <input placeholder="Search turbines, sites, alerts…" />
      </div>
      <button className="topbar-btn" title="Notifications">
        <svg viewBox="0 0 24 24"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21a2 2 0 0 0 4 0"/></svg>
        <span className="unread"/>
      </button>
      <button className="topbar-btn" title="Help">
        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
      </button>
    </div>
  );
}
Object.assign(window, { TopBar });