// OMNIX CORTEX — Deep Think · razonamiento multi-SDM
const CortexHero = () => (
  <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: '#B00238', textTransform: 'uppercase' }}>Motor 04 · CORTEX</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: '#B00238' }}>Cortex</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 }}>
              La capa cognitiva superior. Razona sobre múltiples SDMs.
            </div>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', maxWidth: 500, margin: '0 0 32px' }}>
              Deep Think orquesta N SDMs concurrentes, aplica reglas multi-objetivo (costo, riesgo, SLA),
              y produce un plan de acción priorizado. Explicable. Auditable. Determinístico.
              Este es el motor donde nace la ventaja competitiva.
            </p>
          </Reveal>
          <Reveal delay={260}>
            <div style={{ display: 'flex', gap: 12 }}>
              <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar Cognitive Assessment</Button>
              <Button variant="ghost" href="arquitectura.html" icon="arrow-right">Volver a arquitectura</Button>
            </div>
          </Reveal>
        </div>

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

// Grafo de razonamiento multi-SDM
const CortexReasoningGraph = () => (
  <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>CORTEX · DEEP THINK · SESSION #29841</span>
      <span style={{ color: '#B00238', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: '#B00238' }} className="omnix-blink"/>
        REASONING
      </span>
    </div>
    <svg viewBox="0 0 560 440" style={{ display: 'block', width: '100%', height: 'auto' }}>
      <defs>
        <marker id="cx-arrow" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M0,0 L8,4 L0,8" fill="none" stroke="#B00238" strokeWidth="1.5"/>
        </marker>
      </defs>
      <g stroke="#E4EBF3" strokeWidth="0.5">
        {Array.from({length: 12}).map((_, i) => <line key={i} x1={i*50} y1="0" x2={i*50} y2="440"/>)}
        {Array.from({length: 10}).map((_, i) => <line key={i} x1="0" y1={i*50} x2="560" y2={i*50}/>)}
      </g>

      {/* SDM nodes (4 concurrentes, izquierda) */}
      {[
        { n: 'SDM · risk',       y: 90 },
        { n: 'SDM · demand',     y: 170 },
        { n: 'SDM · supply',     y: 250 },
        { n: 'SDM · fraud',      y: 330 },
      ].map((s, i) => (
        <g key={s.n} transform={`translate(60, ${s.y})`}>
          <rect x="0" y="-16" width="120" height="32" fill="#FFF" stroke="#1E1F26" strokeWidth="1"/>
          <circle cx="12" cy="0" r="4" fill="#0050BD">
            <animate attributeName="opacity" values="1;0.3;1" dur={`${1.4 + i * 0.15}s`} repeatCount="indefinite"/>
          </circle>
          <text x="30" y="4" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.06em" fill="#1E1F26">{s.n}</text>
          <FlowPath
            d={`M 180 ${s.y} L 280 ${s.y} L 280 220 L 320 220`}
            stroke="#96A3B5" strokeWidth={0.75}
            particleColor="#0050BD" particleSize={2.5} duration={2.2 + i * 0.2}
          />
        </g>
      ))}
      {/* Rules / constraints (arriba) */}
      <g transform="translate(200, 30)">
        <rect x="0" y="-10" width="160" height="24" fill="#FFF" stroke="#96A3B5" strokeWidth="1" strokeDasharray="3 3"/>
        <text x="80" y="6" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#52557A">POLICIES · CONSTRAINTS</text>
        <FlowPath d={`M 280 14 L 320 200`} stroke="#96A3B5" strokeWidth={0.75} particleColor="#96A3B5" particleSize={2} duration={2.4}/>
      </g>

      {/* DEEP THINK core (centro) */}
      <g transform="translate(360, 220)">
        <circle r="80" fill="none" stroke="#B00238" strokeWidth="1" opacity="0.2"/>
        <circle r="60" fill="none" stroke="#B00238" strokeWidth="1" opacity="0.4">
          <animate attributeName="r" values="55;65;55" dur="3s" repeatCount="indefinite"/>
        </circle>
        <rect x="-46" y="-46" width="92" height="92" fill="#000" stroke="#B00238" strokeWidth="2"/>
        <text y="-10" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="14" fill="#FFF">DEEP</text>
        <text y="10" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="14" fill="#B00238">THINK</text>
        <text y="30" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" letterSpacing="0.2em" fill="#96A3B5">CORTEX</text>
      </g>

      {/* Output plan (derecha) */}
      <g transform="translate(500, 220)">
        <FlowPath d={`M -80 0 L -20 0`} stroke="#B00238" strokeWidth={1.5} particleColor="#B00238" particleSize={4} duration={1.4} pulseWidth/>
        <polygon points="-14,0 0,-14 14,0 0,14" fill="#B00238" stroke="#B00238" strokeWidth="1.5"/>
        <text y="34" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#B00238">PLAN</text>
        <text y="48" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#52557A">PRIORITIZED · AUDITED</text>
      </g>

      {/* Labels */}
      <text x="60" y="40" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#96A3B5">CONCURRENT SDMs</text>
      <text x="360" y="330" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#96A3B5">MULTI-OBJECTIVE REASONING</text>
    </svg>
    <CortexScoreBar/>
  </div>
);

