// Prospect flow screens — Cualificador AI First Business
// Nuevo orden: Gancho → Tipo empresa → Áreas problema → Impacto →
//              Mini captura → Horizonte/meta → Tamaño+madurez → Resultado


// ─── Shared chrome ────────────────────────────────────────────────
function FlowHeader({ step, total, onBack, onLogo }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 20px 0' }}>
      <button onClick={onBack} disabled={!onBack} style={{
        appearance: 'none', background: 'transparent', border: 0, padding: 4,
        color: onBack ? window.THEME.textMuted : 'transparent',
        cursor: onBack ? 'pointer' : 'default', display: 'flex', alignItems: 'center',
      }}>
        <window.Icon name="arrowL" size={20} />
      </button>
      <window.ProgressDots total={total} current={step} />
      <div onClick={onLogo} style={{ cursor: 'pointer' }}>
        <window.Wordmark size={11} />
      </div>
    </div>
  );
}

function PrimaryButton({ children, onClick, disabled, icon = 'arrow' }) {
  return (
    <button onClick={onClick} disabled={disabled} className="cu-btn-primary" style={{
      width: '100%', padding: '16px 18px', borderRadius: 14,
      background: disabled ? 'rgba(20,22,30,0.06)' : 'var(--accent-solid)',
      color: disabled ? window.THEME.textDim : '#fff',
      border: 'none', fontSize: 16, fontWeight: 600, letterSpacing: '-0.01em',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      cursor: disabled ? 'not-allowed' : 'pointer',
      boxShadow: disabled ? 'none' : '0 8px 24px var(--accent-glow), 0 0 0 1px rgba(255,255,255,0.18) inset',
      fontFamily: 'inherit',
    }}>
      {children}
      {icon && <window.Icon name={icon} size={18} strokeWidth={2} />}
    </button>
  );
}

function OptionCard({ selected, onClick, children, disabled = false }) {
  return (
    <button onClick={onClick} disabled={disabled} className="cu-card-hover" style={{
      textAlign: 'left', display: 'block', width: '100%',
      padding: '14px 16px', borderRadius: 14,
      background: selected ? 'var(--accent-soft)' : window.THEME.bgCard,
      border: `1px solid ${selected ? 'var(--accent-solid)' : window.THEME.border}`,
      color: window.THEME.text, cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? 0.45 : 1, fontFamily: 'inherit', position: 'relative',
    }}>
      {children}
      {selected && (
        <div style={{
          position: 'absolute', top: 14, right: 14, width: 20, height: 20,
          borderRadius: 99, background: 'var(--accent-solid)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
        }}>
          <window.Icon name="check" size={12} strokeWidth={3} />
        </div>
      )}
    </button>
  );
}

function FlowFooter({ children }) {
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      padding: '14px 20px 36px',
      background: 'linear-gradient(to top, rgba(251,250,246,0.98) 60%, rgba(251,250,246,0))',
      pointerEvents: 'auto', zIndex: 10,
    }}>{children}</div>
  );
}

