// LOGÍSTICA — Secciones 9-14: autonomía · seguridad · transferencia · prueba (−72% [VALIDAR]) · plan · CTA · 22 objeciones

const LogAutonomy = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="08" label="Autonomía y control"/></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 perder el control de la red.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              Decisiones de alto costo, riesgo o impacto comercial mantienen aprobación humana. Decisiones recurrentes dentro de límites definidos pueden ejecutarse automáticamente.
            </p>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
            {[
              { n: 'N1', t: 'Monitoreo',                r: 'Detecta y clasifica la excepción' },
              { n: 'N2', t: 'Recomendación',             r: 'Propone alternativas explicables' },
              { n: 'N3', t: 'Ejecución asistida',        r: 'Prepara cambios · espera aprobación' },
              { n: 'N4', t: 'Ejecución automática',       r: 'Decisiones recurrentes dentro de límites' },
              { n: 'N5', t: 'Decisión compleja gobernada',r: 'Coordinación · aprobación en umbrales' },
            ].map((l, i, arr) => (
              <div key={l.n} style={{
                display: 'grid', gridTemplateColumns: '48px 1fr 200px', 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">LOGÍSTICA DEFAULT</Badge>}
              </div>
            ))}
          </div>
        </Reveal>
      </div>

      <div style={{ marginTop: 72, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
        {[
          { i: 'dollar-sign', t: 'Límites de costo',        d: 'Umbrales por caso · escalar sobre costo incremental' },
          { i: 'user',         t: 'Límites por cliente',    d: 'Casos con clientes enterprise → aprobación humana' },
          { i: 'globe',         t: 'Límites por país',       d: 'Reglas locales · comercio exterior · restricciones' },
          { i: 'package',       t: 'Límites por producto',   d: 'Cadena de frío · peligrosos · alto valor' },
          { i: 'file-text',     t: 'Logs · evidencia',       d: 'WORM · 10 años · reproducible por caso' },
        ].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>
);

const LogSecurity = () => (
  <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="09" label="Seguridad y 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' }}>
              Contratos, precios y datos de clientes nunca salen del perímetro.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#96A3B5', margin: '0 0 32px', maxWidth: 500 }}>
              Costos negociados con carriers, márgenes por cliente, historial de compras y datos personales son activos comerciales sensibles. OMNIX opera dentro de tu VPC / on-prem. Sin telemetría cross-tenant.
            </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
            </div>
            {[
              { i: 'shield',      t: 'Despliegue VPC / on-prem',           d: 'La cognición vive dentro de tu perímetro autorizado' },
              { i: 'lock',        t: 'Segregación por tenant',              d: 'Ningún dato cruza perímetros de otros clientes' },
              { i: 'users',       t: 'Acceso basado en roles',              d: 'Segregación planning · transporte · comercial · CX · audit' },
              { i: 'file-search', t: 'Trazabilidad por decisión',           d: 'Fundamento · features · políticas registradas' },
              { i: 'file-lock-2', t: 'Protección información comercial',    d: 'Precios · costos · contratos anonimizados en entrenamiento' },
              { i: 'git-compare', t: 'Governance del modelo',                d: 'Approval flows · versioning · rollback' },
              { i: 'user-check',  t: 'Aprobación humana en umbrales',        d: 'Costo · cliente · país · producto según política' },
              { i: 'alert-triangle', t: 'Certificaciones',                    d: 'GDPR · LGPD · sectoriales · [VALIDAR CERTIFICACIÓN]' },
            ].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>
);

const LogTransfer = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="10" 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 de su red permanece en su empresa.
          </h2>
        </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 red, disrupción y sistemas', o: 90, c: 10 },
          { k: 'PILOTO',        dur: '8 – 12 semanas', f: 'Un caso vivo · nodo o corredor',       o: 70, c: 30 },
          { k: 'ESCALAMIENTO',  dur: '3 – 6 meses',    f: 'Nuevos dominios · 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> CLIENT {p.c}%</span>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
      <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: 'repeat(4, 1fr)', gap: 8 }}>
          {[
            'Documentación',
            'Arquitectura',
            'Reglas de servicio',
            'Runbooks',
            'Matrices de prioridad',
            'Políticas de reruteo',
            'Límites de autonomía',
            'Governance del modelo',
            'Protocolos de monitoreo',
            'Criterios reentrenamiento',
            'Gestión de excepciones',
            'Roles y KPIs',
          ].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>
      <div style={{ marginTop: 20 }}>
        <Button variant="ghost" icon="arrow-right" href="transferencia.html">Ver modelo de transferencia completo</Button>
      </div>
    </Container>
  </section>
);

// SECCIÓN 12 · PRUEBA (−72% con [VALIDAR])
const LogProof = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="11" 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 }}>
          KPIs que una red logística debe medir.
        </h2>
      </Reveal>

      {/* KPI grid */}
      <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 operaciones y finanzas
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0,
          border: '1.5px solid #1E1F26', background: '#FFF',
        }}>
          {[
            { k: 'TIEMPO RESPUESTA',      d: 'signal → acción' },
            { k: 'OTIF',                    d: 'on-time · in-full' },
            { k: 'CUMPLIMIENTO PROMESA',    d: '% dentro de ventana' },
            { k: 'FILL RATE',               d: '% orden completada' },
            { k: 'PERFECT ORDER',           d: 'compuesto multi-KPI' },
            { k: 'TRANSIT TIME',            d: 'origen · destino' },
            { k: 'LEAD TIME',               d: 'end-to-end' },
            { k: 'DWELL TIME',              d: 'nodo · muelle' },
            { k: 'COSTO POR ORDEN',         d: '$ · variabilidad' },
            { k: 'COSTO POR ENVÍO',         d: '$ · por modo' },
            { k: 'TRANSPORTE EXPEDITO',     d: '% del total' },
            { k: 'UTILIZACIÓN CAPACIDAD',   d: 'flota · nodos' },
            { k: 'PEDIDOS EN RIESGO',        d: 'live · shift' },
            { k: 'ENTREGAS REPROG.',          d: '# · costo' },
            { k: 'CANCELACIONES EVITADAS',   d: '# · valor' },
            { k: 'TIEMPO REROUTEO',          d: 'signal → confirm' },
            { k: 'EXCEPCIONES RESUELTAS',    d: '# · SLA' },
            { k: 'DECISIONES AUTOM.',         d: '% del 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 con −72% [VALIDAR] */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 24 }}>
        <div style={{ padding: 40, background: '#000', color: '#FFF', border: '1.5px solid #000' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 16 }}>CLAIM · REFERENCIA</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 72, letterSpacing: '-0.035em', color: '#F4024C', margin: '0 0 8px', lineHeight: 1 }}>
            −72%<span style={{ fontSize: 22, color: '#96A3B5', marginLeft: 6 }}>*</span>
          </h3>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: '#FFF', marginBottom: 24, textTransform: 'uppercase' }}>Tiempo de respuesta</div>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 15, lineHeight: 1.55, color: '#96A3B5', margin: '0 0 20px' }}>
            "El equipo dejó de reunirse ad-hoc por cada disrupción. Las respuestas coordinadas ocurren dentro de umbrales que nosotros aprobamos." <span style={{ color: '#B8860B' }}>[VALIDAR TESTIMONIO]</span>
          </p>
          <div style={{ padding: 16, background: '#0A0B10', border: '1px solid #B8860B', marginTop: 20 }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 8 }}>* Requerido validar antes de publicar</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', lineHeight: 1.7 }}>
              [VALIDAR CASO]<br/>
              [VALIDAR CLIENTE]<br/>
              [VALIDAR MÉTRICA]<br/>
              [VALIDAR PERIODO]<br/>
              [VALIDAR METODOLOGÍA]<br/>
              [VALIDAR DEFINICIÓN DE TIEMPO DE RESPUESTA]<br/>
              [VALIDAR BASE DE COMPARACIÓN]<br/>
              [VALIDAR TESTIMONIO]
            </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: 'Distribuidor B2B multi-país' },
              { l: 'RED',                   d: 'X nodos · Y países · [VALIDAR]' },
              { l: 'PROBLEMA',              d: 'Disrupciones frecuentes con coord. manual' },
              { l: 'SITUACIÓN ANTERIOR',    d: 'Reuniones ad-hoc · reactividad' },
              { l: 'SISTEMAS CONECTADOS',   d: 'WMS · TMS · OMS · ERP · carriers' },
              { l: 'DECISIONES AUTOM.',      d: 'Reruteo · priorización · reasignación' },
              { l: 'RESULTADO',             d: '−72% tiempo respuesta · [VALIDAR]' },
              { l: 'PERIODO',                d: '[VALIDAR PERIODO]' },
              { l: 'ALCANCE',                d: '[VALIDAR ALCANCE]' },
              { l: 'DEFINICIÓN',              d: '[VALIDAR DEFINICIÓN DE MÉTRICA]' },
            ].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' }}>
        * Cifra asociada a un caso específico. Requiere validación por auditor independiente antes de uso público. No presentar como resultado universal.
      </div>
    </Container>
  </section>
);

