/* ============================================================
   TeamSwitchBar — in-page team selector shown at the top of the
   Team and Our Legacy pages. Picking a team re-themes those two
   pages (accent + heading font) and swaps their content.
   ============================================================ */

function TeamSwitchBar({ selected, onSelect }) {
  return (
    <div className="team-switch-bar">
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18, flexWrap: "wrap", minHeight: 64 }}>
        <span className="label tsb-label" style={{ fontSize: 12, letterSpacing: "0.18em", color: "var(--muted-2)", display: "inline-flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 18, height: 1, background: "var(--orange)" }} />
          Select Team
        </span>
        <div className="seg" role="tablist" aria-label="Select team">
          {TEAM_ORDER.map((id) => {
            const tm = TEAMS[id];
            const active = id === selected;
            return (
              <button key={id} role="tab" aria-selected={active}
                onClick={() => onSelect(id)}
                className={"seg-pill" + (active ? " active" : "")}
                style={{ "--a": tm.accent }}>
                <span className="seg-dot" style={{ background: tm.accent }} />
                <span className="seg-full">{tm.name}</span>
                <span className="seg-short">{tm.short}</span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TeamSwitchBar });