// ─── Screen 1 — Bienvenida ────────────────────────────────────────
window.S1Welcome = function S1Welcome({ next, openDashboard }) {
  const [clicks, setClicks] = React.useState(0);
  const [dots, setDots] = React.useState([]);

  const handleLogoClick = () => {
    const next = clicks + 1;
    setClicks(next);
    setDots(d => [...d, { id: Date.now() }]);
    setTimeout(() => setDots(d => d.slice(1)), 600);
    if (next >= 5) {
      setClicks(0);
      openDashboard();
    }
  };

  return (
    <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column' }}>
      <window.PremiumBg accent={{ glow: 'var(--accent-glow)' }} />
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '60px 20px 0', position: 'relative', zIndex: 2,
      }}>
        <div onClick={handleLogoClick} style={{ cursor: 'default', position: 'relative', userSelect: 'none' }}>
          <window.Wordmark size={17} />
          {/* Puntos indicadores de clics */}
          {clicks > 0 && clicks < 5 && (
            <div style={{
              position: 'absolute', bottom: -10, left: 0,
              display: 'flex', gap: 3,
            }}>
              {[1,2,3,4,5].map(i => (
                <div key={i} style={{
                  width: 4, height: 4, borderRadius: 99,
                  background: i <= clicks ? 'var(--accent-solid)' : 'rgba(20,22,30,0.12)',
                  transition: 'background 0.15s',
                }} />
              ))}
            </div>
          )}
        </div>
        <div style={{ width: 40 }} />
      </div>

      <div style={{ flex: 1, padding: '44px 24px 0', display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 2 }}>
        <window.Reveal>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 12px', borderRadius: 999,
            background: 'var(--accent-soft)', color: 'var(--accent-solid)',
            border: '1px solid var(--accent-soft)', alignSelf: 'flex-start',
            fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 24,
          }}>
            <window.Icon name="sparkle" size={12} strokeWidth={2} />
            Diagnóstico de oportunidades · 3 minutos
          </div>
        </window.Reveal>

        <window.Reveal delay={80}>
          <h1 style={{ fontSize: 30, fontWeight: 600, letterSpacing: '-0.025em', lineHeight: 1.08, margin: 0, color: window.THEME.text }}>
            Descubre en <span style={{ color: 'var(--accent-solid)' }}>3 minutos</span> qué le está costando a tu empresa seguir como está.
          </h1>
        </window.Reveal>

        <window.Reveal delay={160} style={{ marginTop: 14 }}>
          <p style={{ fontSize: 15, lineHeight: 1.5, color: window.THEME.textMuted, margin: 0, maxWidth: 320 }}>
            Hacemos las preguntas correctas y te mostramos exactamente dónde está el cuello de botella — y lo que se puede hacer con él.
          </p>
        </window.Reveal>

        <window.Reveal delay={240} style={{ marginTop: 28 }}>
          <div style={{
            padding: 16, borderRadius: 14, background: window.THEME.bgCard,
            border: `1px solid ${window.THEME.border}`, display: 'flex', gap: 14, alignItems: 'center',
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12, background: 'var(--accent-soft)',
              color: 'var(--accent-solid)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <window.Icon name="sparkle" size={22} strokeWidth={1.8} />
            </div>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: window.THEME.text, lineHeight: 1.2 }}>
                Una resonancia magnética para tu operación
              </div>
              <div style={{ fontSize: 12, color: window.THEME.textMuted, marginTop: 4, lineHeight: 1.35 }}>
                No es un formulario. Es un diagnóstico que te muestra lo que no ves desde adentro.
              </div>
            </div>
          </div>
        </window.Reveal>

        <div style={{ flex: 1 }} />

        <window.Reveal delay={320} style={{ paddingBottom: 40 }}>
          <PrimaryButton onClick={next}>Iniciar diagnóstico gratuito</PrimaryButton>
          <div style={{ textAlign: 'center', marginTop: 12, fontSize: 11, color: window.THEME.textDim, letterSpacing: '0.02em' }}>
            3 minutos · 7 preguntas · Sin registrarte hasta el final
          </div>
        </window.Reveal>
      </div>
    </div>
  );
};

// ─── Screen 2 — Tipo de empresa ───────────────────────────────────
window.S2Niche = function S2Niche({ state, setState, next, back, step, total }) {
  const select = (id) => { setState({ ...state, nicho: id, dolores: [] }); setTimeout(next, 220); };
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <FlowHeader step={step} total={total} onBack={back} />
      <div style={{ padding: '24px 20px 0', flex: 1, overflowY: 'auto' }}>
        <window.Reveal>
          <h2 style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', margin: 0, lineHeight: 1.2, color: window.THEME.text }}>
            ¿Cómo describirías tu operación?
          </h2>
          <p style={{ fontSize: 13, color: window.THEME.textMuted, margin: '8px 0 0' }}>
            Elige la que más se parezca a tu empresa.
          </p>
        </window.Reveal>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 22, paddingBottom: 24 }}>
          {window.NICHOS.map((n, i) => (
            <window.Reveal key={n.id} delay={60 + i * 40}>
              <OptionCard selected={state.nicho === n.id} onClick={() => select(n.id)}>
                <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 10, flexShrink: 0,
                    background: state.nicho === n.id ? 'var(--accent-solid)' : 'rgba(20,22,30,0.04)',
                    color: state.nicho === n.id ? '#fff' : window.THEME.text,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    border: state.nicho === n.id ? 'none' : `1px solid ${window.THEME.border}`,
                  }}>
                    <window.Icon name={n.icon} size={20} strokeWidth={1.8} />
                  </div>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 15, fontWeight: 500, color: window.THEME.text, lineHeight: 1.2 }}>{n.label}</div>
                    <div style={{ fontSize: 12, color: window.THEME.textMuted, marginTop: 3 }}>{n.desc}</div>
                  </div>
                </div>
              </OptionCard>
            </window.Reveal>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── Screen 3 — Áreas con problema (selección múltiple) ───────────
