/* global React */
const { useState: useStateRoi, useMemo: useMemoRoi } = React;

function ROI() {
  const [trucks, setTrucks] = useStateRoi(50);
  const [detention, setDetention] = useStateRoi(3);
  const [rate, setRate] = useStateRoi(95);

  const out = useMemoRoi(() => {
    const detentionRecovered = trucks * detention * rate * 52 * 0.62;
    const dispatcherTimeSaved = trucks * 850;
    const invoiceFaster = trucks * 1200;
    const total = detentionRecovered + dispatcherTimeSaved + invoiceFaster;
    return {
      total: Math.round(total / 1000) * 1000,
      detentionRecovered: Math.round(detentionRecovered),
      dispatcherTimeSaved: Math.round(dispatcherTimeSaved),
      invoiceFaster: Math.round(invoiceFaster),
    };
  }, [trucks, detention, rate]);

  const fmt = (n) => "$" + n.toLocaleString("en-CA");

  return (
    <section className="section section--alt" id="roi">
      <div className="section__top">
        <div className="section__num">06</div>
        <div className="section__label">
          <span className="eyebrow">ROI calculator · CAD</span>
          <h2 className="display h2">Most fleets pay for Lanexa in <em style={{ fontStyle: "normal", background: "linear-gradient(90deg, var(--blue-2), var(--sky))", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>month two</em>.</h2>
        </div>
      </div>
      <div className="roi">
        <div className="roi__form">
          <div className="roi__row">
            <label><span>Power units</span><span className="val">{trucks}</span></label>
            <input type="range" min="5" max="250" value={trucks} onChange={(e) => setTrucks(+e.target.value)} />
          </div>
          <div className="roi__row">
            <label><span>Detention hours / load (avg)</span><span className="val">{detention} h</span></label>
            <input type="range" min="0" max="8" step="0.5" value={detention} onChange={(e) => setDetention(+e.target.value)} />
          </div>
          <div className="roi__row">
            <label><span>Detention rate (CAD / hr)</span><span className="val">${rate}</span></label>
            <input type="range" min="50" max="150" step="5" value={rate} onChange={(e) => setRate(+e.target.value)} />
          </div>
          <div style={{ marginTop: "2rem", paddingTop: "1.5rem", borderTop: "1px solid var(--line)" }}>
            <div className="mono">Assumptions</div>
            <p style={{ fontSize: "0.82rem", color: "var(--muted)", marginTop: "0.5rem" }}>
              62% detention recovery rate (vs. ~22% industry baseline). 2.4 hrs of dispatcher time saved per truck per week at $28/hr fully-loaded. 9 days faster DSO on invoicing.
            </p>
          </div>
        </div>
        <div className="roi__out">
          <div>
            <div className="mono">Annual upside · CAD</div>
            <div className="roi__big">{fmt(out.total)}</div>
            <div className="mono" style={{ color: "var(--muted)" }}>Before subscription · {trucks} trucks</div>
          </div>
          <div className="roi__breakdown">
            <div><span>Detention recovered</span><span className="num">{fmt(out.detentionRecovered)}</span></div>
            <div><span>Dispatcher time saved</span><span className="num">{fmt(out.dispatcherTimeSaved)}</span></div>
            <div><span>Faster invoicing (DSO)</span><span className="num">{fmt(out.invoiceFaster)}</span></div>
          </div>
          <div className="hero__cta">
            <a href="#" className="btn btn--solid" onClick={(e) => e.preventDefault()}>Send me the breakdown <Arrow /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ROI });