function Roi() {
  const [hours, setHours] = React.useState(8);     // horas/semana repetitivas
  const [people, setPeople] = React.useState(3);   // personas afectadas
  const [rate, setRate] = React.useState(22);      // coste hora €

  // 70% ahorro tras automatización (estimación realista)
  const weeklyHoursSaved = hours * people * 0.7;
  const weeklyEur = weeklyHoursSaved * rate;
  const monthlyEur = weeklyEur * 4.33;
  const yearlyEur = weeklyEur * 52;
  const yearlyHours = weeklyHoursSaved * 52;

  const fmt = (n) => new Intl.NumberFormat('es-ES', { maximumFractionDigits: 0 }).format(n);

  return (
    <section id="roi">
      <div className="container">
        <Reveal><SectionLabel>03 / Calcula tu ahorro</SectionLabel></Reveal>
        <Reveal delay={80}>
          <h2 style={{ maxWidth: 800, marginBottom: 14 }}>
            ¿Cuánto te cuesta <span className="gradient-text">no automatizar</span>?
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ maxWidth: 620, color: 'var(--fg-dim)', fontSize: '1.05rem', marginBottom: 40 }}>
            Mueve los controles. Cálculo basado en una reducción media del 70% del
            tiempo dedicado a la tarea automatizable.
          </p>
        </Reveal>

        <Reveal delay={220} className="card roi-card with-glow">
          <div className="roi-inputs">
            <label>
              <div className="label-text">
                <span>Horas semanales en tareas repetitivas (por persona)</span>
                <span className="val">{hours}h</span>
              </div>
              <input type="range" min="1" max="30" value={hours} onChange={(e) => setHours(+e.target.value)} />
            </label>
            <label>
              <div className="label-text">
                <span>Personas afectadas</span>
                <span className="val">{people}</span>
              </div>
              <input type="range" min="1" max="20" value={people} onChange={(e) => setPeople(+e.target.value)} />
            </label>
            <label>
              <div className="label-text">
                <span>Coste medio por hora</span>
                <span className="val">{rate}€</span>
              </div>
              <input type="range" min="10" max="80" value={rate} onChange={(e) => setRate(+e.target.value)} />
            </label>
            <div style={{ marginTop: 8, padding: 14, borderRadius: 12, background: 'var(--card)', border: '1px solid var(--line)', fontSize: '0.85rem', color: 'var(--fg-dim)' }}>
              Estimación orientativa. En la llamada calculamos tu ROI real con tus
              números concretos — sin compromiso.
            </div>
          </div>

          <div className="roi-output">
            <div className="mono" style={{ color: 'var(--fg-dim)' }}>Ahorro estimado anual</div>
            <div className="big-num gradient-text">{fmt(yearlyEur)} €</div>
            <div className="breakdown">
              <div className="item">
                <div className="k">Horas/año recuperadas</div>
                <div className="v">{fmt(yearlyHours)}h</div>
              </div>
              <div className="item">
                <div className="k">Ahorro mensual</div>
                <div className="v">{fmt(monthlyEur)} €</div>
              </div>
            </div>
            <div style={{ marginTop: 18 }}>
              <Btn primary href="#contacto">Validar este cálculo conmigo</Btn>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}
window.Roi = Roi;