function ROI() {
  const [calls, setCalls] = React.useState(280);
  const [missRate, setMissRate] = React.useState(22);
  const [revenue, setRevenue] = React.useState(420);

  const missed = Math.round(calls * (missRate/100));
  const recoverable = Math.round(missed * 0.7); // Samika recovers ~70%
  const monthly = recoverable * revenue;
  const annual = monthly * 12;

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

  return (
    <section className="roi section" id="roi">
      <div className="container">
        <div className="roi__grid">
          <div className="roi__head">
            <span className="eyebrow">Live ROI calculator</span>
            <h2 className="display h-lg">
              The revenue<br/>
              <span className="serif">already in your phone lines.</span>
            </h2>
            <p className="lede">Most clinics leak 10–30% of inbound demand to voicemail. Drag the inputs to see what your line looks like.</p>
          </div>

          <div className="roi__panel">
            <div className="roi__field">
              <div className="roi__row">
                <span className="roi__label">Inbound calls / month</span>
                <span className="roi__val">{calls.toLocaleString()}</span>
              </div>
              <input type="range" min="50" max="1500" step="10" value={calls} onChange={e => setCalls(+e.target.value)} />
            </div>
            <div className="roi__field">
              <div className="roi__row">
                <span className="roi__label">Currently missed / abandoned</span>
                <span className="roi__val">{missRate}%</span>
              </div>
              <input type="range" min="5" max="50" step="1" value={missRate} onChange={e => setMissRate(+e.target.value)} />
            </div>
            <div className="roi__field">
              <div className="roi__row">
                <span className="roi__label">Avg revenue / appointment</span>
                <span className="roi__val">${revenue}</span>
              </div>
              <input type="range" min="80" max="2000" step="20" value={revenue} onChange={e => setRevenue(+e.target.value)} />
            </div>

            <div className="roi__output">
              <div className="roi__out-row">
                <span>Missed calls / month</span>
                <span>{missed}</span>
              </div>
              <div className="roi__out-row">
                <span>Recoverable bookings (Samika, 70%)</span>
                <span>{recoverable}</span>
              </div>
            </div>

            <div className="roi__result">
              <div className="roi__result-label">Monthly revenue recovered</div>
              <div className="roi__result-number">{fmt(monthly)}</div>
              <div className="roi__result-annual">
                <span className="roi__result-annual-label">Annualized</span>
                <span className="roi__result-annual-val">{fmt(annual)}</span>
              </div>
            </div>
            <a href="#book" className="btn btn--primary" style={{alignSelf:"flex-start"}}>See it on a call <span className="arrow">→</span></a>
          </div>
        </div>
      </div>

      <style>{`
        /* ── Section: full dark background ── */
        .roi.section {
          background: var(--ink-900);
          color: var(--cream-100);
        }
        .roi.section .eyebrow { color: rgba(247,241,228,0.5); }
        .roi.section .lede { color: rgba(247,241,228,0.65); }

        .roi__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
        .roi__head { display:flex; flex-direction:column; gap: 16px; position: sticky; top: 100px; }
        .roi__head h2 { margin: 8px 0; color: var(--cream-100); }

        /* Panel sits on the dark section — lighter than ink-900 */
        .roi__panel {
          background: rgba(247,241,228,0.06);
          border: 1px solid rgba(247,241,228,0.1);
          color: var(--cream-100);
          border-radius: var(--radius-lg);
          padding: 40px;
          display: flex; flex-direction: column; gap: 28px;
        }
        .roi__field { display: flex; flex-direction: column; gap: 10px; }
        .roi__row { display: flex; justify-content: space-between; align-items: baseline; }
        .roi__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,241,228,0.5); }
        .roi__val { font-size: 18px; font-weight: 500; }
        .roi__panel input[type="range"] {
          -webkit-appearance: none; appearance: none;
          width: 100%; height: 2px; background: rgba(247,241,228,0.18);
          border-radius: 2px; outline: none; padding: 0; border: 0;
        }
        .roi__panel input[type="range"]::-webkit-slider-thumb {
          -webkit-appearance: none; appearance: none;
          width: 16px; height: 16px; border-radius: 50%; background: var(--cream-100);
          border: 0; cursor: grab;
        }
        .roi__panel input[type="range"]::-moz-range-thumb {
          width: 16px; height: 16px; border-radius: 50%; background: var(--cream-100);
          border: 0; cursor: grab;
        }

        /* Derived rows (small) */
        .roi__output {
          padding-top: 20px; border-top: 1px solid rgba(247,241,228,0.12);
          display: flex; flex-direction: column; gap: 10px;
        }
        .roi__out-row {
          display: flex; justify-content: space-between; align-items: baseline;
          font-size: 13px; color: rgba(247,241,228,0.55);
          font-family: var(--font-mono); letter-spacing: 0.02em;
        }

        /* ── Result block — the money ── */
        .roi__result {
          background: rgba(247,241,228,0.07);
          border: 1px solid rgba(247,241,228,0.14);
          border-radius: 12px;
          padding: 24px 28px 20px;
          display: flex; flex-direction: column; gap: 6px;
        }
        .roi__result-label {
          font-family: var(--font-mono); font-size: 10px;
          letter-spacing: 0.16em; text-transform: uppercase;
          color: rgba(247,241,228,0.45);
        }
        .roi__result-number {
          font-family: var(--font-display); font-style: italic;
          font-size: clamp(48px, 7vw, 72px);
          font-weight: 500; letter-spacing: -0.03em; line-height: 1;
          color: var(--cream-100);
        }
        .roi__result-annual {
          display: flex; align-items: baseline; gap: 10px;
          margin-top: 8px; padding-top: 14px;
          border-top: 1px solid rgba(247,241,228,0.1);
        }
        .roi__result-annual-label {
          font-family: var(--font-mono); font-size: 10px;
          letter-spacing: 0.14em; text-transform: uppercase;
          color: rgba(247,241,228,0.4);
        }
        .roi__result-annual-val {
          font-size: 22px; font-weight: 500;
          letter-spacing: -0.02em; color: rgba(247,241,228,0.85);
        }

        @media (max-width: 1000px) {
          .roi__grid { grid-template-columns: 1fr; gap: 40px; }
          .roi__head { position: static; }
        }
      `}</style>
    </section>
  );
}
window.ROI = ROI;