window.S3Scale = function S3Areas({ state, setState, next, back, step, total }) {
  const niche = window.NICHOS.find(n => n.id === state.nicho) || window.NICHOS[0];
  const areas = state.dolores || [];

  const toggle = (id) => {
    if (areas.includes(id)) setState({ ...state, dolores: areas.filter(x => x !== id) });
    else setState({ ...state, dolores: [...areas, id] });
  };

  const canNext = areas.length > 0 && (!areas.includes('otro') || (state.dolorOtro || '').trim().length > 2);

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <FlowHeader step={step} total={total} onBack={back} />
      <div style={{ padding: '24px 20px 0', flex: 1, overflowY: 'auto' }}>
        <window.Reveal>
          <div style={{ fontSize: 11, color: 'var(--accent-solid)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>
            {niche.label}
          </div>
          <h2 style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', margin: 0, lineHeight: 1.2, color: window.THEME.text }}>
            ¿Dónde sientes que algo no fluye bien?
          </h2>
          <p style={{ fontSize: 13, color: window.THEME.textMuted, margin: '8px 0 0' }}>
            Puedes elegir uno o varios — entre más preciso, mejor el diagnóstico.
          </p>
        </window.Reveal>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 22, paddingBottom: 110 }}>
          {niche.areas.map((a, i) => (
            <window.Reveal key={a.id} delay={50 + i * 35}>
              <OptionCard selected={areas.includes(a.id)} onClick={() => toggle(a.id)}>
                <div style={{ paddingRight: 28 }}>
                  <div style={{ fontSize: 14, fontWeight: 500, color: window.THEME.text, lineHeight: 1.25 }}>{a.titulo}</div>
                  <div style={{ fontSize: 12, color: window.THEME.textMuted, marginTop: 4, lineHeight: 1.4 }}>{a.sub}</div>
                </div>
                {a.custom && areas.includes('otro') && (
                  <input
                    autoFocus
                    value={state.dolorOtro || ''}
                    onChange={(e) => setState({ ...state, dolorOtro: e.target.value })}
                    onClick={(e) => e.stopPropagation()}
                    placeholder="Describe brevemente el problema…"
                    style={{
                      marginTop: 10, width: '100%', padding: '10px 12px',
                      background: 'rgba(0,0,0,0.25)', border: `1px solid ${window.THEME.border}`,
                      borderRadius: 10, color: window.THEME.text, fontSize: 13, fontFamily: 'inherit', outline: 'none',
                    }}
                  />
                )}
              </OptionCard>
            </window.Reveal>
          ))}
        </div>
      </div>
      <FlowFooter>
        <PrimaryButton onClick={next} disabled={!canNext}>Continuar</PrimaryButton>
        {areas.length > 0 && (
          <div style={{ textAlign: 'center', marginTop: 8, fontSize: 11, color: window.THEME.textMuted }}>
            {areas.length} área{areas.length > 1 ? 's' : ''} seleccionada{areas.length > 1 ? 's' : ''}
          </div>
        )}
      </FlowFooter>
    </div>
  );
};

// ─── Screen 4 — Impacto ───────────────────────────────────────────
window.S4Pain = function S4Impact({ state, setState, next, back, step, total }) {
  const select = (id) => { setState({ ...state, impacto: id }); setTimeout(next, 200); };
  const ic = { tiempo: 'clock', dinero: 'dollar', crecimiento: 'trend', riesgo: 'shield' };
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <FlowHeader step={step} total={total} onBack={back} />
      <div style={{ padding: '24px 20px 0', flex: 1, overflowY: 'auto' }}>
        <window.Reveal>
          <h2 style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', margin: 0, lineHeight: 1.2, color: window.THEME.text }}>
            ¿Cómo se siente más ese problema hoy?
          </h2>
          <p style={{ fontSize: 13, color: window.THEME.textMuted, margin: '8px 0 0' }}>
            Elige el que más resuena con tu situación actual.
          </p>
        </window.Reveal>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 22, paddingBottom: 24 }}>
          {window.IMPACTOS.map((im, i) => (
            <window.Reveal key={im.id} delay={50 + i * 40}>
              <OptionCard selected={state.impacto === im.id} onClick={() => select(im.id)}>
                <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', paddingRight: 28 }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 9, flexShrink: 0,
                    background: state.impacto === im.id ? 'var(--accent-solid)' : 'rgba(20,22,30,0.04)',
                    color: state.impacto === im.id ? '#fff' : window.THEME.text,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    border: state.impacto === im.id ? 'none' : `1px solid ${window.THEME.border}`,
                  }}>
                    <window.Icon name={ic[im.id]} size={18} strokeWidth={1.8} />
                  </div>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 500, color: window.THEME.text, lineHeight: 1.25 }}>{im.label}</div>
                    <div style={{ fontSize: 12, color: window.THEME.textMuted, marginTop: 4, lineHeight: 1.4 }}>{im.sub}</div>
                  </div>
                </div>
              </OptionCard>
            </window.Reveal>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── Screen 5 — Mini captura temprana (nombre + WhatsApp) ─────────
