// Interactive ROI calculator — gatilho: aversão à perda + tangibilidade
const ROI = () => {
  const [leads, setLeads] = React.useState(400);
  const [ticket, setTicket] = React.useState(890);
  const [convAtual, setConvAtual] = React.useState(8);

  // assumed 2.4x lift, capped to reasonable conversion
  const convZap = Math.min(35, +(convAtual * 2.4).toFixed(1));

  const fmt = (n) => 'R$ ' + Math.round(n).toLocaleString('pt-BR');
  const revAtual = leads * (convAtual/100) * ticket;
  const revZap   = leads * (convZap/100) * ticket;
  const diff     = revZap - revAtual;
  const annual   = diff * 12;

  return (
    <section id="roi" className="section-pad" style={{
      background:'linear-gradient(180deg, transparent, rgba(0,228,122,0.04), transparent)'
    }}>
      <div className="container">
        <div style={{ textAlign:'center', marginBottom:54, maxWidth:780, margin:'0 auto 54px' }}>
          <div className="eyebrow" style={{ marginBottom:14 }}>Calculadora de ROI</div>
          <h2 className="display" style={{ fontSize:'clamp(36px, 4.6vw, 60px)', margin:0 }}>
            Quanto você está <span className="serif" style={{ color:'var(--red)' }}>perdendo</span><br/>
            por não usar ZapFlux <span style={{ color:'var(--ink-3)' }}>—</span> hoje?
          </h2>
          <p style={{ fontSize:16, color:'var(--ink-2)', marginTop:18 }}>
            Movimente os controles. Veja o ROI estimado em segundos. Sem cadastro, sem joguinho.
          </p>
        </div>

        <div className="card card-glow" style={{
          display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, overflow:'hidden'
        }}>
          {/* inputs */}
          <div style={{ padding:'40px 40px', borderRight:'1px solid var(--line)' }} className="roi-side">
            <h3 style={{ margin:0, fontSize:20, fontWeight:600, letterSpacing:'-0.01em' }}>Seu cenário hoje</h3>
            <p style={{ fontSize:13.5, color:'var(--ink-3)', marginTop:6, marginBottom:30 }}>
              Use sua média mensal. Mexa nos sliders.
            </p>

            <Slider label="Leads recebidos por mês" value={leads} onChange={setLeads} min={50} max={5000} step={50} suffix=" leads"/>
            <Slider label="Ticket médio" value={ticket} onChange={setTicket} min={50} max={10000} step={10} prefix="R$ "/>
            <Slider label="Sua taxa de conversão atual" value={convAtual} onChange={setConvAtual} min={1} max={30} step={0.5} suffix="%"/>
          </div>

          {/* output */}
          <div style={{
            padding:'40px', position:'relative', overflow:'hidden',
            background:'radial-gradient(circle at 100% 0%, rgba(0,228,122,0.08), transparent 70%)'
          }} className="roi-side">
            <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8 }}>
              <span className="tag"><Icon name="trend" size={11}/> projeção mensal</span>
            </div>

            <div style={{ display:'flex', alignItems:'baseline', gap:14, marginTop:6 }}>
              <span className="bignum bignum-green" style={{ fontSize:'clamp(54px, 7vw, 92px)' }}>
                +{fmt(diff)}
              </span>
            </div>
            <div style={{ color:'var(--ink-2)', fontSize:14, marginTop:4 }}>
              em receita adicional <strong>todo mês</strong> com a IA da ZapFlux
            </div>

            <div style={{
              marginTop:30, padding:'18px 20px', borderRadius:14,
              background:'rgba(0,228,122,0.08)', border:'1px solid rgba(0,228,122,0.2)'
            }}>
              <div style={{ fontSize:13, color:'var(--ink-2)' }}>Em 12 meses isso vira</div>
              <div style={{
                fontFamily:"'Bricolage Grotesque',sans-serif", fontWeight:700,
                fontSize:42, letterSpacing:'-0.03em', color:'var(--green)', marginTop:6
              }}>
                {fmt(annual)}
              </div>
              <div style={{ fontSize:12.5, color:'var(--ink-3)', marginTop:6 }}>
                Mesmo no plano <strong>PRO</strong>, isso paga a ferramenta {Math.max(1, Math.round(annual / (997*12)))}× — sobrando caixa.
              </div>
            </div>

            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginTop:24 }}>
              <Mini label="Conversão hoje" value={convAtual + '%'} sub={fmt(revAtual) + ' / mês'} muted/>
              <Mini label="Com ZapFlux" value={convZap + '%'} sub={fmt(revZap) + ' / mês'} highlight/>
            </div>
          </div>
        </div>

        <p style={{ textAlign:'center', fontSize:12, color:'var(--ink-4)', marginTop:18, fontFamily:"'Geist Mono',monospace" }}>
          *Cálculo baseado em uplift médio de 2.4× observado em 1.847 clientes ativos · meta máxima 35%
        </p>
      </div>
      <style>{`
        @media (max-width: 860px) {
          .roi-side:first-child { border-right:0 !important; border-bottom:1px solid var(--line); }
          #roi .card { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

const Slider = ({ label, value, onChange, min, max, step=1, prefix='', suffix='' }) => {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div style={{ marginBottom:26 }}>
      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:10 }}>
        <span style={{ fontSize:13.5, color:'var(--ink-2)' }}>{label}</span>
        <span style={{ fontFamily:"'Geist Mono',monospace", fontSize:14, color:'var(--green)' }}>
          {prefix}{typeof value === 'number' ? value.toLocaleString('pt-BR') : value}{suffix}
        </span>
      </div>
      <div style={{ position:'relative', height:24, display:'flex', alignItems:'center' }}>
        <div style={{
          position:'absolute', left:0, right:0, height:4, borderRadius:2,
          background:'rgba(255,255,255,0.08)'
        }}/>
        <div style={{
          position:'absolute', left:0, width:pct+'%', height:4, borderRadius:2,
          background:'linear-gradient(90deg, var(--green), var(--green-2))',
          boxShadow:'0 0 12px var(--green-glow)'
        }}/>
        <input type="range" min={min} max={max} step={step} value={value}
          onChange={e => onChange(+e.target.value)}
          style={{
            position:'relative', width:'100%', appearance:'none', WebkitAppearance:'none',
            background:'transparent', height:24, margin:0, padding:0, cursor:'pointer'
          }}
        />
      </div>
      <style>{`
        input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none; appearance: none; width:18px; height:18px; border-radius:50%;
          background: #fff; cursor: pointer; box-shadow: 0 0 0 4px rgba(0,228,122,0.25), 0 0 12px rgba(0,228,122,0.4);
        }
        input[type=range]::-moz-range-thumb {
          width:18px; height:18px; border-radius:50%; border:0;
          background: #fff; cursor: pointer; box-shadow: 0 0 0 4px rgba(0,228,122,0.25), 0 0 12px rgba(0,228,122,0.4);
        }
      `}</style>
    </div>
  );
};

const Mini = ({ label, value, sub, highlight, muted }) => (
  <div style={{
    padding:'14px 16px', borderRadius:12,
    background: highlight ? 'rgba(0,228,122,0.08)' : 'rgba(255,255,255,0.02)',
    border:'1px solid '+ (highlight ? 'rgba(0,228,122,0.25)' : 'var(--line)'),
  }}>
    <div style={{ fontSize:11, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.08em', fontFamily:"'Geist Mono',monospace" }}>
      {label}
    </div>
    <div style={{
      fontFamily:"'Bricolage Grotesque',sans-serif", fontSize:28, fontWeight:600,
      marginTop:4, color: highlight ? 'var(--green)' : (muted ? 'var(--ink-3)' : 'var(--ink)'),
      letterSpacing:'-0.02em'
    }}>{value}</div>
    <div style={{ fontSize:12, color:'var(--ink-4)', marginTop:2 }}>{sub}</div>
  </div>
);

window.ROI = ROI;