/* global React, Icon, Button, Eyebrow, Badge, Droplets, Container, NcGazeRings */

const NC2 = {
  magenta: '#B511C9',
  violet:  '#5C147F',
  bg:      'var(--sub-neuro-bg)',
};

// ============================================================
// PROCESS — 4 PHASES (horizontal timeline)
// ============================================================
function NcProcess() {
  const phases = [
    {
      n: '01',
      weeks: 'Sem. 1–2',
      title: 'Auditoría de neuromarketing',
      icon: 'brain',
      body: 'Revisamos tus páginas, creatividades y emails con la lente del neuromarketing. Identificamos fricciones cognitivas, mensajes incorrectos y oportunidades específicas de lift.',
      deliverable: 'Reporte con hallazgos prioritarios + estimación de uplift',
    },
    {
      n: '02',
      weeks: 'Sem. 2–3',
      title: 'Generación de variantes IA',
      icon: 'sparkles',
      body: 'Claude genera entre 20 y 50 variantes de headlines, subheadlines, CTAs y cuerpo basadas en los hallazgos. Cada variante está fundamentada — no es A/B random.',
      deliverable: 'Biblioteca de 20–50 variantes con justificación neuro',
    },
    {
      n: '03',
      weeks: 'Sem. 3–4',
      title: 'Validación A/B testing',
      icon: 'zap',
      body: 'Implementamos los experimentos vía Google Tag Manager o la plataforma que uses. Medimos conversión real, no métricas de vanidad.',
      deliverable: 'Experimentos en vivo + monitoreo semanal',
    },
    {
      n: '04',
      weeks: 'Sem. 4+',
      title: 'Reporte e iteración',
      icon: 'chart',
      body: 'Entregamos resultados con interpretación de neuromarketing: no solo cuál versión ganó, sino por qué ganó y qué aprendimos del comportamiento de tu audiencia.',
      deliverable: 'Lectura conductual + plan de siguiente iteración',
    },
  ];

  return (
    <section id="proceso" style={{ background: '#fff', position: 'relative', overflow: 'hidden' }}>
      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <Eyebrow>Cómo funciona</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 0', color: 'var(--fg1)',
          }}>
            Del análisis al resultado<br/>en <span style={{ color: NC2.magenta }}>cuatro semanas</span>.
          </h2>
        </div>

        {/* Timeline */}
        <div style={{ position: 'relative' }}>
          {/* Vertical line on left */}
          <div aria-hidden style={{
            position: 'absolute', left: 31, top: 36, bottom: 36, width: 2,
            background: `linear-gradient(180deg, ${NC2.violet} 0%, ${NC2.magenta} 100%)`,
            borderRadius: 2,
          }} />

          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {phases.map((p, i) => (
              <div key={p.n} style={{
                display: 'grid', gridTemplateColumns: '64px 1fr',
                gap: 24, alignItems: 'start',
                position: 'relative',
              }}>
                {/* Node */}
                <div style={{
                  width: 64, height: 64, borderRadius: 999,
                  background: '#fff',
                  border: `2px solid ${NC2.magenta}`,
                  display: 'grid', placeItems: 'center',
                  color: NC2.violet,
                  position: 'relative', zIndex: 1,
                  boxShadow: `0 0 0 6px ${NC2.bg}`,
                }}>
                  <Icon name={p.icon} size={26} stroke={1.6} />
                </div>

                {/* Card */}
                <div style={{
                  background: 'var(--ink-25)',
                  border: '1px solid var(--border)',
                  borderRadius: 22,
                  padding: '24px 28px',
                  transition: 'all var(--dur-base) var(--ease-out)',
                  display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32,
                  alignItems: 'start',
                }}
                  onMouseEnter={e => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.borderColor = NC2.magenta; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'var(--ink-25)'; e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.boxShadow = ''; }}>
                  <div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 8 }}>
                      <span style={{
                        fontFamily: 'var(--font-mono)', fontSize: 12,
                        color: NC2.magenta, fontWeight: 600, letterSpacing: '0.04em',
                      }}>Fase {p.n}</span>
                      <span style={{
                        fontFamily: 'var(--font-mono)', fontSize: 11,
                        padding: '3px 8px', borderRadius: 999,
                        background: '#fff', border: `1px solid ${NC2.bg}`,
                        color: NC2.violet,
                      }}>{p.weeks}</span>
                    </div>
                    <h3 style={{
                      fontFamily: 'var(--font-heading)', fontWeight: 700,
                      fontSize: 22, letterSpacing: '-0.02em',
                      margin: '0 0 10px', color: 'var(--fg1)',
                    }}>{p.title}</h3>
                    <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--fg2)', margin: 0 }}>
                      {p.body}
                    </p>
                  </div>

                  <div style={{
                    background: '#fff',
                    border: `1px dashed ${NC2.magenta}`,
                    borderRadius: 14,
                    padding: '16px 18px',
                  }}>
                    <div style={{
                      fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em',
                      textTransform: 'uppercase', color: NC2.violet, marginBottom: 8,
                      display: 'flex', alignItems: 'center', gap: 6,
                    }}>
                      <Icon name="clipboard" size={12} /> Entregable
                    </div>
                    <div style={{ fontSize: 13.5, lineHeight: 1.45, color: 'var(--fg1)', fontWeight: 500 }}>
                      {p.deliverable}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// DELIVERABLES
