// Compare v2 — adds "Your team today" leftmost column.
const CompareV2 = () => {
  const rows = [
    ["Time per document",         { v: "12–15 min",         t: "rose" },  "12–15 min",                  "5–8 min + corrections",        "30–60 sec"],
    ["Handwriting",               { v: "Painful",           t: "rose" },  { v: "Slow, error-prone", t: "rose" },  { v: "Fails", t: "rose" },               { v: "Trained on physician scrawl", t: "green" }],
    ["Multi-page packets",        { v: "Manually collated", t: "rose" },  { v: "Manual collation",  t: "rose" },  { v: "Page-by-page only", t: "amber" },  { v: "Recognizes & splits packets", t: "green" }],
    ["Missing fields",            { v: "Caught at billing", t: "rose" },  { v: "Caught at billing", t: "rose" },  { v: "Silently empty",    t: "amber" },  { v: "Flagged at intake", t: "green" }],
    ["Field-level confidence",    { v: "—",                 t: "rose" },  { v: "—",                 t: "rose" },  { v: "—",                 t: "rose" },   { v: "Per-field score",   t: "green" }],
    ["Human review",              { v: "100%",              t: "amber" }, { v: "100%",              t: "amber" }, { v: "100%",              t: "amber" }, { v: "Only what's flagged", t: "green" }],
    ["Routing to LIMS / EHR",     { v: "Re-typed",          t: "rose" },  { v: "Re-typed",          t: "rose" },  { v: "CSV dump",          t: "amber" },  { v: "API + webhooks", t: "green" }],
    ["Cost per page",             "$15.00",                                "$15.00",                              "$8.00",                                 "$0.20"],
    ["Accuracy on real intake",   "85%",                                   "85%",                                  "60%",                                  "94%"],
  ];
  const cols = ["Your team today", "Manual entry vendor", "Generic OCR", "Reqscan"];
  const Cell = ({ c }) => {
    if (typeof c === "string") return <span style={{ fontSize: 13.5 }}>{c}</span>;
    const tones = {
      green: { color: "var(--green-ink)", bg: "var(--green-soft)", icon: <window.Icons.Check size={13} stroke={2.6}/> },
      amber: { color: "var(--amber)", bg: "var(--amber-soft)", icon: <window.Icons.Flag size={12} stroke={2}/> },
      rose:  { color: "var(--rose)",  bg: "var(--rose-soft)",  icon: <window.Icons.X size={12} stroke={2.4}/> },
    };
    const t = tones[c.t];
    return (
      <span style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "3px 9px", borderRadius: 999, background: t.bg, color: t.color, fontSize: 12.5, fontWeight: 500 }}>
        {t.icon} {c.v}
      </span>
    );
  };

  const grid = "1.4fr 1fr 1fr 1fr 1.1fr";

  return (
    <section id="compare" className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">See the difference</span>
          <h2>Where you are today, versus the alternatives.</h2>
          <p className="lede">Your team's current reality on the left. The two common alternatives in the middle. Reqscan on the right. Same inbox, four very different operational outcomes.</p>
        </div>

        <div className="card" style={{ overflow: "hidden", padding: 0 }}>
          <div style={{ display: "grid", gridTemplateColumns: grid, borderBottom: "1px solid var(--line)", background: "var(--bg-soft)" }}>
            <div style={{ padding: "14px 20px", fontSize: 12, color: "var(--ink-4)", fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase" }}>Operational dimension</div>
            {cols.map((c, i) => (
              <div key={c} style={{
                padding: "14px 20px",
                fontSize: 13, fontWeight: 600,
                borderLeft: "1px solid var(--line)",
                background: i === 3 ? "var(--green-tint)" : i === 0 ? "var(--rose-soft)" : "transparent",
                color: i === 0 ? "var(--rose)" : "inherit",
                position: "relative",
              }}>
                {c}
                {i === 3 && <span className="pill pill-green" style={{ marginLeft: 8, fontSize: 10.5, padding: "2px 7px" }}>Recommended</span>}
              </div>
            ))}
          </div>
          {rows.map((r, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: grid, borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : 0 }}>
              <div style={{ padding: "14px 20px", fontSize: 13.5, color: "var(--ink-2)", fontWeight: 500 }}>{r[0]}</div>
              {[r[1], r[2], r[3], r[4]].map((c, j) => (
                <div key={j} style={{
                  padding: "14px 20px", borderLeft: "1px solid var(--line)",
                  background: j === 3 ? "var(--green-tint)" : j === 0 ? "rgba(254,226,226,0.35)" : "transparent",
                  display: "flex", alignItems: "center",
                }}>
                  <Cell c={c}/>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.CompareV2 = CompareV2;