// LOGÍSTICA — Secciones 4-7: 9 pasos · 4 capas · caso principal · 12 casos · tabla vs sistemas

// SECCIÓN 4 · 9 PASOS DEL CICLO
const LogSteps = () => {
  const steps = [
    { n: '01', k: 'DETECTA',       t: 'Disrupción en un nodo o ruta',
      d: 'Cambio de estado de un hub, actualización de ETA de transportista, restricción de capacidad, cierre de ruta.',
      sig: 'Estados de nodo · ETA · alertas',      sys: 'WMS · TMS · Carrier portals',    dec: 'Elevar caso al Runtime con impacto proyectado',              act: 'Ninguna acción sobre red · sólo lectura',              human: 'Torre de control informada',                 kpi: 'Tiempo de detección · signal→case' },
    { n: '02', k: 'CONTEXTUALIZA', t: 'Órdenes en riesgo y contexto de red',
      d: 'Cruza el evento con órdenes en vuelo, promesas comerciales, inventario disponible y capacidad de nodos alternativos.',
      sig: 'Órdenes · SLA · inventario',           sys: 'OMS · WMS · ERP · CRM',           dec: 'Consolidar contexto operacional multi-sistema',              act: 'Assemble caso con contexto completo',                 human: 'Planning ya no coordina manualmente',           kpi: 'Fragmentación evitada' },
    { n: '03', k: 'PRIORIZA',      t: 'Órdenes críticas · SLA · cliente',
      d: 'No todas las órdenes son iguales. El SDM Logístico clasifica por contract SLA, valor cliente, ventana comprometida y riesgo comercial.',
      sig: 'SLA · valor · cliente · ventana',      sys: 'SDM · CRM · ERP',                 dec: 'Ranking de órdenes por impacto real',                        act: 'Segmentación: críticas · altas · medias',              human: 'Comercial ve priorización explicable',        kpi: 'Órdenes críticas identificadas' },
    { n: '04', k: 'EVALÚA ALT.',   t: 'Rutas · nodos · transportistas',
      d: 'Genera N alternativas: esperar, reasignar nodo, dividir, cambiar transportista, cambiar modo, reprogramar entrega, transporte expedito.',
      sig: 'Capacidad · rutas · costo · SLA',      sys: 'Cortex · SDM',                    dec: 'Alternativas viables con impacto proyectado',                 act: 'Simulación en digital twin logístico',                 human: 'Head of Logistics ve opciones explicables',   kpi: 'Alternativas cubiertas · segundos vs horas' },
    { n: '05', k: 'DECIDE',        t: 'Mejor acción por impacto',
      d: 'Compara alternativas según costo, SLA protegido, riesgo y jerarquía de objetivos. Selecciona bajo políticas aprobadas por el cliente.',
      sig: 'Cost score · SLA score · risk score',  sys: 'Cortex · policy engine',         dec: 'Recomendación priorizada con explicación',                    act: 'Dispara approval flow si supera umbrales',             human: 'Aprueba según nivel N · política',              kpi: 'Tiempo alerta → decisión' },
    { n: '06', k: 'EJECUTA',       t: 'Acciones sobre WMS · TMS · OMS · ERP',
      d: 'Reasigna pedidos en OMS, reserva picking en WMS, rerutea despachos en TMS, aprueba costo en ERP. Coordinación atómica con rollback.',
      sig: 'Approved decision · transaction',      sys: 'OMS · WMS · TMS · ERP',           dec: 'Ejecución coordinada · 4-8 acciones',                        act: 'Actualización cross-sistema · sub-200ms',              human: 'Notificaciones · panel de auditoría',          kpi: 'Tiempo decisión → acción' },
    { n: '07', k: 'COMUNICA',      t: 'Cliente + operadores + equipo',
      d: 'Actualiza ETA proactivamente al cliente, informa transportistas del reruteo, notifica customer ops y comercial.',
      sig: 'Nueva ETA · nueva promesa · plan',      sys: 'CRM · CX platform · notif',      dec: 'Comunicación proactiva coherente',                          act: 'Emails · portal · webhooks · dashboards',              human: 'Customer ops valida tono comercial',             kpi: 'Comunicación proactiva ratio' },
    { n: '08', k: 'MIDE',          t: 'Resultado real vs esperado',
      d: 'Registra outcome real (OTIF, on-time, costo, NPS) y compara contra baseline. Logs firmados regulator-ready.',
      sig: 'Delivery · costs · feedback',           sys: 'BI · Data lake',                  dec: 'Métricas pre/post decisión',                                  act: 'Log inmutable · dashboard de impacto',                  human: 'Governance revisa semanal',                    kpi: 'OTIF · costo · NPS · trazabilidad' },
    { n: '09', k: 'APRENDE',       t: 'Feedback al SDM',
      d: 'Casos nuevos amplían el modelo. Excepciones enriquecen políticas. Reentrenamiento gobernado por Governance Board.',
      sig: 'Outcomes · edge cases',                 sys: 'Core · Governance',               dec: 'Trigger reentrenamiento condicional',                        act: 'SDM v2.9 en cola de review',                          human: 'Model Governance Owner aprueba release',       kpi: 'Accuracy drift · precision by scenario' },
  ];
  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 disrupción 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: 480,
            animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)',
            display: 'flex', flexDirection: 'column', gap: 24,
          }}>
            <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: 'Señales utilizadas',       v: steps[active].sig,   c: '#0050BD' },
                { l: 'Sistemas involucrados',    v: steps[active].sys,   c: '#F4024C' },
                { l: 'Decisión generada',         v: steps[active].dec,   c: '#FFF' },
                { l: 'Acción ejecutada',          v: steps[active].act,   c: '#F4024C' },
                { l: 'Rol humano',                 v: steps[active].human, c: '#96A3B5' },
                { l: 'KPI afectado',               v: steps[active].kpi,   c: '#0F5132' },
              ].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.45 }}>{r.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// SECCIÓN 5 · 4 CAPAS LOGÍSTICAS
const LogLayers = () => {
  const layers = [
    { n: '01', k: 'BASE', color: '#0050BD',
      t: 'Fuentes y sistemas de la red.',
      note: 'Se integra mediante conectores, APIs y mecanismos autorizados de la arquitectura del cliente. Requiere validación técnica.',
      items: ['WMS', 'TMS', 'OMS', 'ERP', 'CRM', 'APS', 'Sist. inventario', 'Sist. transporte', 'Patios · muelles', 'Carrier portals', 'Tracking', 'GPS · telemática', 'EDI', 'eCommerce', 'Última milla', 'Comercio exterior', 'Puertos · terminales', 'Data lake', 'APIs', 'Meteorología autorizada', 'SLA · ventanas', 'Costos · capacidad', 'Restricciones carga', 'Reglas cliente'] },
    { n: '02', k: 'COGNICIÓN PRIVADA', color: '#F4024C',
      t: 'SDM Logístico entrenado sobre su red.',
      note: 'Interpreta qué órdenes son críticas, qué rutas son viables, qué inventario puede reasignarse y qué decisión requiere aprobación.',
      items: ['Red de nodos', 'Historial órdenes', 'Rutas · tránsito', 'Capacidades', 'Inventario', 'Transportistas', 'Costos', 'SLA · promesas', 'Prioridad clientes', 'Reglas de servicio', 'Restricciones producto', 'Ventanas entrega', 'Compromisos comerciales', 'Historial disrupciones', 'Reglas com. exterior', 'Conocimiento planners', 'Decisiones anteriores', 'Excepciones', 'Políticas escalamiento', 'Límites autonomía'] },
    { n: '03', k: 'ORQUESTACIÓN', color: '#1E1F26',
      t: 'Acciones coordinadas cross-sistema.',
      note: 'Cada acción configurable por costo, SLA, riesgo, cliente, país, restricción regulatoria y nivel de autonomía.',
      items: ['Cambiar nodo fulfillment', 'Reasignar inventario', 'Dividir orden', 'Consolidar órdenes', 'Reasignar transportista', 'Rerutear despacho', 'Cambiar modo transporte', 'Repriorizar picking', 'Reprogramar carga', 'Actualizar ventana', 'Reservar capacidad', 'Reasignar entrega', 'Cambiar secuencia despacho', 'Actualizar ETA', 'Escalar excepción', 'Notificar cliente', 'Crear tarea', 'Registrar aprobación', 'Confirmar ejecución', 'Medir impacto'] },
    { n: '04', k: 'IMPACTO', color: '#B00238',
      t: 'KPIs medibles sobre servicio, costo, tiempo.',
      note: 'Publicación cuantitativa requiere [VALIDAR MÉTRICA] con auditor independiente + metodología firmada por operaciones y finanzas.',
      items: ['Tiempo respuesta', 'OTIF', 'On-time delivery', 'Fill rate', 'Perfect order rate', 'Cumplimiento promesa', 'Transit time', 'Lead time', 'Dwell time', 'Costo por orden', 'Costo por envío', 'Transporte expedito', 'Utilización capacidad', 'Pedidos en riesgo', 'Backlog', 'Entregas reprogramadas', 'Cancelaciones evitadas', 'Tiempo reruteo', 'Excepciones resueltas', 'Interv. manuales', 'Decisiones automáticas', 'SLA protegidos'] },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="04" label="Cómo funciona OMNIX en Logística"/></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 de supply chain · integración WMS/TMS/OMS/ERP.
          </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={{ 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>
  );
};

// SECCIÓN 6 · CASO PRINCIPAL
const LogMainCase = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="05" label="Caso principal · reruteo multi-nodo"/></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 }}>
          De disrupción multi-país a decisión coordinada en <span style={{ color: '#F4024C' }}>segundos</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: 720 }}>
          Un centro regional pierde capacidad · un transportista actualiza ETA. OMNIX prioriza, evalúa alternativas y ejecuta cross-WMS/TMS/OMS/ERP con aprobación.
        </p>
      </Reveal>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF', padding: 32 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>CONTEXTO DE LA RED</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            {[
              { l: 'PAÍSES',             v: 'CL · AR · PE · CO · MX' },
              { l: 'NODOS',               v: '12 · 3 hubs + 9 FC' },
              { l: 'DISRUPCIÓN',           v: 'HUB-LIM 60% · 4-6h' },
              { l: 'CARRIER',              v: 'ETA +6h · 3 rutas' },
              { l: 'ÓRDENES AFECTADAS',    v: '47' },
              { l: 'CRÍTICAS SLA HARD',    v: '12' },
            ].map((r) => (
              <div key={r.l}>
                <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-mono)', fontSize: 13, color: '#000' }}>{r.v}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF', padding: 32 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>ALTERNATIVAS EVALUADAS</div>
          {[
            { n: '01', t: 'Esperar recuperación', c: 0,  r: 82, sel: false },
            { n: '02', t: 'Reasignar a FC-BOG', c: 22, r: 18, sel: true },
            { n: '03', t: 'Dividir órdenes',     c: 34, r: 22, sel: false },
            { n: '04', t: 'Cambiar transportista', c: 40, r: 28, sel: false },
            { n: '05', t: 'Cambiar modo transporte', c: 48, r: 32, sel: false },
            { n: '06', t: 'Proteger sólo críticas', c: 58, r: 12, sel: false },
            { n: '07', t: 'Actualizar promesa resto', c: 0,  r: 65, sel: false },
          ].map((o) => (
            <div key={o.n} style={{
              display: 'grid', gridTemplateColumns: '32px 1fr 60px', gap: 10, alignItems: 'center',
              padding: '8px 10px',
              background: o.sel ? 'rgba(244,2,76,0.12)' : 'transparent',
              borderLeft: o.sel ? '3px solid #F4024C' : '3px solid transparent',
              marginBottom: 3,
            }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: o.sel ? '#F4024C' : '#96A3B5' }}>{o.n}</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#000' }}>{o.t}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: o.r > 40 ? '#EA384C' : (o.r > 20 ? '#B8860B' : '#0F5132'), textAlign: 'right' }}>risk {o.r}%</span>
            </div>
          ))}
          <div style={{ marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C' }}>
            → SELECTED 02 · approved head-of-logistics · exceeds cost threshold
          </div>
        </div>

        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF', padding: 32 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>ACCIONES COORDINADAS</div>
          {[
            { s: 'OMS', a: 'Reasigna 12 órdenes → FC-BOG' },
            { s: 'WMS', a: 'Reserva stock · picking priorizado' },
            { s: 'TMS', a: 'Rerutea despachos · nueva ETA' },
            { s: 'ERP', a: 'Aprueba costo incremental +22%' },
            { s: 'CRM', a: 'Notifica 12 clientes con nueva ETA' },
          ].map((r) => (
            <div key={r.s} style={{ display: 'grid', gridTemplateColumns: '60px 1fr auto', gap: 12, padding: '10px 0', borderBottom: '1px solid #E4EBF3' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: '#F4024C' }}>{r.s}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#000' }}>{r.a}</span>
              <i data-lucide="check" width="14" height="14" style={{ color: '#0F5132', strokeWidth: 2 }}/>
            </div>
          ))}
        </div>

        <div style={{ border: '1.5px solid #F4024C', background: '#FFF', padding: 32 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>RESULTADO MEDIDO</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            {[
              { l: 'CRÍTICAS PROTEGIDAS', v: '12/12',     c: '#0F5132' },
              { l: 'TIEMPO RESPUESTA',    v: '84 seg',   c: '#F4024C' },
              { l: 'COSTO INCREMENTAL',    v: '+22%',    c: '#B8860B' },
              { l: 'VS TRANSPORTE EXPEDITO', v: '−58%',  c: '#0F5132' },
              { l: 'OTIF PROTEGIDO',       v: '100%',    c: '#0F5132' },
              { l: 'APRENDIZAJE',           v: 'SDM v2.9 queued', c: '#0050BD' },
            ].map((k) => (
              <div key={k.l}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>{k.l}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: k.c, letterSpacing: '-0.015em' }}>{k.v}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em' }}>
            * Escenario simulado. [VALIDAR CASO] · [VALIDAR MÉTRICA] · [VALIDAR PERIODO] antes de publicación pública.
          </div>
        </div>
      </div>
    </Container>
  </section>
);

// SECCIÓN 7 · 12 CASOS DE USO
const LogUseCases = () => {
  const [active, setActive] = React.useState(0);
  const cases = [
    { n: 'Reruteo ante disrupciones',                  icon: 'route',           disrupt: 'Cierre de ruta, restricción o congestión que afecta ETA comprometida.',                        signals: 'Estado rutas · GPS · alertas',                     decision: 'Ruta alternativa · nuevo carrier · nuevo modo',           systems: 'TMS · Carriers · GPS',       kpi: 'Tiempo respuesta · costo · SLA', autonomy: 'N3 – N4', reduces: 'Retraso propagado' },
    { n: 'Priorización de órdenes críticas',            icon: 'star',            disrupt: 'Múltiples pedidos afectados sin criterio unificado de priorización.',                          signals: 'SLA · valor · cliente · ventana',                   decision: 'Ranking por impacto real de negocio',                        systems: 'OMS · CRM · ERP',            kpi: 'SLA protegido · NPS', autonomy: 'N2 – N3', reduces: 'Órdenes valiosas perdidas' },
    { n: 'Reasignación de inventario entre nodos',      icon: 'shuffle',         disrupt: 'Stock en nodo equivocado mientras otro nodo enfrenta stockout.',                                 signals: 'Inventario · demanda · lead time',                  decision: 'Movimiento inter-nodo con ROI positivo',                     systems: 'WMS · TMS',                  kpi: 'Fill rate · rotación', autonomy: 'N3', reduces: 'Ventas perdidas por ubicación' },
    { n: 'Replanificación de transporte',               icon: 'calendar-clock',  disrupt: 'Cambios de demanda o capacidad requieren rediseño de ventanas y flotas.',                       signals: 'Órdenes · capacidad · ventanas',                    decision: 'Nueva secuencia de despachos y consolidaciones',              systems: 'TMS · APS',                  kpi: 'Utilización flota · costo', autonomy: 'N3', reduces: 'Utilización sub-óptima' },
    { n: 'Selección dinámica de transportista',          icon: 'users',           disrupt: 'Múltiples carriers con distinto costo, SLA y disponibilidad para una misma ruta.',              signals: 'Cost tables · historial SLA · capacidad',           decision: 'Carrier óptimo por orden · dentro de contratos',              systems: 'TMS · Carrier portals',     kpi: 'Costo por envío · SLA', autonomy: 'N4', reduces: 'Sub-óptimo por default' },
    { n: 'Protección de SLA',                            icon: 'shield-check',    disrupt: 'Contract SLA en riesgo por eventos que afectan cadena completa.',                                signals: 'ETA · SLA · progreso',                              decision: 'Acciones dedicadas a proteger órdenes hard-SLA',              systems: 'OMS · TMS · CRM',            kpi: 'SLA hard cumplido', autonomy: 'N3 – N4', reduces: 'Penalidades contractuales' },
    { n: 'Gestión de congestión en CDs',                icon: 'warehouse',       disrupt: 'Centro de distribución con throughput sobre capacidad · dwell time crece.',                     signals: 'Dwell · patios · muelles',                          decision: 'Reprogramar arribos · redirigir · liberar capacidad',        systems: 'WMS · muelles',              kpi: 'Dwell time · throughput', autonomy: 'N3', reduces: 'Cuellos de botella' },
    { n: 'Coordinación de última milla',                icon: 'map-pin',         disrupt: 'Fallas de última milla · reprogramación · reintentos · costos ocultos.',                       signals: 'Rutas · confirmaciones · reintentos',               decision: 'Repriorizar · reconsolidar · comunicar ETA',                 systems: 'TMS · última milla',         kpi: 'First-attempt success', autonomy: 'N3', reduces: 'Costo por reintento' },
    { n: 'Recuperación ante pérdida de capacidad',       icon: 'refresh-ccw',      disrupt: 'Un nodo (hub, transportista, muelle) pierde capacidad temporalmente.',                          signals: 'Alerta de nodo · capacidad',                       decision: 'Redistribución de carga entre nodos alternativos',          systems: 'WMS · TMS · OMS',            kpi: 'Continuidad · costo', autonomy: 'N3', reduces: 'Detención en cascada' },
    { n: 'Orquestación multimodal',                      icon: 'ship',             disrupt: 'Combinación aéreo + terrestre + marítimo requiere balance costo/tiempo por caso.',              signals: 'Modos · costos · tiempos · restricciones',           decision: 'Modo óptimo por orden y contexto',                            systems: 'TMS · comercio ext.',        kpi: 'Costo · tránsito', autonomy: 'N3', reduces: 'Mezclas sub-óptimas' },
    { n: 'Gestión de cadenas de frío',                    icon: 'thermometer-snowflake', disrupt: 'Interrupciones que amenazan la integridad de productos sensibles.',                        signals: 'Temperatura · GPS · ventana',                      decision: 'Reruteo urgente · reasignación de vehículo',                 systems: 'TMS · telemática',           kpi: 'Merma · cumplimiento', autonomy: 'N3', reduces: 'Pérdida de producto' },
    { n: 'Reprogramación portuaria',                      icon: 'anchor',           disrupt: 'Ventana portuaria en riesgo por congestión, aduana o vessel change.',                            signals: 'Vessel schedule · aduana · booking',                decision: 'Consolidación · advance · ventana alterna',                  systems: 'TMS · portal puerto',         kpi: 'Vessel cutoff · demurrage', autonomy: 'N2 – N3', reduces: 'Costos demurrage' },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="06" label="Casos de uso · Logística"/></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 }}>
            Doce dominios de decisión · un mismo runtime.
          </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: 720 }}>
            No son productos separados. Son dominios de decisión que se construyen sobre la misma plataforma cognitiva logística.
          </p>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 20 }}>
          <div style={{ border: '1.5px solid #1E1F26', background: '#FFF', maxHeight: 620, overflowY: 'auto' }}>
            {cases.map((c, i) => (
              <button key={c.n} onClick={() => setActive(i)} style={{
                width: '100%', border: 'none', textAlign: 'left', cursor: 'pointer',
                padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'flex-start',
                background: active === i ? '#000' : '#FFF',
                color: active === i ? '#FFF' : '#1E1F26',
                borderBottom: (i < cases.length - 1) ? '1px solid #E4EBF3' : 'none',
                transition: 'all 220ms',
              }}>
                <i data-lucide={c.icon} width="16" height="16" style={{ strokeWidth: 1.5, flexShrink: 0, marginTop: 3, color: active === i ? '#F4024C' : '#1E1F26' }}/>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', opacity: 0.6, marginBottom: 3 }}>CASO {String(i+1).padStart(2, '0')}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12, letterSpacing: '-0.005em', lineHeight: 1.3 }}>{c.n}</div>
                </div>
              </button>
            ))}
          </div>
          <div key={active} style={{
            border: '1.5px solid #1E1F26', background: '#FFF', padding: 36, minHeight: 500,
            animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)',
            display: 'flex', flexDirection: 'column', gap: 20,
          }}>
            <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
              <div style={{ width: 56, height: 56, background: 'transparent', border: '1.5px solid #F4024C', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <i data-lucide={cases[active].icon} width="24" height="24" style={{ color: '#F4024C', strokeWidth: 1.5 }}/>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 8 }}>DOMINIO · {String(active+1).padStart(2, '0')}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26, letterSpacing: '-0.02em', color: '#000', margin: 0, lineHeight: 1.2 }}>{cases[active].n}</h3>
              </div>
            </div>
            <div style={{ padding: '14px 18px', background: '#FAFBFD', border: '1px solid #F4024C' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 6 }}>DISRUPCIÓN</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: '#1E1F26', lineHeight: 1.5 }}>{cases[active].disrupt}</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
              {[
                { l: 'Señales utilizadas',    v: cases[active].signals,  c: '#0050BD' },
                { l: 'Decisión de OMNIX',     v: cases[active].decision, c: '#1E1F26' },
                { l: 'Sistemas',              v: cases[active].systems,  c: '#F4024C' },
                { l: 'KPI impactado',          v: cases[active].kpi,      c: '#0F5132' },
                { l: 'Nivel de autonomía',    v: cases[active].autonomy, c: '#F4024C' },
                { l: 'Riesgo que reduce',      v: cases[active].reduces,  c: '#B8860B' },
              ].map((r) => (
                <div key={r.l}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>{r.l}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: r.c, lineHeight: 1.45, fontWeight: r.c === '#F4024C' || r.c === '#0F5132' ? 500 : 400 }}>{r.v}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid #E4EBF3', display: 'flex', justifyContent: 'flex-end' }}>
              <Button variant="ghost" icon="arrow-right" href="diagnostico.html">Explorar este caso</Button>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// SECCIÓN 8 · OMNIX vs SISTEMAS LOGÍSTICOS
const LogVsAlternatives = () => {
  const rows = [
    { tool: 'WMS',                 solves: 'Administra inventario y almacén',       lacks: 'No decide reasignación multi-nodo',           omnix: 'Decide qué reasignar y coordina cross-nodo' },
    { tool: 'TMS',                  solves: 'Planifica y administra transporte',    lacks: 'No evalúa impacto transversal',                omnix: 'Coordina transporte con órdenes, inventario y clientes' },
    { tool: 'OMS',                  solves: 'Administra órdenes',                    lacks: 'No prioriza por impacto real',                 omnix: 'Determina qué órdenes proteger y ejecuta' },
    { tool: 'ERP',                  solves: 'Administra recursos y finanzas',        lacks: 'No razona sobre operación en tiempo real',     omnix: 'Cruza ERP con estado operacional live' },
    { tool: 'Torre de control',      solves: 'Visualiza estado de la red',            lacks: 'Muestra el problema · no lo resuelve',         omnix: 'Coordina la respuesta y ejecuta' },
    { tool: 'Route optimizer',      solves: 'Encuentra ruta óptima',                 lacks: 'No considera SLA, inventario o cliente',       omnix: 'Optimiza sobre múltiples restricciones simultáneas' },
    { tool: 'Tracking platform',    solves: 'Sigue el movimiento',                    lacks: 'No decide qué hacer con la información',       omnix: 'Convierte tracking en acción' },
    { tool: 'RPA',                  solves: 'Automatiza tareas repetitivas',         lacks: 'No decide sobre casos borde',                  omnix: 'Decide y usa RPA como ejecutor cuando aplica' },
    { tool: 'BI / dashboards',      solves: 'Muestra métricas',                       lacks: 'No mueve la operación',                         omnix: 'Mueve la operación · con auditoría' },
    { tool: 'APS',                  solves: 'Planifica capacidad',                    lacks: 'No adapta al estado real',                     omnix: 'Reajusta plan con estado real live' },
    { tool: 'Visibility platform',  solves: 'Muestra ETA y estado',                   lacks: 'No prioriza · no decide',                      omnix: 'Convierte visibilidad en decisión' },
    { tool: 'Process mining',       solves: 'Descubre patrones',                      lacks: 'No opera · no ejecuta',                         omnix: 'Convierte insights en acciones' },
    { 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 sus 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="07" 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, contextualiza 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 }}>
            WMS, TMS, OMS, ERP y torre de control siguen operando. OMNIX es la capa cognitiva 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 * 30}>
              <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, { LogSteps, LogLayers, LogMainCase, LogUseCases, LogVsAlternatives });