// SECCIÓN 13 · PLAN
const LogPlan = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="12" 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 · una red · una disrupción · un resultado medible.
        </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 disrupción de alto impacto',   d: 'Cierre de ruta · pérdida de capacidad · restricción portuaria · disrupción de carrier.',   dur: '2 sem',      ent: 'Mapa de decisión',            resp: 'OMNIX · Logistics',    kpi: 'Casos priorizados' },
            { n: '02', t: 'Conectamos órdenes · inventario · transporte',    d: 'Adapters a WMS · TMS · OMS · ERP · carrier portals. Reglas del cliente. Sin migración.',    dur: '3 – 4 sem',   ent: 'Piloto conectado',            resp: 'IT · OMNIX',            kpi: 'Latencia · calidad datos' },
            { n: '03', t: 'Desplegamos piloto productivo controlado',        d: 'SDM entrenado sobre operación real. Runtime en N2-N3. Governance Board activo desde día 1.', dur: '8 – 12 sem',  ent: '1 caso vivo · métrica base',   resp: 'OMNIX + equipo',        kpi: 'OTIF · tiempo respuesta' },
            { n: '04', t: 'Escalamos y transferimos capacidad',              d: 'Nuevos dominios · autonomía escalonada · certificación · handover contractual.',            dur: '3 – 6 meses', ent: 'Equipo autónomo',              resp: 'Cliente',                kpi: 'Autonomía · continuidad' },
          ].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: 17, letterSpacing: '-0.015em', color: '#000', margin: '0 0 8px', lineHeight: 1.2 }}>{s.t}</h4>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, 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 }}>KPI</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#F4024C' }}>{s.kpi}</div>
                </div>
              </div>
            </SlideIn>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

