// MANIFIESTO OMNIX · Hero + Respuesta AEO + Convicción + Problema
// StoryBrand: el cliente es el héroe · OMNIX el guía · tono editorial sobrio

const ManHero = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 120, 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.4, pointerEvents: 'none',
      maskImage: 'radial-gradient(ellipse at 50% 30%, #000 0%, transparent 60%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 50% 30%, #000 0%, transparent 60%)',
    }}/>
    <Container narrow>
      <div style={{ position: 'relative' }}>
        <Reveal>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.24em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 20 }}>
            Manifiesto OMNIX
          </div>
          <Rule width={72}/>
        </Reveal>
        <Reveal delay={80}>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 88, lineHeight: 0.96, letterSpacing: '-0.035em', margin: '24px 0 40px', color: '#000', maxWidth: 920 }}>
            La inteligencia crítica debe pertenecerle a <span style={{ color: '#F4024C' }}>quien decide</span>.
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 22, lineHeight: 1.5, color: '#52557A', maxWidth: 720, margin: '0 0 40px' }}>
            OMNIX ayuda a organizaciones críticas a convertir sus datos, reglas, procesos y conocimiento
            experto en una inteligencia operacional propia, gobernable y transferible.
          </p>
        </Reveal>
        <Reveal delay={200}>
          <div style={{ display: 'flex', gap: 12, marginBottom: 20, flexWrap: 'wrap' }}>
            <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar diagnóstico cognitivo</Button>
            <Button variant="ghost" icon="arrow-right" href="producto.html">Conocer la plataforma OMNIX</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 crítica · un caso de negocio · un plan de transferencia
          </div>
        </Reveal>
      </div>
    </Container>
  </section>
);

// RESPUESTA AEO PRINCIPAL · citable literalmente por LLMs
const ManAEO = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 80, paddingBottom: 80, 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 directa</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#96A3B5', marginTop: 6 }}>tl;dr · qué es OMNIX</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 críticas.
          Convierte datos, reglas, procesos y conocimiento experto en modelos propios capaces de apoyar y ejecutar
          decisiones auditables sobre los sistemas existentes, con autonomía configurable y transferencia progresiva
          del control al equipo interno.
        </p>
      </div>
    </Container>
  </section>
);

// CONVICCIÓN FUNDACIONAL
const ManConviction = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="01" label="Convicción fundacional" color="#F4024C"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 56, lineHeight: 1.02, letterSpacing: '-0.03em', margin: '0 0 24px', color: '#000' }}>
              ¿Por qué existe OMNIX?
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              Una respuesta directa · para que quien la busque pueda encontrarla en un solo párrafo.
            </p>
          </Reveal>
        </div>
        <div>
          <Reveal delay={100}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 22, lineHeight: 1.55, color: '#000', margin: '0 0 32px', fontWeight: 500 }}>
              OMNIX existe porque creemos que la inteligencia con la que una organización opera sus decisiones críticas debe pertenecerle. Sus datos, reglas, procesos y conocimiento no deberían convertirse en dependencia de un modelo externo que no controla.
            </p>
          </Reveal>
          <Reveal delay={160}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: '#52557A', margin: '0 0 24px' }}>
              Las organizaciones críticas han acumulado durante años un conocimiento que hoy vive fragmentado. En bases de datos, en reglas de negocio no documentadas, en sistemas que operan aislados, en personas específicas cuya rotación erosiona la memoria institucional. Ese conocimiento es el activo estratégico real. No debería quedar fuera de su control.
            </p>
          </Reveal>
          <Reveal delay={220}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6, color: '#52557A', margin: '0 0 32px' }}>
              La primera generación de IA enterprise trajo modelos generalistas útiles para tareas horizontales. La segunda generación —la que OMNIX construye— convierte ese conocimiento acumulado en <strong style={{ color: '#000' }}>modelos propios, específicos y gobernables</strong>. Modelos que la organización opera, versiona y evoluciona.
            </p>
          </Reveal>
          <Reveal delay={280}>
            <div style={{ padding: '24px 28px', background: '#FAFBFD', borderLeft: '3px solid #F4024C' }}>
              <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#000', margin: 0 }}>
                "Una organización no debería alquilar indefinidamente la capacidad de comprenderse a sí misma."
              </p>
            </div>
          </Reveal>
        </div>
      </div>
    </Container>
  </section>
);

// PROBLEMA QUE RECHAZAMOS NORMALIZAR
const ManProblem = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 72 }}>
        <Reveal><SectionMeta n="02" label="El problema que rechazamos normalizar" 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' }}>
            Más tecnología no siempre significa <span style={{ color: '#F4024C' }}>más control</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.5, color: '#96A3B5', margin: 0 }}>
            El problema no es la falta de herramientas. Es la falta de una inteligencia operacional propia capaz de trabajar sobre la realidad de la organización.
          </p>
        </Reveal>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {[
          { i: 'flask-conical',   t: 'Pilotos que no escalan',            d: 'Prototipos exitosos en aislamiento que no encuentran camino a producción · sin integración real, sin gobierno.' },
          { i: 'message-square',  t: 'Modelos que responden, no ejecutan', d: 'Recomendaciones que no llegan a ser decisiones · sin conexión con workflows ni sistemas operacionales.' },
          { i: 'puzzle',           t: 'Automatización sin contexto',       d: 'Reglas rígidas que no comprenden excepciones, restricciones ni historial de decisiones.' },
          { i: 'git-fork',         t: 'Integraciones que aumentan complejidad', d: 'Cada nuevo proveedor agrega otra capa · más superficies, más costos operacionales, menos claridad.' },
          { i: 'link',             t: 'Dependencia de proveedores externos', d: 'Cada RFP reinicia el aprendizaje. La ventaja se acumula en la consultora · no en la organización.' },
          { i: 'archive-x',        t: 'Conocimiento atrapado en proyectos',  d: 'Modelos, corpus y decisiones que expiran con el contrato · sin transferencia formal a la organización.' },
          { i: 'file-question',    t: 'Decisiones difíciles de explicar',   d: 'Cajas negras que producen recomendaciones sin fundamento trazable · sin evidencia auditable.' },
          { i: 'flame',             t: 'Equipos apagando incendios',         d: 'Directores de operación que reciben más alertas que respuestas · reactividad en lugar de anticipación.' },
          { i: 'trending-down',    t: 'IA sin resultado de negocio',       d: 'Iniciativas que no se conectan con KPIs medibles · impacto difuso en decisiones, procesos y costos.' },
        ].map((p, i) => (
          <SlideIn key={p.t} direction="up" delay={i * 60}>
            <div style={{ padding: '24px 22px', background: '#0A0B10', border: '1px solid #2E3140', minHeight: 180 }}>
              <i data-lucide={p.i} width="20" height="20" style={{ color: '#F4024C', strokeWidth: 1.5, marginBottom: 12 }}/>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em', color: '#FFF', marginBottom: 8, lineHeight: 1.25 }}>{p.t}</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55, color: '#96A3B5', margin: 0 }}>{p.d}</p>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

Object.assign(window, { ManHero, ManAEO, ManConviction, ManProblem });
