// OPERACIONES CRÍTICAS · categoría transversal · Hero + AEO + Encaje + Problema + Video 90s
// StoryBrand: organización crítica es el héroe · OMNIX el guía
// Regla: no funciona para cualquier empresa · califica encaje enterprise/crítico

const OcHero = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 96, paddingBottom: 96, position: 'relative', overflow: 'hidden' }}>
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: 'linear-gradient(#E4EBF3 1px, transparent 1px), linear-gradient(90deg, #E4EBF3 1px, transparent 1px)',
      backgroundSize: '80px 80px', opacity: 0.55, pointerEvents: 'none',
      maskImage: 'radial-gradient(ellipse at 78% 40%, #000 0%, transparent 60%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 78% 40%, #000 0%, transparent 60%)',
    }}/>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 64, alignItems: 'center', position: 'relative' }}>
        <div>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <a href="industrias.html" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#52557A', textDecoration: 'none', textTransform: 'uppercase' }}>← Industrias</a>
              <span style={{ color: '#96A3B5' }}>/</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase' }}>Operaciones Críticas · categoría transversal</span>
            </div>
            <Rule width={56}/>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 74, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#000' }}>
              Una inteligencia propia para cualquier <span style={{ color: '#F4024C' }}>operación crítica</span>.
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 21, lineHeight: 1.5, color: '#52557A', maxWidth: 640, margin: '0 0 32px' }}>
              OMNIX conecta datos, sistemas, reglas y conocimiento experto para ayudar a organizaciones críticas
              a anticipar condiciones, evaluar alternativas y ejecutar respuestas auditables bajo su propio control.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ display: 'flex', gap: 12, marginBottom: 20, flexWrap: 'wrap' }}>
              <Button variant="primary" icon="arrow-right" href="#assessment">Evaluar una operación crítica</Button>
              <Button variant="ghost" icon="arrow-right" href="#domains">Explorar aplicaciones</Button>
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              Comenzamos con una decisión, un KPI y un alcance controlado · no con una transformación completa
            </div>
          </Reveal>
          <Reveal delay={320}>
            <div style={{ marginTop: 32, padding: '18px 22px', background: '#FBF3D9', border: '1.5px solid #B8860B' }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <i data-lucide="target" width="18" height="18" style={{ color: '#B8860B', strokeWidth: 1.5, flexShrink: 0, marginTop: 2 }}/>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#B8860B', textTransform: 'uppercase', marginBottom: 6 }}>Cuándo aplica esta categoría</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#1E1F26', lineHeight: 1.55 }}>
                    Cuando existe una <strong>decisión operacional crítica</strong>, datos propios, sistemas que deben coordinarse, un resultado medible y una necesidad real de <strong>control, trazabilidad o soberanía</strong>. <strong>OMNIX no es una solución para cualquier empresa</strong> · si su industria tiene página propia (Banca, Salud, Energía, Minería, Manufactura, Retail, Logística, Telco, Gobierno, Defensa), comience por ahí.
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}><OcHeroPanel/></Reveal>
      </div>
    </Container>
  </section>
);

// Panel: 8 dominios de decisión transversales
const OcHeroPanel = () => (
  <div style={{ border: '1.5px solid #1E1F26', background: '#FAFBFD' }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 20px', borderBottom: '1.5px solid #1E1F26', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#52557A' }}>
      <span>8 DOMINIOS DE DECISIÓN · APLICABLES A MÚLTIPLES INDUSTRIAS</span>
      <span style={{ color: '#F4024C' }}>TRANSVERSAL</span>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0 }}>
      {[
        { i: 'wrench',       k: 'ACTIVOS · MTTO',     q: '¿Qué activo intervenir primero?' },
        { i: 'package',       k: 'ABASTECIMIENTO',    q: '¿Qué comprar o mover antes?' },
        { i: 'truck',          k: 'FIELD OPS',          q: '¿Qué intervención y por quién?' },
        { i: 'shield-check',   k: 'CONTINUIDAD',       q: '¿Qué está en riesgo?' },
        { i: 'file-search',   k: 'RIESGO · COMPLIANCE', q: '¿Qué caso requiere revisión?' },
        { i: 'headset',        k: 'SERVICIO',            q: '¿Qué cliente antes que escale?' },
        { i: 'clipboard-list', k: 'ADMINISTRATIVAS',    q: '¿Qué decisión frena la operación?' },
        { i: 'book-open',      k: 'CONOCIMIENTO',       q: '¿Cómo se comparte lo aprendido?' },
      ].map((d, i) => (
        <div key={d.k} style={{
          padding: '16px 18px',
          borderRight: (i % 2 === 0) ? '1px solid #E4EBF3' : 'none',
          borderBottom: (i < 6) ? '1px solid #E4EBF3' : 'none',
          background: '#FFF',
          display: 'flex', flexDirection: 'column', gap: 8, minHeight: 130,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <i data-lucide={d.i} width="18" height="18" style={{ color: '#F4024C', strokeWidth: 1.5 }}/>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', color: '#96A3B5' }}>DOM · 0{i+1}</span>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#F4024C' }}>{d.k}</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '-0.005em', color: '#000', lineHeight: 1.3 }}>{d.q}</div>
        </div>
      ))}
    </div>
    <div style={{ borderTop: '1.5px solid #1E1F26', padding: '12px 20px', background: '#000', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
      <span>Aplicable a múltiples industrias</span>
      <span style={{ color: '#F4024C' }}>NO ES SOLUCIÓN UNIVERSAL</span>
    </div>
  </div>
);

const OcAEO = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 72, paddingBottom: 72, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 40, alignItems: 'start' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase' }}>Respuesta AEO</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', marginTop: 4 }}>tl;dr · operaciones críticas</div>
        </div>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.55, color: '#000', margin: 0, maxWidth: 900 }}>
          OMNIX es una plataforma de <strong>cognición operacional soberana</strong> para organizaciones con operaciones complejas o críticas. Conecta datos, sistemas, reglas y conocimiento experto para detectar condiciones, evaluar alternativas y coordinar acciones auditables · con <strong>autonomía configurable, despliegue privado y transferencia progresiva</strong> del control al equipo interno.
        </p>
      </div>
    </Container>
  </section>
);