// Capturamos el lead ANTES del diagnóstico profundo.
// Si abandona después de esto, ya tenemos con quién contactar.
window.S5Impact = function S5MiniCapture({ state, setState, next, back, step, total }) {
  const valid = (state.nombre || '').trim().length > 1 && (state.wsp || '').trim().length > 5;

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <FlowHeader step={step} total={total} onBack={back} />
      <div style={{ padding: '24px 20px 0', flex: 1, overflowY: 'auto' }}>
        <window.Reveal>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '4px 10px', borderRadius: 99,
            background: 'rgba(52,211,153,0.12)', color: '#6EE7B7',
            border: '1px solid rgba(52,211,153,0.25)',
            fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', marginBottom: 12,
          }}>
            <window.Icon name="sparkle" size={12} strokeWidth={3} />
            A MITAD DEL DIAGNÓSTICO
          </div>
          <h2 style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', margin: 0, lineHeight: 1.2, color: window.THEME.text }}>
            ¿Dónde te enviamos el diagnóstico?
          </h2>
          <p style={{ fontSize: 13, color: window.THEME.textMuted, margin: '8px 0 16px', lineHeight: 1.5 }}>
            Solo nombre y WhatsApp por ahora — el resto lo completamos al final.
          </p>
        </window.Reveal>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, paddingBottom: 110 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <label style={{ fontSize: 11, color: window.THEME.textMuted, fontWeight: 500, letterSpacing: '0.02em' }}>Tu nombre</label>
            <input
              type="text"
              value={state.nombre || ''}
              onChange={(e) => setState({ ...state, nombre: e.target.value })}
              placeholder="¿Cómo te llamas?"
              autoComplete="off"
              style={{
                padding: '14px', borderRadius: 12,
                background: 'rgba(20,22,30,0.03)',
                border: `1px solid ${window.THEME.border}`,
                color: window.THEME.text, fontSize: 15, fontFamily: 'inherit', outline: 'none',
              }}
            />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <label style={{ fontSize: 11, color: window.THEME.textMuted, fontWeight: 500, letterSpacing: '0.02em' }}>WhatsApp</label>
            <input
              type="tel"
              value={state.wsp || ''}
              onChange={(e) => setState({ ...state, wsp: e.target.value })}
              placeholder="304 378 3705"
              autoComplete="off"
              style={{
                padding: '14px', borderRadius: 12,
                background: 'rgba(20,22,30,0.03)',
                border: `1px solid ${window.THEME.border}`,
                color: window.THEME.text, fontSize: 15, fontFamily: 'inherit', outline: 'none',
              }}
            />
          </div>
          <div style={{
            padding: '12px 14px', borderRadius: 12,
            background: 'rgba(20,22,30,0.03)', border: `1px solid ${window.THEME.border}`,
            fontSize: 12, color: window.THEME.textDim, lineHeight: 1.5,
          }}>
            🔒 Solo para enviarte el diagnóstico. Nada de spam.
          </div>
        </div>
      </div>
      <FlowFooter>
        <PrimaryButton onClick={next} disabled={!valid}>Continuar al diagnóstico</PrimaryButton>
      </FlowFooter>
    </div>
  );
};

