// Top HUD. Always visible. 32px.
// Brand: FSAHIN // GROUP. No "KONYA" call-out (coords stay).
const HUDBar = () => {
  const [clock, setClock] = React.useState("");
  const [ops, setOps] = React.useState(237);
  React.useEffect(() => {
    const tick = () => {
      const d = new Date();
      const pad = n => String(n).padStart(2, "0");
      setClock(`${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`);
    };
    tick();
    const c = setInterval(tick, 1000);
    const o = setInterval(() => setOps(v => Math.max(180, v + (Math.random() > .5 ? 1 : -1))), 3200);
    return () => { clearInterval(c); clearInterval(o); };
  }, []);

  const Sep = () => <span style={{ color: "var(--ash-deep)" }}>·</span>;
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 10,
      padding: "8px 14px", background: "var(--panel)",
      borderBottom: "1px solid var(--edge)",
      fontSize: 11, letterSpacing: ".08em", textTransform: "uppercase",
      color: "var(--ash)", flexShrink: 0,
    }}>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--bone)", fontWeight: 700 }}>
        <svg width="14" height="14" viewBox="0 0 14 14"><rect x="1" y="1" width="12" height="12" fill="none" stroke="#FFB000" strokeWidth="1.2"/><text x="7" y="10" fontSize="7" fill="#FFB000" textAnchor="middle" fontFamily="JetBrains Mono" fontWeight="700">FG</text></svg>
        FSAHIN // GROUP
      </span>
      <Sep /><span style={{ color: "var(--bone)" }}>COMMAND_SURFACE</span>
      <Sep /><Pill status="online">CONNECTED</Pill>
      <Sep /><Coord style={{ color: "var(--bone-soft)" }}>37.8746, 32.4932</Coord>
      <Sep /><span>R14</span>
      <span style={{ marginLeft: "auto", display: "flex", gap: 10, alignItems: "center" }}>
        <span style={{ color: "var(--bone)", fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>{clock} UTC+3</span>
        <Sep />
        <span style={{ color: "var(--amber)", fontVariantNumeric: "tabular-nums", fontWeight: 700 }}>{ops} OPERATÖR</span>
      </span>
    </div>
  );
};

window.HUDBar = HUDBar;
