/* eslint-disable */
// Status board — a dense index table view of every operation.
function StatusBoard() {
  const rows = [
    { id: "OPS-001", name: "Angry Yeti Coffee Co.", sector: "Consumer Goods", channel: "D2C / Web", region: "TX-USA", status: "active" },
    { id: "OPS-002", name: "Throttle & Grease", sector: "Media & Community", channel: "Discord + Newsletter", region: "DFW-USA", status: "active" },
    { id: "OPS-003", name: "SmallBizSheetzCo", sector: "Digital Products", channel: "\u2014", region: "\u2014", status: "decom" },
    { id: "OPS-004", name: "[ REDACTED ]", sector: "Publishing", channel: "[ REDACTED ]", region: "[ REDACTED ]", status: "redacted" },
    { id: "OPS-005", name: "[ FILE LOCKED ]", sector: "[ TBD ]", channel: "[ TBD ]", region: "[ TBD ]", status: "idle" },
  ];

  return (
    <section className="section status" id="board">
      <div className="container">
        <div className="section-label">
          <span className="num">§ 03</span>
          <span>// Status Board</span>
          <span className="tag">ALL-OPS</span>
        </div>

        <h2 className="status__heading reveal">
          Operations <em>index.</em>
        </h2>

        <div className="reveal" data-delay="2">
          <table className="status__table">
            <thead>
              <tr>
                <th>OPS</th>
                <th>Designation</th>
                <th className="hide-sm">Sector</th>
                <th className="hide-sm">Channel</th>
                <th className="hide-sm">Region</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(r => (
                <tr key={r.id} className={r.status === "redacted" ? "redacted" : r.status === "decom" ? "decom" : ""}>
                  <td className="id">{r.id}</td>
                  <td className="name">{r.name}</td>
                  <td className="hide-sm">{r.sector}</td>
                  <td className="hide-sm">{r.channel}</td>
                  <td className="hide-sm">{r.region}</td>
                  <td><span className={`pill ${r.status}`}>{r.status === "active" ? "ACTIVE" : r.status === "redacted" ? "REDACTED" : r.status === "decom" ? "DECOM" : "IDLE"}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

window.StatusBoard = StatusBoard;