// ROI micro-tool — one slider (team size), live math, email capture.
const { useState: useStateRT, useMemo: useMemoRT } = React;

const HRS_PER_WEEK = 6;   // baseline reclaimed per employee/week
const WEEKS = 48;
const DEFAULT_RATE = 50;
// Same Web3Forms key the contact + partners forms use — routes to info@technologycycle.com.
// Submission happens BROWSER-SIDE here (matching contact + partners) because Web3Forms
// 403s server-side requests from Vercel even with explicit Origin headers.
const ROI_WEB3FORMS_KEY = 'c3c04232-e71e-4d91-a073-99b823461145';

function fmtInt(n) { return Math.round(n).toLocaleString(); }
function fmtMoney(n) {
  if (n >= 1_000_000) return '$' + (n / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
  if (n >= 1000) return '$' + Math.round(n / 1000).toLocaleString() + 'k';
  return '$' + Math.round(n).toLocaleString();
}

window.ROITool = function ROITool() {
  const [team, setTeam] = useStateRT(45);
  const [rate, setRate] = useStateRT(DEFAULT_RATE);
  const [email, setEmail] = useStateRT('');
  const [sent, setSent] = useStateRT(false);
  const [submitting, setSubmitting] = useStateRT(false);
  const [errMsg, setErrMsg] = useStateRT('');

  const hours = useMemoRT(() => team * HRS_PER_WEEK * WEEKS, [team]);
  const dollars = useMemoRT(() => hours * rate, [hours, rate]);
  const daysEquivalent = useMemoRT(() => hours / 8, [hours]);

  // Submit: TWO parallel calls.
  //   1. Web3Forms (browser-side, like contact + partners forms) — captures
  //      the lead at info@technologycycle.com. This is what we MUST get right;
  //      if it succeeds the form shows "Sent".
  //   2. /api/roi-report (Vercel function) — sends the branded HTML auto-report
  //      to the prospect via Resend. Only fires meaningfully if RESEND_API_KEY
  //      env var is set; otherwise returns success with status pending_resend_setup.
  // The form succeeds if Web3Forms succeeded — we don't block on the report path.
  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email || submitting) return;
    setErrMsg('');
    setSubmitting(true);

    const payload = {
      email,
      team_size: team,
      blended_rate: `$${rate}/hr`,
      hours_per_year: fmtInt(hours),
      cost_equivalent: fmtMoney(dollars),
      work_days_returned: fmtInt(daysEquivalent),
    };

    // Lead capture (Web3Forms) — required path
    const notify = (async () => {
      const data = new FormData();
      data.append('access_key', ROI_WEB3FORMS_KEY);
      data.append('subject', `New ROI report request from ${email}`);
      data.append('from_name', 'technologycycle.com · ROI tool');
      data.append('email', email);
      data.append('team_size', String(team));
      data.append('blended_rate', payload.blended_rate);
      data.append('hours_per_year', payload.hours_per_year);
      data.append('cost_equivalent', payload.cost_equivalent);
      data.append('work_days_returned', payload.work_days_returned);
      const r = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        body: data,
        headers: { 'Accept': 'application/json' },
      });
      const j = await r.json().catch(() => ({}));
      return j.success === true;
    })();

    // Auto-report (Resend via Vercel function) — best-effort, non-blocking
    const report = fetch('/api/roi-report', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(payload),
    }).catch(() => null);

    try {
      const notifyOk = await notify;
      // Don't await report — it can finish in the background.
      report.catch(() => {});
      if (notifyOk) {
        setSent(true);
      } else {
        setErrMsg('Something went wrong — please try again or email info@technologycycle.com.');
      }
    } catch (err) {
      setErrMsg('Network error — please try again or email info@technologycycle.com.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section className="roi-section reveal" data-section-nav="ROI">
      <div className="container">
        <div className="roi-layout">
          <div className="roi-head">
            <span className="kicker">Back-of-envelope</span>
            <h2 style={{ marginTop: 20 }}>
              Rough math on <span className="serif">what you'd get back</span>.
            </h2>
            <p style={{ color: 'var(--text-muted)', fontSize: 17, lineHeight: 1.55, maxWidth: 520, marginTop: 16 }}>
              A conservative baseline of ~6 hours per employee per week returned by replacing repetitive manual work with AI agents and automation. Your real number depends on where the friction sits — that's the Assess phase.
            </p>
            <ul className="roi-assumptions">
              <li><span className="label-mono">Baseline</span> 6 hrs / employee / week returned</li>
              <li><span className="label-mono">Working weeks</span> 48 / year</li>
              <li><span className="label-mono">Blended rate</span> editable below</li>
            </ul>
          </div>

          <div className="roi-card">
            <div className="roi-display">
              <div className="roi-display-head">
                <span className="mono" style={{ color: 'var(--text-dim)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>A team of {team} reclaims</span>
              </div>
              <div className="roi-display-big">
                <span className="gradient-text">{fmtInt(hours)}</span>
                <span className="roi-display-unit">hours / year</span>
              </div>
              <div className="roi-display-sub">
                That's roughly <strong>{fmtInt(daysEquivalent)} full work-days</strong> returned, or about <strong>{fmtMoney(dollars)}</strong> in blended labor cost.
              </div>
            </div>

            <div className="roi-controls">
              <label className="roi-control">
                <div className="roi-control-head">
                  <span className="label-mono">Team size</span>
                  <span className="roi-control-val mono">{team}</span>
                </div>
                <input
                  type="range"
                  min="5" max="500" step="5"
                  value={team}
                  onChange={(e) => setTeam(+e.target.value)}
                  className="roi-slider"
                />
                <div className="roi-slider-scale mono">
                  <span>5</span><span>100</span><span>250</span><span>500</span>
                </div>
              </label>

              <label className="roi-control">
                <div className="roi-control-head">
                  <span className="label-mono">Blended rate</span>
                  <span className="roi-control-val mono">${rate}/hr</span>
                </div>
                <input
                  type="range"
                  min="25" max="150" step="5"
                  value={rate}
                  onChange={(e) => setRate(+e.target.value)}
                  className="roi-slider"
                />
                <div className="roi-slider-scale mono">
                  <span>$25</span><span>$75</span><span>$150</span>
                </div>
              </label>
            </div>

            <div className="roi-metrics">
              <div className="roi-metric">
                <div className="roi-metric-val">{fmtInt(hours)}</div>
                <div className="roi-metric-label">Hrs / year reclaimed</div>
              </div>
              <div className="roi-metric">
                <div className="roi-metric-val">{fmtMoney(dollars)}</div>
                <div className="roi-metric-label">Cost equivalent</div>
              </div>
              <div className="roi-metric">
                <div className="roi-metric-val">{fmtInt(daysEquivalent)}</div>
                <div className="roi-metric-label">Work-days returned</div>
              </div>
            </div>

            {!sent ? (
              <form className="roi-capture" onSubmit={onSubmit}>
                <div className="roi-capture-head">
                  <span className="label-mono">Get the full breakdown</span>
                </div>
                <div className="roi-capture-row">
                  <input
                    type="email"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="work@yourcompany.com"
                    className="roi-capture-input"
                    disabled={submitting}
                  />
                  <button type="submit" className="btn btn-primary roi-capture-btn" disabled={submitting}>
                    {submitting ? 'Sending…' : (<>Send report <span aria-hidden="true">→</span></>)}
                  </button>
                </div>
                <div className="roi-capture-foot mono">
                  Industry benchmarks · where your time actually goes · what a first engagement targets.
                </div>
                {errMsg && (
                  <div style={{marginTop: 12, color: '#ef4444', fontSize: 13}} role="alert">{errMsg}</div>
                )}
              </form>
            ) : (
              <div className="roi-capture roi-capture-sent">
                <div className="label-mono">Sent</div>
                <div className="roi-capture-sent-body">
                  Breakdown heading to <strong>{email}</strong>. Usually arrives within a few minutes — check your spam folder if it runs long.
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};