// MANUFACTURA — Secciones 4-9: pasos · capas · caso principal · casos · vs alternativas · digital twin

// SECCIÓN 4 — 8 PASOS
const ManufSteps = () => {
  const steps = [
    { n: '01', k: 'DETECTA',        t: 'Condición anómala en el activo',
      d: 'La telemetría muestra vibración y temperatura fuera de patrón. El SDM aplica clasificación multi-señal contra baseline por activo, turno y estación.',
      sys: 'SCADA · Historian · IoT',
      dec: 'Elevar caso al Runtime con evidencia técnica',
      act: 'Ninguna acción sobre el activo · sólo lectura',
      human: 'Operador de turno notificado (informativo)',
      kpi: 'Tiempo de detección · señal → caso' },
    { n: '02', k: 'CONTEXTUALIZA',  t: 'Historial, orden y calidad',
      d: 'Cruza el estado actual con historial del activo, orden en curso, prioridad, criterios de calidad y planes de producción.',
      sys: 'CMMS · MES · QMS · APS',
      dec: 'Consolidar contexto operacional único',
      act: 'Ensamblar caso con features completos',
      human: 'Ya no coordina manualmente entre 4 sistemas',
      kpi: 'Tiempo de contexto · fragmentación evitada' },
    { n: '03', k: 'RAZONA',         t: 'Modos de falla probables',
      d: 'El SDM Manufactura clasifica hipótesis (bearing, alineamiento, imbalance) con score de confianza y ventana de tiempo hasta falla.',
      sys: 'SDM · Cortex',
      dec: 'Hipótesis con probabilidad y horizonte',
      act: 'Generación de features de explicabilidad',
      human: 'Mantenimiento recibe hipótesis explicable',
      kpi: 'Confidence · false-negative rate' },
    { n: '04', k: 'EVALÚA',         t: 'Impacto sobre plan y calidad',
      d: 'Determina qué órdenes están en riesgo, qué calidad puede verse afectada, y qué capacidad alternativa está disponible.',
      sys: 'MES · APS · QMS',
      dec: 'Mapa de impacto multi-dimensión',
      act: 'Simulación en digital twin operacional',
      human: 'Plant Manager ve impacto proyectado',
      kpi: 'Cumplimiento del plan proyectado' },
    { n: '05', k: 'DECIDE',         t: 'Alternativa gobernada',
      d: 'Compara "monitorear", "intervenir en ventana" y "transferir a línea alternativa". Selecciona bajo políticas de seguridad, calidad y plan.',
      sys: 'Cortex · Governance',
      dec: 'Recomendación priorizada con explicación',
      act: 'Dispara approval flow correspondiente',
      human: 'Maintenance Manager aprueba en N3',
      kpi: 'Tiempo alerta → decisión' },
    { n: '06', k: 'EJECUTA',        t: 'Acciones cross-sistema',
      d: 'Crea la orden de mantenimiento, reserva repuesto, ajusta secuencia y activa inspección de calidad reforzada. Sin comandos directos al PLC.',
      sys: 'CMMS · ERP · MES · APS · QMS',
      dec: 'Ejecución coordinada atómica con rollback',
      act: '5 sistemas actualizados en < 200 ms',
      human: 'OT permanece en modo read-only',
      kpi: 'Tiempo decisión → acción' },
    { n: '07', k: 'MIDE',           t: 'Resultado real',
      d: 'Registra outcome real (falla evitada, downtime planificado, orden protegida) y KPIs de negocio (OEE, MTBF, MTTR, scrap).',
      sys: 'BI · Historian · QMS',
      dec: 'Métricas base pre/post decisión',
      act: 'Logs firmados · trazabilidad regulator-ready',
      human: 'Governance Board revisa semanal',
      kpi: 'OEE · MTBF · scrap · cumplimiento' },
    { n: '08', k: 'APRENDE',        t: 'Feedback al SDM',
      d: 'El outcome retroalimenta el ciclo de fine-tuning. Modos de falla nuevos amplían el modelo. Las excepciones enriquecen las reglas.',
      sys: 'Core · Governance',
      dec: 'Trigger de reentrenamiento condicionado',
      act: 'Nueva versión del SDM en cola de review',
      human: 'Model Governance Owner aprueba release',
      kpi: 'Accuracy drift · precision by mode' },
  ];
  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 }}>
            Ocho pasos entre la señal y el aprendizaje del modelo.
          </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: '16px 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: 14, letterSpacing: '-0.005em' }}>{s.k}</span>
              </button>
            ))}
          </div>

          <div key={active} style={{
            border: '1.5px solid #1E1F26', background: '#FFF', 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: 40, letterSpacing: '-0.025em', color: '#000', margin: 0, lineHeight: 1.05 }}>
                {steps[active].t}
              </h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, 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: 20, paddingTop: 20, borderTop: '1px solid #E4EBF3' }}>
              {[
                { l: 'Sistemas involucrados', v: steps[active].sys,   c: '#0050BD' },
                { l: 'Decisión generada',      v: steps[active].dec,   c: '#1E1F26' },
                { l: 'Acción ejecutada',       v: steps[active].act,   c: '#F4024C' },
                { l: 'Rol humano',              v: steps[active].human, c: '#1E1F26' },
                { 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, fontWeight: r.c === '#F4024C' || r.c === '#0F5132' ? 500 : 400, lineHeight: 1.45 }}>{r.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};

// SECCIÓN 5 — CÓMO FUNCIONA OMNIX EN MANUFACTURA (4 capas industriales)
const ManufLayers = () => {
  const layers = [
    { n: '01', k: 'BASE',                 color: '#0050BD',
      t: 'Señales IT/OT y sistemas industriales.',
      note: 'Conectores según arquitectura del cliente · validación técnica requerida.',
      items: ['SCADA', 'PLC', 'DCS', 'Sensores IoT', 'Historians', 'MES/MOM', 'ERP', 'APS', 'CMMS/EAM', 'QMS', 'LIMS', 'WMS/TMS', 'Sist. energía', 'Sist. visión', 'Órdenes producción', 'Recetas y parámetros', 'Inventario repuestos', 'Data lake', 'APIs'] },
    { n: '02', k: 'COGNICIÓN PRIVADA',      color: '#F4024C',
      t: 'SDM Manufactura entrenado sobre tu operación.',
      note: 'Interpreta qué ocurre · qué puede ocurrir · qué órdenes se afectan · qué riesgo existe.',
      items: ['Datos de activos', 'Variables de proceso', 'Historial de fallas', 'Órdenes mantenimiento', 'Modos de falla', 'Parámetros operacionales', 'Reglas de calidad', 'Tolerancias', 'Planes de producción', 'Prioridad de órdenes', 'Disponibilidad de personal', 'Inventario de repuestos', 'Calendarios de mantenimiento', 'Restricciones de seguridad', 'Conocimiento operadores', 'Conocimiento mantenedores', 'Procedimientos estándar', 'Manuales · causa raíz', 'Acciones correctivas', 'Consumo energético'] },
    { n: '03', k: 'ORQUESTACIÓN',           color: '#1E1F26',
      t: 'Coordina acciones cross-sistema.',
      note: 'Todas las acciones son configurables por riesgo, proceso, política y human-in-the-loop.',
      items: ['Crear/priorizar OM', 'Reservar repuesto', 'Verificar técnicos', 'Ventana de intervención', 'Ajustar secuencia', 'Transferir a otra línea', 'Reducir velocidad (aprobada)', 'Activar inspección calidad', 'Retener lote', 'Notificar responsables', 'Escalar excepción', 'Actualizar APS', 'Registrar decisión', 'Confirmar ejecución', 'Medir impacto'] },
    { n: '04', k: 'IMPACTO',                color: '#B00238',
      t: 'Resultados medibles sobre tus KPIs.',
      note: 'Publicación de mejoras cuantitativas requiere [VALIDAR MÉTRICA].',
      items: ['OEE', 'Disponibilidad', 'Performance rate', 'Quality rate', 'Downtime no planif.', 'Microparadas', 'MTBF', 'MTTR', 'Scrap', 'Retrabajo', 'First-pass yield', 'Throughput', 'Cumplimiento plan', 'Schedule adherence', 'Tiempo de cambio', 'Utilización', 'Costo mantenimiento', 'Horas extra', 'kWh/unidad', 'Tiempo alerta→acción'] },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="04" label="Cómo funciona OMNIX en Manufactura"/></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 industrial · 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: 360, 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 6 — CASO PRINCIPAL
const ManufMainCase = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="05" label="Caso principal · falla en activo crítico" 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 }}>
          De patrón anómalo a intervención coordinada.
        </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 }}>
          Un activo crítico muestra vibración y temperatura fuera de patrón durante una orden prioritaria.
          OMNIX correlaciona, evalúa alternativas y coordina la respuesta entre CMMS, MES, APS y QMS.
        </p>
      </Reveal>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        {/* Context */}
        <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10', padding: 32 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>CONTEXTO OPERACIONAL</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
            {[
              { l: 'PLANTA',           v: 'Automotive · discreta' },
              { l: 'ACTIVO',            v: 'CNC-08 · Line-4' },
              { l: 'ORDEN',             v: 'WO-8402 · 4.500 uds' },
              { l: 'PRIORIDAD',         v: 'Crítica · SLA 18:00' },
              { l: 'CONDICIÓN',         v: 'Vibración +2.8σ · Temp +11°C' },
              { l: 'HIPÓTESIS',         v: 'Bearing degradation · 0.87' },
            ].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: '#FFF' }}>{r.v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* 5 alternatives */}
        <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10', padding: 32 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>ALTERNATIVAS EVALUADAS</div>
          {[
            { n: '01', t: 'Continuar y aumentar monitoreo',            r: 78, sel: false },
            { n: '02', t: 'Reducir velocidad temporalmente',            r: 56, sel: false },
            { n: '03', t: 'Intervención controlada en ventana',         r: 22, sel: true  },
            { n: '04', t: 'Transferir producción a Line-2',              r: 18, sel: false },
            { n: '05', t: 'Detener el activo inmediatamente',            r: 5,  sel: false },
          ].map((o) => (
            <div key={o.n} style={{
              display: 'grid', gridTemplateColumns: '32px 1fr 80px 60px', gap: 10, alignItems: 'center',
              padding: '10px 12px',
              background: o.sel ? 'rgba(244,2,76,0.12)' : 'transparent',
              borderLeft: o.sel ? '3px solid #F4024C' : '3px solid transparent',
              marginBottom: 4,
            }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5' }}>{o.n}</span>
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#FFF' }}>{o.t}</span>
              <div style={{ height: 4, background: '#2E3140' }}>
                <div style={{ height: '100%', width: `${o.r}%`, background: o.r > 40 ? '#EA384C' : '#0F5132' }}/>
              </div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', textAlign: 'right' }}>risk {o.r}%</span>
            </div>
          ))}
          <div style={{ marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C' }}>
            → SELECTED · 03 · approved by maintenance-manager
          </div>
        </div>

        {/* Actions executed */}
        <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10', padding: 32 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>ACCIONES COORDINADAS</div>
          {[
            { s: 'CMMS', a: 'Crea WO-M-9241 · priority high' },
            { s: 'ERP',  a: 'Reserva bearing #B-4082' },
            { s: 'MES',  a: 'Reduce velocidad -12% CNC-08' },
            { s: 'APS',  a: 'Transfiere WO-8402 parcial a Line-2' },
            { s: 'QMS',  a: 'Activa inspección reforzada batch #A-2029' },
          ].map((r) => (
            <div key={r.s} style={{ display: 'grid', gridTemplateColumns: '60px 1fr auto', gap: 12, padding: '10px 0', borderBottom: '1px solid #2E3140' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: '#F4024C' }}>{r.s}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: '#FFF' }}>{r.a}</span>
              <i data-lucide="check" width="14" height="14" style={{ color: '#0F5132', strokeWidth: 2 }}/>
            </div>
          ))}
        </div>

        {/* Result */}
        <div style={{ border: '1.5px solid #F4024C', background: '#0A0B10', 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: 'FALLA',            v: 'Evitada',       c: '#0F5132' },
              { l: 'DOWNTIME',          v: 'Planificado',   c: '#F4024C' },
              { l: 'ORDEN WO-8402',    v: '86% completa',  c: '#0050BD' },
              { l: 'LOTE #A-2029',     v: 'Liberado · QMS ok', c: '#0F5132' },
              { l: 'MTTR',              v: '−4h vs reactivo', c: '#0F5132' },
              { l: 'APRENDIZAJE',       v: 'SDM v3.8 en cola', c: '#B8860B' },
            ].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' }}>
            * Métricas del caso simulado. [VALIDAR CASO] antes de publicación pública.
          </div>
        </div>
      </div>
    </Container>
  </section>
);

