// OMNIX RUNTIME — motor operacional que ejecuta decisiones auditables
const RuntimeHero = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 88, paddingBottom: 88, 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.5, pointerEvents: 'none',
      maskImage: 'radial-gradient(ellipse at 85% 45%, #000 0%, transparent 55%)',
      WebkitMaskImage: 'radial-gradient(ellipse at 85% 45%, #000 0%, transparent 55%)',
    }}/>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center', position: 'relative' }}>
        <div>
          <Reveal>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <a href="arquitectura.html" style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#52557A', textDecoration: 'none', textTransform: 'uppercase' }}>← Arquitectura</a>
              <span style={{ color: '#96A3B5' }}>/</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#1E1F26', textTransform: 'uppercase' }}>Motor 03 · RUNTIME</span>
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 76, lineHeight: 0.98, letterSpacing: '-0.03em', margin: '0 0 20px', color: '#000' }}>
              OMNIX <span style={{ color: '#1E1F26' }}>Runtime</span>.
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 26, lineHeight: 1.25, color: '#1E1F26', margin: '0 0 24px', maxWidth: 500 }}>
              Inferencia segura. Ejecución auditable. Acción en tus sistemas.
            </div>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', maxWidth: 500, margin: '0 0 32px' }}>
              Transforma procesos operativos intensivos en decisiones y acciones automatizadas,
              medibles y auditables. Reduce fricción, tiempos de respuesta y costos de ejecución,
              mientras mantiene control sobre las reglas, los niveles de autonomía y el riesgo operativo.
            </p>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ display: 'flex', gap: 12 }}>
              <Button variant="primary" icon="arrow-right" href="diagnostico.html">Ver Runtime en vivo</Button>
              <Button variant="ghost" href="arquitectura-cortex.html" icon="arrow-right">Siguiente: Cortex</Button>
            </div>
          </Reveal>
        </div>

        <Reveal delay={200} y={0}>
          <RuntimeConsole/>
        </Reveal>
      </div>
    </Container>
  </section>
);

// Consola en vivo: eventos entrantes, decisiones, latencia
const RuntimeConsole = () => {
  const [events, setEvents] = React.useState([]);
  React.useEffect(() => {
    const templates = [
      { t: 'DECIDED', c: '#0F5132', op: 'reassign-shipment', ctx: 'order#{n} · SLA-critical', n: 'ok', latency: () => 42 + Math.floor(Math.random() * 60) },
      { t: 'DECIDED', c: '#0F5132', op: 'auto-close-incident', ctx: 'inc#{n} · noc-latam', latency: () => 68 + Math.floor(Math.random() * 40) },
      { t: 'ESCALATED', c: '#B8860B', op: 'human-review', ctx: 'fraud-score 0.87 · txn#{n}', latency: () => 88 + Math.floor(Math.random() * 50) },
      { t: 'BLOCKED', c: '#EA384C', op: 'policy-violation', ctx: 'guardrail#12 · attempt#{n}', latency: () => 22 + Math.floor(Math.random() * 30) },
      { t: 'DECIDED', c: '#0F5132', op: 'reprice-sku', ctx: 'sku#{n} · elasticity-shift', latency: () => 54 + Math.floor(Math.random() * 40) },
    ];
    const push = () => {
      const tpl = templates[Math.floor(Math.random() * templates.length)];
      const num = Math.floor(100000 + Math.random() * 900000);
      const evt = {
        id: Date.now() + Math.random(),
        t: tpl.t, c: tpl.c, op: tpl.op,
        ctx: tpl.ctx.replace('{n}', num),
        latency: tpl.latency(),
        time: new Date().toISOString().slice(11, 19),
      };
      setEvents((es) => [evt, ...es.slice(0, 5)]);
    };
    // seed
    for (let i = 0; i < 4; i++) push();
    const id = setInterval(push, 1200);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{ border: '1.5px solid #1E1F26', background: '#000', color: '#FFF' }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', padding: '14px 20px',
        borderBottom: '1.5px solid #1E1F26', background: '#0A0B10',
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#96A3B5',
      }}>
        <span>RUNTIME · DECISION LOG</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"/>
          STREAMING
        </span>
      </div>
      <div style={{ padding: '16px 0', minHeight: 360 }}>
        {events.map((e, i) => (
          <div key={e.id} style={{
            padding: '10px 20px',
            display: 'grid', gridTemplateColumns: '76px 90px 1fr auto',
            gap: 16, alignItems: 'center',
            fontFamily: 'var(--font-mono)', fontSize: 12,
            opacity: 1 - (i * 0.13),
            animation: i === 0 ? 'omnix-log-in 400ms cubic-bezier(0.2,0.7,0.2,1)' : 'none',
            borderBottom: '1px solid #0A0B10',
          }}>
            <span style={{ color: '#7A7F95', fontSize: 10 }}>{e.time}</span>
            <span style={{ color: e.c, fontWeight: 500, letterSpacing: '0.14em', fontSize: 10 }}>{e.t}</span>
            <span style={{ color: '#FFF', fontSize: 12 }}>
              <span style={{ color: '#F4024C' }}>{e.op}</span> <span style={{ color: '#96A3B5' }}>· {e.ctx}</span>
            </span>
            <span style={{ color: '#96A3B5', fontSize: 10 }}>{e.latency} ms</span>
          </div>
        ))}
        <style>{`@keyframes omnix-log-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }`}</style>
      </div>
      <div style={{
        borderTop: '1.5px solid #1E1F26', padding: '12px 20px', background: '#0A0B10',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20,
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em',
      }}>
        <div>
          <div style={{ color: '#96A3B5', fontSize: 9, marginBottom: 4 }}>DECIDED</div>
          <div style={{ color: '#0F5132', fontSize: 14 }}>75%</div>
        </div>
        <div>
          <div style={{ color: '#96A3B5', fontSize: 9, marginBottom: 4 }}>ESCALATED</div>
          <div style={{ color: '#B8860B', fontSize: 14 }}>21%</div>
        </div>
        <div>
          <div style={{ color: '#96A3B5', fontSize: 9, marginBottom: 4 }}>BLOCKED</div>
          <div style={{ color: '#EA384C', fontSize: 14 }}>4%</div>
        </div>
        <div>
          <div style={{ color: '#96A3B5', fontSize: 9, marginBottom: 4 }}>P95 LATENCY</div>
          <div style={{ color: '#FFF', fontSize: 14 }}>78 ms</div>
        </div>
      </div>
    </div>
  );
};