// ============================================================
function NcDeliverables() {
  const items = [
    { icon: 'clipboard', text: 'Reporte de auditoría de neuromarketing',         tag: 'PDF + presentación' },
    { icon: 'target',    text: 'Mapa de fricciones cognitivas',                  tag: 'Páginas principales' },
    { icon: 'sparkles',  text: 'Biblioteca de 20–50 variantes de copy',          tag: 'Con justificación' },
    { icon: 'zap',       text: 'Implementación de experimentos A/B',             tag: 'En tu plataforma' },
    { icon: 'chart',     text: 'Reporte de resultados con interpretación',       tag: 'Lectura conductual' },
    { icon: 'compass',   text: 'Recomendaciones de siguiente iteración',         tag: 'Plan accionable' },
  ];

  return (
    <section style={{ background: 'var(--ink-25)' }}>
      <Container style={{ padding: '96px 32px' }}>
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <Eyebrow>Lo que recibes</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(28px, 3.4vw, 44px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 0', color: 'var(--fg1)',
          }}>
            Seis entregables tangibles del servicio completo.
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 1, background: 'var(--border)',
          borderRadius: 24, overflow: 'hidden',
          border: '1px solid var(--border)',
        }}>
          {items.map((it, i) => (
            <div key={it.text} style={{
              background: '#fff',
              padding: '28px 26px',
              display: 'flex', flexDirection: 'column', gap: 16,
              transition: 'background var(--dur-base) var(--ease-out)',
            }}
              onMouseEnter={e => e.currentTarget.style.background = NC2.bg}
              onMouseLeave={e => e.currentTarget.style.background = '#fff'}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12,
                  background: NC2.bg, color: NC2.violet,
                  display: 'grid', placeItems: 'center',
                }}>
                  <Icon name={it.icon} size={20} />
                </div>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10,
                  fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
                  color: NC2.magenta,
                }}>0{i + 1}</span>
              </div>
              <div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontSize: 17,
                  fontWeight: 600, color: 'var(--fg1)', letterSpacing: '-0.01em',
                  lineHeight: 1.25, marginBottom: 4,
                }}>{it.text}</div>
                <div style={{ fontSize: 12.5, color: 'var(--fg3)' }}>{it.tag}</div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// MOAT — Defensible difference
