/* global React */
/* HEXA-V — Money-recovered banner: global live ticker above the nav */

const MoneyBanner = ({ compact = false }) => {
  const [v, setV] = React.useState(184_237_412);
  React.useEffect(() => {
    const id = setInterval(() => setV((prev) => prev + Math.floor(40 + Math.random() * 380)), 280);
    return () => clearInterval(id);
  }, []);
  const fmt = (n) => "$" + n.toLocaleString("en-US");

  return (
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "center", gap: 18,
      padding: compact ? "8px 32px" : "10px 32px",
      background: "var(--good)",
      fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, letterSpacing: "0.12em",
      borderBottom: "1px solid var(--good)",
      overflow: "hidden", position: "relative", whiteSpace: "nowrap", color: "rgb(13, 13, 12)", backgroundColor: "#2563eb"
    }}>
      <span style={{ opacity: 0.7 }}>▸ TOTAL MARGIN RECOVERED FOR HEXA-V TENANTS ·</span>
      <span style={{
        fontWeight: 700, letterSpacing: "0.02em", fontSize: 14,
        textShadow: "0 1px 0 rgba(0,0,0,0.15)"
      }}>{fmt(v)}</span>
      <span style={{ opacity: 0.7 }}>· AND COUNTING ◂</span>
      <span style={{
        position: "absolute", right: 32, top: 0, bottom: 0,
        display: "flex", alignItems: "center", gap: 8,
        fontSize: 11, opacity: 0.8
      }}>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#0a0a0a" }}></span>
        LIVE · UPDATED EVERY 280ms
      </span>
    </div>);

};

window.MoneyBanner = MoneyBanner;