// CONOCE OMNIX · Hero + Respuesta AEO + Problema + Definición de cognición operacional
// One-page ejecutiva · 3-5 minutos de lectura · funnel de consideración

const ConoceHero = () => (
  <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="index.html" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#52557A', textDecoration: 'none', textTransform: 'uppercase' }}>← OMNIX</a>
              <span style={{ color: '#96A3B5' }}>/</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase' }}>Conoce OMNIX · overview ejecutivo</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' }}>
              Convierta su operación en una <span style={{ color: '#F4024C' }}>capacidad cognitiva propia</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, procesos y conocimiento experto para detectar condiciones,
              evaluar alternativas y ejecutar workflows auditables mediante IAs privadas y especializadas.
            </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 una sesión de diagnóstico</Button>
              <Button variant="ghost" icon="arrow-right" href="#how">Ver cómo funciona OMNIX</Button>
            </div>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
              Comience con una decisión, un proceso y un resultado verificable
            </div>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}><ConoceHeroPanel/></Reveal>
      </div>
    </Container>
  </section>
);

// Panel: flujo Detectar → Comprender → Evaluar → Decidir → Ejecutar → Medir → Aprender
const ConoceHeroPanel = () => {
  const [step, setStep] = React.useState(0);
  const steps = [
    { i: 'radio',     k: 'DETECTAR',       d: 'Señales de la operación en tiempo real' },
    { i: 'brain',      k: 'COMPRENDER',    d: 'Contexto · reglas · conocimiento experto' },
    { i: 'target',     k: 'EVALUAR',       d: 'Alternativas · restricciones · impacto' },
    { i: 'check',      k: 'RECOMENDAR',    d: 'Fundamento · confianza · trazabilidad' },
    { i: 'user-check', k: 'APROBAR',       d: 'Human-in-the-loop cuando corresponda' },
    { i: 'zap',        k: 'EJECUTAR',      d: 'Workflow coordinado en sistemas autorizados' },
    { i: 'bar-chart',   k: 'MEDIR',        d: 'KPIs · tiempo · calidad · adopción' },
    { i: 'refresh-cw', k: 'APRENDER',      d: 'Retroalimentación · reentrenamiento gobernado' },
  ];
  React.useEffect(() => {
    const id = setInterval(() => setStep((s) => (s + 1) % steps.length), 1600);
    return () => clearInterval(id);
  }, []);
  return (
    <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>CICLO COGNITIVO · 8 PASOS · UNA VERSIÓN COMÚN DEL CONTEXTO</span>
        <span style={{ color: '#F4024C', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: '#F4024C' }} className="omnix-blink"/>
          RUNTIME
        </span>
      </div>
      <div style={{ padding: 32 }}>
        <svg viewBox="0 0 400 400" style={{ display: 'block', width: '100%', height: 'auto' }}>
          {/* Círculo del ciclo */}
          <circle cx="200" cy="200" r="140" fill="none" stroke="#E4EBF3" strokeWidth="1"/>
          <circle cx="200" cy="200" r="140" fill="none" stroke="#F4024C" strokeWidth="1.5" strokeDasharray="30 800" strokeDashoffset={-(step * 110)} style={{ transition: 'stroke-dashoffset 1200ms cubic-bezier(0.2,0.7,0.2,1)' }}/>
          {/* 8 nodos alrededor del círculo */}
          {steps.map((s, i) => {
            const angle = (i / 8) * Math.PI * 2 - Math.PI / 2;
            const x = 200 + Math.cos(angle) * 140;
            const y = 200 + Math.sin(angle) * 140;
            const active = i === step;
            return (
              <g key={s.k} transform={`translate(${x}, ${y})`}>
                {active && (
                  <circle r="22" fill="none" stroke="#F4024C" strokeWidth="1" opacity="0.5">
                    <animate attributeName="r" values="16;28;16" dur="1.6s" repeatCount="indefinite"/>
                    <animate attributeName="opacity" values="0.5;0;0.5" dur="1.6s" repeatCount="indefinite"/>
                  </circle>
                )}
                <circle r="14" fill={active ? '#F4024C' : '#FFF'} stroke={active ? '#F4024C' : '#1E1F26'} strokeWidth="1.5" style={{ transition: 'all 400ms' }}/>
                <text y="4" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill={active ? '#FFF' : '#1E1F26'} fontWeight="600">{i+1}</text>
              </g>
            );
          })}
          {/* Centro · paso activo */}
          <g transform="translate(200, 200)">
            <rect x="-72" y="-40" width="144" height="80" fill="#000" stroke="#F4024C" strokeWidth="1.5"/>
            <text y="-14" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.18em" fill="#F4024C">PASO {step + 1}</text>
            <text y="8" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="14" fill="#FFF">{steps[step].k}</text>
            <text y="26" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" fill="#96A3B5">de 8</text>
          </g>
        </svg>
      </div>
      <div style={{ padding: '14px 20px', borderTop: '1.5px solid #1E1F26', background: '#000' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 4 }}>PASO ACTUAL</div>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#FFF', lineHeight: 1.4 }}>{steps[step].d}</div>
      </div>
    </div>
  );
};

