/* global React */
function RoiCalculator() {
  const [affiliates, setAffiliates] = React.useState(50);
  const [leadsPerAff, setLeadsPerAff] = React.useState(40);
  const [conversion, setConversion] = React.useState(8);
  const [ticket, setTicket] = React.useState(1200);
  const Icons = window.Icons || {};

  const totalLeads = affiliates * leadsPerAff;
  const sales = Math.round(totalLeads * (conversion / 100));
  const revenue = sales * ticket;

  return (
    <section id="roi" className="section section--light" style={{paddingTop:90, paddingBottom:100, borderTop:'1px solid var(--paper-line)'}}>
      <div className="container">
        <div className="reveal" style={{textAlign:'center', maxWidth: 760, margin:'0 auto'}}>
          <span className="eyebrow">Calculadora</span>
          <h2 className="display display-lg" style={{marginTop:16}}>
            ¿Cuánto podría<br/>vender tu red?
          </h2>
          <p style={{marginTop: 18, fontSize: 19, color:'var(--ink-mute)', textWrap:'pretty'}}>
            Mueve los sliders y calcula tu potencial mensual. Los números son una proyección
            basada en redes activas que ya usan BOBAX.
          </p>
        </div>

        <div className="reveal" style={{
          marginTop: 48,
          background:'white', borderRadius: 24,
          border:'1px solid var(--paper-line)',
          boxShadow:'0 30px 60px -30px rgba(11,8,22,0.1)',
          padding: 8,
        }}>
          <div className="roi-grid" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8}}>
            <div style={{padding: 32}}>
              <div style={{fontFamily:'var(--f-mono)', fontSize:11, color:'var(--brand-600)', letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:600}}>
                Tu red
              </div>

              <Slider label="Vendedores activos al mes" value={affiliates} onChange={setAffiliates} min={10} max={500} step={5} suffix="personas" />
              <Slider label="Clientes nuevos por vendedor / mes" value={leadsPerAff} onChange={setLeadsPerAff} min={5} max={200} step={5} suffix="clientes" />
              <Slider label="De cada 100, cuántos compran" value={conversion} onChange={setConversion} min={1} max={30} step={1} suffix="%" />
              <Slider label="Ticket promedio de venta" value={ticket} onChange={setTicket} min={200} max={10000} step={100} suffix="MXN" />
            </div>

            <div style={{
              background:'linear-gradient(180deg, #0B0816, #1a1233)',
              color:'white', borderRadius: 20, padding: 32, position:'relative', overflow:'hidden',
            }}>
              <div aria-hidden="true" style={{position:'absolute', top:-60, right:-60, width:300, height:300, borderRadius:'50%', background:'radial-gradient(circle, color-mix(in oklab, var(--brand-500) 40%, transparent), transparent 70%)', filter:'blur(50px)'}} />
              <div style={{position:'relative'}}>
                <div style={{fontFamily:'var(--f-mono)', fontSize:11, color:'var(--brand-300)', letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:600}}>
                  Tu potencial mensual
                </div>

                <div style={{marginTop: 22}}>
                  <div style={{fontSize: 13, color:'rgba(255,255,255,0.6)'}}>Ventas proyectadas</div>
                  <div style={{fontFamily:'var(--f-display)', fontSize: 56, fontWeight: 600, color:'white', letterSpacing:'-0.03em', lineHeight: 1, marginTop: 6}}>
                    ${revenue.toLocaleString('es-MX')}
                  </div>
                  <div style={{fontSize: 12, color:'rgba(255,255,255,0.45)', marginTop:6, fontFamily:'var(--f-mono)'}}>MXN brutos · al mes</div>
                </div>

                <div style={{marginTop: 26, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12}}>
                  <Metric label="Clientes totales" value={totalLeads.toLocaleString('es-MX')} sub="en tu red completa" Icon={Icons.Users} />
                  <Metric label="Ventas estimadas" value={sales.toLocaleString('es-MX')} sub={`${conversion}% conversión`} Icon={Icons.Target} />
                </div>

                <div style={{marginTop: 22, padding: '14px 16px', background:'rgba(16,185,129,0.12)', border:'1px solid rgba(16,185,129,0.25)', borderRadius: 12, display:'flex', gap:12, alignItems:'flex-start'}}>
                  <span style={{flexShrink:0, width:32, height:32, borderRadius:8, background:'rgba(16,185,129,0.2)', color:'var(--emerald-400)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                    {Icons.Sparkle && <Icons.Sparkle size={16}/>}
                  </span>
                  <div>
                    <div style={{fontSize:12, color:'var(--emerald-400)', fontFamily:'var(--f-mono)', letterSpacing:'0.08em', textTransform:'uppercase', fontWeight:600}}>Y todo en automático</div>
                    <div style={{fontSize: 13.5, color:'white', marginTop: 3, lineHeight:1.5}}>
                      Con BOBAX, tu red vende mientras duermes. Tú solo escalas.
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .roi-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function Slider({ label, value, onChange, min, max, step, suffix }) {
  return (
    <div style={{marginTop: 22}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 10}}>
        <span style={{fontSize: 14, color:'var(--ink-2)', fontWeight: 500}}>{label}</span>
        <span style={{fontFamily:'var(--f-display)', fontSize: 22, fontWeight: 600, color:'var(--ink)', letterSpacing:'-0.01em'}}>
          {value.toLocaleString('es-MX')}<span style={{fontSize: 12, fontWeight: 500, color:'var(--ink-mute)', marginLeft: 6, fontFamily:'var(--f-mono)'}}>{suffix}</span>
        </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(--brand-500)', height: 6}}
      />
    </div>
  );
}

function Metric({ label, value, sub, Icon }) {
  return (
    <div style={{padding: '12px 14px', background: 'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.06)', borderRadius: 12}}>
      <div style={{display:'flex', alignItems:'center', gap:6}}>
        {Icon && <span style={{color:'var(--brand-300)'}}><Icon size={12}/></span>}
        <span style={{fontSize: 10.5, color:'rgba(255,255,255,0.55)', fontFamily:'var(--f-mono)', letterSpacing:'0.08em', textTransform:'uppercase'}}>{label}</span>
      </div>
      <div style={{fontFamily:'var(--f-display)', fontSize: 22, fontWeight: 600, color:'white', letterSpacing:'-0.01em', marginTop: 4}}>{value}</div>
      <div style={{fontSize: 10.5, color:'rgba(255,255,255,0.45)', marginTop: 2}}>{sub}</div>
    </div>
  );
}

window.RoiCalculator = RoiCalculator;