// BANCA · 6 dominios interactivos (Fraude · AML · KYC · Pagos · Crédito · Resiliencia)
// + SDMs + 4 capas · sin subpáginas · un solo runtime

const BancaDomains = () => {
  const [active, setActive] = React.useState(0);
  const domains = [
    {
      k: 'FRAUDE EN TIEMPO REAL', icon: 'shield-alert', color: '#F4024C',
      question: '¿Cómo ayuda OMNIX a detectar y responder al fraude?',
      answer: 'OMNIX correlaciona señales entre transacciones, identidad, dispositivo, comportamiento y contexto del cliente para detectar patrones de fraude · priorizar alertas · explicar factores de riesgo · aplicar respuestas proporcionales (permitir, MFA, retener, escalar) · y coordinar workflows sobre motor antifraude, core y case management existentes.',
      cases: ['Account takeover', 'Fraude de pagos', 'Fraude de tarjetas', 'Transferencias atípicas', 'Suplantación', 'Identidad sintética', 'Fraude en onboarding', 'Mule accounts', 'Deepfakes · ingeniería social', 'Fraude interno · sujeto a controles'],
      kpi: 'Tiempo detección · pérdida evitada · falsos positivos · fricción · casos/analista',
      systems: 'Motor antifraude · core · pagos · identidad · device intelligence · CRM · case mgmt',
      autonomy: 'N3-N4 · con MFA/retención dentro de umbral',
      restriction: 'OMNIX no afirma culpabilidad · no bloquea cuentas definitivamente sin proceso autorizado · no promete cero falsos positivos.',
    },
    {
      k: 'AML/CFT Y CUMPLIMIENTO', icon: 'scale', color: '#0050BD',
      question: '¿Cómo convierte OMNIX alertas AML en investigaciones priorizadas?',
      answer: 'OMNIX consolida antecedentes de transacciones, clientes, contrapartes y jurisdicciones · detecta relaciones · reduce duplicidad de alertas · prepara expedientes con información faltante identificada · recomienda próximos pasos · escala casos y prepara borradores de reportes. La determinación de lavado y el reporte regulatorio permanecen bajo responsabilidad de equipos autorizados.',
      cases: ['Monitoreo transaccional', 'Screening de listas', 'Investigación de casos', 'Redes de relaciones', 'Preparación de expedientes', 'Borradores de reportes', 'Segmentación por riesgo', 'Reducción de duplicidad'],
      kpi: 'Backlog · tiempo investigación · alertas duplicadas · casos escalados · expedientes completos · hallazgos auditoría',
      systems: 'Plataforma AML · KYC · core · listas autorizadas · monitoreo transaccional · case mgmt',
      autonomy: 'N2-N3 · aprobación humana obligatoria en clasificación y reporte',
      restriction: 'OMNIX no determina lavado ni financiamiento ilícito · no presenta reportes regulatorios · no congela activos ni termina relaciones sin aprobación explícita.',
    },
    {
      k: 'KYC · KYB · IDENTIDAD', icon: 'user-check', color: '#B00238',
      question: '¿Cómo fortalece OMNIX el onboarding y la verificación continua?',
      answer: 'OMNIX reúne antecedentes documentales, clasifica documentos, detecta inconsistencias, aplica reglas explícitas y recomienda revisión reforzada · coordina solicitudes de información faltante · escala excepciones al oficial de cumplimiento · y registra aprobaciones con evidencia auditable. La biometría, screening e identidad son capacidades sujetas a validación por proyecto.',
      cases: ['Onboarding', 'Verificación documental', 'Beneficiario final', 'Personas relacionadas', 'Actualización periódica', 'Screening PEP · listas', 'Segmentación por riesgo', 'Revisión de empresas · KYB', 'Identidad sintética'],
      kpi: 'Tiempo de onboarding · revisiones manuales · documentación faltante · abandono · tiempo actualización',
      systems: 'KYC · core · CRM · gestión documental · identidad · listas autorizadas',
      autonomy: 'N2-N3 · aprobación humana en aceptación/rechazo de relación',
      restriction: 'OMNIX no aprueba ni rechaza automáticamente relaciones · biometría e identidad requieren [VALIDAR INTEGRACIÓN] por proyecto.',
    },
    {
      k: 'PAGOS Y OPERACIONES', icon: 'refresh-cw', color: '#0F5132',
      question: '¿Cómo automatiza OMNIX excepciones de pagos y operaciones bancarias?',
      answer: 'A diferencia de RPA que ejecuta pasos definidos, OMNIX evalúa contexto, excepciones, riesgo y alternativas antes de coordinar el workflow. Reconcilia · detecta duplicidades · investiga excepciones · prepara correcciones · solicita aprobación · actualiza sistemas y registra evidencia. Automatización de decisiones · no sólo de tareas.',
      cases: ['Excepciones en pagos', 'Reconciliación', 'Operaciones duplicadas', 'Fallas de liquidación', 'Devoluciones · contracargos', 'Disputas', 'Operaciones pendientes', 'Enrutamiento de pagos', 'Priorización de pagos críticos', 'Gestión de documentación'],
      kpi: 'STP rate · excepciones · contracargos · disputas · tiempo resolución · operaciones pendientes',
      systems: 'Core · payments hub · card processing · ERP · BPM · RPA · case mgmt · document management',
      autonomy: 'N3-N4 · con aprobación jerárquica sobre umbral de monto',
      restriction: 'Correcciones sobre umbral requieren aprobación · adjustments regulatorios mantienen segregación de funciones.',
    },
    {
      k: 'CRÉDITO · RIESGO DE MODELOS', icon: 'trending-up', color: '#B8860B',
      question: '¿Cómo puede utilizarse IA en crédito sin perder explicabilidad ni control?',
      answer: 'OMNIX apoya crédito preparando antecedentes, detectando información faltante, verificando consistencia, priorizando revisión, monitoreando cartera y alertando deterioro. En decisiones que afectan acceso a crédito mantiene supervisión humana obligatoria, explicabilidad de factores, controles de equidad, mecanismos de apelación y monitoreo de drift bajo el marco Model Risk Management.',
      cases: ['Preparación de antecedentes', 'Detección de información faltante', 'Verificación de consistencia', 'Priorización de revisión', 'Monitoreo de cartera', 'Detección de deterioro', 'Revisión de covenants', 'Evaluación de escenarios', 'Gobierno de modelos · MRM', 'Monitoreo de drift'],
      kpi: 'Tiempo decisión · excepciones · drift · revisiones manuales · morosidad · explicaciones generadas',
      systems: 'Credit systems · scoring · core · CRM · bureaus · document management · MRM tooling',
      autonomy: 'N2-N3 · [CASO DE ALTO IMPACTO] · aprobación humana obligatoria',
      restriction: 'Sin aprobación/denegación automática opaca · sin uso de variables prohibidas · [VALIDAR JURISDICCIÓN · FAIRNESS · MODEL RISK].',
    },
    {
      k: 'RESILIENCIA · CIBERSEGURIDAD', icon: 'shield-check', color: '#52557A',
      question: '¿Cómo apoya OMNIX la resiliencia operacional y la respuesta a incidentes?',
      answer: 'OMNIX construye una visión operacional común entre servicios, dependencias y proveedores críticos · identifica servicios afectados · prioriza respuesta · coordina sistemas y equipos · prepara workflows · solicita aprobación · registra decisiones y mide recuperación. Alcance exclusivamente defensivo. Sin capacidades ofensivas.',
      cases: ['Correlación de incidentes', 'Dependencias entre servicios', 'Canales degradados', 'Riesgo de terceros', 'Recuperación · continuidad', 'Gestión de crisis', 'Cambios de configuración', 'Priorización de alertas', 'Contención defensiva autorizada', 'Evidencia · auditoría'],
      kpi: 'MTTD · MTTR · disponibilidad · incidentes · tiempo recuperación · riesgo terceros · decisiones auditadas',
      systems: 'SIEM · SOAR · ITSM · gestión de configuración · CMDB · gestión de terceros · case mgmt',
      autonomy: 'N2-N3 · contención defensiva dentro de runbook aprobado',
      restriction: 'Sin operaciones cibernéticas ofensivas · sin contención sobre terceros sin autorización explícita.',
    },
  ];
  const d = domains[active];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="03" label="Seis dominios de aplicación"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000', maxWidth: 900 }}>
            Seis dominios bancarios · <span style={{ color: '#F4024C' }}>una sola plataforma cognitiva</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: '0 0 56px', maxWidth: 780 }}>
            No son productos separados. Son aplicaciones de la misma capa de cognición operacional · con SDM propio, autonomía graduable y restricciones regulatorias explícitas.
          </p>
        </Reveal>

        {/* Selector */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, marginBottom: 24, border: '1.5px solid #1E1F26' }}>
          {domains.map((dom, i) => (
            <button key={dom.k} onClick={() => setActive(i)} style={{
              padding: '14px 12px', border: 'none', textAlign: 'left', cursor: 'pointer',
              background: active === i ? '#000' : '#FFF',
              color: active === i ? '#FFF' : '#1E1F26',
              borderRight: (i < 5) ? '1px solid #E4EBF3' : 'none',
              transition: 'all 220ms',
              display: 'flex', flexDirection: 'column', gap: 8, minHeight: 100,
            }}>
              <i data-lucide={dom.icon} width="18" height="18" style={{ strokeWidth: 1.5, color: active === i ? dom.color : '#96A3B5' }}/>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: active === i ? dom.color : '#96A3B5' }}>DOM · 0{i+1}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 11, letterSpacing: '-0.005em', lineHeight: 1.2 }}>{dom.k}</div>
            </button>
          ))}
        </div>

        {/* Active panel */}
        <div key={active} style={{
          border: '1.5px solid #1E1F26', background: '#FFF', padding: 40,
          animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)',
          display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 40,
        }}>
          <div>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 20 }}>
              <div style={{ width: 56, height: 56, border: `1.5px solid ${d.color}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide={d.icon} width="24" height="24" style={{ color: d.color, strokeWidth: 1.5 }}/>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: d.color }}>DOMINIO · 0{active+1}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em', color: '#000', margin: '4px 0 0', lineHeight: 1.15 }}>{d.k}</h3>
              </div>
            </div>
            <div style={{ padding: '18px 20px', background: '#FAFBFD', border: `1px solid ${d.color}`, marginBottom: 16 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: d.color, textTransform: 'uppercase', marginBottom: 8 }}>PREGUNTA · AEO</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: '#000', lineHeight: 1.3, marginBottom: 12 }}>{d.question}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26', lineHeight: 1.55 }}>{d.answer}</div>
            </div>
            <div style={{ padding: '16px 18px', background: '#FBF3D9', border: '1px solid #B8860B' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 6 }}>Restricción</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.55 }}>{d.restriction}</div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 10 }}>Casos operacionales</div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {d.cases.map((c) => (
                  <span key={c} style={{ padding: '5px 12px', border: `1px solid ${d.color}`, color: d.color, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.04em' }}>{c}</span>
                ))}
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
              {[
                { l: 'Sistemas',        v: d.systems, c: '#0050BD' },
                { l: 'Nivel autonomía', v: d.autonomy, c: '#F4024C' },
                { l: 'KPI',              v: d.kpi,      c: '#0F5132' },
              ].map((r) => (
                <div key={r.l} style={{ gridColumn: r.l === 'KPI' ? 'span 2' : 'auto' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>{r.l}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: r.c, lineHeight: 1.45 }}>{r.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// SDMs bancarios (10)
const BancaSDMs = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="04" label="SDMs · IAs propietarias para banca"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#000' }}>
            Diez modelos propietarios · entrenados sobre la operación del banco.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
            Cada SDM se documenta con propietario, corpus, políticas, usos autorizados/prohibidos, nivel de riesgo, aprobaciones, monitoreo de drift, reentrenamiento y criterios de retiro.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
        {[
          { n: 'sdm.fraud-banking',       t: 'SDM Fraude Transaccional',      d: 'Correlaciona señales de transacción, identidad, dispositivo, comportamiento y contexto para detectar y priorizar fraude.', risk: 'ALTO' },
          { n: 'sdm.aml-fincrime',         t: 'SDM AML y Delitos Financieros', d: 'Detecta relaciones, prioriza alertas, reduce duplicidad y prepara expedientes para investigación regulada.',            risk: 'ALTO' },
          { n: 'sdm.kyc-kyb',              t: 'SDM KYC/KYB',                    d: 'Clasifica documentos, detecta inconsistencias, aplica reglas explícitas y prepara expedientes de onboarding.',       risk: 'ALTO' },
          { n: 'sdm.payments-ops',         t: 'SDM Pagos',                       d: 'Reconciliación, detección de excepciones, priorización de pagos críticos, coordinación multi-sistema.',              risk: 'MEDIO' },
          { n: 'sdm.banking-ops',          t: 'SDM Operaciones Bancarias',       d: 'Automatización de decisiones en back office · gestión de excepciones · coordinación de workflows.',                  risk: 'MEDIO' },
          { n: 'sdm.credit-risk',          t: 'SDM Riesgo de Crédito',           d: 'Preparación de antecedentes · consistencia · monitoreo de cartera · drift · alertas tempranas. Human-in-the-loop.', risk: 'ALTO' },
          { n: 'sdm.responsible-coll',    t: 'SDM Cobranza Responsable',        d: 'Priorización de contacto · detección de vulnerabilidad · canal autorizado · tratamiento proporcional documentado.', risk: 'ALTO' },
          { n: 'sdm.op-resilience',        t: 'SDM Resiliencia Operacional',    d: 'Correlación de incidentes · dependencias · continuidad · gestión de terceros · contención defensiva.',              risk: 'MEDIO' },
          { n: 'sdm.customer-care',        t: 'SDM Atención y Reclamos',        d: 'Priorización de casos urgentes · contexto para agentes · seguimiento de compromisos con el cliente.',                risk: 'MEDIO' },
          { n: 'sdm.reg-compliance',       t: 'SDM Cumplimiento Regulatorio',   d: 'Trazabilidad · preparación de evidencia · monitoreo de excepciones · gobierno de modelos.',                        risk: 'ALTO' },
        ].map((s, i) => (
          <SlideIn key={s.n} direction="up" delay={i * 40}>
            <div style={{ padding: '20px 22px', background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 140, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#F4024C' }}>{s.n}</span>
                <Badge tone={s.risk === 'ALTO' ? 'fuxia' : 'warning'}>RIESGO {s.risk}</Badge>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em', color: '#000' }}>{s.t}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#52557A', lineHeight: 1.5 }}>{s.d}</div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// 4 CAPAS BANCARIAS
const BancaLayers = () => {
  const layers = [
    { n: '01', k: 'BASE', color: '#0050BD',
      t: 'Fuentes y sistemas de la institución.',
      note: 'Integración vía APIs, eventos, conectores y mecanismos autorizados disponibles en la arquitectura de cada institución. [VALIDAR INTEGRACIÓN]',
      items: ['Core bancario', 'Payments hub', 'Card processing', 'CRM', 'KYC', 'AML', 'Fraud management', 'Credit systems', 'Collections', 'Digital channels', 'Contact center', 'Identity', 'Device intelligence', 'Case management', 'Data lake', 'SIEM', 'SOAR', 'ERP', 'Document mgmt', 'APIs', 'Event streaming'] },
    { n: '02', k: 'COGNICIÓN PRIVADA', color: '#F4024C',
      t: 'SDMs bancarios entrenados sobre la operación.',
      note: 'Modelos propietarios · corpus del banco · versionados · auditables · Model Risk Management aplicable.',
      items: ['10 SDMs bancarios', 'Políticas', 'Reglas', 'Historial de casos', 'Contexto operacional', 'Conocimiento experto', 'Razonamiento auditable', 'Gestión de modelos', 'Model Risk Management', 'Drift monitoring', 'Fairness testing', 'Explicabilidad'] },
    { n: '03', k: 'ORQUESTACIÓN', color: '#1E1F26',
      t: 'Acciones coordinadas cross-sistema.',
      note: 'Cada acción configurable por umbrales de riesgo, cliente, monto, jurisdicción y nivel de autonomía.',
      items: ['Detectar', 'Contextualizar', 'Evaluar alternativas', 'Recomendar', 'Solicitar aprobación', 'Ejecutar', 'Notificar', 'Escalar', 'Retener temporalmente', 'Crear caso', 'Actualizar sistemas', 'Registrar evidencia', 'Medir resultado', 'Rollback', 'Learning al SDM'] },
    { n: '04', k: 'IMPACTO', color: '#B00238',
      t: 'KPIs medibles sobre pérdida, tiempo y experiencia.',
      note: 'Publicación cuantitativa requiere [VALIDAR MÉTRICA] con auditor y metodología firmada por Riesgo y Auditoría interna.',
      items: ['Pérdida por fraude', 'Falsos positivos', 'MTTD · MTTR', 'Backlog AML', 'Tiempo investigación', 'STP rate', 'Excepciones', 'Contracargos', 'Onboarding time', 'Fricción CX', 'Cumplimiento', 'Resiliencia', 'Productividad', 'Costo operacional', 'Decisiones auditadas'] },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="05" label="Cómo funciona OMNIX en banca"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 56px', color: '#000', maxWidth: 900 }}>
            Cuatro capas · vocabulario bancario · integración vía APIs autorizadas.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {layers.map((L, i) => (
            <SlideIn key={L.k} direction={i % 2 === 0 ? 'right' : 'left'} delay={i * 100}>
              <div style={{
                padding: '32px 28px', background: '#FFF', border: '1px solid #E4EBF3',
                minHeight: 400, display: 'flex', flexDirection: 'column', gap: 14,
                transition: 'border-color 220ms',
              }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = L.color}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E4EBF3'}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: L.color }}>CAPA {L.n} · {L.k}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#000', margin: 0, lineHeight: 1.15 }}>{L.t}</h3>
                <p style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#B8860B', margin: 0, lineHeight: 1.5 }}>* {L.note}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
                  {L.items.map((it) => (
                    <span key={it} style={{
                      padding: '4px 10px', border: `1px solid ${L.color}`, color: L.color,
                      fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em',
                    }}>{it}</span>
                  ))}
                </div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { BancaDomains, BancaSDMs, BancaLayers });
