// MANUFACTURA — Secciones 10-15: autonomía · seguridad IT/OT · transferencia · prueba · plan · CTA · 20 objeciones

// SECCIÓN 10 — AUTONOMÍA (5 niveles)
const ManufAutonomy = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="09" 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 respuesta sin entregar el control.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              La autonomía nunca es binaria en manufactura. La seguridad y la calidad tienen prioridad sobre la automatización.
            </p>
          </Reveal>
        </div>

        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
            {[
              { n: 'N1', t: 'Monitoreo',                r: 'OMNIX detecta y clasifica' },
              { n: 'N2', t: 'Recomendación',             r: 'OMNIX propone alternativas' },
              { n: 'N3', t: 'Ejecución asistida',        r: 'Prepara acciones · espera aprobación' },
              { n: 'N4', t: 'Ejecución automática controlada', r: 'Actúa dentro de umbrales definidos' },
              { n: 'N5', t: 'Decisión crítica gobernada', r: 'Respuesta compleja · escalamiento humano' },
            ].map((l, i, arr) => (
              <div key={l.n} style={{
                display: 'grid', gridTemplateColumns: '48px 1fr 220px', gap: 16, alignItems: 'center',
                padding: '18px 20px',
                borderBottom: (i < arr.length - 1) ? '1px solid #E4EBF3' : 'none',
                background: i === 2 ? '#FFE5EC' : '#FFF',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.14em', color: i === 2 ? '#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 === 2 && <Badge tone="fuxia">MANUFACTURA DEFAULT</Badge>}
              </div>
            ))}
          </div>
        </Reveal>
      </div>

      <div style={{ marginTop: 72, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
        {[
          { i: 'shield',        t: 'OT read-only',              d: 'OMNIX no envía comandos directos al PLC. IT ejecuta sobre MES/CMMS/APS.' },
          { i: 'flag',          t: 'Límites por activo',         d: 'Cada activo define sus umbrales y decisiones permitidas.' },
          { i: 'check-check',   t: 'Approval flows',              d: 'Quorum configurable. Mantenimiento y calidad aprueban por dominio.' },
          { i: 'file-text',     t: 'Logs · trazabilidad',         d: 'WORM · 10 años · firmado · regulator-ready.' },
          { i: 'circle-slash',  t: 'Kill switch · modo seguro',   d: 'Detención completa del runtime desde un único comando.' },
        ].map((c, i) => (
          <SlideIn key={c.t} direction="up" delay={i * 80}>
            <div style={{ padding: 20, 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: 15, color: '#000', letterSpacing: '-0.005em', marginBottom: 6 }}>{c.t}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.5 }}>{c.d}</div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// SECCIÓN 11 — SEGURIDAD IT/OT
const ManufSecurity = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="10" label="Seguridad IT/OT · soberanía" 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' }}>
              La cognición vive donde su seguridad lo permite.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#96A3B5', margin: '0 0 32px', maxWidth: 500 }}>
              Datos de proceso, recetas, parámetros y propiedad intelectual son activos críticos. OMNIX opera con segregación IT/OT explícita, principio de mínimo privilegio y sin comandos directos a activos de campo.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <Button variant="ghost" dark icon="arrow-right" href="seguridad.html">Revisar Seguridad y Gobernanza</Button>
          </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' }}>
              CONTROLES ACTIVOS · SEGREGACIÓN IT/OT
            </div>
            {[
              { i: 'shield',         t: 'Despliegue VPC / on-prem / air-gapped', d: 'La operación se ubica según regulación y modelo IT/OT del cliente.' },
              { i: 'network',         t: 'Conectividad controlada IT-OT',        d: 'DMZ industrial · flujos unidireccionales · principio de mínimo privilegio.' },
              { i: 'lock',            t: 'OT en modo read-only por defecto',      d: 'Ejecución de acciones vía sistemas IT (CMMS, MES, APS) · nunca al PLC.' },
              { i: 'users',           t: 'Acceso basado en roles',                 d: 'Segregación operación / mantenimiento / calidad / governance.' },
              { i: 'file-search',     t: 'Auditoría por decisión',                 d: 'Cada acción con logs firmados · reproducible bit-exacto.' },
              { i: 'file-lock-2',     t: 'Protección de propiedad intelectual',    d: 'Recetas, parámetros y know-how anonimizados en entrenamiento del SDM.' },
              { i: 'git-compare',     t: 'Governance del modelo',                  d: 'Approval flows, versioning, rollback. Model risk board integrado.' },
              { i: 'alert-triangle',  t: 'Restricciones sobre comandos directos',  d: 'Ninguna capacidad de escritura directa a activos de campo. [VALIDAR].' },
            ].map((c, i, arr) => (
              <div key={c.t} style={{
                padding: '14px 20px', display: 'grid', gridTemplateColumns: '28px 1fr', gap: 14,
                borderBottom: (i < arr.length - 1) ? '1px solid #2E3140' : 'none',
              }}>
                <i data-lucide={c.i} width="18" height="18" style={{ color: '#F4024C', strokeWidth: 1.5 }}/>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: '#FFF', marginBottom: 4, letterSpacing: '-0.005em' }}>{c.t}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#96A3B5', lineHeight: 1.5 }}>{c.d}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// SECCIÓN 12 — TRANSFERENCIA
const ManufTransfer = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="11" label="Transferencia de control"/></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' }}>
            La inteligencia operacional se queda en su empresa.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0, maxWidth: 720 }}>
            OMNIX construye, opera y transfiere progresivamente la capacidad cognitiva al equipo interno de la planta. Sin dependencia forzada. Sin lock-in industrial.
          </p>
        </Reveal>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26', marginBottom: 40 }}>
        {[
          { k: 'ASSESSMENT',    dur: '2 – 3 semanas',   f: 'Mapeamos activo, disrupción y sistemas', o: 90, c: 10 },
          { k: 'PILOTO',        dur: '8 – 12 semanas',   f: 'Un caso vivo · un activo · una línea',    o: 70, c: 30 },
          { k: 'ESCALAMIENTO',  dur: '3 – 6 meses',      f: 'Casos adicionales + certificación',        o: 45, c: 55 },
          { k: 'TRANSFERENCIA', dur: 'Cuando digas',     f: 'Autonomía del equipo interno',              o: 15, c: 85 },
        ].map((p, i) => (
          <Reveal key={p.k} delay={i * 100}>
            <div style={{
              padding: '28px 24px', borderRight: (i < 3) ? '1px solid #E4EBF3' : 'none',
              minHeight: 280, display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5' }}>FASE 0{i+1}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C' }}>{p.dur}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#F4024C' }}>{p.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: '#1E1F26', lineHeight: 1.4 }}>{p.f}</div>
              <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid #E4EBF3' }}>
                <div style={{ display: 'flex', height: 8, background: '#F2F5F9', marginBottom: 8 }}>
                  <div style={{ width: `${p.o}%`, background: '#F4024C' }}/>
                  <div style={{ width: `${p.c}%`, background: '#0050BD' }}/>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#52557A' }}>
                  <span><span style={{ color: '#F4024C' }}>■</span> OMNIX {p.o}%</span>
                  <span><span style={{ color: '#0050BD' }}>■</span> PLANT {p.c}%</span>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        {/* Qué se transfiere */}
        <div style={{ padding: 32, background: '#FAFBFD', border: '1.5px solid #1E1F26' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>QUÉ SE TRANSFIERE</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {[
              'Documentación · arquitectura',
              'Runbooks operacionales',
              'Reglas y umbrales',
              'Protocolos de monitoreo',
              'Gobierno del modelo',
              'Procesos de reentrenamiento',
              'Gestión de excepciones',
              'Criterios de escalamiento',
              'Roles y responsabilidades',
              'Procedimientos de operación',
              'KPIs y matrices',
              'Plan de continuidad',
            ].map((it) => (
              <div key={it} style={{
                padding: '10px 12px', background: '#FFF', border: '1px solid #E4EBF3',
                display: 'flex', gap: 8, alignItems: 'center',
              }}>
                <i data-lucide="check" width="12" height="12" style={{ color: '#0F5132', strokeWidth: 2 }}/>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26' }}>{it}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Roles sugeridos */}
        <div style={{ padding: 32, background: '#000', color: '#FFF', border: '1.5px solid #000' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>ROLES QUE DEBEN ASIGNARSE</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {[
              'Manufacturing Cognitive Architect',
              'Cognitive Operations Engineer',
              'OT Integration Lead',
              'Model Governance Owner',
              'Process Owner',
              'Maintenance Owner',
              'Quality Owner',
              'Plant Operations Owner',
            ].map((r) => (
              <div key={r} style={{
                padding: '10px 12px', background: '#0A0B10', border: '1px solid #2E3140',
                fontFamily: 'var(--font-mono)', fontSize: 11, color: '#FFF', letterSpacing: '-0.005em',
              }}>{r}</div>
            ))}
          </div>
          <div style={{ marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', letterSpacing: '0.06em' }}>
            No son obligatorios · son responsabilidades que deben asignarse a personas del cliente.
          </div>
        </div>
      </div>
      <div style={{ marginTop: 20 }}>
        <Button variant="ghost" icon="arrow-right" href="transferencia.html">Ver modelo de transferencia completo</Button>
      </div>
    </Container>
  </section>
);

// SECCIÓN 13 — PRUEBA
const ManufProof = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="12" label="Prueba · KPIs · caso"/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 40px', color: '#000', maxWidth: 900 }}>
          Estos son los KPIs que una planta debe medir.
        </h2>
      </Reveal>

      {/* KPI grid — indicadores industriales */}
      <div style={{ marginBottom: 72 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 20 }}>
          Métricas objetivo · pre-implementación firmadas por finanzas y operaciones
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0,
          border: '1.5px solid #1E1F26', background: '#FFF',
        }}>
          {[
            { k: 'OEE',                     d: 'compuesto' },
            { k: 'DISPONIBILIDAD',          d: 'por activo · turno' },
            { k: 'PERFORMANCE RATE',        d: 'velocidad real vs plan' },
            { k: 'QUALITY RATE',            d: 'first-pass yield' },
            { k: 'DOWNTIME NO PLANIF.',     d: 'horas · turno · activo' },
            { k: 'MTBF',                    d: 'meantime between failures' },
            { k: 'MTTR',                    d: 'meantime to repair' },
            { k: 'MICROPARADAS',            d: 'freq · duración' },
            { k: 'SCRAP',                   d: '% producción' },
            { k: 'RETRABAJO',                d: 'horas · costo' },
            { k: 'THROUGHPUT',              d: 'unidades · turno' },
            { k: 'CUMPLIMIENTO PLAN',       d: 'schedule adherence' },
            { k: 'TIEMPO DE CAMBIO',        d: 'SMED effectiveness' },
            { k: 'COSTO MANTENIMIENTO',     d: 'preventivo vs reactivo' },
            { k: 'kWh / UNIDAD',            d: 'eficiencia energética' },
            { k: 'PARADAS EVITADAS',         d: '# · valor recuperado' },
            { k: 'TIEMPO ALERTA → ACCIÓN',   d: 'lag operativo' },
            { k: 'DECISIONES AUTOM.',        d: '% sobre volumen' },
          ].map((k, i, arr) => (
            <div key={k.k} style={{
              padding: '16px 14px',
              borderRight: (i % 6 !== 5) ? '1px solid #E4EBF3' : 'none',
              borderBottom: (i < 12) ? '1px solid #E4EBF3' : 'none',
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#F4024C', marginBottom: 4 }}>{String(i+1).padStart(2, '0')}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, color: '#000', letterSpacing: '-0.005em', marginBottom: 3, lineHeight: 1.2 }}>{k.k}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: '#52557A' }}>{k.d}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Case template */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 24 }}>
        <div style={{ padding: 32, background: '#000', color: '#FFF', border: '1.5px solid #000' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>ESTRUCTURA · CASO INDUSTRIAL <span style={{ color: '#B8860B' }}>[VALIDAR]</span></div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, letterSpacing: '-0.02em', color: '#FFF', margin: '0 0 16px', lineHeight: 1.15 }}>
            Planta multi-línea · discreta <span style={{ color: '#B8860B' }}>[VALIDAR CLIENTE]</span>
          </h3>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 15, lineHeight: 1.55, color: '#96A3B5', margin: '0 0 20px' }}>
            "Antes cada alarma de activo crítico requería 4 llamadas y una reunión ad-hoc. Ahora la respuesta se coordina automáticamente dentro de umbrales que nosotros aprobamos." <span style={{ color: '#B8860B' }}>[VALIDAR TESTIMONIO]</span>
          </p>
          <div style={{ borderTop: '1px solid #2E3140', paddingTop: 16, display: 'flex', gap: 24, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase' }}>SECTOR</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#FFF' }}>Automotive · discreta</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase' }}>DEPLOY</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: '#FFF' }}>On-prem · 3 plantas</div>
            </div>
          </div>
        </div>

        <div style={{ padding: 32, background: '#FFF', border: '1.5px solid #E4EBF3' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 20 }}>ESTRUCTURA DEL CASO</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            {[
              { l: 'CONTEXTO',           d: 'Planta discreta · 3 líneas · 200+ activos' },
              { l: 'DISRUPCIÓN',          d: 'Fallas de activos críticos durante órdenes prioritarias' },
              { l: 'SITUACIÓN ANTERIOR',  d: 'Coordinación manual entre 4 áreas y 6 sistemas' },
              { l: 'SISTEMAS CONECTADOS', d: 'SCADA · MES · ERP · CMMS · QMS · APS' },
              { l: 'SDM UTILIZADO',       d: 'mfg-asset-v3.7 (bearing/quality/scheduling)' },
              { l: 'DECISIONES COORD.',   d: 'Mantenimiento + producción + calidad' },
              { l: 'RESULTADO',           d: '+X% OEE · −Y% downtime [VALIDAR MÉTRICA]' },
              { l: 'TIEMPO IMPLEMENT.',    d: '[VALIDAR PLAZO] semanas · piloto a producción' },
            ].map((c) => (
              <div key={c.l}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>{c.l}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.4 }}>{c.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ marginTop: 20, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#B8860B', letterSpacing: '0.06em' }}>
        * Todas las métricas cuantitativas, cliente y testimonio marcados como [VALIDAR] deben confirmarse con auditor antes de publicación pública.
      </div>
    </Container>
  </section>
);

// SECCIÓN 14 — PLAN SIMPLE
const ManufPlan = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="13" label="Plan simple"/></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 pasos · un activo · una decisión · un resultado.
        </h2>
      </Reveal>
      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', top: 32, left: '5%', right: '5%', height: 1.5, background: '#E4EBF3' }}/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, position: 'relative' }}>
          {[
            { n: '01', t: 'Identificamos una decisión industrial de alto impacto', d: 'Una disrupción operacional específica: activo crítico, calidad, secuencia, energía.', dur: '2 sem', ent: 'Mapa de decisión', resp: 'OMNIX · Plant Ops' },
            { n: '02', t: 'Conectamos señales, reglas y sistemas necesarios',       d: 'Adapters IT/OT según arquitectura. Reglas del cliente. Sin reemplazo de sistemas.',    dur: '3 – 4 sem', ent: 'Piloto conectado', resp: 'OT · IT · OMNIX' },
            { n: '03', t: 'Desplegamos piloto productivo con autonomía controlada', d: 'SDM entrenado. Runtime en modo asistido. Governance Board activo desde día 1.',   dur: '8 – 12 sem', ent: '1 caso vivo · métrica base', resp: 'OMNIX + equipo' },
            { n: '04', t: 'Escalamos y transferimos la capacidad',                  d: 'Nuevos casos. Autonomía escalonada. Certificación interna. Handover contractual.', dur: '3 – 6 meses', ent: 'Equipo autónomo', resp: 'Cliente' },
          ].map((s, i) => (
            <SlideIn key={s.n} direction="up" delay={i * 120}>
              <div style={{ padding: '0 12px' }}>
                <div style={{
                  width: 64, height: 64, background: i === 3 ? '#F4024C' : '#FFF',
                  border: '1.5px solid #1E1F26',
                  borderColor: i === 3 ? '#F4024C' : '#1E1F26',
                  borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, letterSpacing: '0.05em',
                  color: i === 3 ? '#FFF' : '#1E1F26', marginBottom: 24, position: 'relative', zIndex: 1,
                }}>{s.n}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 6 }}>{s.dur}</div>
                <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.015em', color: '#000', margin: '0 0 8px', lineHeight: 1.2 }}>
                  {s.t}
                </h4>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.5, color: '#52557A', margin: '0 0 12px' }}>
                  {s.d}
                </p>
                <div style={{ paddingTop: 10, borderTop: '1px solid #E4EBF3' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', marginBottom: 3 }}>ENTREGABLE</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', marginBottom: 6 }}>{s.ent}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', marginBottom: 3 }}>RESPONSABLE</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26' }}>{s.resp}</div>
                </div>
              </div>
            </SlideIn>
          ))}
        </div>
        <div style={{ marginTop: 20, fontFamily: 'var(--font-mono)', fontSize: 11, color: '#B8860B', letterSpacing: '0.06em' }}>
          * Plazos referenciales. Configuración final depende del alcance, sistemas involucrados y gobierno del cliente. [VALIDAR PLAZO].
        </div>
      </div>
    </Container>
  </section>
);

// SECCIÓN 15 — CTA FINAL
const ManufFinalCTA = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128, position: 'relative', overflow: 'hidden' }}>
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: 0.4 }} viewBox="0 0 1440 700" preserveAspectRatio="none">
      <g stroke="#F4024C" strokeWidth="1" fill="none" opacity="0.35">
        <path d="M 0 200 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 200 Q 1040 350 720 350" className="omnix-flow-dash"/>
        <path d="M 0 500 Q 400 350 720 350" className="omnix-flow-dash"/>
        <path d="M 1440 500 Q 1040 350 720 350" className="omnix-flow-dash"/>
      </g>
      <circle cx="720" cy="350" r="6" fill="#F4024C"/>
      <circle cx="720" cy="350" r="24" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.4"/>
    </svg>

    <Container narrow>
      <div style={{ textAlign: 'center', position: 'relative' }}>
        <Reveal>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 24 }}>
            — Identifique qué decisiones industriales puede automatizar primero —
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 72, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#FFF' }}>
            De señales a decisiones ejecutadas.
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', maxWidth: 720, margin: '0 auto 36px' }}>
            Comenzamos con una línea, una disrupción y un resultado medible. Sin reemplazar su arquitectura actual.
          </p>
        </Reveal>
        <Reveal delay={220}>
          <div style={{ display: 'inline-flex', gap: 12, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
            <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar diagnóstico de Manufactura</Button>
          </div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ marginTop: 56, paddingTop: 28, borderTop: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase' }}>
            30 minutos · sin propuesta estándar · NDA upfront · segregación IT/OT desde día 1
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// OBJECTIONS — 20 objeciones industriales
const ManufObjections = () => {
  const items = [
    { q: 'Ya tenemos mantenimiento predictivo.',
      a: 'El mantenimiento predictivo estima una falla. OMNIX decide qué hacer con esa estimación y coordina la respuesta con producción, calidad y planificación. Predicción sin decisión no protege la operación.' },
    { q: 'Ya tenemos SCADA.',
      a: 'SCADA detecta y controla variables. OMNIX interpreta el impacto operacional de esa señal y coordina una respuesta entre CMMS, MES, ERP y QMS. SCADA sigue como fuente de verdad de campo.' },
    { q: 'Nuestro MES ya genera alertas.',
      a: 'El MES registra y notifica. OMNIX decide entre alternativas y coordina la acción cross-sistema. Además, prioriza alertas por impacto real sobre el plan.' },
    { q: 'El CMMS ya administra órdenes.',
      a: 'El CMMS ejecuta órdenes. OMNIX determina cuándo, por qué, con qué prioridad y con qué contexto crear o modificar esas órdenes — automáticamente.' },
    { q: 'No queremos reemplazar nuestros sistemas.',
      a: 'No los reemplazamos. Nos integramos mediante los conectores y APIs disponibles en su arquitectura. La operación diaria sigue en SCADA, MES, ERP, CMMS y QMS. OMNIX opera sobre ellos, no en su lugar.' },
    { q: 'Los datos de planta no están estandarizados.',
      a: 'No los necesitamos perfectos. OMNIX Ingest normaliza, imputa faltantes documentados y flagea datos sucios. El SDM aprende de la operación real — con sus imperfecciones.' },
    { q: 'IT y OT no pueden conectarse libremente.',
      a: 'Correcto. OMNIX opera con segregación IT/OT explícita, DMZ industrial y flujos unidireccionales según su modelo. OT permanece en modo read-only por defecto.' },
    { q: 'No podemos permitir que una IA controle directamente un activo.',
      a: 'OMNIX no envía comandos directos al PLC. Las acciones se ejecutan vía sistemas IT (CMMS, MES, APS). El control físico sigue en manos del operador y del PLC.' },
    { q: 'La calidad requiere aprobación humana.',
      a: 'Correcto. Por defecto, calidad opera en N2 – N3: recomendación con approval flow. Sólo las inspecciones y retenciones dentro de reglas aprobadas por QA pueden autoejecutarse.' },
    { q: 'Cada planta opera de forma diferente.',
      a: 'Por diseño. Cada planta entrena su propio SDM con sus datos, reglas y knowledge. La plataforma es la misma, la cognición es específica de esa operación.' },
    { q: 'Dependemos demasiado del conocimiento de algunos expertos.',
      a: 'Ese es exactamente el caso 12 de nuestros dominios: capturar decisiones históricas, notas y feedback experto para convertirlas en reglas del SDM. El conocimiento operacional queda dentro de la empresa.' },
    { q: 'Esto parece otro piloto de IA.',
      a: 'No es un POC de laboratorio. 8 – 12 semanas hasta primer caso vivo en producción. Si al final del piloto no hay ROI demostrable, no hay escalamiento.' },
    { q: '¿Cómo se calcula el ROI?',
      a: 'En los mismos KPIs que ya mide: OEE, downtime no planificado, MTBF, MTTR, scrap, cumplimiento del plan, kWh/unidad. Baseline pre-implementación firmado por finanzas y operaciones.' },
    { q: '¿Qué ocurre cuando el modelo no reconoce una condición?',
      a: 'Cuando el confidence cae bajo umbral definido, o aparecen features fuera de distribución, el SDM escala automáticamente a humano. En modo air-gapped, kill switch disponible desde comando único.' },
    { q: '¿Cómo se revierte una decisión equivocada?',
      a: 'Rollback en < 5 minutos a cualquier versión histórica del modelo. Cada decisión con logs firmados. La versión anterior sigue en canary para comparación durante 30 días.' },
    { q: '¿Quién es responsable de la decisión?',
      a: 'Depende del nivel de autonomía y de la política. En N3 – N4, el responsable operativo firma la política ex-ante; cada acción queda con approval trail. En N5, human-in-the-loop obligatorio.' },
    { q: '¿Cómo se protege nuestra propiedad intelectual?',
      a: 'Recetas, parámetros y know-how anonimizados en el entrenamiento del SDM. Modelo vive en su VPC / on-prem. Cero llamadas a APIs externas. Cero telemetría cross-tenant.' },
    { q: 'No queremos dependencia permanente de OMNIX.',
      a: 'La transferencia de control es parte del contrato — no una promesa. Al cierre del programa entregamos código, modelos, gobernanza y runbooks. Su equipo interno opera sin nosotros. Sin cláusula de reversibilidad.' },
    { q: 'Ya usamos SAP, Siemens, Rockwell, AVEVA, Oracle u otras plataformas.',
      a: 'OMNIX no compite con ellos. Se integra mediante los conectores y APIs disponibles. La compatibilidad con proveedores específicos se valida durante el assessment. [VALIDAR].' },
    { q: 'No podemos detener la línea para implementar.',
      a: 'El piloto comienza en modo asistido (N2 – N3) con recomendaciones sombra durante 2 – 4 semanas antes de tomar acciones. La línea no se detiene · el SDM aprende sobre operación real en curso.' },
  ];
  const [openIdx, setOpenIdx] = 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="14" label="Objeciones · comité de compra industrial"/></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 }}>
            Veinte preguntas que un comité industrial hará.
          </h2>
        </Reveal>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: (i < items.length - 1) ? '1px solid #E4EBF3' : 'none' }}>
              <button onClick={() => setOpenIdx(openIdx === i ? -1 : i)} style={{
                width: '100%', border: 'none', background: 'transparent', textAlign: 'left', cursor: 'pointer',
                padding: '18px 28px', display: 'grid', gridTemplateColumns: '52px 1fr auto', gap: 20, alignItems: 'center',
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C' }}>Q · {String(i+1).padStart(2, '0')}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em', color: '#000', lineHeight: 1.3 }}>{it.q}</span>
                <span style={{ color: '#1E1F26', transition: 'transform 280ms', transform: openIdx === i ? 'rotate(45deg)' : 'rotate(0deg)' }}>
                  <i data-lucide="plus" width="18" height="18"></i>
                </span>
              </button>
              <div style={{ maxHeight: openIdx === i ? 260 : 0, overflow: 'hidden', transition: 'max-height 380ms cubic-bezier(0.2,0.7,0.2,1)' }}>
                <div style={{ padding: '0 28px 24px 28px', display: 'grid', gridTemplateColumns: '52px 1fr', gap: 20 }}>
                  <div/>
                  <p style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.6, color: '#1E1F26', margin: 0, maxWidth: 900 }}>{it.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { ManufAutonomy, ManufSecurity, ManufTransfer, ManufProof, ManufPlan, ManufFinalCTA, ManufObjections });