// SECCIÓN 7 — 12 CASOS DE USO
const ManufUseCases = () => {
  const [active, setActive] = React.useState(0);
  const cases = [
    { n: 'Prevención de downtime no planificado',       icon: 'shield-alert',   disrupt: 'Un activo crítico muestra un patrón que precede a fallas conocidas.',                                   signals: 'Vibración · temperatura · consumo · velocidad', decision: 'Intervención controlada en ventana previa a falla', systems: 'CMMS · MES · APS', kpi: 'MTBF · downtime no planif.', autonomy: 'N3', reduces: 'Detención no programada' },
    { n: 'Orden autónoma o asistida de mantenimiento',   icon: 'wrench',          disrupt: 'La condición actual justifica crear orden de mantenimiento con prioridad calibrada.',                    signals: 'Estado del activo · historial · criticidad',    decision: 'Crear/priorizar orden con repuestos y técnicos', systems: 'CMMS · ERP', kpi: 'Tiempo alerta → OM', autonomy: 'N3 – N4', reduces: 'Órdenes tardías o innecesarias' },
    { n: 'Detección temprana de desviaciones de calidad', icon: 'target',          disrupt: 'Un parámetro de proceso se desvía antes de que la inspección lo detecte.',                              signals: 'Parámetros proceso · SPC · visión',             decision: 'Retener lote o refuerzo de inspección',           systems: 'QMS · LIMS · MES', kpi: 'Scrap · first-pass yield', autonomy: 'N2 – N3', reduces: 'Defectos que llegan al cliente' },
    { n: 'Orquestación de producción frente a una falla', icon: 'route',           disrupt: 'Ante una falla probable, la orden crítica debe protegerse sin comprometer el plan global.',            signals: 'Órdenes · capacidad · SLA · calidad',           decision: 'Transferir orden · ajustar secuencia',            systems: 'MES · APS',        kpi: 'Cumplimiento del plan', autonomy: 'N3', reduces: 'Órdenes incumplidas' },
    { n: 'Priorización de alarmas industriales',           icon: 'bell',            disrupt: 'La operación recibe cientos de alarmas por turno sin priorización contextual.',                          signals: 'Alarmas · estado activos · criticidad orden',   decision: 'Ranking de alarmas por impacto operacional',      systems: 'SCADA · MES',       kpi: 'MTTA · alarm fatigue', autonomy: 'N2', reduces: 'Alarm flooding' },
    { n: 'Reducción de microparadas',                       icon: 'timer-off',       disrupt: 'Un patrón de microparadas recurrentes reduce performance rate sin ser diagnosticado.',                signals: 'Micro-stops · patrones temporales',              decision: 'Recomendación de ajuste · orden de inspección',   systems: 'MES · CMMS',        kpi: 'Performance rate', autonomy: 'N2', reduces: 'Pérdidas invisibles de OEE' },
    { n: 'Ajuste dinámico de secuenciación',                 icon: 'list-ordered',    disrupt: 'La secuencia planificada no considera cambios reales de estado o restricciones emergentes.',           signals: 'Estado línea · disponibilidad · calidad',       decision: 'Re-secuenciar dentro de restricciones',             systems: 'APS · MES',         kpi: 'Schedule adherence', autonomy: 'N3', reduces: 'Setup y esperas' },
    { n: 'Gestión de repuestos críticos',                    icon: 'package',         disrupt: 'Ante una falla probable, el repuesto crítico no está reservado ni asignado.',                             signals: 'Inventario · lead time · criticidad',            decision: 'Reservar/pedir repuesto con anticipación',           systems: 'ERP · CMMS',        kpi: 'Availability of parts', autonomy: 'N3', reduces: 'Downtime por falta de repuesto' },
    { n: 'Optimización de cambios de formato',                icon: 'shuffle',         disrupt: 'Los cambios de formato consumen tiempo por coordinación manual entre operaciones.',                     signals: 'Órdenes · SKUs · secuencia · limpieza',           decision: 'Optimizar secuencia y activar cambio',              systems: 'MES · APS',         kpi: 'Tiempo de cambio', autonomy: 'N3', reduces: 'SMED sub-óptimo' },
    { n: 'Detección de consumo energético anómalo',            icon: 'zap',             disrupt: 'Un activo consume más energía que su patrón sin motivo aparente.',                                       signals: 'kWh · load · temperatura ambiente',              decision: 'Alerta · orden de inspección',                     systems: 'Sist. energía · CMMS', kpi: 'kWh/unidad', autonomy: 'N2', reduces: 'Ineficiencia energética' },
    { n: 'Coordinación de calidad ante condición fuera de rango', icon: 'clipboard-check', disrupt: 'Un parámetro se sale de rango y calidad debe decidir sobre lotes ya producidos.',                        signals: 'SPC · trazabilidad lote · reglas QMS',            decision: 'Retener · inspeccionar · liberar',                  systems: 'QMS · LIMS · MES',  kpi: 'First-pass yield', autonomy: 'N2 – N3', reduces: 'Liberación bajo condición inestable' },
    { n: 'Captura y escalamiento de conocimiento experto',       icon: 'brain-circuit',   disrupt: 'El conocimiento operacional depende de expertos que pueden abandonar la organización.',                    signals: 'Decisiones históricas · notas · feedback',        decision: 'Convertir conocimiento en reglas del SDM',           systems: 'SDM · Governance',  kpi: 'Reducción dependencia experta', autonomy: '—', reduces: 'Pérdida de conocimiento' },
  ];
  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="Casos de uso · Manufactura"/></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 industrial.
          </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 }}>PROBLEMA</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 ALTERNATIVAS INDUSTRIALES