const LogFinalCTA = () => (
  <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 logísticas 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 disrupciones a respuestas 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 red, 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 logístico</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 min · sin propuesta estándar · NDA upfront · integración vía APIs autorizadas
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// 22 OBJECIONES
const LogObjections = () => {
  const items = [
    { q: 'Ya tenemos TMS.',                                                a: 'El TMS planifica y administra transporte. OMNIX evalúa el impacto transversal · coordina decisiones entre transporte, pedidos, inventario y clientes cuando el TMS por diseño no lo hace.' },
    { q: 'Ya tenemos WMS.',                                                a: 'El WMS administra inventario y ejecución de almacén. OMNIX decide cómo reasignar inventario ante una disrupción y coordina con TMS, OMS y ERP.' },
    { q: 'Tenemos una torre de control.',                                  a: 'La torre muestra la situación. OMNIX coordina la respuesta y la ejecuta. La torre puede seguir siendo la vista principal · OMNIX opera detrás.' },
    { q: 'Nuestro OMS ya prioriza órdenes.',                                a: 'El OMS aplica reglas fijas de priorización. OMNIX incorpora SLA en tiempo real, valor del cliente, riesgo comercial e impacto agregado para priorizar por caso.' },
    { q: 'Ya usamos un optimizador de rutas.',                              a: 'El optimizador encuentra una ruta. OMNIX decide si esa ruta es la mejor considerando SLA, inventario, costo, prioridad de cliente y riesgo de la red.' },
    { q: 'No queremos reemplazar sistemas.',                                a: 'No los reemplazamos. Nos integramos mediante los conectores y APIs disponibles en su arquitectura. WMS/TMS/OMS/ERP siguen operando · OMNIX opera sobre ellos.' },
    { q: 'Cada país opera de forma distinta.',                              a: 'El SDM se entrena por red · no globalmente. Reglas locales de comercio exterior, aduana y proveedores se configuran por país. La plataforma es común · la cognición es específica.' },
    { q: 'Los datos de transportistas llegan tarde.',                        a: 'OMNIX opera con lo mejor disponible · marca datos de baja calidad como incertidumbre y escalar al humano cuando la confianza cae bajo umbral. Latencia de datos no bloquea decisión.' },
    { q: 'No podemos automatizar cambios con impacto comercial.',            a: 'Correcto. Cambios que afectan cliente, contrato o costo superan umbrales configurables · siempre requieren aprobación humana. N4 sólo para decisiones recurrentes de bajo impacto.' },
    { q: 'El costo de una ruta cambia constantemente.',                      a: 'OMNIX se integra a cost tables dinámicas de sus contratos con carriers. Cost score se recalcula por caso · las decisiones consideran costo actual, no estático.' },
    { q: 'Tenemos demasiados operadores externos.',                          a: 'Ese es exactamente el escenario ideal. Cuantos más operadores, más valor agrega una capa de orquestación común que evalúa alternativas en segundos.' },
    { q: 'Nuestros datos no están estandarizados.',                          a: 'No los necesitamos perfectos. OMNIX Ingest normaliza, imputa faltantes documentadamente y flagea datos sucios. El SDM aprende sobre operación real con sus imperfecciones.' },
    { q: 'Esto parece otro dashboard.',                                     a: 'No es un dashboard. Es una plataforma que decide y ejecuta. La visibilidad sigue en su torre de control. OMNIX opera sobre los sistemas · no en la pantalla.' },
    { q: 'Esto parece un proyecto de integración.',                          a: 'La integración se valida en el assessment de 2-3 semanas antes de cualquier compromiso. Si los conectores no están viables, no avanzamos.' },
    { q: '¿Cómo se calcula el ROI?',                                         a: 'Con los KPIs que ya mide: OTIF, cumplimiento de promesa, transporte expedito evitado, tiempo de respuesta. Baseline pre-implementación firmado por operaciones y finanzas.' },
    { q: '¿Quién aprueba un reruteo costoso?',                                a: 'Depende del umbral configurado en su política. Costos bajos · N4 automático. Costos altos · Head of Logistics o similar. Contract customers · pueden requerir aprobación comercial.' },
    { q: '¿Qué pasa si OMNIX elige una alternativa incorrecta?',              a: 'Rollback en < 5 min a estado anterior. Cada decisión con logs firmados · explicación · alternativas rechazadas. Governance Board revisa outliers semanalmente.' },
    { q: '¿Cómo se revierten los cambios?',                                    a: 'Cada acción es reversible: OMS undo, WMS unpick, TMS unroute. Rollback atómico coordinado en < 5 min · sin ventana de inconsistencia entre sistemas.' },
    { q: 'No queremos depender de otro proveedor.',                            a: 'La transferencia de control es parte del contrato · no una promesa. Al cierre entregamos código, SDMs, gobernanza y runbooks. Su equipo opera sin nosotros. Sin cláusula de reversibilidad.' },
    { q: 'Nuestra red es demasiado específica.',                                a: 'Por eso el SDM se entrena en su red · no en una genérica. Cuanto más específica la operación, más valor tiene una cognición entrenada específicamente sobre ella.' },
    { q: 'Ya tenemos un equipo de planificación.',                              a: 'El equipo sigue siendo esencial. OMNIX libera capacidad de coordinación manual para que se concentren en planificación estratégica · no en apagar incendios operacionales.' },
    { q: 'No queremos otro piloto de IA.',                                      a: '8 – 12 semanas hasta primer caso vivo en producción. Si al final del piloto no hay ROI demostrable en KPIs firmados por operaciones y finanzas, no hay escalamiento.' },
  ];
  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="13" label="Objeciones · comité de compra logístico"/></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 }}>
            Veintidós preguntas del comité logístico.
          </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: '16px 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: 15, 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 ? 280 : 0, overflow: 'hidden', transition: 'max-height 380ms cubic-bezier(0.2,0.7,0.2,1)' }}>
                <div style={{ padding: '0 28px 22px 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, { LogAutonomy, LogSecurity, LogTransfer, LogProof, LogPlan, LogFinalCTA, LogObjections });
