function ROI() {
  const [leads, setLeads] = useState(800);
  const [ticket, setTicket] = useState(450);
  const [margin, setMargin] = useState(8);
  const [currentClose, setCurrentClose] = useState(3.5);

  const fmt = (n) => n.toLocaleString('es-MX', { maximumFractionDigits: 0 });

  const lift = 3.0;
  const newClose = Math.min(currentClose * lift, 18);
  const baseCars = leads * (currentClose / 100);
  const newCars  = leads * (newClose   / 100);
  const extraCars = newCars - baseCars;
  const extraRevenue = extraCars * ticket * 1000;
  const extraGross = extraRevenue * (margin / 100);
  const annual = extraGross * 12;

  const Slider = ({ label, value, setValue, min, max, step, suffix, format }) => (
    <div className="roi-control">
      <h5>{label}</h5>
      <div className="row">
        <span className="val">
          {format ? format(value) : value}
          {suffix && <span style={{ fontSize: 16, color: 'var(--fg-3)', marginLeft: 6, fontWeight: 500, letterSpacing: 0 }}>{suffix}</span>}
        </span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value} onChange={e => setValue(Number(e.target.value))} />
      <div className="scale">
        <span>{format ? format(min) : min}</span>
        <span>{format ? format(max) : max}</span>
      </div>
    </div>
  );

  return (
    <section className="roi section" id="roi" data-screen-label="06 ROI">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">El retorno</span>
          <h2 className="title">
            <span className="line">Calcula cuánto estás dejando</span>
            <span className="line accent-text">sobre la mesa.</span>
          </h2>
          <p className="lede">
            Cifras basadas en concesionarias mexicanas con Joi en producción.
          </p>
        </div>

        <div className="roi-grid">
          <div className="roi-controls">
            <Slider label="Leads digitales por mes" value={leads} setValue={setLeads} min={100} max={3000} step={50} format={fmt} />
            <Slider label="Ticket promedio" value={ticket} setValue={setTicket} min={200} max={1500} step={10} format={(v)=>'$'+fmt(v)+'k'} />
            <Slider label="Margen sobre venta" value={margin} setValue={setMargin} min={3} max={18} step={0.5} suffix="%" />
            <Slider label="Tasa de cierre actual" value={currentClose} setValue={setCurrentClose} min={1} max={10} step={0.1} suffix="%" />
          </div>

          <div className="roi-out">
            <div>
              <div className="eyebrow">Utilidad adicional estimada</div>
              <div className="roi-headline">
                <span className="currency">$</span>
                <span className="delta">{fmt(extraGross)}</span>
              </div>
              <div className="roi-sub">
                MXN al mes en utilidad bruta extra. Aproximadamente <strong>${fmt(annual)}</strong> al año.
              </div>
            </div>

            <div className="roi-breakdown">
              <div className="roi-cell">
                <div className="k">Tasa de cierre con Joi</div>
                <div className="v">{newClose.toFixed(1)}<small>%</small></div>
              </div>
              <div className="roi-cell">
                <div className="k">Autos extra al mes</div>
                <div className="v">+{extraCars.toFixed(0)}</div>
              </div>
              <div className="roi-cell">
                <div className="k">Ingresos adicionales</div>
                <div className="v">${fmt(extraRevenue/1000000)}<small>M</small></div>
              </div>
              <div className="roi-cell">
                <div className="k">ROI sobre inversión</div>
                <div className="v">{Math.round(extraGross / 45000)}<small>×</small></div>
              </div>
            </div>

            <div className="roi-footnote">
              Supuesto: 3× lift en tasa de cierre · costo mensual ~$45k MXN · datos promedio de 12 concesionarias en producción 2025.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ROI = ROI;