// CRITERIOS DE ENCAJE · buen vs bajo encaje
const OcFit = () => (
  <section id="fit" style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="01" label="Criterios de encaje"/></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: '#000' }}>
            ¿Es OMNIX adecuada para <span style={{ color: '#F4024C' }}>su operación</span>?
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
            OMNIX está diseñada para organizaciones enterprise, entidades públicas complejas, infraestructura crítica y operaciones intensivas en activos, redes distribuidas o procesos regulados. No es una herramienta genérica de productividad.
          </p>
        </Reveal>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {/* Buen encaje */}
        <SlideIn direction="right" delay={0}>
          <div style={{ padding: '32px 32px', background: '#FAFBFD', border: '1.5px solid #0F5132' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
              <div style={{ width: 40, height: 40, background: '#0F5132', color: '#FFF', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide="check" width="20" height="20" style={{ strokeWidth: 2 }}/>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#0F5132' }}>BUEN ENCAJE</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em', color: '#000', margin: '2px 0 0' }}>Su organización probablemente encaja si…</h3>
              </div>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                'Existe una decisión crítica claramente identificable',
                'La decisión se repite con frecuencia',
                'Intervienen múltiples sistemas o áreas',
                'La información llega tarde o fragmentada',
                'El costo de una mala decisión es relevante',
                'Existe conocimiento experto que puede estructurarse',
                'Hay un KPI que puede medirse',
                'Se requiere trazabilidad',
                'La automatización debe tener límites',
                'El cliente necesita control sobre datos y modelos',
                'Existe un sponsor ejecutivo',
                'El proceso puede comenzar mediante un piloto acotado',
              ].map((c) => (
                <li key={c} style={{ display: 'flex', gap: 10, fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26' }}>
                  <i data-lucide="check" width="16" height="16" style={{ color: '#0F5132', strokeWidth: 2, flexShrink: 0, marginTop: 4 }}/>
                  {c}
                </li>
              ))}
            </ul>
          </div>
        </SlideIn>

        {/* Bajo encaje */}
        <SlideIn direction="left" delay={100}>
          <div style={{ padding: '32px 32px', background: '#FAFBFD', border: '1.5px solid #EA384C' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
              <div style={{ width: 40, height: 40, background: '#EA384C', color: '#FFF', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i data-lucide="x" width="20" height="20" style={{ strokeWidth: 2 }}/>
              </div>
              <div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#EA384C' }}>BAJO ENCAJE</div>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em', color: '#000', margin: '2px 0 0' }}>OMNIX no es la mejor opción si…</h3>
              </div>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                'Solo necesita un chatbot básico',
                'Busca una herramienta genérica de productividad',
                'No existe un proceso o decisión definida',
                'No puede acceder a las fuentes necesarias',
                'No existe un responsable del resultado',
                'No hay forma de medir impacto',
                'Busca reemplazar totalmente el juicio humano',
                'No existe disposición para gobernar la capacidad',
                'Busca una prueba tecnológica sin caso de negocio',
              ].map((c) => (
                <li key={c} style={{ display: 'flex', gap: 10, fontFamily: 'var(--font-body)', fontSize: 14, color: '#1E1F26' }}>
                  <i data-lucide="x" width="16" height="16" style={{ color: '#EA384C', strokeWidth: 2, flexShrink: 0, marginTop: 4 }}/>
                  {c}
                </li>
              ))}
            </ul>
          </div>
        </SlideIn>
      </div>

      {/* Organizaciones que pueden encajar */}
      <div style={{ marginTop: 56, padding: '32px 32px', background: '#000', color: '#FFF', border: '1.5px solid #000' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 14 }}>Una arquitectura adaptable a distintos contextos operacionales</div>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: '#96A3B5', margin: '0 0 20px', maxWidth: 780 }}>
          Ejemplos <strong>no exhaustivos</strong> de sectores donde OMNIX puede aplicarse. Cada aplicación requiere validar datos, sistemas, riesgos, regulación, responsables y resultados esperados. [VALIDAR INDUSTRIA · VALIDAR CASO]
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
          {['Transporte', 'Puertos', 'Aeropuertos', 'Aviación', 'Construcción', 'Infraestructura', 'Agricultura', 'Alimentos y bebidas', 'Farmacéutica', 'Seguros', 'Educación', 'Hotelería', 'Servicios ambientales', 'Gestión de residuos', 'Agua y saneamiento', 'Movilidad', 'Facilities mgmt', 'Empresas públicas', 'Distribución mayorista', 'Centros de datos', 'Operadores infraestructura', 'Servicios profesionales', 'Servicios técnicos', 'Multi-sector'].map((s) => (
            <div key={s} style={{ padding: '10px 12px', background: '#0A0B10', border: '1px solid #2E3140', fontFamily: 'var(--font-mono)', fontSize: 10, color: '#FFF', letterSpacing: '0.06em', textAlign: 'center' }}>{s}</div>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

// PROBLEMA TRANSVERSAL
const OcProblem = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 72 }}>
        <Reveal><SectionMeta n="02" label="El problema transversal"/></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: '#000' }}>
            La industria cambia. <span style={{ color: '#F4024C' }}>El problema operacional se repite</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: '#52557A', margin: 0 }}>
            Demasiados sistemas · señales fragmentadas · decisiones críticas que todavía dependen de coordinación manual · pilotos de IA que no escalan · dependencia permanente de proveedores.
          </p>
        </Reveal>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginBottom: 40 }}>
        {[
          { i: 'database',       t: 'Datos fragmentados',        d: 'ERP · CRM · WMS · TMS · MES · EAM · CMMS · SCADA · GIS · sistemas propios · planillas · correos · documentos · conocimiento de personas.' },
          { i: 'users',            t: 'Coordinación manual',      d: 'Los equipos conocen la operación · pero invierten demasiado tiempo reuniendo información antes de decidir qué hacer.' },
          { i: 'shield-alert',    t: 'Riesgo institucional',     d: 'Una organización que ha acumulado años de datos, procesos y experiencia no debería depender permanentemente de un modelo externo.' },
        ].map((c, i) => (
          <Reveal key={c.t} delay={i * 100}>
            <div style={{ padding: '32px 28px', background: '#FFF', border: '1.5px solid #1E1F26' }}>
              <i data-lucide={c.i} width="24" height="24" style={{ color: '#F4024C', strokeWidth: 1.5, marginBottom: 16 }}/>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.015em', color: '#000', margin: '0 0 10px' }}>{c.t}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#52557A', lineHeight: 1.6, margin: 0 }}>{c.d}</p>
            </div>
          </Reveal>
        ))}
      </div>

      {/* Contrastes narrativos */}
      <div style={{ padding: '32px 32px', background: '#FFF', border: '1.5px solid #1E1F26' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 20 }}>La transición operacional</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
          {[
            { from: 'Datos fragmentados',       to: 'Contexto compartido' },
            { from: 'Alertas',                    to: 'Decisiones' },
            { from: 'Decisiones aisladas',        to: 'Acciones coordinadas' },
            { from: 'Automatización aislada',      to: 'Orquestación' },
            { from: 'IA genérica',                 to: 'Cognición propia' },
            { from: 'Dependencia permanente',      to: 'Transferencia' },
            { from: 'Pilotos sin continuidad',     to: 'Capacidad institucional' },
            { from: 'Caja negra',                   to: 'Trazabilidad' },
            { from: 'Procesos reactivos',           to: 'Operaciones que anticipan' },
          ].map((r) => (
            <div key={r.from} style={{ padding: '12px 14px', background: '#FAFBFD', border: '1px solid #E4EBF3', display: 'grid', gridTemplateColumns: '1fr 20px 1fr', gap: 10, alignItems: 'center' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', letterSpacing: '0.04em', textAlign: 'right' }}>{r.from}</div>
              <i data-lucide="arrow-right" width="14" height="14" style={{ color: '#F4024C', strokeWidth: 1.5, justifySelf: 'center' }}/>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 11, color: '#000', letterSpacing: '-0.005em' }}>{r.to}</div>
            </div>
          ))}
        </div>
      </div>
    </Container>
  </section>
);

Object.assign(window, { OcHero, OcAEO, OcFit, OcProblem });