// LIVE OPS — Ticking telemetry strip. Modern equivalent of the logo bar:
// it proves the agents are real and working by showing them work.
//
// Numbers walk slightly each interval to feel live. The "current call"
// rotates through redacted prompts that look like real Iris turns.

function LiveOps() {
  // Seeded starting values, then walk
  const [callsToday, setCallsToday] = useState(412);
  const [avgHandle, setAvgHandle] = useState(102); // seconds
  const [deflected, setDeflected] = useState(73.4); // %
  const [bookings, setBookings] = useState(38);
  const [activeIdx, setActiveIdx] = useState(0);
  const [tick, setTick] = useState(0);

  const liveCalls = [
    { line: "I see you opened the renewal four times — want me to walk through what changed?", agent: "RENEWAL-VOICE", duration: "01:42" },
    { line: "Routing this to your Tier 2 team — Tasha will be on it within the hour.", agent: "SUPPORT-TRIAGE", duration: "00:48" },
    { line: "Your tier covers up to 60 seats. You peaked at 71 in March, so you'd see overage.", agent: "RENEWAL-VOICE", duration: "02:11" },
    { line: "Booking 20 minutes Tuesday at 10 — invite is on its way.", agent: "FRONT-DESK", duration: "00:34" },
    { line: "Pulling your last three invoices now — give me one second.", agent: "BILLING-AGENT", duration: "00:18" },
  ];

  useEffect(() => {
    const id = setInterval(() => {
      setTick(t => t + 1);
      setCallsToday(v => v + (Math.random() < 0.55 ? 1 : 0));
      setAvgHandle(v => Math.max(72, Math.min(140, v + (Math.random() - 0.5) * 4)));
      setDeflected(v => Math.max(68, Math.min(78, v + (Math.random() - 0.5) * 0.3)));
      setBookings(b => b + (Math.random() < 0.08 ? 1 : 0));
    }, 1700);
    return () => clearInterval(id);
  }, []);

  useEffect(() => {
    const id = setInterval(() => setActiveIdx(i => (i + 1) % liveCalls.length), 4200);
    return () => clearInterval(id);
  }, []);

  const stats = [
    { label: "Calls handled today", value: callsToday.toLocaleString(), foot: "across 3 active agents" },
    { label: "Average handle time", value: `${Math.floor(avgHandle / 60)}:${String(Math.round(avgHandle % 60)).padStart(2, "0")}`, foot: "minutes : seconds" },
    { label: "Tickets deflected", value: `${deflected.toFixed(1)}%`, foot: "no human needed" },
    { label: "Meetings booked", value: bookings.toString(), foot: "to a calendar, today" },
  ];

  const cur = liveCalls[activeIdx];

  return (
    <section style={{
      background: "var(--ink)",
      color: "var(--bone)",
      padding: "clamp(48px, 6vw, 80px) 0",
      borderTop: "1px solid var(--ink)",
      borderBottom: "1px solid var(--ink)",
    }}>
      <div className="shell">

        {/* Top bar */}
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          flexWrap: "wrap",
          gap: 16,
          paddingBottom: 32,
          borderBottom: "1px solid color-mix(in oklab, var(--bone) 18%, transparent)",
          marginBottom: 36,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{
              width: 9,
              height: 9,
              borderRadius: "50%",
              background: "var(--persimmon)",
              boxShadow: "0 0 0 5px color-mix(in oklab, var(--persimmon) 25%, transparent)",
              animation: "pulse 1.8s ease-in-out infinite",
            }}></span>
            <span className="mono" style={{ fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--bone)" }}>
              LIVE OPS — last 60 seconds
            </span>
          </div>
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "color-mix(in oklab, var(--bone) 55%, transparent)", textTransform: "uppercase" }}>
            ↳ Agents we run, today · auto-redacted
          </span>
        </div>

        {/* Stats grid */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 0,
        }} className="ops-stats">
          {stats.map((s, i) => (
            <div key={s.label} style={{
              padding: "0 24px",
              borderRight: i < stats.length - 1 ? "1px solid color-mix(in oklab, var(--bone) 16%, transparent)" : "none",
              minHeight: 120,
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
            }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "color-mix(in oklab, var(--bone) 55%, transparent)" }}>
                {s.label}
              </div>
              <div>
                <div className="serif" style={{
                  fontSize: "clamp(40px, 4.6vw, 72px)",
                  lineHeight: 1,
                  letterSpacing: "-0.03em",
                  color: i === 3 ? "var(--persimmon)" : "var(--bone)",
                  fontVariantNumeric: "tabular-nums",
                  transition: "color 0.5s",
                }}>
                  {s.value}
                </div>
                <div className="mono" style={{ marginTop: 8, fontSize: 10, color: "color-mix(in oklab, var(--bone) 50%, transparent)", letterSpacing: "0.06em", textTransform: "uppercase" }}>
                  {s.foot}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Current call snippet */}
        <div style={{
          marginTop: 40,
          padding: "20px 28px",
          background: "color-mix(in oklab, var(--bone) 6%, transparent)",
          border: "1px solid color-mix(in oklab, var(--bone) 16%, transparent)",
          display: "grid",
          gridTemplateColumns: "auto 1fr auto",
          gap: 24,
          alignItems: "center",
        }} className="ops-call">
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{
              width: 8,
              height: 8,
              borderRadius: "50%",
              background: "var(--persimmon)",
              animation: "pulse 1s ease-in-out infinite",
            }}></span>
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "color-mix(in oklab, var(--bone) 75%, transparent)", textTransform: "uppercase" }}>
              ON A CALL NOW
            </span>
          </div>
          <div key={activeIdx} style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(15px, 1.4vw, 19px)",
            lineHeight: 1.35,
            color: "var(--bone)",
            fontWeight: 500,
            letterSpacing: "-0.01em",
            animation: "fadeInUp 0.5s ease-out",
          }}>
            "{cur.line}"
          </div>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4 }}>
            <span className="mono" style={{ fontSize: 10, color: "var(--yellow)", letterSpacing: "0.1em" }}>
              {cur.agent}
            </span>
            <span className="mono" style={{ fontSize: 14, color: "var(--bone)", fontVariantNumeric: "tabular-nums" }}>
              {cur.duration}
            </span>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes fadeInUp {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 980px) {
          .ops-stats { grid-template-columns: 1fr 1fr !important; row-gap: 32px; }
          .ops-stats > div { border-right: none !important; }
          .ops-stats > div:nth-child(odd) { border-right: 1px solid color-mix(in oklab, var(--bone) 16%, transparent) !important; }
          .ops-call { grid-template-columns: 1fr !important; gap: 12px !important; }
        }
        @media (max-width: 580px) {
          .ops-stats { grid-template-columns: 1fr !important; }
          .ops-stats > div { border-right: none !important; border-bottom: 1px solid color-mix(in oklab, var(--bone) 16%, transparent); padding-bottom: 24px; }
          .ops-stats > div:last-child { border-bottom: none; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { LiveOps });