// Top status bar (header) + Footer ticker
const StatusBar = ({ data, tick }) => {
  const now = new Date();
  const stamp = `${pad2(now.getHours())}:${pad2(now.getMinutes())}:${pad2((now.getSeconds() + tick) % 60)}`;
  return (
    <div className="status-bar">
      <div className="brand-line">
        <h1 className="brand">{data.server.name}</h1>
        <div>
          <div className="brand-tag">▸ {data.server.tagline}</div>
          <div className="brand-tag" style={{ color: "var(--amber-mute)" }}>
            CRT-TERMINAL · v0.4.7 · KNOX COUNTY BROADCAST
          </div>
        </div>
      </div>
      <div></div>
      <div className="stat-cluster">
        <div className={`stat-pill status-${data.server.status}`}>
          <span className="dot"></span>
          <span>SERVER</span>
          <span className="v">{data.server.status}</span>
        </div>
        <div className="stat-pill">
          <span>LOCAL</span>
          <span className="v">{stamp}</span>
        </div>
        <div className="stat-pill">
          <span>PING</span>
          <span className="v">{data.server.ping_ms}ms</span>
        </div>
      </div>
    </div>
  );
};

const Ticker = ({ data }) => {
  const stream = data.log.map((l) => `${l.t} ▸ ${l.m}`).join("    ◆    ");
  return (
    <div className="ticker">
      <div className="head">▸ DISPATCH FEED</div>
      <div className="stream">
        <div className="stream-inner">
          <span>{stream}</span>
          <span>{stream}</span>
        </div>
      </div>
      <div className="cursor" style={{ fontFamily: "var(--display)", color: "var(--amber-mute)", fontSize: 14 }}>
        STANDBY
      </div>
    </div>
  );
};

const TubeControls = ({ data }) => (
  <div className="tube-controls">
    <div className="left">
      <span>◉ REC</span>
      <span>CH · 47.3 MHz</span>
      <span>VOL ▮▮▮▮▯▯</span>
      <span>CONTRAST ▮▮▮▮▮▯</span>
    </div>
    <div className="right">
      <span>BUILD {data.server.version.replace("Build ", "")}</span>
      <span>EST. 1993</span>
      <span>▸ THIS IS HOW WE LIVE NOW</span>
    </div>
  </div>
);

Object.assign(window, { StatusBar, Ticker, TubeControls });