// ============================================================
function NcMoat() {
  return (
    <section style={{
      background: `linear-gradient(160deg, ${NC2.violet} 0%, #2A0A3D 100%)`,
      color: '#fff', position: 'relative', overflow: 'hidden',
    }}>
      <NcGazeRings style={{ right: '6%', top: '10%' }} size={320} colorA={NC2.magenta} colorB="#fff" opacity={0.3} />
      <NcGazeRings style={{ left: -80, bottom: -60 }} size={280} colorA="#fff" colorB={NC2.magenta} opacity={0.18} />

      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{ maxWidth: 980, margin: '0 auto' }}>
          <div style={{ marginBottom: 32 }}>
            <span style={{
              fontSize: 11, fontWeight: 700, letterSpacing: '0.14em',
              textTransform: 'uppercase', color: NC2.bg,
            }}>El diferenciador que no se puede copiar fácil</span>
          </div>

          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(32px, 4.2vw, 60px)',
            lineHeight: 1.02, letterSpacing: '-0.035em',
            margin: '0 0 36px', color: '#fff',
            maxWidth: 880, textWrap: 'pretty',
          }}>
            Cualquiera puede usar ChatGPT para escribir copy.<br/>
            <span style={{ color: NC2.bg, fontStyle: 'italic' }}>Esto es diferente.</span>
          </h2>

          <div style={{
            display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48,
            alignItems: 'start',
          }}>
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'rgba(255,255,255,0.82)', margin: '0 0 18px' }}>
                Lo que hace único a NeuroCopy Lab no es la IA — es la <strong style={{ color: '#fff', fontWeight: 600 }}>metodología de neuromarketing</strong> que hay debajo. La IA sin ese marco genera variantes genéricas que pueden subir o bajar la conversión sin saber por qué.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'rgba(255,255,255,0.82)', margin: 0 }}>
                Nuestra metodología combina el análisis de comportamiento inconsciente con la capacidad de generación masiva de la IA. El resultado: variantes que no son aleatorias, son <strong style={{ color: '#fff', fontWeight: 600 }}>hipótesis fundamentadas en cómo funciona el cerebro humano</strong>.
              </p>
            </div>

            {/* Equation card */}
            <div style={{
              background: 'rgba(255,255,255,0.06)',
              border: '1px solid rgba(255,255,255,0.14)',
              borderRadius: 24, padding: '32px 32px',
              backdropFilter: 'blur(8px)',
            }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: NC2.bg, letterSpacing: '0.08em',
                marginBottom: 18, textTransform: 'uppercase',
              }}>El foso defensivo</div>

              <div style={{
                fontFamily: 'var(--font-heading)', fontWeight: 700,
                fontSize: 'clamp(20px, 2.2vw, 28px)',
                lineHeight: 1.2, letterSpacing: '-0.02em',
                color: '#fff',
                display: 'flex', flexDirection: 'column', gap: 14,
              }}>
                <span>Neuromarketing</span>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  fontFamily: 'var(--font-mono)', fontSize: 24,
                  color: NC2.magenta, fontWeight: 600,
                }}>
                  <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.2)' }} />
                  ×
                  <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.2)' }} />
                </div>
                <span>IA generativa</span>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  fontFamily: 'var(--font-mono)', fontSize: 18,
                  color: 'rgba(255,255,255,0.5)',
                }}>
                  <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.2)' }} />
                  =
                  <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.2)' }} />
                </div>
                <span style={{ color: NC2.bg, fontStyle: 'italic' }}>Hipótesis, no ruido.</span>
              </div>

              <p style={{
                marginTop: 24, paddingTop: 18,
                borderTop: '1px solid rgba(255,255,255,0.14)',
                fontSize: 13.5, lineHeight: 1.5,
                color: 'rgba(255,255,255,0.65)',
              }}>
                Y lleva <strong style={{ color: '#fff', fontWeight: 600 }}>diez años de experiencia</strong> construirlo.
              </p>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function NcFaq() {
  const faqs = [
    {
      q: '¿Para qué tipo de empresa tiene más sentido?',
      a: 'Para cualquier empresa que invierta en tráfico digital — paid media, SEO o email — y quiera aumentar la tasa de conversión de sus páginas. El ROI es más claro cuando el ticket de venta o el LTV del cliente son altos.',
    },
    {
      q: '¿Qué plataformas de testing soportan?',
      a: 'Google Optimize (o su sucesor), VWO, Optimizely, Convert. Si no tienes plataforma de testing, te ayudamos a implementar una desde cero.',
    },
    {
      q: '¿Cuánto tiempo tarda en verse el impacto?',
      a: 'Los primeros resultados de A/B se ven entre 3 y 6 semanas de haber lanzado los experimentos, dependiendo del volumen de tráfico. El análisis de neuromarketing entrega hallazgos desde la semana 2.',
    },
    {
      q: '¿Puedo hacer solo la auditoría sin el testing?',
      a: 'Sí. La auditoría tiene un precio independiente y se entrega como reporte accionable. Muchos clientes la usan para priorizar qué optimizar primero con su propio equipo.',
    },
    {
      q: '¿Necesito tener un desarrollador en mi equipo?',
      a: 'No para la implementación básica vía GTM. Para cambios más complejos en el sitio, podemos coordinarnos con tu equipo técnico.',
    },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section style={{ background: '#fff' }}>
      <Container style={{ padding: '96px 32px', maxWidth: 960 }}>
        <div style={{ marginBottom: 48, textAlign: 'center' }}>
          <Eyebrow>Preguntas frecuentes</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-heading)', fontWeight: 700,
            fontSize: 'clamp(30px, 3.6vw, 48px)',
            lineHeight: 1.05, letterSpacing: '-0.03em',
            margin: '14px 0 0', color: 'var(--fg1)',
          }}>
            Lo que todo CMO pregunta antes de firmar.
          </h2>
        </div>

        <div style={{
          background: '#fff',
          border: '1px solid var(--border)',
          borderRadius: 24,
          overflow: 'hidden',
        }}>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={f.q} style={{
                borderBottom: i < faqs.length - 1 ? '1px solid var(--border)' : 'none',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%',
                  padding: '22px 28px',
                  background: isOpen ? NC2.bg : '#fff',
                  border: 0,
                  cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                  textAlign: 'left',
                  fontFamily: 'var(--font-body)',
                  transition: 'background var(--dur-base) var(--ease-out)',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 11.5,
                      color: isOpen ? NC2.violet : 'var(--fg3)',
                      letterSpacing: '0.04em', minWidth: 28,
                    }}>{String(i + 1).padStart(2, '0')}</span>
                    <span style={{
                      fontSize: 17, fontWeight: 600,
                      color: 'var(--fg1)', letterSpacing: '-0.005em',
                    }}>{f.q}</span>
                  </div>
                  <div style={{
                    width: 32, height: 32, borderRadius: 999,
                    background: isOpen
                      ? `linear-gradient(135deg, ${NC2.violet} 0%, ${NC2.magenta} 100%)`
                      : 'var(--ink-50)',
                    color: isOpen ? '#fff' : 'var(--fg2)',
                    display: 'grid', placeItems: 'center',
                    transition: 'all var(--dur-base) var(--ease-out)',
                    transform: isOpen ? 'rotate(45deg)' : '',
                    flexShrink: 0,
                  }}>
                    <Icon name="arrow-right" size={14} style={{ transform: 'rotate(-45deg)' }} />
                  </div>
                </button>
                {isOpen && (
                  <div style={{
                    padding: '0 28px 24px 72px',
                    background: NC2.bg,
                    animation: 'ncFaqIn 280ms var(--ease-out)',
                  }}>
                    <p style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--fg1)', margin: 0, maxWidth: 720 }}>
                      {f.a}
                    </p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
        <style>{`
          @keyframes ncFaqIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
          }
        `}</style>
      </Container>
    </section>
  );
}