// Bar de scores multi-objetivo
const CortexScoreBar = () => {
  const [scores, setScores] = React.useState({ cost: 0.72, risk: 0.15, sla: 0.94 });
  React.useEffect(() => {
    const id = setInterval(() => {
      setScores({
        cost: 0.5 + Math.random() * 0.4,
        risk: 0.05 + Math.random() * 0.25,
        sla:  0.7 + Math.random() * 0.29,
      });
    }, 2400);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{
      borderTop: '1.5px solid #1E1F26', padding: '16px 20px', background: '#FFF',
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
    }}>
      {[
        { k: 'cost', l: 'COST · min', v: scores.cost, invert: true },
        { k: 'risk', l: 'RISK · min', v: scores.risk, invert: true, danger: true },
        { k: 'sla',  l: 'SLA · max',  v: scores.sla },
      ].map((m) => (
        <div key={m.k}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', color: '#96A3B5', textTransform: 'uppercase' }}>{m.l}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: m.danger ? '#EA384C' : '#000' }}>{(m.v * 100).toFixed(0)}%</span>
          </div>
          <div style={{ height: 4, background: '#F2F5F9' }}>
            <div style={{
              height: '100%', width: `${m.v * 100}%`,
              background: m.danger ? '#EA384C' : '#B00238',
              transition: 'width 800ms cubic-bezier(0.2,0.7,0.2,1)',
            }}/>
          </div>
        </div>
      ))}
    </div>
  );
};

