// Before / After comparison — manual prospection vs PillaLeads
function BeforeAfter() {
  const rows = [
    { label: 'Encontrar 40 leads cualificados', a: '6-8 horas en Maps + Excel', b: '10 minutos · 1 búsqueda' },
    { label: 'Auditoría SEO de cada lead', a: '15 min × 40 = 10h', b: 'Automática · al instante' },
    { label: 'Diseñar maqueta para vender', a: 'No la haces · pierdes la venta', b: 'Web 100% personalizada incluida' },
    { label: 'Redactar email personalizado', a: 'Copy-paste, abre 1%', b: 'GPT con datos reales · abre 35%+' },
    { label: 'Hacer follow-up', a: 'Se te olvida la mitad', b: 'WhatsApp + script + pipeline visual' },
    { label: 'Cerrar citas nuevas cada mes', a: 'Suerte si llega', b: 'Rotador: te entran solas' },
  ];

  return (
    <section style={{ padding: 'var(--pl-section-py) 0' }}>
      <div className="pl-container">
        <div className="pl-section-head">
          <span className="pl-eyebrow">Antes vs Después</span>
          <h2 className="pl-display">
            La diferencia entre <span style={{ color: '#dc2626' }}>perseguir</span> <br />
            y <span className="pl-accent-grad">que te encuentren</span>
          </h2>
          <p>Lo que antes te costaba 2 semanas, ahora son 30 segundos. Mira la tabla.</p>
        </div>

        <div style={{
          background: 'var(--pl-surface)',
          borderRadius: 24,
          border: '1px solid var(--pl-border)',
          boxShadow: 'var(--pl-shadow)',
          overflow: 'hidden',
        }}>
          {/* header */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 0,
            background: 'linear-gradient(180deg, #faf7ff 0%, #fff 100%)',
            borderBottom: '1px solid var(--pl-border)',
          }}>
            <div style={{ padding: '18px 22px', fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--pl-ink-mute)' }}>
              Tarea
            </div>
            <div style={{ padding: '18px 22px', borderLeft: '1px solid var(--pl-border)' }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 700, color: '#dc2626' }}>
                <span style={{ width: 16, height: 16, borderRadius: '50%', background: 'rgba(220,38,38,.10)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <IconX size={10} color="#dc2626" stroke={3} />
                </span>
                ANTES · forma vieja
              </div>
            </div>
            <div style={{ padding: '18px 22px', borderLeft: '1px solid var(--pl-border)', background: 'rgba(124,58,237,.05)' }}>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 700, color: 'var(--pl-accent-deep)' }}>
                <span style={{ width: 16, height: 16, borderRadius: '50%', background: 'var(--pl-accent)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <IconCheck size={10} color="#fff" stroke={3} />
                </span>
                CON PILLALEADS
              </div>
            </div>
          </div>

          {rows.map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 0,
              borderBottom: i < rows.length - 1 ? '1px solid var(--pl-border)' : 'none',
            }}>
              <div style={{ padding: '18px 22px', fontWeight: 600, color: 'var(--pl-ink)', fontSize: 14.5 }}>{r.label}</div>
              <div style={{ padding: '18px 22px', borderLeft: '1px solid var(--pl-border)', fontSize: 14, color: 'var(--pl-ink-3)' }}>
                <span style={{ textDecoration: 'line-through', textDecorationColor: 'rgba(220,38,38,.4)' }}>{r.a}</span>
              </div>
              <div style={{ padding: '18px 22px', borderLeft: '1px solid var(--pl-border)', background: 'rgba(124,58,237,.03)', fontSize: 14, color: 'var(--pl-ink)', fontWeight: 600 }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                  <IconCheck size={13} color="var(--pl-accent)" stroke={3} /> {r.b}
                </span>
              </div>
            </div>
          ))}

          {/* summary footer */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr',
            background: 'linear-gradient(180deg, #fff 0%, #faf7ff 100%)',
            borderTop: '1px solid var(--pl-border)',
          }}>
            <div style={{ padding: '20px 22px', fontWeight: 700, fontSize: 15 }}>Tiempo total por semana</div>
            <div style={{ padding: '20px 22px', borderLeft: '1px solid var(--pl-border)' }}>
              <span style={{ fontFamily: 'var(--pl-font-display)', fontWeight: 700, fontSize: 28, color: '#dc2626' }}>~20h</span>
            </div>
            <div style={{ padding: '20px 22px', borderLeft: '1px solid var(--pl-border)', background: 'rgba(124,58,237,.05)' }}>
              <span style={{ fontFamily: 'var(--pl-font-display)', fontWeight: 700, fontSize: 28, color: 'var(--pl-accent)' }}>
                2 h
              </span>
              <span style={{ marginLeft: 10, fontSize: 12, color: 'var(--pl-ink-3)', fontWeight: 600 }}>(o 0 con rotador)</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.BeforeAfter = BeforeAfter;