// ============================================================
// FINAL CTA — Lift calculator
// ============================================================
function NcFinalCta({ onCta }) {
  const [visits, setVisits] = React.useState(5000);
  const [cvr, setCvr] = React.useState(2.0);
  const [ticket, setTicket] = React.useState(20000);
  const [lift, setLift] = React.useState(15);

  const baselineClients = Math.round((visits * cvr) / 100);
  const newCvr = cvr * (1 + lift / 100);
  const newClients = Math.round((visits * newCvr) / 100);
  const extraClients = newClients - baselineClients;
  const annualLift = extraClients * ticket * 12;

  const fmt = n => '$' + n.toLocaleString('es-MX');

  return (
    <section style={{
      background: `linear-gradient(160deg, ${NC2.bg} 0%, #fff 100%)`,
      position: 'relative', overflow: 'hidden',
    }}>
      <NcGazeRings style={{ right: -100, top: 80 }} size={320} colorA={NC2.magenta} colorB={NC2.violet} opacity={0.25} />
      <NcGazeRings style={{ left: -80, bottom: -40 }} size={260} colorA={NC2.violet} colorB={NC2.magenta} opacity={0.2} />

      <Container style={{ padding: '96px 32px', position: 'relative' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64,
          alignItems: 'center',
        }}>
          <div>
            <Eyebrow>El número que importa</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-heading)', fontWeight: 700,
              fontSize: 'clamp(32px, 4.4vw, 60px)',
              lineHeight: 1.02, letterSpacing: '-0.035em',
              margin: '14px 0 22px', color: 'var(--fg1)',
            }}>
              ¿Cuánto vale para ti<br/>
              subir tu conversión<br/>
              <span style={{ color: NC2.magenta, fontStyle: 'italic' }}>un 15%?</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg2)', margin: '0 0 18px', maxWidth: 480 }}>
              Si tu página recibe 5,000 visitas al mes y convierte al 2%, tienes 100 clientes. Con un 15% de lift, son 115. Si tu ticket promedio es $20,000 MXN, eso son <strong style={{ color: 'var(--fg1)', fontWeight: 600 }}>$300,000 MXN más al año</strong> — de la misma inversión en tráfico.
            </p>
            <p style={{
              fontSize: 18, lineHeight: 1.5,
              color: NC2.violet, fontWeight: 600,
              margin: '0 0 32px', maxWidth: 480,
            }}>
              La auditoría te dice exactamente dónde está ese 15%.
            </p>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="cta" size="lg" icon="arrow-right" onClick={onCta}>
                Solicitar auditoría
              </Button>
              <Button variant="ghost" size="lg" icon="arrow-right" onClick={onCta}>
                Hablar con un estratega
              </Button>
            </div>
          </div>

          {/* Lift calculator */}
          <div style={{
            background: '#fff',
            border: '1px solid var(--border)',
            borderRadius: 28,
            padding: 32,
            boxShadow: 'var(--shadow-lg)',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginBottom: 22,
            }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 12,
                color: NC2.violet, letterSpacing: '0.04em',
              }}>// simulador de lift</div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: '#fff',
                padding: '4px 10px',
                background: `linear-gradient(135deg, ${NC2.violet} 0%, ${NC2.magenta} 100%)`,
                borderRadius: 999,
              }}>
                <Icon name="sparkles" size={11} /> En vivo
              </div>
            </div>

            <NcSlider label="Visitas al mes"        value={visits}  setValue={setVisits}  min={500}   max={50000} step={500}  unit="visitas" />
            <NcSlider label="Tasa de conversión actual" value={cvr}  setValue={setCvr}  min={0.5} max={8} step={0.1} unit="%" decimals={1} />
            <NcSlider label="Ticket promedio"        value={ticket} setValue={setTicket} min={2000}  max={200000} step={1000} unit="MXN" fmt={fmt} />
            <NcSlider label="Lift esperado"          value={lift}   setValue={setLift}   min={5}     max={30} step={1}    unit="%" highlight />

            <div style={{
              marginTop: 22, paddingTop: 22,
              borderTop: '1px solid var(--border)',
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18,
            }}>
              <div>
                <div style={{
                  fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
                  textTransform: 'uppercase', color: 'var(--fg3)', marginBottom: 6,
                }}>Hoy · clientes/mes</div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 30, color: 'var(--fg1)', letterSpacing: '-0.025em',
                  lineHeight: 1,
                }}>{baselineClients}</div>
              </div>
              <div>
                <div style={{
                  fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
                  textTransform: 'uppercase', color: NC2.magenta, marginBottom: 6,
                }}>Con +{lift}% lift</div>
                <div style={{
                  fontFamily: 'var(--font-heading)', fontWeight: 700,
                  fontSize: 30, color: NC2.violet, letterSpacing: '-0.025em',
                  lineHeight: 1,
                }}>{newClients} <span style={{ fontSize: 14, color: '#22A06B', fontWeight: 600 }}>+{extraClients}</span></div>
              </div>
            </div>

            <div style={{
              marginTop: 18, padding: '16px 20px',
              background: `linear-gradient(135deg, ${NC2.violet} 0%, ${NC2.magenta} 100%)`,
              borderRadius: 16,
              color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.85)', fontWeight: 500 }}>
                Impacto anual potencial
              </span>
              <span style={{
                fontFamily: 'var(--font-heading)', fontWeight: 700,
                fontSize: 24, letterSpacing: '-0.025em',
              }}>{fmt(annualLift)} MXN</span>
            </div>

            <p style={{
              fontFamily: 'var(--font-mono)', fontSize: 10.5,
              color: 'var(--fg3)', marginTop: 14, marginBottom: 0,
              lineHeight: 1.5,
            }}>
              * Estimación. El lift real depende del estado actual de tu copy y la mecánica de conversión. Los rangos observados en piloto: <strong style={{ color: NC2.violet }}>+8% a +25%</strong>.
            </p>
          </div>
        </div>
      </Container>
    </section>
  );
}