const CortexReasoning = () => (
  <section style={{ background: '#FAFBFD', paddingTop: 128, paddingBottom: 128, borderTop: '1.5px solid #E4EBF3', borderBottom: '1.5px solid #E4EBF3' }}>
    <Container>
      <Reveal><SectionMeta n="01" label="El ciclo Deep Think"/></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 }}>
          Cinco pasos de razonamiento. Cada uno auditable.
        </h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, borderTop: '1.5px solid #1E1F26' }}>
        {[
          { n: '01', t: 'Aggregate',    d: 'Recolecta outputs de todos los SDMs activos y contexto operacional.' },
          { n: '02', t: 'Constrain',    d: 'Aplica reglas de negocio, políticas y hard limits del cliente.' },
          { n: '03', t: 'Optimize',     d: 'Búsqueda multi-objetivo sobre el espacio factible.' },
          { n: '04', t: 'Prioritize',   d: 'Ordena candidatos por impacto, riesgo y ventana de tiempo.' },
          { n: '05', t: 'Explain',      d: 'Genera traza determinística: por qué esta acción y no otra.' },
        ].map((s, i) => (
          <SlideIn key={s.n} direction="up" delay={i * 100}>
            <div style={{
              padding: '32px 24px', borderRight: (i < 4) ? '1px solid #E4EBF3' : 'none',
              background: '#FFF', minHeight: 220, display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', color: '#B00238' }}>STEP {s.n}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.015em', color: '#000' }}>
                {s.t}
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
                {s.d}
              </p>
            </div>
          </SlideIn>
        ))}
      </div>
    </Container>
  </section>
);

const CortexDeterministic = () => (
  <section style={{ background: '#000', color: '#FFF', paddingTop: 128, paddingBottom: 128 }}>
    <Container>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <Reveal><SectionMeta n="02" label="Razonamiento determinístico" dark color="#F4024C"/></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: '#FFF' }}>
              La misma entrada. La misma decisión. Cada vez.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.5, color: '#96A3B5', margin: '0 0 24px' }}>
              Los LLMs generalistas responden distinto ante el mismo prompt. Cortex razona con
              trazabilidad determinística — ideal para operaciones críticas y auditorías regulatorias.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                'Misma entrada → misma decisión, siempre reproducible',
                'Traza explicable por decisión (features, pesos, reglas aplicadas)',
                'Explicabilidad en formato regulator-ready (SR 11-7, DORA)',
                'Firma criptográfica del artefacto de decisión',
              ].map((it) => (
                <li key={it} style={{ display: 'flex', gap: 12, fontFamily: 'var(--font-body)', fontSize: 15, color: '#FFF', lineHeight: 1.5 }}>
                  <i data-lucide="check" width="16" height="16" style={{ color: '#F4024C', strokeWidth: 2, marginTop: 3, flexShrink: 0 }}/>
                  {it}
                </li>
              ))}
            </ul>
          </Reveal>
        </div>
        <Reveal delay={200} y={0}>
          <DecisionTrace/>
        </Reveal>
      </div>
    </Container>
  </section>
);

// Trace ilustrativo de una decisión Cortex
const DecisionTrace = () => (
  <div style={{ border: '1.5px solid #2E3140', background: '#0A0B10', color: '#FFF' }}>
    <div style={{
      padding: '14px 20px', borderBottom: '1px solid #2E3140',
      fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#96A3B5',
      display: 'flex', justifyContent: 'space-between',
    }}>
      <span>DECISION TRACE · #DT-4028-a7f9</span>
      <span style={{ color: '#0F5132' }}>SIGNED · WORM</span>
    </div>
    <div style={{ padding: '20px 24px', fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.7, color: '#FFF' }}>
      <div style={{ color: '#96A3B5' }}>// input</div>
      <div>event_id: <span style={{ color: '#F4024C' }}>ord-84029</span></div>
      <div>context: <span style={{ color: '#96A3B5' }}>supply-chain · sla-critical</span></div>
      <div style={{ marginTop: 12, color: '#96A3B5' }}>// sdms invoked</div>
      <div>├── sdm.risk       score=<span style={{ color: '#EA384C' }}>0.72</span></div>
      <div>├── sdm.supply     score=<span style={{ color: '#0F5132' }}>0.91</span></div>
      <div>└── sdm.demand     score=<span style={{ color: '#B8860B' }}>0.64</span></div>
      <div style={{ marginTop: 12, color: '#96A3B5' }}>// deep-think</div>
      <div>policy.p_29:  <span style={{ color: '#0F5132' }}>match</span></div>
      <div>guardrail.g_12: <span style={{ color: '#0F5132' }}>pass</span></div>
      <div>optimize:     <span style={{ color: '#F4024C' }}>reroute (cost -18%, sla +0.4)</span></div>
      <div style={{ marginTop: 12, color: '#96A3B5' }}>// decision</div>
      <div>action:  <span style={{ color: '#F4024C' }}>reassign-shipment</span></div>
      <div>autonomy: <span style={{ color: '#FFF' }}>N4</span> · executed</div>
      <div>latency:  <span style={{ color: '#FFF' }}>78 ms</span></div>
    </div>
  </div>
);

Object.assign(window, { CortexHero, CortexReasoningGraph, CortexReasoning, CortexDeterministic });
