// For ops teams — outcomes, with a small "before/after week" visual.
const Operations = () => {
  const outcomes = [
    { i: "Layers", tone: "ingest", t: "Drain the fax queue", 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", c: "Replace the team that types from paper into software with a team that reviews exceptions." },
    { i: "Box", tone: "deliver", t: "Standardize messy inbound", c: "Different senders, different forms, same structured output. Predictable downstream behavior." },
    { i: "Flag", tone: "review", t: "Catch missing fields at intake", 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", 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", c: "BAA available. 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. Here's what their week looks like once it's running.</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 }}>
                  <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>
                  <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>
            <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>
);

const WeekBars = () => {
  const days = ["Mon", "Tue", "Wed", "Thu", "Fri"];
  const data = [
    { auto: 260, flag: 14 },
    { auto: 320, flag: 9 },
    { auto: 410, flag: 22 },
    { auto: 380, flag: 12 },
    { auto: 360, flag: 6 },
  ];
  const max = 480;
  const chartH = 200;
  return (
    <div style={{ position: "relative", padding: "20px 18px 14px", background: "var(--bg-soft)" }}>
      <div style={{ position: "absolute", right: 18, top: 14, display: "flex", flexDirection: "column", gap: 4, fontSize: 11, color: "var(--ink-3)" }}>
        <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}><span className="dot dot-green"/> Auto-routed</span>
        <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}><span className="dot dot-amber"/> Flagged for review</span>
      </div>
      <div style={{ display: "flex", gap: 14, alignItems: "flex-end", height: chartH, paddingTop: 36 }}>
        {days.map((d, i) => {
          const autoH = (data[i].auto / max) * (chartH - 36);
          const flagH = (data[i].flag / max) * (chartH - 36);
          return (
            <div key={d} style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "flex-end", height: "100%" }}>
              <div style={{ height: flagH, background: "#f59e0b", borderTopLeftRadius: 3, borderTopRightRadius: 3 }}/>
              <div style={{ height: autoH, background: "var(--green)" }}/>
            </div>
          );
        })}
      </div>
      <div style={{ display: "flex", gap: 14, marginTop: 8 }}>
        {days.map((d) => (
          <div key={d} style={{ flex: 1, fontSize: 11, color: "var(--ink-4)", textAlign: "center" }}>{d}</div>
        ))}
      </div>
    </div>
  );
};

window.Operations = Operations;
window.WeekBars = WeekBars;