// TELCO — Cuerpo: 4 capas + casos + TM Forum + vs alternativas + autonomía + seguridad + transferencia + prueba + plan + CTA + objeciones

// SECCIÓN — 4 CAPAS TELCO
const TelcoLayers = () => {
  const layers = [
    { n: '01', k: 'BASE', color: '#0050BD',
      t: 'Fuentes y sistemas del operador.',
      note: 'Integración mediante conectores, APIs y mecanismos autorizados de la arquitectura del cliente. Sin migración forzada.',
      items: ['OSS', 'BSS', 'NMS', 'EMS', 'CRM', 'Billing', 'Ticketing', 'Fault management', 'Performance mgmt', 'Inventory (physical/logical)', 'Config mgmt', 'Provisioning', 'Probes activos', 'Probes pasivos', 'RAN counters', 'Core counters', 'Transport metrics', 'Field mobile apps', 'Contract SLA · MSAs', 'Data lake / DWH', 'APIs internas', 'Streams · Kafka'] },
    { n: '02', k: 'COGNICIÓN PRIVADA', color: '#F4024C',
      t: 'SDM NOC entrenado sobre su red.',
      note: 'Interpreta topología, dependencias, historial de fallas y patrones de correlación específicos del operador.',
      items: ['Topología física', 'Topología lógica', 'Dependencias servicio', 'Historial de fallas', 'Modos de fallo', 'Reglas de correlación', 'Ventanas de mantenimiento', 'Contratos SLA', 'Prioridad clientes', 'Segmentación (consumer/SMB/enterprise)', 'Reglas comerciales', 'Playbooks NOC', 'Runbooks aprobados', 'Decisiones anteriores', 'Casos escalados', 'Políticas de escalamiento'] },
    { n: '03', k: 'ORQUESTACIÓN', color: '#1E1F26',
      t: 'Acciones coordinadas cross-sistema.',
      note: 'Cada acción configurable por dominio, riesgo, cliente, SLA, políticas y nivel de autonomía.',
      items: ['Correlacionar alarmas', 'Deduplicar por causa', 'Priorizar por impacto cliente', 'Sugerir RCA', 'Evaluar alternativas', 'Ejecutar reruteo', 'Ajustar parámetros celda', 'Cambiar routing IP', 'Provisionar workaround', 'Dispatch field service', 'Suspender SLA claims', 'Comunicar cliente enterprise', 'Actualizar ticket', 'Cerrar incidente', 'Registrar RCA', 'Rollback automático'] },
    { n: '04', k: 'IMPACTO', color: '#B00238',
      t: 'KPIs de service assurance y comercial.',
      note: 'Publicación cuantitativa requiere [VALIDAR MÉTRICA] con auditor + metodología firmada por operaciones y comercial.',
      items: ['MTTR', 'MTBF', 'Availability por servicio', 'SLA hard cumplido', 'SLA soft cumplido', 'Alarmas dedupli.', 'Tickets creados', 'Tickets cerrados sin intervención', 'Field dispatch evitado', 'Costo por incidente', 'Costo penalidad evitado', 'ARPU protegido', 'NPS enterprise', 'Churn evitado', 'Alert fatigue score', 'Decisiones automáticas', 'Excepciones escaladas', 'Time-to-detect', 'Time-to-mitigate'] },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="03" label="Cómo funciona OMNIX en Telco"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 56px', color: '#000', maxWidth: 900 }}>
            Cuatro capas · vocabulario de service assurance · integración OSS/BSS.
          </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={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: L.color }}>CAPA {L.n} · {L.k}</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#000', margin: 0, lineHeight: 1.15 }}>{L.t}</h3>
                <p style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.06em', color: '#B8860B', margin: 0, lineHeight: 1.5 }}>* {L.note}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
                  {L.items.map((it) => (
                    <span key={it} style={{
                      padding: '4px 10px', border: `1px solid ${L.color}`, color: L.color,
                      fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em',
                    }}>{it}</span>
                  ))}
                </div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// SECCIÓN — CASOS DE USO
const TelcoUseCases = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="04" label="Casos de uso · Telco"/></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 }}>
          Once dominios de decisión sobre el mismo runtime.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
        {[
          { i: 'radio-tower',    n: 'Correlación de alarmas',           d: 'De miles de alertas a incidentes agrupados por causa. Fin del alert fatigue.',                 kpi: 'Alert reduction · MTTR' },
          { i: 'zap',             n: 'Auto-mitigación cross-sistema',    d: 'Ejecución coordinada NMS/EMS/OSS con approval flow y rollback armado.',                       kpi: 'MTTR · self-healing rate' },
          { i: 'users',           n: 'Priorización por cliente',          d: 'Enterprise/SMB/consumer diferenciados. Contract SLA protegido primero.',                     kpi: 'SLA hard cumplido' },
          { i: 'search',           n: 'RCA asistido',                     d: 'Root cause analysis en minutos · con evidencia trazable · reutilizable en el siguiente caso.', kpi: 'Time-to-RCA' },
          { i: 'trending-down',    n: 'Churn prediction · retención',      d: 'Detección temprana de deterioro de experiencia · acciones proactivas antes del churn.',       kpi: 'Churn evitado' },
          { i: 'wrench',           n: 'Field dispatch inteligente',        d: 'Sólo cuando es necesario · con contexto completo · reduce dispatch innecesarios.',             kpi: 'Field cost · first-time-fix' },
          { i: 'shield-check',     n: 'SLA claim management',              d: 'Suspensión automática de claims cuando la degradación es controlada dentro de umbral.',        kpi: 'Penalidad evitada' },
          { i: 'activity',         n: 'Capacity anomaly detection',         d: 'Anomalías de tráfico · congestión predictiva · anticipación a saturación de celdas.',        kpi: 'Congestión evitada' },
          { i: 'workflow',         n: 'Change management assisted',         d: 'Ventanas de mantenimiento evaluadas por riesgo · impacto en cliente · reversibilidad.',      kpi: 'Change failure rate' },
          { i: 'headset',          n: 'Customer care escalation',           d: 'Tickets del contact center enriquecidos con estado de red · reduce tiempo de resolución.',    kpi: 'AHT · FCR' },
          { i: 'file-search',      n: 'Fraud detection',                   d: 'Patrones anómalos en uso · abuso de servicio · escalamiento a fraud team con evidencia.',    kpi: 'Casos investigados' },
        ].map((c, i) => (
          <SlideIn key={c.n} direction="up" delay={i * 60}>
            <div style={{ padding: '20px 22px', background: '#FFF', border: '1px solid #E4EBF3', display: 'grid', gridTemplateColumns: '40px 1fr', gap: 16 }}>
              <div style={{ width: 40, height: 40, border: '1px solid #F4024C', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide={c.i} width="18" height="18" style={{ color: '#F4024C', strokeWidth: 1.5 }}/>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 4 }}>CASO {String(i+1).padStart(2, '0')}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: '#000', letterSpacing: '-0.005em', marginBottom: 4 }}>{c.n}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#52557A', lineHeight: 1.5, marginBottom: 6 }}>{c.d}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#0F5132', letterSpacing: '0.06em' }}>KPI · {c.kpi}</div>
              </div>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

// ★ SECCIÓN CLAVE — ALINEACIÓN CON TM FORUM (NO MEMBRESÍA · NO CERTIFICACIÓN)
const TelcoTMForum = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="05" label="Alineación con marcos y estándares" dark color="#F4024C"/></Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 24px', color: '#FFF', maxWidth: 980 }}>
          Arquitectura Telco <span style={{ color: '#F4024C' }}>alineada con marcos de TM Forum</span> · sin membresía ni certificación oficial.
        </h2>
      </Reveal>

      {/* Declaración textual obligatoria */}
      <Reveal delay={140}>
        <div style={{ padding: '28px 32px', background: '#0A0B10', border: '1.5px solid #F4024C', marginBottom: 40 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 16 }}>Declaración</div>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.5, color: '#FFF', margin: '0 0 20px' }}>
            OMNIX no es miembro de TM Forum.
          </p>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: '#96A3B5', margin: 0 }}>
            Nuestra arquitectura para telecomunicaciones se diseña tomando como referencia marcos y estándares desarrollados por TM Forum —como <strong style={{ color: '#FFF' }}>eTOM</strong>, <strong style={{ color: '#FFF' }}>SID</strong>, <strong style={{ color: '#FFF' }}>Open Digital Architecture (ODA)</strong> y <strong style={{ color: '#FFF' }}>Open APIs</strong>— cuando resultan aplicables al alcance de cada proyecto. Esta referencia <strong style={{ color: '#FFF' }}>no implica membresía, afiliación, certificación, conformidad oficial ni respaldo</strong> de TM Forum.
          </p>
        </div>
      </Reveal>

      {/* Los 4 marcos como referencia */}
      <div style={{ marginBottom: 40 }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 20 }}>
          Marcos tomados como referencia · cuando aplican
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {[
            { k: 'eTOM',       full: 'Business Process Framework',
              d: 'Marco de procesos de negocio para operadores de telecomunicaciones. OMNIX puede mapear sus flujos operacionales a niveles L1-L4 del framework cuando el proyecto lo requiera.',
              omnix: 'Capacidad de mapear procesos NOC, fulfillment, assurance y billing operations al Business Process Framework.',
              tag: '[VALIDAR MAPEO ETOM]' },
            { k: 'SID',        full: 'Shared Information / Data Model',
              d: 'Modelo de información compartida para el sector telco. OMNIX puede alinear su modelo canónico interno de entidades (customer, service, resource, product) con SID cuando exista este requerimiento.',
              omnix: 'Modelo de información que puede alinearse con SID según entidades y ABEs requeridos por el operador.',
              tag: '[VALIDAR MODELO SID]' },
            { k: 'ODA',        full: 'Open Digital Architecture',
              d: 'Arquitectura de referencia para operadores digitales. OMNIX se diseña con principios modulares consistentes con ODA (componentes independientes, contratos de interfaz, orquestación).',
              omnix: 'Diseño modular inspirado en principios de ODA · componentes de OMNIX pueden mapearse a functional blocks cuando el operador lo requiera.',
              tag: '[VALIDAR COMPONENTE ODA]' },
            { k: 'Open APIs', full: 'TM Forum Open API suite',
              d: 'Conjunto de APIs REST estandarizadas para interoperabilidad entre sistemas de telco. OMNIX puede consumir y exponer estas APIs cuando el ecosistema del operador las soporte.',
              omnix: 'Modelo de integración compatible con arquitecturas basadas en Open APIs · versiones específicas se evalúan por proyecto.',
              tag: '[VALIDAR OPEN API · VALIDAR VERSIÓN]' },
          ].map((f, i) => (
            <SlideIn key={f.k} direction="up" delay={i * 80}>
              <div style={{ padding: '28px 26px', background: '#0A0B10', border: '1px solid #2E3140', minHeight: 320, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 32, letterSpacing: '-0.02em', color: '#F4024C' }}>{f.k}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5' }}>REFERENCIA</span>
                </div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.06em' }}>{f.full}</div>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55, color: '#FFF', margin: 0 }}>{f.d}</p>
                <div style={{ padding: '12px 14px', background: '#000', border: '1px solid #F4024C', marginTop: 'auto' }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 6 }}>Capacidad OMNIX</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#FFF', lineHeight: 1.5 }}>{f.omnix}</div>
                </div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#B8860B', letterSpacing: '0.06em' }}>{f.tag}</div>
              </div>
            </SlideIn>
          ))}
        </div>
      </div>

      {/* Lenguaje aceptado vs prohibido */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div style={{ padding: '24px 26px', background: '#0A0B10', border: '1px solid #0F5132' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#0F5132', textTransform: 'uppercase', marginBottom: 14 }}>Lenguaje que usamos</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              'Arquitectura alineada con principios de TM Forum',
              'Diseñado tomando como referencia eTOM',
              'Modelo de integración compatible con arquitecturas basadas en Open APIs',
              'Capacidad de mapear procesos al Business Process Framework',
              'Modelo de información que puede alinearse con SID',
              'Diseño modular inspirado en principios de ODA',
              'Integraciones evaluadas según APIs y versiones aplicables',
            ].map((s) => (
              <li key={s} style={{ display: 'flex', gap: 10, fontFamily: 'var(--font-body)', fontSize: 12, color: '#FFF', lineHeight: 1.55 }}>
                <i data-lucide="check" width="14" height="14" style={{ color: '#0F5132', strokeWidth: 2, flexShrink: 0, marginTop: 3 }}/>
                <em style={{ fontStyle: 'italic' }}>{s}</em>
              </li>
            ))}
          </ul>
        </div>
        <div style={{ padding: '24px 26px', background: '#0A0B10', border: '1px solid #EA384C' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#EA384C', textTransform: 'uppercase', marginBottom: 14 }}>Lenguaje prohibido</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              'OMNIX es miembro de TM Forum',
              'OMNIX está certificado por TM Forum',
              'OMNIX cumple oficialmente con TM Forum',
              'TM Forum respalda OMNIX',
              'OMNIX es partner de TM Forum',
              'Logos o insignias de miembro · sellos de certificación',
              'Claims de conformidad sin validación formal',
            ].map((s) => (
              <li key={s} style={{ display: 'flex', gap: 10, fontFamily: 'var(--font-body)', fontSize: 12, color: '#96A3B5', lineHeight: 1.55 }}>
                <i data-lucide="x" width="14" height="14" style={{ color: '#EA384C', strokeWidth: 2, flexShrink: 0, marginTop: 3 }}/>
                <span style={{ textDecoration: 'line-through' }}>{s}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div style={{ marginTop: 32, padding: '20px 24px', background: '#0A0B10', border: '1px solid #B8860B', display: 'flex', gap: 16, alignItems: 'center' }}>
        <i data-lucide="alert-triangle" width="20" height="20" style={{ color: '#B8860B', strokeWidth: 1.5, flexShrink: 0 }}/>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.06em', lineHeight: 1.6 }}>
          <strong style={{ color: '#FFF' }}>Toda afirmación queda sujeta a evaluación del proyecto:</strong> [VALIDAR MAPEO ETOM] · [VALIDAR MODELO SID] · [VALIDAR COMPONENTE ODA] · [VALIDAR OPEN API] · [VALIDAR VERSIÓN] · [VALIDAR CONFORMIDAD] · [NO IMPLICA CERTIFICACIÓN]. TM Forum® y sus marcos son marcas de sus titulares. Este sitio no implica endorsement de TM Forum sobre OMNIX.
        </div>
      </div>
    </Container>
  </section>
);

// SECCIÓN — OMNIX vs alternativas Telco
const TelcoVs = () => {
  const rows = [
    { tool: 'NMS / EMS',              solves: 'Monitoreo por dominio',              lacks: 'No correlaciona cross-dominio',           omnix: 'Correlaciona cross-NMS y coordina mitigación' },
    { tool: 'OSS / BSS',              solves: 'Gestión de operaciones y negocio',   lacks: 'No decide en tiempo real',                 omnix: 'Añade capa de razonamiento sobre OSS/BSS existente' },
    { tool: 'Fault management',       solves: 'Alarmas y tickets',                  lacks: 'Alert fatigue · no prioriza por cliente',   omnix: 'Correlaciona, deduplica y prioriza por impacto' },
    { tool: 'Service assurance',      solves: 'Monitorea servicio',                 lacks: 'No ejecuta mitigación coordinada',          omnix: 'Ejecuta mitigación cross-sistema con approval' },
    { tool: 'AIOps genérico',         solves: 'Anomaly detection',                  lacks: 'Modelos generales · no propietarios',       omnix: 'SDM entrenado sobre tu red · con topología real' },
    { tool: 'RPA',                    solves: 'Automatiza tareas',                  lacks: 'No decide sobre casos borde',                omnix: 'Decide · y usa RPA como ejecutor si aplica' },
    { tool: 'BI / dashboards',        solves: 'Muestra métricas',                    lacks: 'No mueve la red',                            omnix: 'Actúa sobre la red · con auditoría' },
    { tool: 'Copiloto LLM',           solves: 'Asiste al operador humano',          lacks: 'Genérico · no razona bajo tus reglas',      omnix: 'SDM propio · determinístico · ejecuta cross-sistema' },
    { tool: 'Workflow / ITSM',        solves: 'Gestión de tickets',                 lacks: 'No razona sobre root cause',                 omnix: 'Enriquece tickets con RCA y contexto de red' },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="06" label="OMNIX vs alternativas Telco"/></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, correlaciona y ejecuta</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 }}>
            OSS, BSS, NMS, EMS, service assurance y fault management siguen operando. OMNIX es la capa cognitiva que los coordina.
          </p>
        </Reveal>
        <div style={{ border: '1.5px solid #1E1F26', background: '#FFF' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1.4fr 1.4fr 1.6fr',
            background: '#000', color: '#FFF', padding: '18px 24px',
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
          }}>
            <div>SISTEMA</div>
            <div style={{ color: '#0F5132' }}>QUÉ RESUELVE</div>
            <div style={{ color: '#96A3B5' }}>QUÉ NO POR SÍ SOLO</div>
            <div style={{ color: '#F4024C' }}>QUÉ AGREGA OMNIX</div>
          </div>
          {rows.map((r, i) => (
            <SlideIn key={r.tool} direction="right" delay={i * 30}>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1.4fr 1.4fr 1.6fr',
                padding: '14px 24px', borderTop: '1px solid #E4EBF3',
                background: i % 2 === 0 ? '#FFF' : '#FAFBFD',
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: '#000' }}>{r.tool}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#1E1F26', lineHeight: 1.4 }}>{r.solves}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#96A3B5', lineHeight: 1.4 }}>{r.lacks}</div>
                <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: '#F4024C', fontWeight: 500, lineHeight: 1.4 }}>{r.omnix}</div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

// CTA final + objeciones
const TelcoCTA = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128, position: 'relative', overflow: 'hidden' }}>
    <Container narrow>
      <div style={{ textAlign: 'center' }}>
        <Reveal>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 24 }}>
            — Convierta alarmas en decisiones ejecutadas —
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 68, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#FFF' }}>
            De 340 alarmas a 1 decisión.
          </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 un dominio, un tipo de incidente y un KPI medible. Sin reemplazar OSS · BSS · NMS · EMS.
          </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 NOC</Button>
            <Button variant="ghost" dark icon="arrow-right" href="ias-propietarias.html">Ver SDMs</Button>
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

