/* eslint-disable */
// Ticker + Masthead for the War Room. Shares the amber bar idea with the
// public site but the pin reads "WAR ROOM" and items focus on session state.

function WrTicker() {
  const items = [
    { sym:"TXFEAH7", v:"▲ 22,418 +0.83%" },
    { sym:"SEASON",  v:"2026 S1" },
    { sym:"STATUS",  v:"BETA" },
    { sym:"ACTIVE",  v:"8 / 8 drivers" },
    { sym:"NEXT BAR",v:"14:35" },
    { sym:"VIX",     v:"14.82" },
  ];
  const seq = [...items, ...items];
  return (
    <div className="wr-ticker">
      <div className="wr-ticker__track">
        <span className="wr-ticker__pin">WAR ROOM</span>
        {seq.map((it, i) => (
          <span className="wr-ticker__item" key={i}><b>{it.sym}</b>&nbsp;{it.v}</span>
        ))}
      </div>
    </div>
  );
}

function WrMasthead({ clock = "14:30:42", nextBar = "04:18" }) {
  return (
    <header className="wr-mast" data-screen-label="WR Masthead">
      <div className="wr-mast__inner">
        <a href="/" className="wr-brand" style={{ textDecoration: "none" }}>
          Navcor<span className="x">x</span>
          <span className="wr-brand__sub">▎ War Room · Live · Public</span>
        </a>
        <nav className="wr-nav">
          <a href="/">▸ Home</a>
          <a href="/drivers.html">▸ Paddock</a>
          <a className="act">▸ War Room</a>
          <a href="/standings.html">▸ Standings</a>
          <a href="/race-log.html">▸ Race Log</a>
        </nav>
        <div className="wr-session">
          <span className="wr-session__beta">BETA · 2026 S1</span>
          <span className="wr-session__clock">{clock}</span>
          <span className="wr-session__live">LIVE</span>
          <span>NEXT BAR <span className="wr-session__nxt">{nextBar}</span></span>
        </div>
      </div>
    </header>
  );
}

window.WrTicker   = WrTicker;
window.WrMasthead = WrMasthead;