// Left rail: nav + system stats.
const LeftRail = ({ active = "SURFACE" }) => {
  const items = [
    "SURFACE", "MOTORS", "EMLAK", "SYSTEMS", "KOPILOT",
    "LOUNGE", "SIGNAL", "TALEP", "MANIFESTO",
  ];
  const [stats, setStats] = React.useState({ cpu: 12, lat: 47, anomaly: 2 });
  React.useEffect(() => {
    const i = setInterval(() => setStats({
      cpu: 8 + Math.floor(Math.random() * 18),
      lat: 38 + Math.floor(Math.random() * 22),
      anomaly: Math.random() > .85 ? 3 : 2,
    }), 2400);
    return () => clearInterval(i);
  }, []);

  return (
    <aside style={{
      width: 184, background: "var(--panel)", borderRight: "1px solid var(--edge)",
      display: "flex", flexDirection: "column", flexShrink: 0,
    }}>
      <div style={{ padding: "10px 12px", borderBottom: "1px solid var(--edge)" }}>
        <Eyebrow>NAV</Eyebrow>
      </div>
      <ul style={{ listStyle: "none", padding: "8px 0", margin: 0, flex: 1 }}>
        {items.map(it => (
          <li key={it} style={{
            fontSize: 11, letterSpacing: ".16em", textTransform: "uppercase",
            padding: "6px 12px", color: it === active ? "var(--amber)" : "var(--ash)",
            borderLeft: `2px solid ${it === active ? "var(--amber)" : "transparent"}`,
            background: it === active ? "rgba(255,176,0,.05)" : "transparent",
            cursor: "pointer", fontWeight: it === active ? 600 : 400,
          }}>
            {it === active ? "▶" : "·"} {it}
          </li>
        ))}
      </ul>
      <div style={{ padding: "10px 12px", borderTop: "1px solid var(--edge)" }}>
        <Eyebrow style={{ display: "block", marginBottom: 6 }}>SYSTEM</Eyebrow>
        {[
          { k: "CPU",     v: `${stats.cpu}%`,  c: "var(--phosphor)" },
          { k: "LATENCY", v: `${stats.lat}ms`, c: "var(--phosphor)" },
          { k: "FEEDS",   v: "24/24",          c: "var(--phosphor)" },
          { k: "ANOMALY", v: stats.anomaly,    c: stats.anomaly > 2 ? "var(--alert)" : "var(--amber)" },
        ].map(s => (
          <div key={s.k} style={{
            display: "flex", justifyContent: "space-between",
            padding: "3px 0", fontSize: 11, color: "var(--bone)",
            fontVariantNumeric: "tabular-nums",
          }}>
            <span style={{ color: "var(--ash)", letterSpacing: ".08em" }}>{s.k}</span>
            <span style={{ color: s.c, fontWeight: 600 }}>{s.v}</span>
          </div>
        ))}
      </div>
    </aside>
  );
};

window.LeftRail = LeftRail;