// ROI calculator — sliders → monthly savings.
const ROI = () => {
  const { useState, useMemo } = React;
  const [docs, setDocs] = useState(200);     // docs/day
  const [minutes, setMinutes] = useState(4); // min/doc
  const [wage, setWage] = useState(28);      // $/hr loaded

  const result = useMemo(() => {
    const workingDays = 21;
    const monthlyDocs = docs * workingDays;
    const monthlyHours = (monthlyDocs * minutes) / 60;
    const monthlyCost = monthlyHours * wage;
    // Reqscan: $0.04/page, assume avg 2 pages per doc, plus $399 floor for the workflow tier
    const reqscanCost = Math.max(399, monthlyDocs * 2 * 0.04);
    const savings = Math.max(0, monthlyCost - reqscanCost);
    const annual = savings * 12;
    return { monthlyDocs, monthlyHours, monthlyCost, reqscanCost, savings, annual };
  }, [docs, minutes, wage]);

  const fmt = (n) => "$" + Math.round(n).toLocaleString();
  const fmtK = (n) => n >= 10000 ? "$" + Math.round(n / 1000) + "k" : fmt(n);

  return (
    <section className="section" style={{ background: "var(--bg-soft)" }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Run the numbers</span>
          <h2>What does manual data entry actually cost you?</h2>
          <p className="lede">Move the sliders to your team's reality. We'll do the math against what Reqscan would cost at the same volume.</p>
        </div>

        <div className="card" style={{ padding: 0, overflow: "hidden", display: "grid", gridTemplateColumns: "1.1fr 1fr" }}>
          {/* INPUTS */}
          <div style={{ padding: "32px 36px", display: "flex", flexDirection: "column", gap: 28 }}>
            <ROISlider label="Documents per day" value={docs} setValue={setDocs} min={20} max={1500} step={10} unit="docs/day"/>
            <ROISlider label="Minutes spent typing each one" value={minutes} setValue={setMinutes} min={1} max={15} step={1} unit="min/doc"/>
            <ROISlider label="Loaded hourly wage" value={wage} setValue={setWage} min={18} max={60} step={1} unit="$/hr" prefix="$"/>

            <div style={{ paddingTop: 16, borderTop: "1px solid var(--line)", fontSize: 12.5, color: "var(--ink-4)", lineHeight: 1.6 }}>
              Assumes 21 working days/month and 2 pages per document on average. Reqscan pricing reflects the $0.04/page Workflow tier with a $399/mo floor.
            </div>
          </div>

          {/* OUTPUT */}
          <div style={{ background: "var(--ink)", color: "#fff", padding: "32px 36px", display: "flex", flexDirection: "column", gap: 20 }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)", fontWeight: 600 }}>Your team today</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 6 }}>
                <span style={{ fontSize: 36, fontWeight: 600, letterSpacing: "-0.02em" }}>{fmt(result.monthlyCost)}</span>
                <span style={{ fontSize: 14, color: "rgba(255,255,255,0.6)" }}>/ month</span>
              </div>
              <div style={{ fontSize: 12.5, color: "rgba(255,255,255,0.55)", marginTop: 4 }}>
                {Math.round(result.monthlyHours).toLocaleString()} hours typing · {result.monthlyDocs.toLocaleString()} documents
              </div>
            </div>

            <div>
              <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)", fontWeight: 600 }}>With Reqscan</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 6 }}>
                <span style={{ fontSize: 36, fontWeight: 600, letterSpacing: "-0.02em" }}>{fmt(result.reqscanCost)}</span>
                <span style={{ fontSize: 14, color: "rgba(255,255,255,0.6)" }}>/ month</span>
              </div>
              <div style={{ fontSize: 12.5, color: "rgba(255,255,255,0.55)", marginTop: 4 }}>
                Plus your team focused on exceptions, not data entry
              </div>
            </div>

            <div style={{ background: "var(--green)", color: "#fff", borderRadius: 12, padding: "18px 20px", display: "flex", flexDirection: "column", gap: 6 }}>
              <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "rgba(255,255,255,0.75)", fontWeight: 600 }}>You save</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                <span style={{ fontSize: 44, fontWeight: 600, letterSpacing: "-0.025em" }}>{fmt(result.savings)}</span>
                <span style={{ fontSize: 14, color: "rgba(255,255,255,0.8)" }}>/ month</span>
              </div>
              <div style={{ fontSize: 13, color: "rgba(255,255,255,0.85)" }}>
                ≈ <strong>{fmtK(result.annual)}</strong> per year
              </div>
            </div>

            <a href="contact.html" className="btn arrow" style={{ background: "#fff", color: "var(--ink)", justifyContent: "center" }}>
              Lock this in — request free trial
            </a>
            <div style={{ fontSize: 11.5, color: "rgba(255,255,255,0.55)", textAlign: "center" }}>
              No card · BAA on request · Cancel any time
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const ROISlider = ({ label, value, setValue, min, max, step, unit, prefix = "" }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
      <span style={{ fontSize: 13, fontWeight: 550, color: "var(--ink-2)" }}>{label}</span>
      <span style={{ fontFamily: "var(--mono)", fontSize: 17, fontWeight: 600, color: "var(--green-ink)" }}>
        {prefix}{value.toLocaleString()} <span style={{ fontSize: 11, color: "var(--ink-4)", fontWeight: 500 }}>{unit}</span>
      </span>
    </div>
    <input type="range" min={min} max={max} step={step} value={value}
      onChange={(e) => setValue(Number(e.target.value))}
      style={{ width: "100%", accentColor: "var(--green)" }}/>
    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "var(--ink-5)" }}>
      <span>{prefix}{min}</span>
      <span>{prefix}{max}</span>
    </div>
  </div>
);

window.ROI = ROI;