const ManufVsAlternatives = () => {
  const rows = [
    { tool: 'SCADA',                       solves: 'Detecta y controla variables',              lacks: 'No interpreta impacto operacional',       omnix: 'Interpreta el impacto y coordina una respuesta' },
    { tool: 'PLC / DCS',                   solves: 'Ejecuta control de proceso',                 lacks: 'No razona sobre contexto de negocio',      omnix: 'Añade contexto de plan, calidad y mantenimiento' },
    { tool: 'Historian',                   solves: 'Almacena telemetría',                        lacks: 'No decide · no ejecuta',                  omnix: 'Convierte historia en decisión operacional' },
    { tool: 'MES / MOM',                   solves: 'Registra y gestiona ejecución',              lacks: 'No decide ante disrupciones no previstas', omnix: 'Decide cómo responder ante una anomalía' },
    { tool: 'ERP',                         solves: 'Administra recursos y órdenes',              lacks: 'No razona con telemetría industrial',      omnix: 'Cruza ERP con datos IT/OT en tiempo real' },
    { tool: 'APS',                         solves: 'Planifica secuencia',                        lacks: 'No adapta al estado real del activo',      omnix: 'Reajusta secuencia con condición del activo' },
    { tool: 'CMMS / EAM',                  solves: 'Administra órdenes de mantenimiento',        lacks: 'No prioriza por contexto de producción',    omnix: 'Determina cuándo, por qué y con qué prioridad' },
    { tool: 'QMS',                         solves: 'Gestiona calidad',                           lacks: 'No conecta con condición del activo',       omnix: 'Activa inspección ante condición IT/OT anómala' },
    { tool: 'Mantenimiento predictivo',     solves: 'Estima falla',                              lacks: 'No decide qué hacer · no coordina',         omnix: 'Decide y coordina la ejecución' },
    { tool: 'Digital twin',                solves: 'Representa la planta',                        lacks: 'No decide ni ejecuta por sí solo',          omnix: 'Usa el twin como contexto de decisión' },
    { tool: 'Process mining',              solves: 'Descubre patrones de proceso',               lacks: 'No opera · no ejecuta',                     omnix: 'Convierte insights en acciones ejecutadas' },
    { tool: 'BI / dashboards',             solves: 'Muestra el problema',                        lacks: 'No mueve la operación',                      omnix: 'Mueve la operación · con auditoría' },
    { tool: 'RPA',                         solves: 'Automatiza tareas repetitivas',              lacks: 'No razona sobre casos borde',               omnix: 'Decide y usa RPA como ejecutor cuando aplica' },
    { tool: 'Copilotos de IA',             solves: 'Asisten a un individuo',                     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: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="07" label="OMNIX vs alternativas industriales"/></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 }}>
            SCADA, MES, ERP, CMMS y demás siguen operando. OMNIX es la capa cognitiva que coordina decisiones entre producción, mantenimiento, calidad y planificación.
          </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: '16px 24px', borderTop: '1px solid #E4EBF3',
                background: i % 2 === 0 ? '#FFF' : '#FAFBFD',
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: '#000' }}>{r.tool}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.4 }}>{r.solves}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#96A3B5', lineHeight: 1.4 }}>{r.lacks}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#F4024C', fontWeight: 500, lineHeight: 1.4 }}>{r.omnix}</div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// SECCIÓN 9 — DIGITAL TWIN OPERACIONAL
const ManufDigitalTwin = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <Reveal><SectionMeta n="08" label="Digital twin operacional" dark color="#F4024C"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.025em', color: '#FFF', margin: '0 0 24px' }}>
              Una representación viva de la operación · para evaluar antes de ejecutar.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#96A3B5', margin: '0 0 24px', maxWidth: 500 }}>
              El twin no es un renderer 3D decorativo. Es un modelo operacional que integra estado de activos, flujo de producción, órdenes, calidad, capacidad, personal, repuestos y energía — usado como contexto de decisión.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 20 }}>
              {[
                'Evalúa alternativas antes de comprometer una acción',
                'Simula impacto sobre plan, calidad y capacidad',
                'Compara consecuencias entre 2, 3 o N respuestas',
                'Define límites operacionales de autonomía',
              ].map((it) => (
                <div key={it} style={{ display: 'flex', gap: 12, fontFamily: 'var(--font-body)', fontSize: 15, color: '#FFF' }}>
                  <i data-lucide="check" width="16" height="16" style={{ color: '#F4024C', strokeWidth: 2, marginTop: 3, flexShrink: 0 }}/>
                  {it}
                </div>
              ))}
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#B8860B' }}>
              * Capacidad de digital twin operacional dependiente de la arquitectura del cliente. [VALIDAR CAPACIDAD DIGITAL TWIN].
            </div>
          </Reveal>
        </div>

        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10' }}>
            <div style={{ padding: '14px 20px', borderBottom: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
              <span>OPERATIONAL TWIN · LINE-4</span>
              <span style={{ color: '#F4024C' }}>SIMULATED SCENARIO A</span>
            </div>
            <svg viewBox="0 0 500 320" style={{ display: 'block', width: '100%', height: 'auto' }}>
              <g stroke="#2E3140" strokeWidth="0.5" opacity="0.4">
                {Array.from({length: 11}).map((_, i) => <line key={i} x1={i*50} y1="0" x2={i*50} y2="320"/>)}
                {Array.from({length: 7}).map((_, i) => <line key={i} x1="0" y1={i*50} x2="500" y2={i*50}/>)}
              </g>
              {/* Line schematic */}
              <g transform="translate(40, 140)">
                {[0, 1, 2, 3, 4].map((i) => (
                  <g key={i} transform={`translate(${i * 90}, 0)`}>
                    <rect x="0" y="-24" width="70" height="48" fill="#0A0B10" stroke={i === 2 ? '#EA384C' : '#0F5132'} strokeWidth={i === 2 ? 1.5 : 1}/>
                    <text x="35" y="-4" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.12em" fill={i === 2 ? '#EA384C' : '#0F5132'}>ST-0{i+1}</text>
                    <text x="35" y="14" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" fill="#96A3B5">{['LOAD', 'MILL', 'CNC', 'INSP', 'PACK'][i]}</text>
                    {i < 4 && <FlowPath d={`M 70 0 L 90 0`} stroke="#0F5132" strokeWidth={1} particleColor="#0F5132" particleSize={2} duration={2}/>}
                  </g>
                ))}
              </g>
              {/* State layers */}
              <g transform="translate(40, 50)">
                <text x="0" y="0" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#96A3B5">STATE LAYERS · LIVE</text>
                {['Assets', 'Orders', 'Quality', 'Maintenance', 'Energy'].map((l, i) => (
                  <g key={l} transform={`translate(${i * 90}, 20)`}>
                    <rect x="0" y="0" width="70" height="20" fill="#0A0B10" stroke="#0050BD" strokeWidth="0.75"/>
                    <text x="35" y="14" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="#FFF">{l}</text>
                  </g>
                ))}
              </g>
              <text x="40" y="220" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#EA384C">CNC-08 · anomaly detected · propagation simulated</text>
              <g transform="translate(40, 240)">
                {[
                  { l: 'A · monitor',   c: '#B8860B' },
                  { l: 'B · intervene', c: '#F4024C' },
                  { l: 'C · transfer',  c: '#0050BD' },
                ].map((s, i) => (
                  <g key={s.l} transform={`translate(${i * 140}, 0)`}>
                    <rect x="0" y="0" width="130" height="52" fill="#0A0B10" stroke={s.c} strokeWidth="1"/>
                    <text x="10" y="16" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill={s.c}>SCENARIO {s.l}</text>
                    <text x="10" y="34" fontFamily="var(--font-mono)" fontSize="8" fill="#96A3B5">plan · quality · safety</text>
                    <text x="10" y="46" fontFamily="var(--font-mono)" fontSize="8" fill="#96A3B5">simulated</text>
                  </g>
                ))}
              </g>
            </svg>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

Object.assign(window, { ManufSteps, ManufLayers, ManufMainCase, ManufUseCases, ManufVsAlternatives, ManufDigitalTwin });