// ROI section — interactive calculator that makes the math undeniable.

const formatCurrency = (n) => '$' + Math.round(n).toLocaleString('en-US');

const ROISlider = ({ label, value, min, max, step = 1, onChange, format = (v) => v, suffix }) => (
  <div style={{ marginBottom: 28 }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
      <label style={{ fontSize: 13, color: 'var(--fg-mute)' }}>{label}</label>
      <div style={{ fontFamily: 'Geist Mono', fontSize: 15, color: 'var(--fg)', fontWeight: 500 }}>
        {format(value)}{suffix && <span style={{ color: 'var(--fg-faint)', marginLeft: 4 }}>{suffix}</span>}
      </div>
    </div>
    <input
      type="range"
      min={min}
      max={max}
      step={step}
      value={value}
      onChange={(e) => onChange(Number(e.target.value))}
      style={{
        width: '100%',
        appearance: 'none',
        WebkitAppearance: 'none',
        height: 6,
        borderRadius: 3,
        background: `linear-gradient(to right, var(--gold) 0%, var(--gold) ${((value - min) / (max - min)) * 100}%, var(--bg-deep) ${((value - min) / (max - min)) * 100}%, var(--bg-deep) 100%)`,
        outline: 'none',
        cursor: 'pointer',
      }}
    />
    <style>{`
      input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        -webkit-appearance: none;
        width: 22px; height: 22px;
        border-radius: 50%;
        background: var(--card-solid);
        border: 2px solid var(--gold);
        box-shadow: 0 2px 6px rgba(40,30,10,0.15);
        cursor: pointer;
      }
      input[type="range"]::-moz-range-thumb {
        width: 22px; height: 22px;
        border-radius: 50%;
        background: var(--card-solid);
        border: 2px solid var(--gold);
        box-shadow: 0 2px 6px rgba(40,30,10,0.15);
        cursor: pointer;
      }
    `}</style>
  </div>
);

const ROI = () => {
  const [cases, setCases] = useState(10);
  const [ticket, setTicket] = useState(5000);
  const [current, setCurrent] = useState(50);
  const [target, setTarget] = useState(65);

  // Recovered revenue per month
  const accepted_now = cases * (current / 100);
  const accepted_target = cases * (target / 100);
  const delta_cases = accepted_target - accepted_now;
  const delta_monthly = delta_cases * ticket;
  const delta_yearly = delta_monthly * 12;

  // Hinata cost yardstick (placeholder)
  const annual_cost = 4788; // $399/mo
  const payback_cases = annual_cost / ticket;

  return (
    <section id="roi" style={{ position: 'relative' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 5fr) minmax(0, 7fr)', gap: 80, alignItems: 'start' }}>
          {/* Left — copy */}
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 24 }}>The math</div>
            <h2 style={{ marginBottom: 28 }}>
              One extra accepted case <span className="serif" style={{ color: 'var(--gold-deep)' }}>pays for a&nbsp;year</span> of Hinata.
            </h2>
            <p className="lede" style={{ marginBottom: 36 }}>
              Industry case acceptance for complex specialist procedures sits at
              60–70%. Lifting it even ten points on ten cases a month at a $5K
              ticket is $60,000 in recovered revenue. Move the sliders.
            </p>

            <div style={{ padding: '20px 22px', borderRadius: 12, background: 'var(--bg-soft)', border: '1px solid var(--line)' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--fg-faint)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>
                Payback period
              </div>
              <div className="serif" style={{ fontSize: 40, color: 'var(--gold-deep)', lineHeight: 1, marginBottom: 4 }}>
                {payback_cases < 1
                  ? 'Under one case'
                  : `${payback_cases.toFixed(1)} cases`}
              </div>
              <div style={{ fontSize: 13, color: 'var(--fg-mute)' }}>
                Hinata Pro: {formatCurrency(annual_cost)}/yr · {formatCurrency(annual_cost / 12)}/mo
              </div>
            </div>
          </div>

          {/* Right — calculator */}
          <div className="reveal" style={{
            padding: '36px 40px',
            borderRadius: 'var(--radius-xl)',
            background: 'var(--card-solid)',
            border: '1px solid var(--line)',
            boxShadow: 'var(--shadow-md)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
              <h3 style={{ fontSize: 20 }}>Your practice, in numbers</h3>
              <div className="chip"><Icon name="sliders" size={12} /> Live</div>
            </div>

            <ROISlider
              label="Complex cases referred per month"
              value={cases}
              min={2}
              max={40}
              onChange={setCases}
              format={(v) => v}
              suffix="cases"
            />
            <ROISlider
              label="Average case value"
              value={ticket}
              min={3000}
              max={20000}
              step={250}
              onChange={setTicket}
              format={formatCurrency}
            />
            <ROISlider
              label="Current acceptance rate"
              value={current}
              min={20}
              max={90}
              onChange={(v) => { setCurrent(v); if (v >= target) setTarget(Math.min(95, v + 10)); }}
              format={(v) => v + '%'}
            />
            <ROISlider
              label="Target acceptance rate"
              value={target}
              min={Math.min(current + 5, 90)}
              max={95}
              onChange={setTarget}
              format={(v) => v + '%'}
            />

            <div style={{
              marginTop: 32,
              padding: '24px 24px',
              borderRadius: 'var(--radius-lg)',
              background: 'linear-gradient(135deg, var(--bg-soft) 0%, color-mix(in oklab, var(--gold) 14%, var(--bg-soft)) 100%)',
              border: '1px solid color-mix(in oklab, var(--gold) 30%, transparent)',
            }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--gold-deep)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>
                Recovered annual revenue
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
                <div className="serif" style={{
                  fontSize: 72,
                  color: 'var(--fg)',
                  lineHeight: 1,
                  letterSpacing: '-0.02em',
                }}>
                  {formatCurrency(delta_yearly)}
                </div>
                <div style={{ fontSize: 14, color: 'var(--fg-mute)' }}>
                  / year
                </div>
              </div>
              <div style={{ marginTop: 16, display: 'flex', gap: 32, flexWrap: 'wrap' }}>
                <div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--fg-faint)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Per month</div>
                  <div style={{ fontSize: 18, fontWeight: 500, marginTop: 2 }}>{formatCurrency(delta_monthly)}</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--fg-faint)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Extra cases / mo</div>
                  <div style={{ fontSize: 18, fontWeight: 500, marginTop: 2 }}>+{delta_cases.toFixed(1)}</div>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--fg-faint)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Net of Hinata</div>
                  <div style={{ fontSize: 18, fontWeight: 500, marginTop: 2, color: 'var(--gold-deep)' }}>
                    {formatCurrency(delta_yearly - annual_cost)}
                  </div>
                </div>
              </div>
            </div>

            <p className="small" style={{ marginTop: 20, lineHeight: 1.5 }}>
              Calculated from gross procedural revenue. Doesn't include the
              compounding effect of patients referring friends after a great
              experience — which our pilots show roughly doubles over a year.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ROI });