// Respuesta AEO principal
const ConoceAEO = () => (
  <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 · qué es omnix</div>
        </div>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.55, color: '#000', margin: 0, maxWidth: 900 }}>
          <strong>OMNIX es una plataforma de cognición operacional</strong> que conecta datos, sistemas, procesos y conocimiento experto para ayudar a las organizaciones a <strong>detectar condiciones, evaluar alternativas y coordinar acciones auditables</strong>. Utiliza Modelos de Dominio Especializado, automatización gobernada y arquitecturas privadas para construir capacidades de inteligencia artificial adaptadas a cada operación.
        </p>
      </div>
    </Container>
  </section>
);

// EL PROBLEMA · datos vs decisiones coordinadas
const ConoceProblem = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="01" label="El problema"/></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' }}>
            Las organizaciones tienen datos. El desafío es convertirlos en <span style={{ color: '#F4024C' }}>decisiones coordinadas</span>.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
            El problema no es la falta de información · es la falta de una capacidad que comprenda el contexto, evalúe alternativas y coordine la ejecución.
          </p>
        </Reveal>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginBottom: 40 }}>
        {[
          { i: 'database',   t: 'Los sistemas almacenan',           d: 'ERP · CRM · WMS · MES · SCADA · sistemas propios · data lakes. Cada uno con su vista parcial.' },
          { i: 'bar-chart',   t: 'Los dashboards muestran',          d: 'Indicadores en tiempo real · reportes históricos · alertas. Pero no coordinan la respuesta.' },
          { i: 'file-search', t: 'Los modelos analizan',              d: 'Patrones · anomalías · predicciones. Aisladas del workflow que debería activar.' },
          { i: 'workflow',    t: 'Las automatizaciones ejecutan',    d: 'RPA · scripts · integraciones. Pasos definidos sin contexto operacional.' },
          { i: 'users',        t: 'Las excepciones dependen',         d: 'De coordinación manual entre áreas · correos · reuniones · llamadas.' },
          { i: 'book-lock',    t: 'El conocimiento no está',           d: 'Incorporado en los sistemas. Concentrado en pocas personas · frágil ante rotación.' },
        ].map((c, i) => (
          <Reveal key={c.t} delay={i * 80}>
            <div style={{ padding: '24px 26px', background: '#FAFBFD', border: '1px solid #E4EBF3', minHeight: 160 }}>
              <i data-lucide={c.i} width="20" height="20" style={{ color: '#F4024C', strokeWidth: 1.5, marginBottom: 14 }}/>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: '#000', letterSpacing: '-0.005em', marginBottom: 6 }}>{c.t}</div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: '#52557A', lineHeight: 1.5 }}>{c.d}</div>
            </div>
          </Reveal>
        ))}
      </div>

      {/* Ejemplo concreto */}
      <div style={{ padding: '32px 32px', background: '#000', color: '#FFF', border: '1.5px solid #000' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 40, alignItems: 'start' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 8 }}>Ejemplo genérico</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.005em', color: '#FFF' }}>Una condición operacional en un sistema</div>
          </div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.7, color: '#FFF' }}>
            <p style={{ margin: '0 0 12px' }}>Aparece una condición operacional que requiere respuesta. Para decidir, una persona debe revisar <strong style={{ color: '#F4024C' }}>inventario, capacidad, contratos, personal, órdenes y procedimientos</strong> en varias plataformas.</p>
            <p style={{ margin: 0, color: '#96A3B5', fontStyle: 'italic' }}>OMNIX reúne el contexto, evalúa opciones y prepara o ejecuta el workflow autorizado — con supervisión humana donde corresponde.</p>
          </div>
        </div>
      </div>
    </Container>
  </section>
);

