/* Lost-call calculator — two buckets, because after-hours calls behave
   differently. Daytime missed calls = regular job value, ~60% go to a
   competitor. After-hours missed calls = emergency-grade, worth ~2x, and
   ~85% go to a competitor because they can't wait. Honest, adjustable,
   conservative defaults. Ctrl is hoisted (inline-defined components remount
   the <input> and break slider dragging). */
function Ctrl({ label, val, children }) {
  return (
    <div className="ctrl">
      <div className="row"><span className="clabel">{label}</span><span className="cval">{val}</span></div>
      {children}
    </div>
  );
}

function Calculator({ onCTA }) {
  const [calls, setCalls] = useState(8);    // total missed calls / week
  const [ah, setAh] = useState(30);         // % that come after hours
  const [value, setValue] = useState(400);  // average daytime job value

  const WEEKS = 52;
  const EMERG_MULT = 2;     // emergency jobs pay about double
  const DAY_COMP = 0.60;    // daytime callers who go to a competitor
  const AH_COMP = 0.85;     // after-hours callers who go to a competitor (can't wait)

  const ahShare = ah / 100;
  const dayCalls = calls * (1 - ahShare);
  const ahCalls = calls * ahShare;
  const emergValue = value * EMERG_MULT;

  const dayAnnual = dayCalls * DAY_COMP * value * WEEKS;
  const ahAnnual = ahCalls * AH_COMP * emergValue * WEEKS;
  const annual = dayAnnual + ahAnnual;

  const money = (n) => '$' + Math.round(n).toLocaleString('en-US');
  const pct = (v, min, max) => ((v - min) / (max - min)) * 100;
  const fill = (p) => ({ '--p': p + '%' });

  return (
    <section className="calc" id="calc">
      <div className="site sec-pad">
        <div className="grid">
          <div>
            <div className="eyebrow">The lost-call math</div>
            <h2 className="display">What missed calls really cost you.</h2>
            <p className="lead">Most after-hours calls never leave a voicemail. They call the next company on Google. Here's what that walks away with, for a BC trades business.</p>

            <Ctrl label="Missed calls / week" val={calls}>
              <input className="rng" type="range" min="1" max="40" value={calls} style={fill(pct(calls, 1, 40))} onChange={e => setCalls(+e.target.value)} />
            </Ctrl>
            <Ctrl label="Share that come after hours" val={ah + '%'}>
              <input className="rng" type="range" min="0" max="70" value={ah} style={fill(pct(ah, 0, 70))} onChange={e => setAh(+e.target.value)} />
            </Ctrl>
            <Ctrl label="Average job value" val={money(value)}>
              <input className="rng" type="range" min="100" max="3000" step="20" value={value} style={fill(pct(value, 100, 3000))} onChange={e => setValue(+e.target.value)} />
            </Ctrl>
          </div>

          <div className="calc-readout">
            <div className="rlabel">Revenue walking out the door each year</div>
            <div className="big">{money(annual)}</div>
            <div className="sub">From the {calls} calls a week you can't get to. Most of it comes after hours.</div>

            <div className="calc-split">
              <div className="csplit">
                <div className="l">Daytime jobs<b>You were on a job</b></div>
                <div className="v">{money(dayAnnual)}<span>/ yr</span></div>
              </div>
              <div className="csplit ah">
                <div className="l">After-hours emergencies<b>Worth ~2x. They can't wait.</b></div>
                <div className="v">{money(ahAnnual)}<span>/ yr</span></div>
              </div>
            </div>

            <div className="calc-roi"><Icon name="bolt" /> And those are just the calls you know about.</div>
            <div style={{ marginTop: 22 }}>
              <Button variant="primary" className="block" icon="phoneVolume" onClick={onCTA}>Get these jobs back</Button>
            </div>
            <div className="calc-disc">Estimate for BC trades. Assumes 60% of daytime and 85% of after-hours callers go to a competitor. Slide it to your numbers.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Calculator = Calculator;