// Operations v2 — adds a hard proof stat to each outcome card.
const OperationsV2 = () => {
  const outcomes = [
    { i: "Layers",  tone: "ingest",  t: "Drain the fax queue",                stat: "94%",   sl: "auto-routed at one customer", c: "Multi-page faxes, mixed quality, get split, recognized, and routed without a manual triage step." },
    { i: "Pen",     tone: "extract", t: "Cut data entry to zero",             stat: "−87%",  sl: "manual typing time",          c: "Replace the team that types from paper into software with a team that reviews exceptions." },
    { i: "Box",     tone: "deliver", t: "Standardize messy inbound",          stat: "1 schema", sl: "across 38 sender formats", c: "Different senders, different forms, same structured output. Predictable downstream behavior." },
    { i: "Flag",    tone: "review",  t: "Catch missing fields at intake",     stat: "11×",   sl: "fewer billing rebills",       c: "Don't find out at billing. Per-field confidence + missing-field rules surface gaps the same hour the document arrives." },
    { i: "Route",   tone: "deliver", t: "Route clean data automatically",     stat: "98.4%", sl: "auto-approved last quarter",  c: "Auto-approve high-confidence documents into the next system. Only the messy stuff hits a human." },
    { i: "Shield",  tone: "ingest",  t: "Built for healthcare workflows",     stat: "BAA",   sl: "available on every plan",     c: "Audit trail per document. Field-level history. HIPAA-conscious processing on-shore." },
  ];

  return (
    <section id="operations" className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">For ops teams</span>
          <h2>What changes for the people who actually touch the paper.</h2>
          <p className="lede">Reqscan is bought by operations leaders, intake managers, referral coordinators, prior auth teams, and lab ops. Real numbers from production accounts.</p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 32, alignItems: "start" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {outcomes.map((o) => {
              const I = window.Icons[o.i];
              return (
                <div key={o.t} className="card" style={{ padding: 18, display: "flex", flexDirection: "column", gap: 10 }}>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <span style={{ width: 32, height: 32, borderRadius: 8, background: `var(--i-${o.tone}-bg)`, color: `var(--i-${o.tone}-fg)`, display: "grid", placeItems: "center" }}><I size={16} stroke={2}/></span>
                    <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", lineHeight: 1.1 }}>
                      <span style={{ fontFamily: "Space Grotesk, sans-serif", fontSize: 19, fontWeight: 700, letterSpacing: "-0.025em", color: "var(--green-ink)" }}>{o.stat}</span>
                      <span style={{ fontSize: 10.5, color: "var(--ink-4)" }}>{o.sl}</span>
                    </div>
                  </div>
                  <h3 style={{ fontSize: 16, letterSpacing: "-0.015em" }}>{o.t}</h3>
                  <p style={{ fontSize: 13.5, color: "var(--ink-3)", margin: 0, lineHeight: 1.5 }}>{o.c}</p>
                </div>
              );
            })}
          </div>

          <div className="card" style={{ padding: 0, overflow: "hidden", position: "sticky", top: 100 }}>
            <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontWeight: 600, fontSize: 13.5 }}>Intake queue · This week</span>
              <span className="pill pill-green" style={{ fontSize: 11 }}><span className="dot dot-green"/> Steady state</span>
            </div>
            <window.WeekBars/>
            <div style={{ padding: "14px 18px", borderTop: "1px solid var(--line)", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
              <KPI v="2,184" l="documents" />
              <KPI v="98.4%" l="auto-routed" />
              <KPI v="34" l="exceptions" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const KPI = ({ v, l }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
    <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.02em" }}>{v}</span>
    <span style={{ fontSize: 11, color: "var(--ink-4)" }}>{l}</span>
  </div>
);

window.OperationsV2 = OperationsV2;