// QUÉ ES COGNICIÓN OPERACIONAL
const ConoceCognicion = () => (
  <section id="how" style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <div style={{ maxWidth: 900, marginBottom: 56 }}>
        <Reveal><SectionMeta n="02" label="Cognición operacional"/></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' }}>
            ¿Qué significa <span style={{ color: '#F4024C' }}>cognición operacional</span>?
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#52557A', margin: 0 }}>
            La capacidad de interpretar señales de una operación, relacionarlas con reglas, restricciones y objetivos, evaluar alternativas y coordinar acciones sobre los sistemas existentes.
          </p>
        </Reveal>
      </div>

      {/* Cognición vs otras categorías */}
      <div style={{ border: '1.5px solid #1E1F26', background: '#FFF', marginBottom: 40 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1.2fr', background: '#000', color: '#FFF', padding: '14px 24px', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
          <div>CATEGORÍA</div>
          <div style={{ color: '#0F5132' }}>QUÉ HACE</div>
          <div style={{ color: '#F4024C' }}>QUÉ NO HACE POR SÍ SOLA</div>
        </div>
        {[
          { k: 'Analítica · BI',           does: 'Muestra indicadores y patrones',           doesnt: 'No decide ni ejecuta acciones' },
          { k: 'Automatización · RPA',    does: 'Ejecuta pasos definidos',                 doesnt: 'No evalúa contexto ni excepciones' },
          { k: 'IA generativa · LLM',      does: 'Interpreta lenguaje natural',              doesnt: 'No razona sobre operación ni políticas' },
          { k: 'Agentes',                    does: 'Actúan sobre herramientas',                 doesnt: 'Sin gobernanza operacional carecen de límites' },
          { k: 'Sistemas transaccionales', does: 'Registran operaciones',                     doesnt: 'No interpretan ni coordinan decisiones' },
          { k: 'OMNIX · cognición operacional', does: 'Detecta → evalúa → coordina → mide → aprende',  doesnt: 'Se apoya en las categorías anteriores como componentes', highlight: true },
        ].map((r, i, arr) => (
          <div key={r.k} style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1fr 1.2fr', padding: '14px 24px',
            borderTop: '1px solid #E4EBF3',
            background: r.highlight ? '#F4024C' : (i % 2 === 0 ? '#FFF' : '#FAFBFD'),
            color: r.highlight ? '#FFF' : 'inherit',
          }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: r.highlight ? '#FFF' : '#000' }}>{r.k}</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: r.highlight ? '#FFF' : '#1E1F26', lineHeight: 1.4 }}>{r.does}</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: r.highlight ? 'rgba(255,255,255,0.85)' : '#52557A', lineHeight: 1.4 }}>{r.doesnt}</div>
          </div>
        ))}
      </div>

      <div style={{ padding: '24px 28px', background: '#FFF', border: '1.5px solid #1E1F26' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 12 }}>MENSAJE</div>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 18, lineHeight: 1.6, color: '#000', margin: 0 }}>
          OMNIX <strong>combina</strong> analítica, automatización, IA generativa, agentes y sistemas transaccionales dentro de una <strong>arquitectura orientada a decisiones operacionales</strong>. No las reemplaza · las coordina.
        </p>
      </div>
    </Container>
  </section>
);

Object.assign(window, { ConoceHero, ConoceAEO, ConoceProblem, ConoceCognicion });