// RETAIL — Secciones 4-8: explicación · capas · casos · alternativas · autonomía

// SECCIÓN 4 — EXPLICACIÓN DEL VIDEO EN 6 PASOS
const RetailSteps = () => {
  const steps = [
    { n: '01', k: 'DETECTA',       t: 'Cambio anómalo de demanda',
      d: 'La señal proviene de POS, eCommerce y OMS. El SDM Retail identifica el patrón contra baseline temporal y estacional.',
      sys: 'POS · eCommerce · OMS',
      dec: 'Escalar caso a Runtime con contexto de la promoción activa',
      res: 'Ventana de reacción · minutos, no horas',
      human: 'Ninguno hasta N4. En N5, notifica a category manager.' },
    { n: '02', k: 'CONTEXTUALIZA', t: 'Inventario, órdenes, márgenes',
      d: 'OMNIX cruza inventario en tienda, DC y en tránsito con órdenes pendientes, margen por SKU, capacidad TMS y lead times.',
      sys: 'WMS · OMS · ERP · TMS',
      dec: 'Consolidar estado real proyectado a 24/48/72h por nodo y SKU',
      res: 'Estado operacional unificado por caso',
      human: 'Analistas ya no consolidan manualmente entre 4 sistemas.' },
    { n: '03', k: 'RAZONA',        t: 'Alternativas y restricciones',
      d: 'Deep Think evalúa múltiples opciones (transferencia, reasignación, reprecio, expedición express) contra restricciones y políticas.',
      sys: 'SDM Retail · Cortex',
      dec: 'Mapa de alternativas con impacto en disponibilidad, margen y SLA',
      res: 'N alternativas evaluadas simultáneamente',
      human: 'Las políticas fueron aprobadas previamente por Governance Board.' },
    { n: '04', k: 'DECIDE',        t: 'Mejor acción priorizada',
      d: 'Selecciona la acción óptima considerando disponibilidad, margen, nivel de servicio, capacidad logística y políticas comerciales.',
      sys: 'Runtime · Cortex',
      dec: 'Acción específica: crear transferencia DC-01 → 14 nodos',
      res: 'Decisión con explicación · policy match confirmado',
      human: 'Sobre umbral N4, aprueba automáticamente. En N5, escala a humano.' },
    { n: '05', k: 'EJECUTA',       t: 'Sobre tus sistemas actuales',
      d: 'Runtime dispara la acción coordinada: crea la transferencia en WMS, actualiza prioridad en OMS, registra en ERP, reserva capacidad en TMS.',
      sys: 'WMS · OMS · ERP · TMS',
      dec: '4 acciones atómicas coordinadas con rollback disponible',
      res: 'Acción en producción · sin intervención manual',
      human: 'Notificaciones a responsables · panel de aprobación disponible.' },
    { n: '06', k: 'MIDE Y APRENDE',t: 'Impacto y trazabilidad',
      d: 'Registra outcome real, KPI de negocio (disponibilidad, margen, tiempo de respuesta) y retroalimenta el ciclo de reentrenamiento del SDM.',
      sys: 'BI · Data lake · Cortex',
      dec: 'Log inmutable · métricas base · feedback loop activo',
      res: 'Trazabilidad regulator-ready · aprendizaje continuo',
      human: 'Governance Board revisa métricas semanales.' },
  ];
  const [active, setActive] = React.useState(0);
  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="Descomposición del ciclo"/></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 }}>
            Seis pasos entre la señal y la acción medida.
          </h2>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 20 }}>
          <div style={{ border: '1.5px solid #1E1F26', background: '#FFF', height: 'fit-content' }}>
            {steps.map((s, i) => (
              <button key={s.n} onClick={() => setActive(i)} style={{
                width: '100%', border: 'none', textAlign: 'left', cursor: 'pointer',
                padding: '18px 20px',
                borderBottom: (i < steps.length - 1) ? '1px solid #E4EBF3' : 'none',
                background: active === i ? '#000' : '#FFF',
                color: active === i ? '#FFF' : '#1E1F26',
                display: 'flex', flexDirection: 'column', gap: 4,
                transition: 'all 220ms',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: active === i ? '#F4024C' : '#96A3B5' }}>
                  PASO {s.n}
                </span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, letterSpacing: '-0.005em' }}>{s.k}</span>
              </button>
            ))}
          </div>

          <div key={active} style={{
            border: '1.5px solid #1E1F26', background: '#FFF', padding: 40, minHeight: 460,
            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: 42, letterSpacing: '-0.025em', color: '#000', margin: 0, lineHeight: 1.05 }}>
                {steps[active].t}
              </h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: '16px 0 0', maxWidth: 700 }}>
                {steps[active].d}
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, paddingTop: 20, borderTop: '1px solid #E4EBF3' }}>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>Sistemas involucrados</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: '#0050BD', fontWeight: 500 }}>{steps[active].sys}</div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>Decisión generada</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26' }}>{steps[active].dec}</div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>Resultado operacional</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#F4024C', fontWeight: 500 }}>{steps[active].res}</div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>Rol del humano</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26' }}>{steps[active].human}</div>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// SECCIÓN 5 — CÓMO FUNCIONA OMNIX EN RETAIL (4 capas)
const RetailLayers = () => {
  const layers = [
    { n: '01', k: 'BASE',                  color: '#0050BD',
      t: 'Señales y sistemas del retailer.',
      items: ['POS', 'ERP', 'OMS', 'WMS', 'TMS', 'CRM', 'eCommerce', 'Pricing engine', 'Catálogo', 'Promociones', 'Inventario', 'Proveedores', 'Data lake', 'APIs'] },
    { n: '02', k: 'COGNICIÓN PRIVADA',      color: '#F4024C',
      t: 'SDM Retail entrenado sobre tu operación.',
      items: ['Historial de demanda', 'Reglas de pricing', 'Inventario', 'Margen', 'Lead times', 'Promociones', 'Estacionalidad', 'Jerarquía de productos', 'Sustitución de SKUs', 'Restricciones logísticas', 'Políticas comerciales', 'Conocimiento de category managers'] },
    { n: '03', k: 'ORQUESTACIÓN',           color: '#1E1F26',
      t: 'Conecta la decisión con la acción.',
      items: ['Reposición', 'Rebalanceo de inventario', 'Transferencias entre nodos', 'Priorización de órdenes', 'Asignación omnicanal', 'Pricing', 'Promociones', 'Alertas a responsables', 'WMS', 'OMS', 'ERP', 'TMS'] },
    { n: '04', k: 'IMPACTO',                color: '#B00238',
      t: 'Resultados medibles en KPI de negocio.',
      items: ['Disponibilidad', 'Tasa de quiebres', 'Venta perdida', 'Margen', 'Rotación', 'Markdown', 'Fill rate', 'OTIF', 'Tiempo de respuesta', 'Decisiones automatizadas', 'Intervenciones manuales evitadas'] },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="04" label="Cómo funciona OMNIX en Retail"/></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 aplicadas al vocabulario de Retail.
          </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: 340, display: 'flex', flexDirection: 'column', gap: 16,
                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: 24, letterSpacing: '-0.015em', color: '#000', margin: 0, lineHeight: 1.15 }}>
                  {L.t}
                </h3>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
                  {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 — CASOS DE USO
const RetailUseCases = () => {
  const [active, setActive] = React.useState(0);
  const cases = [
    { n: 'Orquestación de inventario ante riesgo de quiebre',
      icon: 'alert-triangle',
      disrupt: 'Promoción activa acelera demanda y proyecta stockout en múltiples ubicaciones.',
      signals: ['Demanda POS · eCommerce', 'Inventario proyectado', 'Órdenes pendientes', 'Capacidad TMS'],
      decision: 'Crear transferencia coordinada desde DC con stock disponible',
      systems: 'OMS · WMS · TMS · ERP',
      kpi: 'Disponibilidad · stockout rate · venta perdida',
      autonomy: 'N3 – N4',
      cta: 'Ver este caso en demo',
    },
    { n: 'Rebalanceo de inventario entre tiendas y DCs',
      icon: 'shuffle',
      disrupt: 'Stock inmovilizado en canal / región equivocada mientras otras enfrentan demanda alta.',
      signals: ['Inventario por nodo', 'Sell-through histórico', 'Costos logísticos', 'Restricciones de red'],
      decision: 'Optimizar movimientos de rebalanceo entre nodos priorizando margen y SLA',
      systems: 'WMS · TMS',
      kpi: 'Rotación · inventario inmovilizado · markdown evitado',
      autonomy: 'N3 – N4',
      cta: 'Explorar rebalanceo omnicanal',
    },
    { n: 'Pricing sensible a demanda, disponibilidad y margen',
      icon: 'percent',
      disrupt: 'Pricing engine opera con reglas estáticas mientras la disponibilidad real se degrada.',
      signals: ['Elasticidad', 'Inventario proyectado', 'Margen por SKU', 'Precio competencia'],
      decision: 'Recomendar ajustes de precio dentro de políticas aprobadas',
      systems: 'Pricing engine · ERP',
      kpi: 'Margen · markdown · velocidad de rotación',
      autonomy: 'N2 – N3 (por política)',
      cta: 'Ver caso de pricing dinámico',
    },
    { n: 'Reposición dinámica',
      icon: 'refresh-cw',
      disrupt: 'Ciclo de reposición semanal no captura variabilidad diaria de demanda.',
      signals: ['Sell-through diario', 'Lead times reales', 'Restricciones proveedor', 'Espacio en tienda'],
      decision: 'Recomendaciones de reorden diarias con priorización por SKU × ubicación',
      systems: 'ERP · WMS',
      kpi: 'Fill rate · OTIF · quiebres',
      autonomy: 'N3 – N4',
      cta: 'Explorar reposición dinámica',
    },
    { n: 'Priorización omnicanal de órdenes',
      icon: 'route',
      disrupt: 'Orden llega y el algoritmo default no considera margen, SLA prometido o riesgo de retorno.',
      signals: ['Inventario en red', 'SLA cliente', 'Margen', 'Historial de retorno'],
      decision: 'Ruta de fulfillment óptima por orden (tienda vs DC vs partner)',
      systems: 'OMS',
      kpi: 'Fill rate · costo por orden · NPS',
      autonomy: 'N4',
      cta: 'Ver caso omnicanal',
    },
    { n: 'Detección de anomalías en demanda',
      icon: 'activity',
      disrupt: 'Cambio real en demanda queda sepultado por variabilidad estacional o ruido.',
      signals: ['Series temporales POS', 'eCommerce', 'Contexto externo (clima, eventos)'],
      decision: 'Alertar equipo comercial con causa probable e impacto proyectado',
      systems: 'Alertas · dashboards',
      kpi: 'Tiempo de detección · ventas rescatadas',
      autonomy: 'N1 – N2',
      cta: 'Ver detección de anomalías',
    },
    { n: 'Gestión de exceso de inventario y markdown',
      icon: 'archive',
      disrupt: 'SKU o categoría acumula inventario que rotará por debajo del objetivo.',
      signals: ['Inventario', 'Rotación proyectada', 'Elasticidad', 'Ventana de vida útil'],
      decision: 'Plan de markdown escalonado con protección de margen agregado',
      systems: 'Pricing · Promociones · Comunicación',
      kpi: 'Markdown depth · margin recovery · sell-through',
      autonomy: 'N2 – N3',
      cta: 'Ver caso de markdown',
    },
  ];
  return (
    <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="05" label="Casos de uso · Retail" 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 24px', color: '#FFF', maxWidth: 900 }}>
            Siete 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: '#96A3B5', margin: '0 0 56px', maxWidth: 720 }}>
            No son productos distintos. Son dominios de decisión que se construyen sobre la misma plataforma cognitiva.
          </p>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 20 }}>
          <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10' }}>
            {cases.map((c, i) => (
              <button key={c.n} onClick={() => setActive(i)} style={{
                width: '100%', border: 'none', textAlign: 'left', cursor: 'pointer',
                padding: '16px 18px', display: 'flex', gap: 14, alignItems: 'flex-start',
                background: active === i ? '#F4024C' : 'transparent',
                color: active === i ? '#FFF' : '#96A3B5',
                borderBottom: (i < cases.length - 1) ? '1px solid #2E3140' : 'none',
                transition: 'all 220ms',
              }}>
                <i data-lucide={c.icon} width="18" height="18" style={{ strokeWidth: 1.5, flexShrink: 0, marginTop: 2 }}/>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', opacity: 0.7, marginBottom: 4 }}>CASO 0{i+1}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13, letterSpacing: '-0.005em', lineHeight: 1.3 }}>{c.n}</div>
                </div>
              </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 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 DE DECISIÓN · 0{active+1}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, letterSpacing: '-0.02em', color: '#FFF', margin: 0, lineHeight: 1.15 }}>
                  {cases[active].n}
                </h3>
              </div>
            </div>
            <div style={{ padding: '14px 18px', background: '#000', 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: '#FFF', lineHeight: 1.5 }}>{cases[active].disrupt}</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>Señales utilizadas</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {cases[active].signals.map((s) => (
                    <li key={s} style={{ display: 'flex', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 12, color: '#FFF' }}>
                      <span style={{ color: '#0050BD' }}>→</span>{s}
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 8 }}>Decisión de OMNIX</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#FFF', lineHeight: 1.5, marginBottom: 16 }}>{cases[active].decision}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>Sistemas de ejecución</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#F4024C' }}>{cases[active].systems}</div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: 20, marginTop: 'auto', paddingTop: 20, borderTop: '1px solid #2E3140', alignItems: 'end' }}>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>KPI impactado</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#FFF' }}>{cases[active].kpi}</div>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>Autonomía</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#F4024C' }}>{cases[active].autonomy}</div>
              </div>
              <Button variant="ghost" dark icon="arrow-right" href="diagnostico.html">{cases[active].cta}</Button>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// SECCIÓN 7 — OMNIX VS ALTERNATIVAS
const RetailVsAlternatives = () => {
  const rows = [
    { tool: 'Dashboard / BI',           solves: 'Visualiza estado histórico',           lacks: 'No decide · no ejecuta',                  omnix: 'Conecta dashboards con acción coordinada' },
    { tool: 'Forecasting engine',       solves: 'Proyecta demanda futura',              lacks: 'No cruza con inventario ni pricing',      omnix: 'Cruza forecast con contexto operacional' },
    { tool: 'Pricing engine',           solves: 'Aplica reglas de precio',              lacks: 'Opera desconectado de disponibilidad',    omnix: 'Alimenta pricing con inventario proyectado' },
    { tool: 'RPA',                      solves: 'Automatiza tareas repetitivas',        lacks: 'No decide sobre casos borde',             omnix: 'Decide y usa RPA como ejecutor cuando aplica' },
    { tool: 'WMS',                      solves: 'Ejecuta operación de almacén',         lacks: 'No prioriza ante disrupciones',           omnix: 'Prioriza y coordina múltiples WMS' },
    { tool: 'OMS',                      solves: 'Enruta órdenes según reglas fijas',    lacks: 'No adapta a cambios en tiempo real',      omnix: 'Reajusta enrutamiento por contexto real' },
    { tool: 'Process mining',           solves: 'Descubre patrones de proceso',         lacks: 'No actúa · no ejecuta',                   omnix: 'Convierte insights en acciones ejecutadas' },
    { tool: 'Copilotos de IA',          solves: 'Asisten a un usuario individual',      lacks: 'No orquestan 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 alternativas"/></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 tus inversiones. Las <span style={{ color: '#F4024C' }}>conecta 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 }}>
            Tu ERP, OMS, WMS y pricing engine 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>HERRAMIENTA</div>
            <div style={{ color: '#0F5132' }}>QUÉ RESUELVE</div>
            <div style={{ color: '#96A3B5' }}>QUÉ NO RESUELVE</div>
            <div style={{ color: '#F4024C' }}>QUÉ AGREGA OMNIX</div>
          </div>
          {rows.map((r, i) => (
            <SlideIn key={r.tool} direction="right" delay={i * 40}>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1.4fr 1.4fr 1.6fr',
                padding: '18px 24px', borderTop: '1px solid #E4EBF3',
                background: i % 2 === 0 ? '#FFF' : '#FAFBFD',
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: '#000' }}>{r.tool}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26' }}>{r.solves}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#96A3B5' }}>{r.lacks}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#F4024C', fontWeight: 500 }}>{r.omnix}</div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// SECCIÓN 8 — AUTONOMÍA Y CONTROL
const RetailAutonomy = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="07" label="Autonomía graduable"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.025em', color: '#000', margin: '0 0 20px' }}>
              Automatice la decisión sin perder el control.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              La autonomía no es binaria. Cada caso opera en el nivel que su gobernanza permite,
              y sube cuando el negocio confirma el performance.
            </p>
          </Reveal>
        </div>

        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
            {[
              { n: 'N1', t: 'Monitoreo',           r: 'Humano decide · humano actúa' },
              { n: 'N2', t: 'Recomendación',        r: 'IA propone · humano ejecuta' },
              { n: 'N3', t: 'Aprobación humana',    r: 'IA ejecuta con approval flow' },
              { n: 'N4', t: 'Automático en umbral', r: 'IA decide y ejecuta con guardrails' },
              { n: 'N5', t: 'Excepción escalada',    r: 'IA · human-in-the-loop obligatorio' },
            ].map((l, i, arr) => (
              <div key={l.n} style={{
                display: 'grid', gridTemplateColumns: '50px 1fr 220px', gap: 16, alignItems: 'center',
                padding: '18px 20px',
                borderBottom: (i < arr.length - 1) ? '1px solid #E4EBF3' : 'none',
                background: i === 3 ? '#FFE5EC' : '#FFF',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.14em', color: i === 3 ? '#F4024C' : '#96A3B5', fontWeight: 600 }}>{l.n}</span>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: '#000', letterSpacing: '-0.01em' }}>{l.t}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#52557A', marginTop: 4 }}>{l.r}</div>
                </div>
                {i === 3 && <Badge tone="fuxia">RETAIL DEFAULT</Badge>}
              </div>
            ))}
          </div>
        </Reveal>
      </div>

      {/* Guardrails cards */}
      <div style={{ marginTop: 72, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {[
          { i: 'flag',       t: 'Límites de decisión',    d: 'Hard limits por caso: monto, cantidad, tipo de acción, ubicación.' },
          { i: 'check-check',t: 'Approval flows',          d: 'Configurables por criticidad. Quorum ejecutivo cuando aplique.' },
          { i: 'file-text',  t: 'Trazabilidad · logs',     d: 'WORM · 10 años · firmado. Reproducible ante cualquier auditoría.' },
          { i: 'rewind',     t: 'Rollback',                d: '< 5 min a cualquier versión histórica. Sin ventana de inconsistencia.' },
        ].map((c, i) => (
          <SlideIn key={c.t} direction="up" delay={i * 80}>
            <div style={{ padding: 22, background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 160 }}>
              <i data-lucide={c.i} width="20" height="20" style={{ color: '#F4024C', strokeWidth: 1.5, marginBottom: 12 }}/>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: '#000', letterSpacing: '-0.005em', marginBottom: 6 }}>{c.t}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#52557A', lineHeight: 1.5 }}>{c.d}</div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

Object.assign(window, { RetailSteps, RetailLayers, RetailUseCases, RetailVsAlternatives, RetailAutonomy });