const RuntimeAutonomy = () => {
  const [level, setLevel] = React.useState(3);
  const levels = [
    { n: 'N1', t: 'Monitoreo',         d: 'Observa, correlaciona, alerta. Humano decide y ejecuta.',        role: 'HUMAN DECIDES · HUMAN ACTS' },
    { n: 'N2', t: 'Recomendación',     d: 'Propone acción con score. Humano valida y ejecuta.',            role: 'AI SUGGESTS · HUMAN ACTS' },
    { n: 'N3', t: 'Ejecución asistida',d: 'Ejecuta rutinarias, escala excepciones. Humano cierra loops.',   role: 'AI ACTS · HUMAN SUPERVISES' },
    { n: 'N4', t: 'Ejecución autónoma',d: 'Decide y ejecuta con guardrails y logs. Humano audita a posteriori.', role: 'AI DECIDES · AI ACTS' },
    { n: 'N5', t: 'Decisión crítica',   d: 'Autonomía sobre casos de alto impacto con human-in-the-loop.',  role: 'AI · HITL MANDATORY' },
  ];
  return (
    <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
      <Container>
        <Reveal><SectionMeta n="01" label="Niveles de autonomía"/></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 }}>
            Cinco niveles graduables — N1 a N5.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', margin: '0 0 56px', maxWidth: 720 }}>
            Interactivo: haz click sobre un nivel para ver qué decide OMNIX y qué queda con tu equipo.
          </p>
        </Reveal>

        {/* Selector de niveles */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 24, flexWrap: 'wrap' }}>
          {levels.map((L, i) => (
            <button key={L.n} onClick={() => setLevel(i)} style={{
              padding: '14px 22px', border: '1.5px solid',
              borderColor: level === i ? '#F4024C' : '#1E1F26',
              background: level === i ? '#F4024C' : '#FFF',
              color: level === i ? '#FFF' : '#1E1F26',
              fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.14em', fontWeight: 600,
              cursor: 'pointer', transition: 'all 220ms',
              minWidth: 84,
            }}>{L.n}</button>
          ))}
        </div>

        {/* Panel del nivel activo */}
        <div key={level} style={{
          border: '1.5px solid #1E1F26', background: '#FFF', padding: 40,
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48,
          animation: 'omnix-slide-in 380ms cubic-bezier(0.2,0.7,0.2,1)',
        }}>
          <style>{`@keyframes omnix-slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }`}</style>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em', color: '#F4024C', marginBottom: 12 }}>
              {levels[level].role}
            </div>
            <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 44, letterSpacing: '-0.025em', color: '#000', margin: '0 0 16px' }}>
              {levels[level].n} · {levels[level].t}
            </h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
              {levels[level].d}
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[0, 1, 2, 3, 4].map((i) => (
              <div key={i} style={{
                padding: '14px 18px',
                background: i <= level ? (i === 4 ? '#000' : '#F4024C') : '#F2F5F9',
                color: i <= level ? '#FFF' : '#96A3B5',
                border: i <= level ? '1.5px solid transparent' : '1px dashed #C7CFDA',
                fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em',
                display: 'flex', flexDirection: 'column', gap: 6,
                transition: 'all 320ms',
              }}>
                <span style={{ opacity: 0.7, fontSize: 9 }}>{levels[i].n}</span>
                <span style={{ fontSize: 12 }}>{i <= level ? '✓' : '·'} {levels[i].t}</span>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
};

const RuntimeGuardrails = () => (
  <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <Reveal><SectionMeta n="02" label="Guardrails · governance"/></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 }}>
          Toda decisión pasa por cinco gates antes de ejecutarse.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26' }}>
        {[
          { n: '01', k: 'POLICY',      t: 'Match',       d: 'La acción propuesta cumple con las políticas configuradas para el caso.' },
          { n: '02', k: 'CONFIDENCE',  t: 'Threshold',   d: 'El score del SDM supera el umbral definido para el nivel de autonomía.' },
          { n: '03', k: 'GUARDRAILS',  t: 'Hard limits', d: 'Ninguna violación de límite operativo, financiero o regulatorio.' },
          { n: '04', k: 'APPROVAL',    t: 'Quorum',      d: 'Si el caso requiere firma humana según N4/N5, el approval flow se dispara.' },
          { n: '05', k: 'EXECUTE',     t: 'Actuate',     d: 'La acción se dispara sobre el sistema destino. Log inmutable firmado.' },
        ].map((g, i) => (
          <SlideIn key={g.n} direction="up" delay={i * 100}>
            <div style={{
              padding: '32px 24px', borderRight: (i < 4) ? '1px solid #E4EBF3' : 'none',
              minHeight: 240, display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#F4024C' }}>GATE {g.n}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase' }}>{g.k}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.015em', color: '#000' }}>{g.t}</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55, color: '#52557A', margin: 0 }}>{g.d}</p>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

const RuntimeSpecs = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96, alignItems: 'start' }}>
        <div>
          <Reveal><SectionMeta n="03" label="Runtime · specs" dark color="#F4024C"/></Reveal>
          <Reveal delay={80}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 44, lineHeight: 1.05, letterSpacing: '-0.02em', color: '#FFF', margin: '0 0 24px' }}>
              Lo que un CIO firma antes de deployar.
            </h2>
          </Reveal>
        </div>
        <div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1.5px solid #2E3140' }}>
            {[
              { l: 'Latencia inferencia P95',  v: '< 200 ms' },
              { l: 'Throughput sostenido',      v: 'Hasta 50K decisiones' },
              { l: 'Autonomía graduable',       v: 'N1 → N5' },
              { l: 'Rollback',                  v: '< 5 min' },
              { l: 'Logs · retención',          v: '10 años · WORM' },
              { l: 'Explicabilidad',            v: 'Por decisión' },
              { l: 'Uptime SLA',                v: '99.80%' },
              { l: 'Human-in-the-loop',         v: 'Configurable por caso' },
            ].map((r, i) => (
              <div key={r.l} style={{
                padding: '20px 20px',
                borderRight: (i % 2 === 0) ? '1px solid #2E3140' : 'none',
                borderBottom: (i < 6) ? '1px solid #2E3140' : 'none',
              }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#96A3B5', textTransform: 'uppercase', marginBottom: 6 }}>{r.l}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, color: '#FFF', fontWeight: 500 }}>{r.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Container>
  </section>
);

Object.assign(window, { RuntimeHero, RuntimeConsole, RuntimeAutonomy, RuntimeGuardrails, RuntimeSpecs });