const TelcoObjections = () => {
  const items = [
    { q: 'Ya tenemos NMS y EMS.',                              a: 'Siguen operando. OMNIX correlaciona cross-dominio y coordina mitigación · lo que un NMS por diseño no hace.' },
    { q: 'Ya tenemos OSS/BSS.',                                a: 'No los reemplazamos. Nos integramos vía APIs · consumimos su modelo · añadimos razonamiento en tiempo real.' },
    { q: 'Ya tenemos service assurance / AIOps genérico.',      a: 'AIOps genérico detecta anomalías. OMNIX razona con topología, dependencias y contratos SLA de tu operación específica.' },
    { q: '¿Cumplen con TM Forum?',                              a: 'No somos miembros ni estamos certificados. Diseñamos alineados con eTOM, SID, ODA y Open APIs cuando aplica al proyecto. Ver sección de alineación arriba.' },
    { q: 'No podemos automatizar cambios en la red.',           a: 'Correcto por defecto. N4 (auto) sólo para cambios recurrentes de bajo impacto con umbrales aprobados. Todo lo demás requiere approval humano.' },
    { q: '¿Qué pasa si OMNIX ejecuta mal un reruteo?',           a: 'Rollback armado antes de ejecutar. Reversión en < 60s. Cada decisión con evidencia trazable · Governance Board revisa outliers.' },
    { q: 'Tenemos multi-vendor · muchas versiones.',             a: 'El SDM aprende sobre esa heterogeneidad. Adapters por vendor · versión específica se valida por proyecto.' },
    { q: '¿Cómo protegen datos de suscriptores?',                a: 'Segregación por tenant · anonimización · sin telemetría cross-cliente · despliegue VPC/on-prem según requiera el operador.' },
    { q: '¿Cuánto tiempo para ver ROI?',                        a: '8-12 semanas hasta primer caso vivo. KPIs firmados por operaciones antes de escalar. Si no hay ROI en piloto, no hay escalamiento.' },
    { q: 'No queremos otro vendor lock-in.',                     a: 'La transferencia es parte del contrato · no una promesa. Al cierre: código, SDMs, gobernanza y runbooks quedan en el operador.' },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="07" label="Objeciones · comité de compra telco"/></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 }}>
            Diez preguntas del comité NOC · operaciones · CTO · CIO.
          </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={{ 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 ? 240 : 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, { TelcoLayers, TelcoUseCases, TelcoTMForum, TelcoVs, TelcoCTA, TelcoObjections });