// ─── Screen 6 — Horizonte y ambición ─────────────────────────────
window.S6Urgency = function S6Urgency({ state, setState, next, back, step, total }) {
  const canNext = state.urgencia && state.presupuesto;
  const nombre = (state.nombre || '').split(' ')[0];

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <FlowHeader step={step} total={total} onBack={back} />
      <div style={{ padding: '24px 20px 0', flex: 1, overflowY: 'auto' }}>

        <window.Reveal>
          <h2 style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', margin: '0 0 6px', lineHeight: 1.2, color: window.THEME.text }}>
            {nombre ? `${nombre}, ` : ''}¿qué quieres que sea diferente?
          </h2>
          <p style={{ fontSize: 13, color: window.THEME.textMuted, margin: '0 0 16px', lineHeight: 1.5 }}>
            Esto define el ángulo de tu diagnóstico.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {window.URGENCIAS.map((u, i) => (
              <window.Reveal key={u.id} delay={60 + i * 40}>
                <OptionCard selected={state.urgencia === u.id} onClick={() => setState({ ...state, urgencia: u.id })}>
                  <div style={{ paddingRight: 28 }}>
                    <div style={{ fontSize: 14, fontWeight: 500, color: window.THEME.text, lineHeight: 1.25 }}>{u.label}</div>
                    <div style={{ fontSize: 12, color: window.THEME.textMuted, marginTop: 3, lineHeight: 1.4 }}>{u.sub}</div>
                  </div>
                </OptionCard>
              </window.Reveal>
            ))}
          </div>
        </window.Reveal>

        <window.Reveal delay={200}>
          <div style={{ marginTop: 24, paddingBottom: 110 }}>
            <h2 style={{ fontSize: 20, fontWeight: 600, letterSpacing: '-0.02em', margin: '0 0 6px', lineHeight: 1.2, color: window.THEME.text }}>
              ¿En qué horizonte lo ves ocurriendo?
            </h2>
            <p style={{ fontSize: 13, color: window.THEME.textMuted, margin: '0 0 14px', lineHeight: 1.5 }}>
              Así preparamos la conversación correcta para tu momento.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { id: 'r2', label: 'Ya tomé la decisión — necesito resultados rápidos',       sub: 'Estoy listo para moverme en semanas' },
                { id: 'r3', label: 'Lo estoy evaluando con seriedad este trimestre',          sub: 'Quiero entender bien antes de comprometer recursos' },
                { id: 'r1', label: 'Es una prioridad para el segundo semestre',               sub: 'Necesito preparar el terreno internamente primero' },
                { id: 'r0', label: 'Estoy explorando — no tengo un horizonte claro todavía',  sub: 'Me interesa entender qué existe y qué aplica a mi caso' },
              ].map((p, i) => (
                <window.Reveal key={p.id} delay={220 + i * 35}>
                  <OptionCard selected={state.presupuesto === p.id} onClick={() => setState({ ...state, presupuesto: p.id })}>
                    <div style={{ paddingRight: 28 }}>
                      <div style={{ fontSize: 14, fontWeight: 500, color: window.THEME.text, lineHeight: 1.25 }}>{p.label}</div>
                      <div style={{ fontSize: 12, color: window.THEME.textMuted, marginTop: 3, lineHeight: 1.4 }}>{p.sub}</div>
                    </div>
                  </OptionCard>
                </window.Reveal>
              ))}
            </div>
          </div>
        </window.Reveal>
      </div>
      <FlowFooter>
        <PrimaryButton onClick={next} disabled={!canNext}>Casi listo →</PrimaryButton>
      </FlowFooter>
    </div>
  );
};

