function ROI() {
  // Team
  const [analysts, setAnalysts] = React.useState(10);
  const [salary, setSalary] = React.useState(150);

  // Bucket inputs — one slider per bucket
  const [disputeHrs, setDisputeHrs] = React.useState(3);
  const [cyclingHrs, setCyclingHrs] = React.useState(5);
  const [changesPerYr, setChangesPerYr] = React.useState(24);
  const [aiIncidents, setAiIncidents] = React.useState(4);

  // Constants — transparent, stated, adjustable via code if needed
  const WORK_WEEKS = 48; // 52 minus PTO/holidays
  const REWORK_HRS_PER_CHANGE = 6; // hrs to find & fix downstream dashboards when a metric definition changes
  const AI_INCIDENT_COST = 12000; // avg cost of a bad decision / misreport / rework triggered by a hallucinated answer
  const CLEARMETRIC_ANNUAL = 60000; // stated platform cost for payback math

  const hourly = (salary * 1000) / (WORK_WEEKS * 40);

  // Four buckets
  const dispute = analysts * disputeHrs * WORK_WEEKS * hourly;
  const cycling = analysts * cyclingHrs * WORK_WEEKS * hourly;
  const rework  = changesPerYr * REWORK_HRS_PER_CHANGE * hourly;
  const ai      = aiIncidents * AI_INCIDENT_COST;
  const total   = dispute + cycling + rework + ai;

  // Payback: how long to break even if Clearmetric eliminates just half of the waste
  const recoverable = total * 0.5;
  const paybackWeeks = recoverable > 0 ? (CLEARMETRIC_ANNUAL / recoverable) * 52 : 0;
  const paybackLabel = paybackWeeks < 1
    ? "< 1 week"
    : paybackWeeks < 52
      ? `${Math.round(paybackWeeks)} weeks`
      : `${(paybackWeeks / 52).toFixed(1)} years`;

  const fmt = n => '$' + Math.round(n).toLocaleString('en-US');
  const fmtK = n => n >= 1000000
    ? `$${(n / 1000000).toFixed(2)}M`
    : `$${Math.round(n / 1000)}K`;

  const buckets = [
    { key: 'dispute',  label: 'Definition disputes',     val: dispute, formula: `${analysts} analysts × ${disputeHrs} hrs/wk × ${WORK_WEEKS} wks × ${fmt(hourly)}/hr`,
      caption: 'Time spent reconciling conflicting numbers across dashboards.' },
    { key: 'cycling',  label: 'Dashboard cycling',       val: cycling, formula: `${analysts} × ${cyclingHrs} hrs/wk × ${WORK_WEEKS} wks × ${fmt(hourly)}/hr`,
      caption: 'Analysts bouncing between BI tools hunting for the right view.' },
    { key: 'rework',   label: 'Downstream rework',       val: rework,  formula: `${changesPerYr} metric changes/yr × ${REWORK_HRS_PER_CHANGE} hrs × ${fmt(hourly)}/hr`,
      caption: 'Finding and fixing dashboards after a definition changes.' },
    { key: 'ai',       label: 'AI hallucination cost',   val: ai,      formula: `${aiIncidents} incidents/yr × ${fmt(AI_INCIDENT_COST)} avg cost`,
      caption: 'Bad decisions triggered by ungrounded AI answers.' },
  ];

  return (
    <section className="section section--tinted" id="roi">
      <div className="wrap">
        <SectionHead num="07" kicker="Calculate your ROI">
          Four buckets of waste. No multipliers, no fluff — adjust the inputs, see the math, compute your payback.
        </SectionHead>

        <div className="roi2">
          <div className="roi2__inputs">
            <div className="roi2__group">
              <div className="mono-label">Your team</div>
              <div className="roi-input">
                <label>Analysts & dashboard consumers <span className="val">{analysts}</span></label>
                <input type="range" min="2" max="100" value={analysts} onChange={e => setAnalysts(+e.target.value)}/>
              </div>
              <div className="roi-input">
                <label>Fully-loaded cost per person <span className="val">${salary}K / yr</span></label>
                <input type="range" min="60" max="300" step="5" value={salary} onChange={e => setSalary(+e.target.value)}/>
                <div className="hint">Derived: <strong>{fmt(hourly)}/hr</strong> at {WORK_WEEKS} wks × 40 hrs.</div>
              </div>
            </div>

            <div className="roi2__group">
              <div className="mono-label">Waste per bucket</div>
              <div className="roi-input">
                <label>Hours/week lost to definition disputes <span className="val">{disputeHrs}</span></label>
                <input type="range" min="0" max="10" step="0.5" value={disputeHrs} onChange={e => setDisputeHrs(+e.target.value)}/>
              </div>
              <div className="roi-input">
                <label>Hours/week cycling through dashboards <span className="val">{cyclingHrs}</span></label>
                <input type="range" min="0" max="15" step="0.5" value={cyclingHrs} onChange={e => setCyclingHrs(+e.target.value)}/>
              </div>
              <div className="roi-input">
                <label>Metric definition changes per year <span className="val">{changesPerYr}</span></label>
                <input type="range" min="0" max="100" step="2" value={changesPerYr} onChange={e => setChangesPerYr(+e.target.value)}/>
                <div className="hint">Assumes {REWORK_HRS_PER_CHANGE} hrs of downstream rework per change.</div>
              </div>
              <div className="roi-input">
                <label>AI-caused incidents per year <span className="val">{aiIncidents}</span></label>
                <input type="range" min="0" max="24" step="1" value={aiIncidents} onChange={e => setAiIncidents(+e.target.value)}/>
                <div className="hint">Assumes {fmt(AI_INCIDENT_COST)} avg blast radius per incident.</div>
              </div>
            </div>
          </div>

          <div className="roi2__out">
            <div className="mono-label">Annual waste · today</div>
            <div className="roi2__big">{fmtK(total)}</div>
            <div className="roi2__hint">Your current cost of unmanaged definitions.</div>

            <div className="roi2__buckets">
              {buckets.map(b => {
                const pct = total > 0 ? (b.val / total) * 100 : 0;
                return (
                  <div className="roi2__bucket" key={b.key}>
                    <div className="roi2__bucket-row">
                      <div className="roi2__bucket-label">{b.label}</div>
                      <div className="roi2__bucket-val">{fmt(b.val)}</div>
                    </div>
                    <div className="roi2__bar"><div className="roi2__bar-fill" style={{ width: `${pct}%` }}/></div>
                    <div className="roi2__bucket-formula">{b.formula}</div>
                    <div className="roi2__bucket-caption">{b.caption}</div>
                  </div>
                );
              })}
            </div>

            <div className="roi2__payback">
              <div className="roi2__payback-row">
                <div>
                  <div className="mono-label">Payback</div>
                  <div className="roi2__payback-val">{paybackLabel}</div>
                </div>
                <div className="roi2__payback-sep"/>
                <div className="roi2__payback-math">
                  <div>Platform: <strong>{fmt(CLEARMETRIC_ANNUAL)}/yr</strong></div>
                  <div>Recover 50% of waste: <strong>{fmtK(recoverable)}/yr</strong></div>
                  <div className="hint">Break-even assumes Clearmetric eliminates half the waste above. Most teams recover more.</div>
                </div>
              </div>
            </div>

            <div className="roi2__foot">
              <span className="mono-label">Assumptions</span>
              <span>{WORK_WEEKS} working weeks · {REWORK_HRS_PER_CHANGE} hrs rework / change · {fmt(AI_INCIDENT_COST)} / AI incident · {fmt(CLEARMETRIC_ANNUAL)}/yr platform</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.ROI = ROI;