// site-roi.jsx — Live ROI Calculator (dark surface + count-up on view)
const { useState: useStateRoi, useMemo, useRef: useRefRoi, useEffect: useEffectRoi } = React;

// Tiny count-up: animates from 0 to `value` over `dur` ms, calls cb(n) each tick.
function useCountUp(value, active, dur = 900) {
  const [shown, setShown] = useStateRoi(active ? 0 : value);
  useEffectRoi(() => {
    if (!active) { setShown(value); return; }
    let raf, t0;
    const step = (t) => {
      if (!t0) t0 = t;
      const p = Math.min(1, (t - t0) / dur);
      const eased = 1 - Math.pow(1 - p, 3); // easeOutCubic
      setShown(Math.round(value * eased));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
    // eslint-disable-next-line
  }, [value, active]);
  return shown;
}

function RoiSection() {
  const [employees, setEmployees] = useStateRoi(1200);
  const [travellers, setTravellers] = useStateRoi(85);
  const [currentSpend, setCurrentSpend] = useStateRoi(2400000);
  const [responseTime, setResponseTime] = useStateRoi(27);

  // Trigger count-up the first time the output panel enters view
  const outRef = useRefRoi(null);
  const [counted, setCounted] = useStateRoi(false);
  useEffectRoi(() => {
    if (!outRef.current || counted) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setCounted(true); io.disconnect(); } });
    }, { threshold: 0.35 });
    io.observe(outRef.current);
    return () => io.disconnect();
  }, [counted]);

  // Modeled outcomes (matches the v6_4 narrative: 42% cost ↓, 82% response ↓, 87% FTE ↓, 327% ROI)
  const calc = useMemo(() => {
    // Cost saving ranges from 35% to 50% depending on org size
    const sizeFactor = Math.min(1, Math.max(0.6, employees / 2000));
    const costSavingPct = 0.35 + sizeFactor * 0.10; // 35–45%
    const annualSaving = Math.round(currentSpend * costSavingPct);

    // Response: model from 27→5 typical, scales with traveller load
    const newResponseTime = Math.max(3, Math.round(responseTime * 0.18));
    const responsePct = Math.round((1 - newResponseTime / responseTime) * 100);

    // FTE: 4.5→0.6 model — 87% reduction
    const ftePct = 87;

    // 3-yr ROI: cumulative savings vs. estimated R24 cost (≈ 60% of current)
    const r24AnnualCost = Math.round(currentSpend * (1 - costSavingPct));
    const threeYearSavings = annualSaving * 3;
    const roiPct = Math.round((threeYearSavings / r24AnnualCost) * 100);

    // Payback in months
    const monthlySaving = annualSaving / 12;
    const monthlyR24 = r24AnnualCost / 12;
    const payback = Math.max(3, Math.round((r24AnnualCost / annualSaving) * 12));

    return {
      annualSaving,
      newResponseTime,
      responsePct,
      ftePct,
      roiPct,
      payback,
      costSavingPct: Math.round(costSavingPct * 100),
      r24AnnualCost,
    };
  }, [employees, travellers, currentSpend, responseTime]);

  const fmt = (n) => new Intl.NumberFormat("en-US").format(n);
  const fmtMoney = (n) => "$" + new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(n);
  const fmtMoneyShort = (n) => {
    if (n >= 1_000_000) return "$" + (n / 1_000_000).toFixed(n >= 10_000_000 ? 0 : 2) + "M";
    if (n >= 1_000) return "$" + Math.round(n / 1000) + "K";
    return fmtMoney(n);
  };

  // Animated values when first scrolling into the output panel
  const aRoi = useCountUp(calc.roiPct, counted);
  const aPayback = useCountUp(calc.payback, counted);
  const aSaving = useCountUp(calc.annualSaving, counted);
  const aResp = useCountUp(calc.newResponseTime, counted);
  const aFte = useCountUp(calc.ftePct, counted);
  const aCost = useCountUp(calc.r24AnnualCost, counted);

  return (
    <section id="roi" className="roi">
      <div className="roi__bg-grid"/>
      <div className="roi__bg-glow"/>
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div className="section-header">
          <p className="eyebrow" style={{ color: "var(--gold-500)" }}>Live ROI calculator</p>
          <h2 className="section-h2">
            See your savings.<br/>In real time, as you type.
          </h2>
          <p className="section-sub">
            Adjust the inputs to match your organisation. Numbers update live, based on benchmarks from our active deployments across 40+ countries.
          </p>
        </div>

        <div className="roi-grid">

          {/* LEFT: inputs */}
          <div className="roi-card">
            <div className="roi-card__label">Your organisation</div>

            <div className="roi-input">
              <div className="roi-input__head">
                <label htmlFor="roi-emp">Employees protected</label>
                <span className="roi-input__val">{fmt(employees)}</span>
              </div>
              <input
                id="roi-emp"
                type="range"
                min="100" max="20000" step="50"
                value={employees}
                onChange={(e) => setEmployees(+e.target.value)}
              />
              <div className="roi-input__scale"><span>100</span><span>20k</span></div>
            </div>

            <div className="roi-input">
              <div className="roi-input__head">
                <label htmlFor="roi-trav">Active business travellers (monthly)</label>
                <span className="roi-input__val">{fmt(travellers)}</span>
              </div>
              <input
                id="roi-trav"
                type="range"
                min="0" max="1500" step="5"
                value={travellers}
                onChange={(e) => setTravellers(+e.target.value)}
              />
              <div className="roi-input__scale"><span>0</span><span>1,500</span></div>
            </div>

            <div className="roi-input">
              <div className="roi-input__head">
                <label htmlFor="roi-spend">Current annual spend on duty-of-care tools</label>
                <span className="roi-input__val">{fmtMoneyShort(currentSpend)}</span>
              </div>
              <input
                id="roi-spend"
                type="range"
                min="50000" max="10000000" step="10000"
                value={currentSpend}
                onChange={(e) => setCurrentSpend(+e.target.value)}
              />
              <div className="roi-input__scale"><span>$50K</span><span>$10M</span></div>
            </div>

            <div className="roi-input">
              <div className="roi-input__head">
                <label htmlFor="roi-rt">Current avg response time (minutes)</label>
                <span className="roi-input__val">{responseTime} min</span>
              </div>
              <input
                id="roi-rt"
                type="range"
                min="5" max="60" step="1"
                value={responseTime}
                onChange={(e) => setResponseTime(+e.target.value)}
              />
              <div className="roi-input__scale"><span>5</span><span>60</span></div>
            </div>

            <div className="roi-input__assumption">
              <SIcon d={"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"} size={12}/>
              Estimates use benchmarks from real R24 deployments. Final pricing depends on which modules you adopt.
            </div>
          </div>

          {/* RIGHT: outputs */}
          <div className="roi-output" ref={outRef}>
            <div className="roi-output__top">
              <div className="roi-output__hero">
                <div className="roi-output__hero-label">Your 3-year ROI</div>
                <div className="roi-output__hero-val">{aRoi}<small>%</small></div>
                <div className="roi-output__hero-sub">Full payback in <strong>{aPayback}</strong> months</div>
              </div>
            </div>

            <div className="roi-output__grid">
              <div className="roi-metric">
                <div className="roi-metric__label">Annual saving</div>
                <div className="roi-metric__val">{fmtMoneyShort(aSaving)}</div>
                <div className="roi-metric__delta">{calc.costSavingPct}% less than current spend</div>
              </div>
              <div className="roi-metric">
                <div className="roi-metric__label">New response time</div>
                <div className="roi-metric__val">{aResp}<small>min</small></div>
                <div className="roi-metric__delta">{calc.responsePct}% faster than today</div>
              </div>
              <div className="roi-metric">
                <div className="roi-metric__label">Manual workload</div>
                <div className="roi-metric__val">{aFte}<small>%</small></div>
                <div className="roi-metric__delta">Less FTE time on coordination</div>
              </div>
              <div className="roi-metric">
                <div className="roi-metric__label">R24 annual cost</div>
                <div className="roi-metric__val">{fmtMoneyShort(aCost)}</div>
                <div className="roi-metric__delta">All-in, all modules included</div>
              </div>
            </div>

            <div className="roi-output__cta">
              <a href="#contact" className="btn-red-lg">
                <SIcon d={SIcons.calendar} size={14}/>
                Get a tailored quote
              </a>
              <a href="#contact" className="btn-tour" style={{ color: "rgba(255,255,255,0.85)", borderColor: "rgba(255,255,255,0.25)" }}>
                Talk to a solutions engineer
              </a>
            </div>
          </div>
        </div>

        <div className="roi-disclaimer">
          ROI modeling assumes a 35–45% reduction in fragmented tool costs, an 82% reduction in average response time, and 87% less manual coordination effort — based on 8 years of enterprise deployments. Final figures depend on which modules you adopt and your current architecture.
        </div>
      </div>
    </section>
  );
}

window.RoiSection = RoiSection;