// ROI calculator — addresses the "annual price is a lot" objection head-on
function RoiCalculator() {
  const [citasSemana, setCitas] = React.useState(2);
  const [cierre, setCierre] = React.useState(20);
  const [ticket, setTicket] = React.useState(500);

  const citasMes = citasSemana * 4;
  const clientesMes = Math.round(citasMes * cierre / 100);
  const facturacionMes = clientesMes * ticket;
  const facturacionAno = facturacionMes * 12;

  const planes = [
    { name: 'Esencial', price: 343, color: 'var(--pl-accent-deep)' },
    { name: 'Premium', price: 571, color: 'var(--pl-accent)' },
    { name: 'Lifetime', price: 699, color: '#fbbf24', dark: true, sub: 'una vez · para siempre' },
  ];

  const clientesNecesarios = (precio) => Math.ceil(precio / ticket);
  const diasAmortizacion = (precio) => {
    if (facturacionMes <= 0) return '∞';
    return Math.max(1, Math.round((precio / facturacionMes) * 30));
  };

  return (
    <section id="roi" style={{ padding: 'var(--pl-section-py) 0' }}>
      <div className="pl-container">
        <div className="pl-section-head">
          <span className="pl-eyebrow">Calculadora de ROI</span>
          <h2 className="pl-display">
            ¿Y si te lo pagas con <span className="pl-accent-grad">1 solo cliente?</span>
          </h2>
          <p>Mueve los sliders con tus números reales. La mayoría amortizan PillaLeads en menos de 30 días.</p>
        </div>

        <div style={{
          background: '#fff',
          border: '1px solid var(--pl-border)',
          borderRadius: 28,
          boxShadow: 'var(--pl-shadow-lg)',
          overflow: 'hidden',
        }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 0,
          }}>
            {/* LEFT — Inputs */}
            <div style={{ padding: 36 }}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--pl-ink-mute)', marginBottom: 20 }}>
                Tus números
              </div>

              <ROISlider
                label="Citas a la semana"
                hint="Con rotador rondan 2-4"
                value={citasSemana} min={1} max={15} step={1} unit="citas"
                onChange={setCitas}
              />
              <ROISlider
                label="Tasa de cierre"
                hint="Sé honesto. Media SEO ~18-25%"
                value={cierre} min={5} max={60} step={1} unit="%"
                onChange={setCierre}
              />
              <ROISlider
                label="Ticket medio"
                hint="SEO mensual, web o auditoría"
                value={ticket} min={150} max={2500} step={50} unit="€"
                onChange={setTicket}
              />

              <div style={{
                marginTop: 22, padding: '14px 16px',
                background: 'rgba(124,58,237,.06)',
                border: '1px solid rgba(124,58,237,.18)',
                borderRadius: 12,
                fontSize: 13, color: 'var(--pl-ink-2)',
              }}>
                💡 <b>Realidad:</b> la mayoría de beta-testers con plan Premium cierran 3-6 clientes el primer mes.
              </div>
            </div>

            {/* RIGHT — Outputs */}
            <div style={{
              padding: 36,
              background: 'linear-gradient(160deg, #faf7ff 0%, #f1ebff 100%)',
              borderLeft: '1px solid var(--pl-border)',
            }}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--pl-ink-mute)', marginBottom: 20 }}>
                Lo que generas con PillaLeads
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, marginBottom: 22 }}>
                <KPI label="Citas/mes" value={citasMes} />
                <KPI label="Clientes nuevos/mes" value={clientesMes} accent />
                <KPI label="Facturación nueva/mes" value={formatEur(facturacionMes)} />
                <KPI label="Facturación nueva/año" value={formatEur(facturacionAno)} big />
              </div>

              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--pl-ink-mute)', margin: '8px 0 12px' }}>
                Cuánto tardas en amortizar PillaLeads
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {planes.map(p => {
                  const clientes = clientesNecesarios(p.price);
                  const dias = diasAmortizacion(p.price);
                  return (
                    <div key={p.name} style={{
                      display: 'grid', gridTemplateColumns: '120px 1fr auto', alignItems: 'center', gap: 14,
                      padding: '12px 14px',
                      background: p.dark ? 'var(--pl-ink)' : '#fff',
                      color: p.dark ? '#fff' : 'var(--pl-ink)',
                      border: '1px solid ' + (p.dark ? 'transparent' : 'var(--pl-border)'),
                      borderRadius: 12,
                    }}>
                      <div>
                        <div style={{ fontWeight: 700, fontSize: 14 }}>{p.name}</div>
                        <div style={{ fontSize: 11.5, opacity: p.dark ? .65 : .55 }}>{p.price}€{p.sub ? ' · ' + p.sub : '/año'}</div>
                      </div>
                      <div style={{ fontSize: 13, color: p.dark ? 'rgba(255,255,255,.7)' : 'var(--pl-ink-3)' }}>
                        Con <b style={{ color: p.dark ? '#fff' : 'var(--pl-ink)' }}>{clientes}</b> cliente{clientes > 1 ? 's' : ''} cerrado{clientes > 1 ? 's' : ''}
                      </div>
                      <div style={{
                        fontFamily: 'var(--pl-font-display)', fontWeight: 700,
                        fontSize: 22, color: p.color, letterSpacing: '-.02em',
                      }}>
                        {dias === '∞' ? '∞' : `${dias}d`}
                      </div>
                    </div>
                  );
                })}
              </div>

              <a href="#planes" className="pl-btn pl-btn-accent" style={{ marginTop: 22, width: '100%' }}>
                Empezar a generar estos números <IconArrowRight size={15} stroke={2.5} />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ROISlider({ label, hint, value, min, max, step, unit, onChange }) {
  return (
    <div style={{ marginBottom: 22 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
        <label style={{ fontWeight: 700, fontSize: 14.5 }}>{label}</label>
        <span style={{
          fontFamily: 'var(--pl-font-display)', fontWeight: 700, fontSize: 22,
          color: 'var(--pl-accent-deep)', letterSpacing: '-.02em',
        }}>
          {unit === '€' ? formatEur(value) : value}{unit !== '€' ? unit : ''}
        </span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
             onChange={(e) => onChange(Number(e.target.value))}
             style={{
               width: '100%', accentColor: 'var(--pl-accent)',
               height: 6, cursor: 'pointer',
             }} />
      <div style={{ fontSize: 11.5, color: 'var(--pl-ink-mute)', marginTop: 4 }}>{hint}</div>
    </div>
  );
}

function KPI({ label, value, accent, big }) {
  return (
    <div style={{
      padding: '14px 16px',
      background: accent ? 'var(--pl-ink)' : '#fff',
      color: accent ? '#fff' : 'var(--pl-ink)',
      border: accent ? 'none' : '1px solid var(--pl-border)',
      borderRadius: 12,
      gridColumn: big ? 'span 2' : 'auto',
    }}>
      <div style={{
        fontFamily: 'var(--pl-font-display)', fontWeight: 700,
        fontSize: big ? 36 : 28, letterSpacing: '-.02em',
        color: accent ? '#a78bfa' : (big ? 'var(--pl-accent)' : 'var(--pl-ink)'),
      }}>
        {value}
      </div>
      <div style={{ fontSize: 12.5, color: accent ? 'rgba(255,255,255,.7)' : 'var(--pl-ink-3)', fontWeight: 600 }}>{label}</div>
    </div>
  );
}

function formatEur(n) {
  return new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(n);
}

window.RoiCalculator = RoiCalculator;