// ─── Screen 7 — Tamaño + madurez + datos completos ────────────────
// Ahora que el usuario ya "se vio reflejado", completa más información.
window.S7Contact = function S7Final({ state, setState, next, back, step, total, onSubmit }) {
  const [submitting, setSubmitting] = React.useState(false);

  const valid = (state.empresa || '').trim().length > 1
    && (state.cargo || '').trim().length > 1
    && state.escala
    && state.maduracion;

  const submit = () => {
    if (!valid || submitting) return;
    setSubmitting(true);
    setTimeout(() => { onSubmit(); next(); }, 700);
  };

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      <FlowHeader step={step} total={total} onBack={back} />
      <div style={{ padding: '24px 20px 0', flex: 1, overflowY: 'auto' }}>
        <window.Reveal>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '4px 10px', borderRadius: 99,
            background: 'rgba(52,211,153,0.12)', color: '#6EE7B7',
            border: '1px solid rgba(52,211,153,0.25)',
            fontSize: 11, fontWeight: 600, letterSpacing: '0.04em', marginBottom: 12,
          }}>
            <window.Icon name="check" size={12} strokeWidth={3} />
            ÚLTIMO PASO
          </div>
          <h2 style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', margin: 0, lineHeight: 1.15, color: window.THEME.text }}>
            Un par de datos más para precisar el diagnóstico
          </h2>
        </window.Reveal>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 22, paddingBottom: 110 }}>

          {/* Empresa */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <label style={{ fontSize: 11, color: window.THEME.textMuted, fontWeight: 500, letterSpacing: '0.02em' }}>Empresa</label>
            <input
              type="text" value={state.empresa || ''}
              onChange={(e) => setState({ ...state, empresa: e.target.value })}
              placeholder="Nombre de tu empresa"
              style={{ padding: '14px', borderRadius: 12, background: 'rgba(20,22,30,0.03)', border: `1px solid ${window.THEME.border}`, color: window.THEME.text, fontSize: 15, fontFamily: 'inherit', outline: 'none' }}
            />
          </div>

          {/* Cargo */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <label style={{ fontSize: 11, color: window.THEME.textMuted, fontWeight: 500, letterSpacing: '0.02em' }}>Tu cargo</label>
            <input
              type="text" value={state.cargo || ''}
              onChange={(e) => setState({ ...state, cargo: e.target.value })}
              placeholder="Gerente, Director, Dueño…"
              style={{ padding: '14px', borderRadius: 12, background: 'rgba(20,22,30,0.03)', border: `1px solid ${window.THEME.border}`, color: window.THEME.text, fontSize: 15, fontFamily: 'inherit', outline: 'none' }}
            />
          </div>

          {/* Email opcional */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <label style={{ fontSize: 11, color: window.THEME.textMuted, fontWeight: 500, letterSpacing: '0.02em' }}>
              Email <span style={{ color: window.THEME.textDim }}>· opcional</span>
            </label>
            <input
              type="email" value={state.email || ''}
              onChange={(e) => setState({ ...state, email: e.target.value })}
              placeholder="tu@empresa.com"
              style={{ padding: '14px', borderRadius: 12, background: 'rgba(20,22,30,0.03)', border: `1px solid ${window.THEME.border}`, color: window.THEME.text, fontSize: 15, fontFamily: 'inherit', outline: 'none' }}
            />
          </div>

          {/* Tamaño */}
          <div>
            <div style={{ fontSize: 11, color: window.THEME.textMuted, fontWeight: 500, marginBottom: 10, letterSpacing: '0.02em' }}>
              ¿Cuántas personas en tu equipo?
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {window.ESCALAS.map((e) => (
                <OptionCard key={e.id} selected={state.escala === e.id} onClick={() => setState({ ...state, escala: e.id })}>
                  <div style={{ fontSize: 14, fontWeight: 500, color: window.THEME.text, paddingRight: 28 }}>{e.label}</div>
                </OptionCard>
              ))}
            </div>
          </div>

          {/* Madurez */}
          <div>
            <div style={{ fontSize: 11, color: window.THEME.textMuted, fontWeight: 500, marginBottom: 10, letterSpacing: '0.02em' }}>
              ¿Cómo opera hoy tu empresa?
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {window.MADURACIONES.map((m) => (
                <OptionCard key={m.id} selected={state.maduracion === m.id} onClick={() => setState({ ...state, maduracion: m.id })}>
                  <div style={{ fontSize: 14, fontWeight: 500, color: window.THEME.text, paddingRight: 28, lineHeight: 1.35 }}>{m.label}</div>
                </OptionCard>
              ))}
            </div>
          </div>

        </div>
      </div>
      <FlowFooter>
        <PrimaryButton onClick={submit} disabled={!valid || submitting} icon={submitting ? null : 'arrow'}>
          {submitting ? 'Generando diagnóstico…' : 'Ver mi diagnóstico personalizado'}
        </PrimaryButton>
        <div style={{ textAlign: 'center', marginTop: 10, fontSize: 11, color: window.THEME.textDim, lineHeight: 1.4 }}>
          No es spam. Tu diagnóstico llega directo con las soluciones específicas para tu empresa.
        </div>
      </FlowFooter>
    </div>
  );
};

window.FlowFooter = FlowFooter;
window.PrimaryButton = PrimaryButton;
window.OptionCard = OptionCard;
window.FlowHeader = FlowHeader;