function NcSlider({ label, value, setValue, min, max, step = 1, unit, fmt, decimals = 0, highlight }) {
  const pct = ((value - min) / (max - min)) * 100;
  const display = fmt ? fmt(value) : (decimals > 0 ? value.toFixed(decimals) : value.toLocaleString('es-MX'));
  const color = highlight ? NC2.magenta : NC2.violet;
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 8,
      }}>
        <label style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg1)' }}>{label}</label>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 13,
          fontWeight: 600, color: color,
        }}>
          {display} <span style={{ fontWeight: 400, color: 'var(--fg3)' }}>{unit}</span>
        </span>
      </div>
      <div style={{ position: 'relative', height: 8 }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'var(--ink-100)', borderRadius: 999,
        }} />
        <div style={{
          position: 'absolute', left: 0, top: 0, bottom: 0,
          width: `${pct}%`,
          background: highlight
            ? `linear-gradient(90deg, ${NC2.violet}, ${NC2.magenta})`
            : NC2.violet,
          borderRadius: 999,
          transition: 'width var(--dur-fast) var(--ease-out)',
        }} />
        <input type="range" min={min} max={max} step={step} value={value}
          onChange={e => setValue(parseFloat(e.target.value))}
          style={{
            position: 'absolute', inset: 0, width: '100%',
            opacity: 0, cursor: 'pointer', margin: 0,
          }} />
        <div style={{
          position: 'absolute', left: `calc(${pct}% - 8px)`, top: -4,
          width: 16, height: 16, borderRadius: 999,
          background: '#fff', border: `3px solid ${color}`,
          boxShadow: 'var(--shadow-sm)',
          pointerEvents: 'none',
          transition: 'left var(--dur-fast) var(--ease-out)',
        }} />
      </div>
    </div>
  );
}

Object.assign(window, { NcProcess, NcDeliverables, NcMoat, NcFaq, NcFinalCta });