// MINERÍA — Secciones 4-8: pasos · dominios · capas · vs sistemas

// SECCIÓN 4 — EXPLICACIÓN DEL VIDEO (9 pasos del ciclo)
const MineriaSteps = () => {
  const steps = [
    { n: '01', k: 'DETECTA',                t: 'Combinación anómala de señales',      d: 'Vibración, tendencia geotécnica o desvío operacional identificado contra baseline temporal y espacial.',                                sys: 'SCADA · Historian · IoT',                dec: 'Elevar caso al Runtime con evidencia',                     kpi: 'Tiempo de detección',                 human: 'Operador notificado (informativo)' },
    { n: '02', k: 'CONTEXTUALIZA',          t: 'Cruza con sistemas de negocio',       d: 'Estado del activo, plan, órdenes, calidad, capacidad alternativa y ventanas disponibles.',                                                    sys: 'CMMS · MES · APS · WMS · TMS',           dec: 'Consolidar contexto operacional',                          kpi: 'Fragmentación evitada',               human: 'Ya no reconcilia manualmente' },
    { n: '03', k: 'REÚNE CONOCIMIENTO',     t: 'Sistemas expertos + expertos humanos', d: 'Recomendaciones de APC, mantenimiento predictivo, geomet, energía · más playbooks y notas de operadores/mantenedores.',              sys: 'Sistemas expertos · docs',                dec: 'Contexto experto ensamblado',                              kpi: 'Cobertura de conocimiento',           human: 'Conocimiento tácito preservado' },
    { n: '04', k: 'EVALÚA IMPACTO',         t: 'Simula consecuencias',                d: 'Impacto sobre plan de producción, calidad, disponibilidad, embarques y objetivos de gobierno.',                                             sys: 'SDM · digital twin operacional',          dec: 'Mapa de impacto multi-dimensión',                          kpi: 'Plan proyectado',                      human: 'Gerencia ve consecuencias' },
    { n: '05', k: 'COMPARA ALTERNATIVAS',   t: 'N respuestas evaluadas',              d: 'Bajo políticas de seguridad, calidad y jerarquía de objetivos. Ninguna se ejecuta sin gate.',                                             sys: 'Cortex · policy engine',                  dec: 'Priorización explicable',                                   kpi: 'Alternativas cubiertas',              human: 'Comité técnico revisa' },
    { n: '06', k: 'ESCALA O APRUEBA',       t: 'Aprobación por dominio',              d: 'Mantenimiento, calidad, geotecnia o logística firman según el tipo de decisión y su umbral.',                                                sys: 'Governance · approval flows',             dec: 'Decisión con approval trail',                              kpi: 'Tiempo alerta → decisión',             human: 'Responsable operacional firma' },
    { n: '07', k: 'EJECUTA',                 t: 'Acciones sobre sistemas',             d: 'Órdenes, reservas, ajustes de secuencia, inspecciones. OT permanece en read-only. IT ejecuta.',                                            sys: 'CMMS · ERP · APS · MES · TMS',            dec: 'Ejecución coordinada atómica',                             kpi: 'Tiempo decisión → acción',             human: 'OT read-only mantiene control físico' },
    { n: '08', k: 'MIDE',                    t: 'Resultado real vs plan',              d: 'KPIs de negocio: disponibilidad, throughput, cumplimiento, adherencia, MTBF, MTTR, OTIF, trazabilidad.',                                sys: 'BI · Historian · reporting',              dec: 'Métricas base pre/post decisión',                          kpi: 'Impacto neto medido',                 human: 'Governance Board revisa' },
    { n: '09', k: 'APRENDE',                t: 'Feedback al SDM',                     d: 'Excepciones cierran el ciclo. Casos nuevos amplían el modelo. Reentrenamiento gobernado.',                                                 sys: 'Core · Governance',                       dec: 'Nueva versión SDM en cola',                                 kpi: 'Accuracy drift',                       human: 'Model Governance Owner aprueba' },
  ];
  const [active, setActive] = React.useState(0);
  return (
    <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="03" label="Descomposición del ciclo" dark color="#F4024C"/></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: '#FFF', maxWidth: 900 }}>
            Nueve pasos entre la señal minera y el aprendizaje.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 20 }}>
          <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10', height: 'fit-content' }}>
            {steps.map((s, i) => (
              <button key={s.n} onClick={() => setActive(i)} style={{
                width: '100%', border: 'none', textAlign: 'left', cursor: 'pointer',
                padding: '14px 18px',
                borderBottom: (i < steps.length - 1) ? '1px solid #2E3140' : 'none',
                background: active === i ? '#F4024C' : 'transparent',
                color: active === i ? '#FFF' : '#96A3B5',
                display: 'flex', flexDirection: 'column', gap: 4, transition: 'all 220ms',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', opacity: 0.7 }}>PASO {s.n}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13, letterSpacing: '-0.005em' }}>{s.k}</span>
              </button>
            ))}
          </div>
          <div key={active} style={{
            border: '1.5px solid #2E3140', background: '#0A0B10', padding: 36, minHeight: 460,
            animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)',
            display: 'flex', flexDirection: 'column', gap: 20,
          }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 10 }}>{steps[active].k}</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 38, letterSpacing: '-0.025em', color: '#FFF', margin: 0, lineHeight: 1.05 }}>{steps[active].t}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.55, color: '#96A3B5', margin: '14px 0 0', maxWidth: 700 }}>{steps[active].d}</p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20, paddingTop: 16, borderTop: '1px solid #2E3140' }}>
              {[
                { l: 'Sistemas involucrados', v: steps[active].sys,   c: '#0050BD' },
                { l: 'Decisión generada',      v: steps[active].dec,   c: '#FFF' },
                { l: 'Rol humano',              v: steps[active].human, c: '#96A3B5' },
                { l: 'KPI afectado',            v: steps[active].kpi,   c: '#F4024C' },
              ].map((r) => (
                <div key={r.l}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>{r.l}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: r.c, lineHeight: 1.4 }}>{r.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// SECCIÓN 5 — LOS CUATRO DOMINIOS (bloques grandes con link a subpágina)
const MineriaDomains = () => {
  const domains = [
    {
      k: 'MANTENIMIENTO Y CONFIABILIDAD',
      color: '#F4024C',
      h: 'Detectar la anomalía es sólo el comienzo.',
      sub: 'OMNIX conecta condición, historial, plan, repuestos y capacidad para transformar una alerta en una intervención coordinada.',
      problem: 'Activos críticos donde una anomalía se convierte en parada reactiva por falta de coordinación.',
      caseIt: 'Riesgo de falla en correa, chancador, molino, bomba, pala o camión durante operación planificada.',
      sys: 'SCADA · Condition Monitoring · CMMS/EAM · ERP · Planificación · SDM Confiabilidad',
      decisions: 'Continuar con monitoreo · reducir carga · intervenir en ventana · reasignar producción · detener controladamente',
      autonomy: 'N3 (asistida) · N4 en casos recurrentes con guardrails',
      kpis: 'Disponibilidad · MTBF · MTTR · downtime no planif. · cumplimiento del plan · costo mantenimiento',
      cta: 'Evaluar un activo crítico',
      href: 'mineria-mantenimiento.html',
    },
    {
      k: 'RELAVES Y GESTIÓN HÍDRICA',
      color: '#0050BD',
      h: 'Información integrada para decisiones geotécnicas mejor gobernadas.',
      sub: 'OMNIX reúne instrumentación, inspecciones, balance hídrico y conocimiento experto para identificar desviaciones, priorizar investigaciones y mantener trazabilidad completa.',
      problem: 'Fuentes de información dispersas · tendencias que requieren revisión profesional oportuna.',
      caseIt: 'Combinación de tendencia instrumental y desviación del balance hídrico que requiere investigación técnica.',
      sys: 'Piezometría · deformación · filtraciones · balance hídrico · estaciones meteo · inspecciones · SDM Relaves',
      decisions: 'Reconciliar datos · abrir investigación · aumentar monitoreo · coordinar inspección · escalar a responsable técnico · documentar evidencia',
      autonomy: 'N1 – N2 · aprobación humana obligatoria en decisiones críticas',
      kpis: 'Tiempo desviación → revisión · completitud datos · cumplimiento inspecciones · trazabilidad · calidad de evidencia',
      cta: 'Evaluar un flujo de vigilancia de relaves',
      href: 'mineria-relaves.html',
      caution: 'OMNIX acelera la detección, investigación, coordinación y documentación. La responsabilidad técnica geotécnica permanece en los roles autorizados por la compañía.',
    },
    {
      k: 'LOGÍSTICA MINERA INTEGRADA',
      color: '#B00238',
      h: 'De mina a puerto, una decisión coordinada.',
      sub: 'OMNIX integra producción, inventarios, transporte y compromisos comerciales para responder a disrupciones sin perder visibilidad del impacto total.',
      problem: 'Cambios que no llegan a logística a tiempo · sincronización mina-planta-stockpile-transporte manual.',
      caseIt: 'Restricción de transporte o pérdida de throughput que amenaza una ventana de embarque comprometida.',
      sys: 'FMS · WMS · TMS · programa ferroviario · terminales portuarias · compromisos comerciales · SDM Logística',
      decisions: 'Recalcular prioridades · reasignar transporte · ajustar secuencia · modificar ventanas · escalar riesgo comercial',
      autonomy: 'N3 · aprobación de logística en cambios comerciales',
      kpis: 'Cumplimiento del plan · OTIF · tiempo mina-puerto · demoras · costos extraordinarios · cumplimiento embarques',
      cta: 'Mapear una disrupción logística',
      href: 'mineria-logistica.html',
    },
    {
      k: 'INTERCONEXIÓN DE SISTEMAS EXPERTOS',
      color: '#B8860B',
      h: 'Sus sistemas expertos no necesitan ser reemplazados. Necesitan decidir juntos.',
      sub: 'OMNIX conecta las recomendaciones de planificación, control de proceso, mantenimiento, despacho, geometalurgia, energía y logística para evaluar su impacto completo y coordinar una respuesta común.',
      problem: 'Sistemas expertos optimizan variables locales que pueden ser globalmente incompatibles.',
      caseIt: 'APC recomienda +throughput, condition monitoring anticipa riesgo, geomet marca cambio de dureza, energía anticipa restricción.',
      sys: 'APC · sistemas de control experto · mantenimiento predictivo · FMS · planificación · geomet · energía · SDM Orquestación',
      decisions: 'Reconciliar recomendaciones · aplicar jerarquía de objetivos · proponer respuesta consolidada · registrar fundamento',
      autonomy: 'N3 · N4 en escenarios recurrentes con guardrails',
      kpis: 'Recomendaciones reconciliadas · conflictos detectados · adherencia al plan · estabilidad · decisiones auditadas',
      cta: 'Evaluar la arquitectura de sistemas expertos',
      href: 'mineria-sistemas-expertos.html',
    },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="04" label="Los cuatro dominios"/></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 }}>
            Cuatro dominios · una misma plataforma cognitiva.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: '0 0 56px', maxWidth: 780 }}>
            Cada dominio puede comenzar con un piloto acotado · un activo, una tendencia, una restricción o una arquitectura experta. La plataforma es la misma. La cognición es específica del dominio.
          </p>
        </Reveal>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          {domains.map((d, i) => (
            <SlideIn key={d.k} direction={i % 2 === 0 ? 'right' : 'left'} delay={i * 100}>
              <div style={{
                display: 'grid', gridTemplateColumns: '340px 1fr',
                background: '#FFF', border: '1.5px solid #1E1F26',
                transition: 'border-color 220ms',
              }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = d.color}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = '#1E1F26'}>
                <div style={{ padding: 36, background: d.color === '#F4024C' ? '#000' : (d.color === '#0050BD' ? '#0A0B10' : '#000'), color: '#FFF', display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: d.color }}>DOMINIO 0{i+1}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.015em', color: '#FFF', lineHeight: 1.15 }}>{d.k}</div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 17, color: d.color, lineHeight: 1.35, marginTop: 8 }}>{d.h}</div>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55, color: '#96A3B5', margin: 0, marginTop: 'auto' }}>{d.sub}</p>
                  <Button variant="ghost" dark icon="arrow-right" href={d.href} style={{ marginTop: 8 }}>Ver dominio completo</Button>
                </div>

                <div style={{ padding: 36 }}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 20 }}>
                    <div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 6 }}>PROBLEMA</div>
                      <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26', lineHeight: 1.5 }}>{d.problem}</div>
                    </div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: d.color, textTransform: 'uppercase', marginBottom: 6 }}>CASO PRINCIPAL</div>
                      <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26', lineHeight: 1.5 }}>{d.caseIt}</div>
                    </div>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 20 }}>
                    <div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>SISTEMAS CONECTADOS</div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#0050BD', lineHeight: 1.5 }}>{d.sys}</div>
                    </div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>DECISIONES COORDINADAS</div>
                      <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.5 }}>{d.decisions}</div>
                    </div>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr auto', gap: 24, alignItems: 'end', paddingTop: 20, borderTop: '1px solid #E4EBF3' }}>
                    <div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>Autonomía</div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: d.color, fontWeight: 500 }}>{d.autonomy}</div>
                    </div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>KPIs</div>
                      <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.4 }}>{d.kpis}</div>
                    </div>
                    <Button variant="outline" icon="arrow-right" href={d.href}>{d.cta}</Button>
                  </div>
                  {d.caution && (
                    <div style={{ marginTop: 16, padding: '12px 14px', background: '#FBF3D9', border: '1px solid #B8860B', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#1E1F26', lineHeight: 1.55 }}>
                      <strong style={{ color: '#B8860B', letterSpacing: '0.14em', textTransform: 'uppercase' }}>PRECAUCIÓN · </strong>
                      {d.caution}
                    </div>
                  )}
                </div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// SECCIÓN 6 — CÓMO FUNCIONA (4 CAPAS MINERAS)
const MineriaLayers = () => {
  const layers = [
    { n: '01', k: 'BASE',                 color: '#0050BD',
      t: 'Señales y sistemas mineros.',
      note: 'OMNIX se integra mediante conectores, interfaces y mecanismos autorizados en la arquitectura de cada operación. Los conectores específicos requieren validación técnica.',
      items: ['SCADA', 'DCS', 'PLC', 'Historians', 'IoT', 'Condition Monitoring', 'FMS · despacho', 'Planificación minera', 'ERP', 'EAM · CMMS', 'Repuestos', 'APC · control experto', 'LIMS · metalurgia', 'Sistemas geológicos', 'Geometalurgia', 'Monitoreo geotécnico', 'Piezómetros · inclinómetros', 'Radares', 'Filtraciones', 'Balance hídrico', 'Estaciones meteo', 'Inspecciones', 'Docs · procedimientos', 'WMS · TMS', 'Ferrocarril · puerto', 'Turnos', 'Data lake', 'APIs'] },
    { n: '02', k: 'COGNICIÓN PRIVADA',      color: '#F4024C',
      t: 'Cuatro SDMs por dominio.',
      note: 'SDM Confiabilidad + SDM Relaves + SDM Logística Mina-Puerto + SDM Orquestación Sistemas Expertos.',
      items: ['Historial operacional', 'Modos de falla', 'Datos de condición', 'Reglas mantenimiento', 'Planes producción', 'Restricciones metalúrgicas', 'Geología · geomet', 'Disponibilidad flota', 'Capacidad planta', 'Stockpiles', 'Repuestos · personal', 'Meteorología', 'Balance de agua', 'Tendencias instrumentales', 'Inspecciones', 'Protocolos de escalamiento', 'Procedimientos operativos', 'Conocimiento operadores', 'Conocimiento mantenedores', 'Conocimiento geotécnico', 'Compromisos embarque', 'Restricciones puerto', 'Políticas de riesgo'] },
    { n: '03', k: 'ORQUESTACIÓN',           color: '#1E1F26',
      t: 'Acciones coordinadas sobre sistemas existentes.',
      note: 'Toda acción configurable por dominio, activo, riesgo y política · human-in-the-loop donde corresponda.',
      items: ['Crear/priorizar OM', 'Reservar repuesto', 'Verificar especialistas', 'Ventana de intervención', 'Actualizar secuencia', 'Modificar prioridad despacho', 'Reasignar equipos', 'Ajustar alimentación planta', 'Redirigir a stockpile', 'Activar inspección', 'Abrir investigación', 'Aumentar monitoreo', 'Escalar anomalía', 'Recalcular plan logístico', 'Actualizar FFCC', 'Repriorizar embarques', 'Notificar áreas', 'Registrar fundamento', 'Confirmar ejecución', 'Medir resultado'] },
    { n: '04', k: 'IMPACTO',                color: '#B00238',
      t: 'KPIs medibles sobre continuidad, producción, seguridad y control.',
      note: 'Publicación cuantitativa requiere [VALIDAR MÉTRICA] con auditor independiente.',
      items: ['Disponibilidad física', 'Utilización', 'MTBF · MTTR', 'Downtime no planif.', 'Throughput', 'Cumplimiento plan', 'Adherencia plan', 'Recuperación', 'Variabilidad proceso', 'Costo mantenimiento', 'Órdenes reactivas', 'Ciclo camiones', 'Colas', 'Inventario stockpiles', 'Cumplimiento embarques', 'Tiempo mina-puerto', 'OTIF', 'Desviación balance hídrico', 'Cumplimiento inspecciones', 'Excepciones escaladas', 'Trazabilidad decisiones'] },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="05" label="Cómo funciona OMNIX en Minería"/></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 minero · integración IT/OT.
          </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: '#FAFBFD', border: '1px solid #E4EBF3',
                minHeight: 380, 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={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: L.color }}>CAPA {L.n} · {L.k}</span>
                </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>
  );
};

// SECCIÓN 7 — OMNIX vs SISTEMAS MINEROS EXISTENTES
const MineriaVsSystems = () => {
  const rows = [
    { tool: 'SCADA / DCS',              solves: 'Muestra y controla variables',              lacks: 'No evalúa impacto operacional',                omnix: 'Evalúa impacto y coordina decisiones' },
    { tool: 'Historian',                 solves: 'Almacena telemetría',                        lacks: 'No razona · no coordina',                       omnix: 'Convierte historia en decisión' },
    { tool: 'Sistema de despacho (FMS)',solves: 'Optimiza flota',                             lacks: 'No conecta con planta y mantenimiento',        omnix: 'Coordina flota con planta y logística' },
    { tool: 'Planificación minera',      solves: 'Define plan corto/largo plazo',             lacks: 'No adapta al estado real',                      omnix: 'Reajusta plan con estado real' },
    { tool: 'EAM · CMMS',                solves: 'Administra órdenes de mantenimiento',       lacks: 'No prioriza por producción',                    omnix: 'Determina cuándo y con qué prioridad' },
    { tool: 'Condition Monitoring',      solves: 'Detecta anomalía',                          lacks: 'No decide qué hacer · no coordina',             omnix: 'Decide y coordina la respuesta' },
    { tool: 'APC / control experto',     solves: 'Optimiza variables de proceso',             lacks: 'Optimiza objetivos locales',                    omnix: 'Reconcilia con objetivos globales' },
    { tool: 'Sistema experto (dominio)', solves: 'Recomienda en su dominio',                   lacks: 'No evalúa impacto total',                        omnix: 'Evalúa impacto operacional completo' },
    { tool: 'Software geotécnico',       solves: 'Analiza información especializada',         lacks: 'No integra con operación e inspecciones',      omnix: 'Integra evidencia técnica y operacional' },
    { tool: 'Gestión de relaves',        solves: 'Gestiona instrumentación y procesos',       lacks: 'No reúne toda la evidencia · manual',           omnix: 'Reconcilia fuentes y documenta' },
    { tool: 'ERP',                        solves: 'Administra recursos',                        lacks: 'No razona sobre condiciones OT',                 omnix: 'Cruza ERP con datos IT/OT' },
    { tool: 'WMS · TMS',                  solves: 'Gestiona almacenes y transporte',           lacks: 'No adapta a disrupciones globales',              omnix: 'Reajusta cadena mina-puerto' },
    { tool: 'LIMS · metalurgia',          solves: 'Analiza laboratorio',                        lacks: 'No coordina con operación · manual',             omnix: 'Alimenta decisiones con resultados analíticos' },
    { tool: 'Data lake',                  solves: 'Almacena datos',                             lacks: 'No decide · no ejecuta',                          omnix: 'Convierte datos en decisiones ejecutadas' },
    { tool: 'BI · dashboards',            solves: 'Muestra el problema',                        lacks: 'No mueve la operación',                            omnix: 'Mueve la operación · con auditoría' },
    { tool: 'Digital twin',               solves: 'Representa la operación',                    lacks: 'No decide ni ejecuta por sí solo',                omnix: 'Usa el twin como contexto de decisión' },
    { tool: 'Copiloto de IA',             solves: 'Asiste a un individuo',                      lacks: 'No orquesta sistemas',                             omnix: 'Orquesta decisiones cross-sistema' },
    { tool: 'LLM genérico',               solves: 'Responde preguntas',                         lacks: 'No razona bajo tus reglas · no ejecuta',         omnix: 'SDM propio · determinístico · ejecuta' },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="06" label="OMNIX vs sistemas existentes"/></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 }}>
            OMNIX no reemplaza · <span style={{ color: '#F4024C' }}>conecta, interpreta y orquesta</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: '0 0 56px', maxWidth: 720 }}>
            Sus sistemas expertos y operacionales siguen funcionando. OMNIX es la capa cognitiva común que los coordina.
          </p>
        </Reveal>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1.4fr 1.4fr 1.6fr',
            background: '#000', color: '#FFF', padding: '18px 24px',
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
          }}>
            <div>SISTEMA</div>
            <div style={{ color: '#0F5132' }}>QUÉ RESUELVE</div>
            <div style={{ color: '#96A3B5' }}>QUÉ NO POR SÍ SOLO</div>
            <div style={{ color: '#F4024C' }}>QUÉ AGREGA OMNIX</div>
          </div>
          {rows.map((r, i) => (
            <SlideIn key={r.tool} direction="right" delay={i * 25}>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1.4fr 1.4fr 1.6fr',
                padding: '14px 24px', borderTop: '1px solid #E4EBF3',
                background: i % 2 === 0 ? '#FFF' : '#FAFBFD',
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: '#000' }}>{r.tool}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.4 }}>{r.solves}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#96A3B5', lineHeight: 1.4 }}>{r.lacks}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#F4024C', fontWeight: 500, lineHeight: 1.4 }}>{r.omnix}</div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { MineriaSteps, MineriaDomains, MineriaLayers, MineriaVsSystems });