// src/screen-auth.jsx — §1 Sign-in + §6 Onboarding wizard (incl. BYO-LLM prompt).

function SignInScreen({ onSignIn }) {
  const [email, setEmail] = useState('miguel@madpanda.mx');
  const [password, setPassword] = useState('••••••••••');
  const [showPwd, setShowPwd] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const onSubmit = (e) => {
    e.preventDefault();
    if (!email || !password) { setError('Llena los dos campos para entrar.'); return; }
    setError(null);
    setLoading(true);
    setTimeout(() => { setLoading(false); onSignIn(); }, 600);
  };

  return (
    <div className="ax" style={{
      minHeight: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 40, background: 'var(--ax-bg)',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Big AX faded in the corner — Mad Panda signature mood */}
      <div aria-hidden style={{
        position: 'absolute', right: -120, bottom: -180,
        fontFamily: 'var(--font-logo)', fontWeight: 800,
        fontSize: 480, color: 'rgba(0,255,136,0.035)',
        letterSpacing: '-0.05em', lineHeight: 0.8, pointerEvents: 'none', userSelect: 'none',
      }}>PX</div>

      <div style={{ position: 'relative', width: 380, display: 'flex', flexDirection: 'column' }}>
        <div style={{ marginBottom: 32 }}>
          <AxLogo size={28}/>
          <div className="ax-mono" style={{
            marginTop: 8, fontSize: 10, color: 'var(--ax-fg-faint)',
            letterSpacing: '0.18em', textTransform: 'uppercase',
          }}>
            Local · 127.0.0.1:7878
          </div>
        </div>

        <h1 style={{ margin: 0, fontFamily: 'var(--font-body)', fontWeight: 600, color: 'var(--ax-fg-strong)', fontSize: 22 }}>
          Buenas noches.
        </h1>
        <p style={{ margin: '6px 0 28px', color: 'var(--ax-fg-muted)', fontSize: 13, lineHeight: 1.55 }}>
          Tu base de pólizas vive en esta computadora. Identifícate para abrirla.
        </p>

        <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <AxField label="Correo" required>
            <AxInput type="email" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email"/>
          </AxField>
          <AxField label="Contraseña" required error={error}>
            <div style={{ position: 'relative' }}>
              <AxInput type={showPwd ? 'text' : 'password'}
                value={password} onChange={(e) => setPassword(e.target.value)}
                style={{ paddingRight: 36 }} autoComplete="current-password"/>
              <button type="button" onClick={() => setShowPwd((v) => !v)}
                style={{
                  position: 'absolute', right: 4, top: '50%', transform: 'translateY(-50%)',
                  background: 'transparent', border: 0, padding: 6,
                  color: 'var(--ax-fg-faint)', cursor: 'default',
                }}>
                <AxIcon name={showPwd ? 'eye-off' : 'eye'} size={14}/>
              </button>
            </div>
          </AxField>

          <AxButton type="submit" variant="primary" size="lg" loading={loading} style={{ marginTop: 8 }}>
            {loading ? 'Entrando…' : 'Entrar'}
          </AxButton>

          <button type="button" style={{
            appearance: 'none', background: 'transparent', border: 0,
            color: 'var(--ax-fg-muted)', fontSize: 12, padding: 4,
            cursor: 'default', alignSelf: 'flex-start',
          }}>
            ¿Olvidaste tu contraseña? Restaúrala desde la terminal: <span className="ax-mono" style={{ color: 'var(--ax-fg)' }}>piixi reset-password</span>
          </button>
        </form>

        <div style={{
          marginTop: 36, paddingTop: 18, borderTop: '1px solid var(--ax-border)',
          fontSize: 11, color: 'var(--ax-fg-faint)', lineHeight: 1.6,
          display: 'flex', alignItems: 'flex-start', gap: 8,
        }}>
          <AxIcon name="shield" size={12} style={{ marginTop: 2, color: 'var(--ax-accent)' }}/>
          <span>
            <strong style={{ color: 'var(--ax-fg-muted)' }}>Procesamiento local.</strong>{' '}
            Piixi corre en tu equipo. Tus pólizas y datos no salen de aquí.
          </span>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ONBOARDING (§6)
// ─────────────────────────────────────────────────────────────
const STEPS = [
  { id: 'org',      label: 'Organización' },
  { id: 'carriers', label: 'Aseguradoras' },
  { id: 'source',   label: 'Fuente' },
  { id: 'llm',      label: 'Tutor LLM' },
  { id: 'confirm',  label: 'Confirmar' },
];

function OnboardingScreen({ onFinish }) {
  const [stepIdx, setStepIdx] = useState(0);
  const [data, setData] = useState({
    orgName: '',
    adminName: '',
    email: '',
    password: '',
    passwordConfirm: '',
    carriers: ['gnp'],
    source: 'local',
    llmTutor: null, // 'yes' | 'no' | null
  });
  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const goBack = () => setStepIdx((s) => Math.max(0, s - 1));
  const goNext = () => setStepIdx((s) => Math.min(STEPS.length - 1, s + 1));

  return (
    <div className="ax" style={{
      minHeight: '100%', background: 'var(--ax-bg)',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
      padding: '40px 24px',
    }}>
      <div style={{ width: '100%', maxWidth: 680, display: 'flex', flexDirection: 'column' }}>
        <div style={{ marginBottom: 24 }}>
          <AxLogo size={22}/>
        </div>
        <Stepper steps={STEPS} active={stepIdx}/>

        <div className="ax-card" style={{ padding: 28, marginTop: 18, minHeight: 380, display: 'flex', flexDirection: 'column' }}>
          {stepIdx === 0 && <StepOrg data={data} set={set}/>}
          {stepIdx === 1 && <StepCarriers data={data} set={set}/>}
          {stepIdx === 2 && <StepSource data={data} set={set}/>}
          {stepIdx === 3 && <StepLLM data={data} set={set}/>}
          {stepIdx === 4 && <StepConfirm data={data}/>}
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 16 }}>
          <AxButton variant="tertiary" disabled={stepIdx === 0} onClick={goBack} icon="arrow-left">
            Atrás
          </AxButton>
          {stepIdx < STEPS.length - 1 ? (
            <AxButton variant="primary" onClick={goNext} iconRight="arrow-right">Continuar</AxButton>
          ) : (
            <AxButton variant="primary" onClick={onFinish} icon="check">Empezar a usar Piixi</AxButton>
          )}
        </div>
      </div>
    </div>
  );
}

function Stepper({ steps, active }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      {steps.map((s, i) => (
        <React.Fragment key={s.id}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{
              width: 20, height: 20, borderRadius: '50%',
              background: i <= active ? 'var(--ax-accent)' : 'var(--ax-bg-3)',
              color: i <= active ? '#0A0A0A' : 'var(--ax-fg-muted)',
              border: '1px solid ' + (i <= active ? 'var(--ax-accent)' : 'var(--ax-border-strong)'),
              fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>{i + 1}</span>
            <span style={{
              fontSize: 12,
              color: i === active ? 'var(--ax-fg-strong)' : 'var(--ax-fg-muted)',
              fontWeight: i === active ? 500 : 400,
            }}>{s.label}</span>
          </div>
          {i < steps.length - 1 ? <span style={{ flex: 1, height: 1, background: 'var(--ax-border)' }}/> : null}
        </React.Fragment>
      ))}
    </div>
  );
}

// ─── Steps ──────────────────────────────────────────────────
function StepOrg({ data, set }) {
  return (
    <div className="ax-fade-in" style={{ display: 'flex', flexDirection: 'column' }}>
      <AxEyebrow>Paso 1 · Organización</AxEyebrow>
      <h2 style={{ margin: '6px 0 4px', fontSize: 22, fontFamily: 'var(--font-body)', fontWeight: 600, color: 'var(--ax-fg-strong)' }}>
        Crea tu cuenta de Piixi
      </h2>
      <p style={{ margin: 0, fontSize: 13, color: 'var(--ax-fg-muted)' }}>
        Una sola cuenta por instalación: esta computadora es tu Piixi. Puedes cambiar todo después en Ajustes.
      </p>

      <div style={{ marginTop: 22, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <div style={{ gridColumn: '1 / -1' }}>
          <AxField label="Nombre de tu agencia" required helper="P. ej., Rivera Asesores, Seguros Pacheco, etc.">
            <AxInput value={data.orgName} onChange={(e) => set('orgName', e.target.value)} placeholder="Tu agencia o tu nombre"/>
          </AxField>
        </div>
        <AxField label="Tu nombre" required>
          <AxInput value={data.adminName} onChange={(e) => set('adminName', e.target.value)} placeholder="Nombre completo"/>
        </AxField>
        <AxField label="Correo" required helper="Para recordatorios y avisos del sistema">
          <AxInput type="email" value={data.email} onChange={(e) => set('email', e.target.value)} placeholder="tucorreo@dominio.mx"/>
        </AxField>
        <AxField label="Contraseña" required helper="8+ caracteres, lo que recuerdes">
          <AxInput type="password" value={data.password} onChange={(e) => set('password', e.target.value)}/>
        </AxField>
        <AxField label="Confirma la contraseña" required
          error={data.passwordConfirm && data.password !== data.passwordConfirm ? 'No coinciden' : null}>
          <AxInput type="password" value={data.passwordConfirm} onChange={(e) => set('passwordConfirm', e.target.value)}/>
        </AxField>
      </div>
    </div>
  );
}

function StepCarriers({ data, set }) {
  const toggle = (id) => {
    const has = data.carriers.includes(id);
    set('carriers', has ? data.carriers.filter((c) => c !== id) : [...data.carriers, id]);
  };
  return (
    <div className="ax-fade-in" style={{ display: 'flex', flexDirection: 'column' }}>
      <AxEyebrow>Paso 2 · Aseguradoras</AxEyebrow>
      <h2 style={{ margin: '6px 0 4px', fontSize: 22, fontFamily: 'var(--font-body)', fontWeight: 600, color: 'var(--ax-fg-strong)' }}>
        ¿Con qué aseguradoras trabajas hoy?
      </h2>
      <p style={{ margin: 0, fontSize: 13, color: 'var(--ax-fg-muted)' }}>
        Selecciona las que más manejas. Esto nos dice qué reglas del catálogo descargar primero. Puedes agregar más después.
      </p>

      <div style={{ marginTop: 22, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
        {AdmixData.CARRIERS.map((c) => {
          const active = data.carriers.includes(c.id);
          return (
            <button key={c.id}
              onClick={() => toggle(c.id)}
              style={{
                appearance: 'none', textAlign: 'left',
                background: active ? 'var(--ax-accent-soft)' : 'var(--ax-bg-3)',
                border: '1px solid ' + (active ? 'var(--ax-accent-line)' : 'var(--ax-border)'),
                borderRadius: 8, padding: 12,
                display: 'flex', alignItems: 'center', gap: 10,
                color: 'inherit', cursor: 'default',
                transition: 'all 150ms',
              }}
            >
              <AxCarrierAvatar id={c.id} size={28}/>
              <div style={{ flex: 1, fontSize: 13, color: 'var(--ax-fg-strong)' }}>{c.name}</div>
              <span style={{
                width: 16, height: 16, borderRadius: 3,
                border: '1.5px solid ' + (active ? 'var(--ax-accent)' : 'var(--ax-border-strong)'),
                background: active ? 'var(--ax-accent)' : 'transparent',
                color: '#0A0A0A',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {active ? <AxIcon name="check" size={10}/> : null}
              </span>
            </button>
          );
        })}
      </div>
      <div style={{ marginTop: 16, fontSize: 12, color: 'var(--ax-fg-muted)' }}>
        ¿Trabajas con otra aseguradora? <button style={{
          appearance: 'none', background: 'transparent', border: 0, color: 'var(--ax-accent)',
          padding: 0, fontSize: 12, cursor: 'default', textDecoration: 'underline', textUnderlineOffset: 3,
        }}>Cuéntanos cuál</button>.
      </div>
    </div>
  );
}

function StepSource({ data, set }) {
  const options = [
    { id: 'local',  label: 'Carpeta local',   body: 'PDFs de una carpeta en tu disco.', icon: 'folder' },
    { id: 'drive',  label: 'Google Drive',    body: 'Una carpeta de Drive vía OAuth (beta).', icon: 'drive' },
    { id: 'skip',   label: 'Omitir por ahora', body: 'Configuro la fuente cuando quiera cargar mi libro.', icon: 'cal' },
  ];
  return (
    <div className="ax-fade-in" style={{ display: 'flex', flexDirection: 'column' }}>
      <AxEyebrow>Paso 3 · Fuente</AxEyebrow>
      <h2 style={{ margin: '6px 0 4px', fontSize: 22, fontFamily: 'var(--font-body)', fontWeight: 600, color: 'var(--ax-fg-strong)' }}>
        ¿De dónde vienen tus pólizas?
      </h2>
      <p style={{ margin: 0, fontSize: 13, color: 'var(--ax-fg-muted)' }}>
        Solo elige la fuente primaria. Más tarde puedes mezclar carpetas y Drive sin problema.
      </p>

      <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {options.map((o) => {
          const active = data.source === o.id;
          return (
            <button key={o.id}
              onClick={() => set('source', o.id)}
              style={{
                appearance: 'none', textAlign: 'left',
                background: active ? 'var(--ax-bg-4)' : 'var(--ax-bg-3)',
                border: '1px solid ' + (active ? 'var(--ax-accent-line)' : 'var(--ax-border)'),
                borderRadius: 8, padding: 14, display: 'flex', alignItems: 'center', gap: 12,
                color: 'inherit', cursor: 'default',
              }}
            >
              <span style={{
                width: 16, height: 16, borderRadius: '50%',
                border: '1.5px solid ' + (active ? 'var(--ax-accent)' : 'var(--ax-border-strong)'),
                background: active ? 'var(--ax-accent)' : 'transparent',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>{active ? <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#0A0A0A' }}/> : null}</span>
              <AxIcon name={o.icon} size={18} style={{ color: 'var(--ax-fg-muted)' }}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, color: 'var(--ax-fg-strong)', fontWeight: 500 }}>{o.label}</div>
                <div style={{ fontSize: 12, color: 'var(--ax-fg-muted)' }}>{o.body}</div>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ─── Step 4 — BYO-LLM offer ──────────────────────────────────
function StepLLM({ data, set }) {
  const [copied, setCopied] = useState(false);
  const prompt = useMemo(() => buildLLMPrompt(data), [data]);
  const onCopy = () => {
    try {
      const ta = document.createElement('textarea');
      ta.value = prompt;
      document.body.appendChild(ta);
      ta.select();
      document.execCommand('copy');
      document.body.removeChild(ta);
    } catch (e) {}
    setCopied(true);
    setTimeout(() => setCopied(false), 2500);
  };
  return (
    <div className="ax-fade-in" style={{ display: 'flex', flexDirection: 'column' }}>
      <AxEyebrow>Paso 4 · Tutor LLM (opcional)</AxEyebrow>
      <h2 style={{ margin: '6px 0 4px', fontSize: 22, fontFamily: 'var(--font-body)', fontWeight: 600, color: 'var(--ax-fg-strong)' }}>
        ¿Tienes Claude o ChatGPT abierto?
      </h2>
      <p style={{ margin: 0, fontSize: 13, color: 'var(--ax-fg-muted)', lineHeight: 1.55, maxWidth: 540 }}>
        Piixi no llama a ningún LLM. Pero si ya tienes uno, podemos generarte un prompt para que sirva como tutor mientras aprendes Piixi.
        Es solo para acompañarte: ningún configurador, ningún consejo legal.
      </p>

      {data.llmTutor === null ? (
        <div style={{ marginTop: 22, display: 'flex', gap: 10 }}>
          <AxButton variant="primary" onClick={() => set('llmTutor', 'yes')}>Sí, genera el prompt</AxButton>
          <AxButton variant="secondary" onClick={() => set('llmTutor', 'no')}>No, gracias</AxButton>
        </div>
      ) : data.llmTutor === 'no' ? (
        <div style={{
          marginTop: 18, padding: 14, background: 'var(--ax-bg-3)', borderRadius: 8,
          fontSize: 13, color: 'var(--ax-fg-muted)', display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <AxIcon name="check" size={14}/>
          <span>Perfecto. Puedes generar este prompt después desde Ajustes → Tutor.</span>
          <button onClick={() => set('llmTutor', 'yes')} className="ax-btn ax-btn--tertiary ax-btn--sm" style={{ marginLeft: 'auto' }}>
            Cambiar de opinión
          </button>
        </div>
      ) : (
        <div style={{ marginTop: 18 }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '8px 12px',
            background: 'var(--ax-bg-3)',
            border: '1px solid var(--ax-border)',
            borderTopLeftRadius: 8, borderTopRightRadius: 8,
            borderBottom: 0,
          }}>
            <span className="ax-eyebrow">Prompt para tu tutor (Claude o ChatGPT)</span>
            <button
              className={'ax-btn ax-btn--sm ' + (copied ? 'ax-btn--primary' : 'ax-btn--secondary')}
              onClick={onCopy}
            >
              <AxIcon name={copied ? 'check' : 'copy'} size={12}/>
              {copied ? '¡Copiado!' : 'Copiar al portapapeles'}
            </button>
          </div>
          <pre style={{
            margin: 0,
            background: 'var(--ax-bg-4)',
            border: '1px solid var(--ax-border)',
            borderBottomLeftRadius: 8, borderBottomRightRadius: 8,
            padding: 16, maxHeight: 280, overflow: 'auto',
            fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.55,
            color: 'var(--ax-fg)',
            whiteSpace: 'pre-wrap', wordBreak: 'break-word',
          }}>{prompt}</pre>

          <div style={{ marginTop: 12, fontSize: 12, color: 'var(--ax-fg-muted)', lineHeight: 1.55, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
            <AxIcon name="info" size={14} style={{ marginTop: 1, color: 'var(--ax-fg-muted)' }}/>
            <span>
              Este prompt enmarca al LLM como tutor del producto, no como configurador.{' '}
              Pega tu mensaje normal después del prompt. Si te preguntan por cumplimiento, el prompt menciona explícitamente el alcance del Art. 492.
            </span>
          </div>
        </div>
      )}
    </div>
  );
}

function buildLLMPrompt(data) {
  const carrierLabels = data.carriers.map((id) => {
    const c = AdmixData.CARRIERS.find((x) => x.id === id);
    return c ? c.name : id;
  }).join(', ') || 'aún no seleccionadas';
  const sourceLabel = { local: 'una carpeta local', drive: 'Google Drive', skip: 'aún no configurada' }[data.source];

  return `Eres mi tutor para usar Piixi, un software de gestión de pólizas para agentes
de seguros independientes en México. Estoy empezando a usarlo y necesito acompañamiento
operativo, no consultoría regulatoria.

Contexto sobre mí:
- Soy agente independiente (agente narrow conforme al Art. 492 de la Ley de Instituciones
  de Seguros y Fianzas — sólo coloco pólizas, no soy promotor ni corredor).
- Vendo principalmente pólizas de: Gastos Médicos Mayores (GMM), Vida, Autos y Daños
  ("los 4 ramos").
- Las aseguradoras con las que trabajo hoy son: ${carrierLabels}.
- Voy a cargar mi libro desde ${sourceLabel}.
- Mi instalación de Piixi corre 100% local — los PDFs no salen de mi computadora.

Reglas estrictas para esta conversación (no las rompas):

1. Eres tutor, no configurador. Tu trabajo es enseñarme a usar Piixi más rápido y mejor.
   No me digas qué decidir comercialmente; no me digas a qué cliente vender; no
   inventes datos de mis pólizas.

2. No reemplazas a Piixi. Si te pido que extraiga un campo de una póliza o que clasifique
   un PDF, recuérdame que eso lo hace Piixi localmente en mi máquina y guíame al
   menú correcto. Piixi no llama a ningún LLM; ese es un compromiso de privacidad.

3. Habla siempre en español de México, con el vocabulario de la cohorte:
   "póliza", "ramo", "contratante", "asegurado", "prima", "vigencia",
   "pendientes de revisión", "aseguradora". Nada de "PENDING_REVIEW" u otros
   tecnicismos internos.

4. "Pendientes de revisión" NO es un error. Es el flujo normal: Piixi extrae lo
   que puede, yo confirmo el resto. Trátalo como un piso de trabajo, no como una
   falla.

5. Si surge cumplimiento o regulación: aclara que como agente narrow (Art. 492),
   mi alcance es colocar pólizas e informar al cliente — no asesoría legal,
   no actos de comercio reservados a otros. Si la pregunta excede ese alcance,
   sugiéreme consultar a un abogado o a la CNSF, no inventes la respuesta.

6. No me hables de productos de IA. Piixi por diseño no usa LLM en su flujo
   operativo. Tú eres el único punto de contacto con un LLM en mi día a día,
   y sólo para enseñarme a usar el producto.

7. Cuando me ayudes con un campo canónico, recuérdame los 5 obligatorios para
   aprobar una póliza en Piixi:
   - poliza_numero
   - contratante_nombre
   - contratante_rfc
   - poliza_inicio_vigencia
   - poliza_fin_vigencia
   Y los 3 de identidad (no editables, vienen de huella digital):
   - aseguradora_nombre
   - ramo_nombre
   - producto_nombre

8. Sé breve. Prefiere listas y pasos concretos a párrafos largos. Si pregunto algo
   ambiguo, devuélveme dos preguntas máximo para acotar.

Empieza preguntándome qué quiero hacer en Piixi hoy.`;
}

function StepConfirm({ data }) {
  const carrierNames = data.carriers.map((id) => AdmixData.CARRIERS.find((c) => c.id === id).name).join(', ');
  const sourceLabel = { local: 'Carpeta local', drive: 'Google Drive', skip: 'Pendiente' }[data.source];
  return (
    <div className="ax-fade-in" style={{ display: 'flex', flexDirection: 'column' }}>
      <AxEyebrow>Paso 5 · Confirmar</AxEyebrow>
      <h2 style={{ margin: '6px 0 4px', fontSize: 22, fontFamily: 'var(--font-body)', fontWeight: 600, color: 'var(--ax-fg-strong)' }}>
        Todo listo, {data.adminName ? data.adminName.split(' ')[0] : '—'}.
      </h2>
      <p style={{ margin: 0, fontSize: 13, color: 'var(--ax-fg-muted)' }}>
        Esto es lo que vamos a configurar:
      </p>

      <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 4 }}>
        {[
          ['Agencia',       data.orgName || 'Tu agencia'],
          ['Usuario admin', data.adminName ? `${data.adminName} · ${data.email}` : '—'],
          ['Base local',    'SQLite en ~/.piixi/db'],
          ['Aseguradoras',  carrierNames || '—'],
          ['Catálogo',      `${data.carriers.length * 4} reglas iniciales descargadas`],
          ['Fuente',        sourceLabel],
          ['Tutor LLM',     data.llmTutor === 'yes' ? 'Prompt generado (Spanish)' : 'No configurado'],
        ].map(([k, v]) => (
          <div key={k} style={{
            display: 'grid', gridTemplateColumns: '160px 1fr',
            padding: '10px 0', borderBottom: '1px solid var(--ax-border)',
            fontSize: 13,
          }}>
            <span style={{ color: 'var(--ax-fg-muted)' }}>{k}</span>
            <span style={{ color: 'var(--ax-fg-strong)' }}>{v}</span>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 20, padding: '12px 14px',
        background: 'var(--ax-accent-soft)',
        border: '1px solid var(--ax-accent-line)',
        borderRadius: 8, fontSize: 12, color: 'var(--ax-fg)',
        display: 'flex', gap: 10, alignItems: 'flex-start',
      }}>
        <span style={{ color: 'var(--ax-accent)' }}><AxIcon name="check" size={15}/></span>
        <span>Al continuar, Piixi te lleva a la pantalla principal y prepara el botón de "Cargar pólizas" como tu primer paso.</span>
      </div>
    </div>
  );
}

Object.assign(window, { SignInScreen, OnboardingScreen });