// OMNIX INGEST — captura, normaliza, anonimiza, vectoriza
const IngestHero = () => (
  <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: '#0050BD', textTransform: 'uppercase' }}>
                Motor 01 · INGEST
              </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: '#0050BD' }}>Ingest</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 }}>
              Captura, normaliza, anonimiza y vectoriza. En origen.
            </div>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: '#52557A', maxWidth: 500, margin: '0 0 32px' }}>
              OMNIX Ingest conecta fuentes autorizadas de la organización —sistemas, documentos,
              eventos, sensores y registros operacionales— para preparar información consistente,
              trazable y lista para ser utilizada por los modelos especializados de OMNIX.
            </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-core.html" icon="arrow-right">Siguiente: Core</Button>
            </div>
          </Reveal>
        </div>

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

// Diagrama: 5 fuentes → funnel de normalización → vectores hacia Core
const IngestDiagram = () => {
  const sources = [
    { n: 'SAP',   y: 80,  color: '#96A3B5' },
    { n: 'CRM',   y: 130, color: '#96A3B5' },
    { n: 'SCADA', y: 180, color: '#0050BD' },
    { n: 'WMS',   y: 230, color: '#96A3B5' },
    { n: 'LOGS',  y: 280, color: '#96A3B5' },
  ];
  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>INGEST · LIVE PIPELINE</span>
        <span style={{ color: '#0050BD', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: '#0050BD' }} className="omnix-blink"/>
          STREAMING
        </span>
      </div>
      <svg viewBox="0 0 560 400" style={{ display: 'block', width: '100%', height: 'auto' }}>
        {/* Grid */}
        <g stroke="#E4EBF3" strokeWidth="0.5">
          {Array.from({length: 12}).map((_, i) => <line key={i} x1={i*50} y1="0" x2={i*50} y2="400"/>)}
          {Array.from({length: 9}).map((_, i) => <line key={i} x1="0" y1={i*50} x2="560" y2={i*50}/>)}
        </g>
        {/* Sources */}
        {sources.map((s, i) => (
          <g key={s.n}>
            <rect x="30" y={s.y - 14} width="70" height="28" fill="#FFF" stroke={s.color} strokeWidth="1.25"/>
            <text x="65" y={s.y + 4} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="11" fill="#1E1F26">{s.n}</text>
            <FlowPath d={`M 100 ${s.y} L 210 ${s.y} L 240 180`} stroke="#96A3B5" strokeWidth={0.75} particleColor={s.color} particleSize={2.2} duration={2 + i * 0.3}/>
          </g>
        ))}
        {/* Normalizer funnel */}
        <g>
          <DrawLine d="M 240 130 L 340 130 L 340 230 L 240 230 Z" stroke="#1E1F26" strokeWidth={1.5} duration={800}/>
          <text x="290" y="176" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#F4024C">NORMALIZE</text>
          <text x="290" y="192" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#52557A">ANONYMIZE</text>
          <text x="290" y="206" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#52557A">VECTORIZE</text>
        </g>
        {/* PII mask indicator */}
        <g transform="translate(340, 100)">
          <rect x="0" y="0" width="80" height="24" fill="#FFF" stroke="#0050BD" strokeWidth="1"/>
          <text x="40" y="16" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#0050BD">PII · MASKED</text>
        </g>
        <FlowPath d={`M 340 180 L 460 180`} stroke="#F4024C" strokeWidth={1.5} particleColor="#F4024C" particleSize={3.5} duration={1.8}/>
        {/* Output vectors */}
        <g transform="translate(460, 180)">
          <rect x="0" y="-30" width="70" height="60" fill="#000" stroke="#F4024C" strokeWidth="1.5"/>
          <text x="35" y="-12" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#96A3B5">OUT</text>
          <text x="35" y="4" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#F4024C">VECTORS</text>
          <text x="35" y="20" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.14em" fill="#FFF">→ CORE</text>
        </g>
        {/* Labels */}
        <text x="30" y="40" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#96A3B5">SOURCES · 5+</text>
        <text x="290" y="80" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#96A3B5">TRANSFORM</text>
        <text x="495" y="130" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em" fill="#F4024C">TO CORE</text>
      </svg>
      {/* Live counters */}
      <IngestLiveCounters/>
    </div>
  );
};

const IngestLiveCounters = () => {
  const [events, setEvents] = React.useState(1_284_402);
  const [dropped, setDropped] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => {
      setEvents((e) => e + Math.floor(Math.random() * 24 + 4));
      if (Math.random() < 0.08) setDropped((d) => d + 1);
    }, 800);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
      borderTop: '1.5px solid #1E1F26',
      fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.14em',
    }}>
      <div style={{ padding: '14px 16px', borderRight: '1px solid #E4EBF3' }}>
        <div style={{ color: '#96A3B5', fontSize: 9, marginBottom: 4 }}>EVENTS · 24H</div>
        <div style={{ color: '#000', fontSize: 14, fontFamily: 'var(--font-mono)' }}>
          <SpringNumber to={events}/>
        </div>
      </div>
      <div style={{ padding: '14px 16px', borderRight: '1px solid #E4EBF3' }}>
        <div style={{ color: '#96A3B5', fontSize: 9, marginBottom: 4 }}>LATENCY P95</div>
        <div style={{ color: '#0F5132', fontSize: 14 }}>72 ms</div>
      </div>
      <div style={{ padding: '14px 16px' }}>
        <div style={{ color: '#96A3B5', fontSize: 9, marginBottom: 4 }}>DROPPED</div>
        <div style={{ color: dropped > 0 ? '#B8860B' : '#0F5132', fontSize: 14 }}>{dropped}</div>
      </div>
    </div>
  );
};

const IngestCapabilities = () => {
  const caps = [
    { i: 'plug', t: 'Conectores enterprise nativos',       d: 'SAP, Oracle, Salesforce, ServiceNow, Databricks, Snowflake, SCADA/OPC-UA, WMS/TMS, POS. Certificados, mantenidos, sin código boilerplate por parte del cliente.' },
    { i: 'shuffle',    t: 'Streaming + batch simultáneos', d: 'Un mismo motor procesa telemetría en tiempo real y cargas históricas. Backfill sin afectar el pipeline en vivo. Consistencia exactly-once por evento.' },
    { i: 'eye-off',    t: 'PII / PHI anonimizado en origen', d: 'Enmascaramiento configurable por campo. Los datos sensibles nunca abandonan el sistema fuente en claro. Cumplimiento GDPR, LGPD, HIPAA nativo.' },
    { i: 'file-check-2', t: 'Vectorización multi-modal',   d: 'Estructurado, texto, series temporales, voz, imagen. Embeddings propietarios entrenados sobre tu dominio — no genéricos de OpenAI o Cohere.' },
  ];
  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="Capacidades de ingesta" color="#0050BD"/></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 }}>
            Todo lo que entra al pipeline sale ya <span style={{ color: '#0050BD' }}>listo para razonar</span>.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {caps.map((c, i) => (
            <SlideIn key={c.t} direction={i % 2 === 0 ? 'right' : 'left'} delay={i * 80}>
              <div style={{
                background: '#FFF', border: '1px solid #E4EBF3', padding: 32, minHeight: 200,
                display: 'flex', gap: 24,
                transition: 'border-color 220ms',
              }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = '#0050BD'}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = '#E4EBF3'}>
                <div style={{ width: 44, height: 44, background: '#E6EEFB', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <i data-lucide={c.i} width="22" height="22" style={{ color: '#0050BD', strokeWidth: 1.5 }}/>
                </div>
                <div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.01em', color: '#000', margin: '0 0 10px' }}>
                    {c.t}
                  </h3>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.6, color: '#52557A', margin: 0 }}>
                    {c.d}
                  </p>
                </div>
              </div>
            </SlideIn>
          ))}
        </div>
      </Container>
    </section>
  );
};

const IngestStages = () => {
  const stages = [
    { n: '01', k: 'CAPTURE',     t: 'Conectar', d: 'Adapters bidireccionales por sistema fuente. Sin agentes intrusivos, sin ETL a medida.' },
    { n: '02', k: 'NORMALIZE',   t: 'Homogeneizar', d: 'Cada evento pasa a un esquema canónico OMNIX. Timezones, unidades, IDs — todo consistente.' },
    { n: '03', k: 'ANONYMIZE',   t: 'Proteger', d: 'PII/PHI enmascarado en origen. Tokenización reversible sólo dentro del perímetro cliente.' },
    { n: '04', k: 'CONTEXTUALIZE', t: 'Enriquecer', d: 'Cross-join con catálogos de negocio: clientes, productos, sitios, contratos, jerarquías.' },
    { n: '05', k: 'VECTORIZE',   t: 'Preparar', d: 'Embeddings multi-modales listos para consumo por Core y por Runtime.' },
  ];
  return (
    <section style={{ background: '#FFFFFF', paddingTop: 128, paddingBottom: 128 }}>
      <Container>
        <Reveal><SectionMeta n="02" label="Cinco etapas · un pipeline"/></Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 52, lineHeight: 1.03, letterSpacing: '-0.025em', margin: '0 0 72px', color: '#000', maxWidth: 900 }}>
            De evento crudo a vector auditable — en menos de un segundo.
          </h2>
        </Reveal>

        {/* Timeline horizontal con conectores */}
        <div style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', top: 40, left: '5%', right: '5%', height: 1.5, background: '#E4EBF3' }}/>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0 }}>
            {stages.map((s, i) => (
              <Reveal key={s.n} delay={i * 120}>
                <div style={{ padding: '0 12px', position: 'relative' }}>
                  <div style={{
                    width: 48, height: 48, background: '#FFF', border: '1.5px solid #0050BD',
                    borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, color: '#0050BD',
                    marginBottom: 20, position: 'relative', zIndex: 1,
                  }}>{s.n}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#F4024C', textTransform: 'uppercase', marginBottom: 6 }}>
                    {s.k}
                  </div>
                  <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.015em', color: '#000', margin: '0 0 10px', lineHeight: 1.2 }}>
                    {s.t}
                  </h4>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.55, color: '#52557A', margin: 0 }}>
                    {s.d}
                  </p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
};

const IngestSpecs = () => (
  <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="Especificaciones técnicas" 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 le mostrarías a tu arquitecto.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: '#96A3B5', margin: 0 }}>
              Los números que un CTO pide antes de firmar. Ninguno es marketing — todos son operativos hoy.
            </p>
          </Reveal>
        </div>
        <div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1.5px solid #2E3140' }}>
            {[
              { l: 'Latencia P95 · streaming', v: '< 100 ms' },
              { l: 'Throughput sostenido',      v: '250K eps' },
              { l: 'Formatos soportados',       v: '40+' },
              { l: 'Adapters certificados',     v: '65+' },
              { l: 'Delivery guarantee',        v: 'exactly-once' },
              { l: 'Uptime SLA',                v: '99.98%' },
              { l: 'Encriptación',              v: 'AES-256 · TLS 1.3' },
              { l: 'Compliance',                v: 'GDPR · LGPD · HIPAA' },
            ].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, letterSpacing: '-0.005em' }}>
                  {r.v}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </Container>
  </section>
);

Object.assign(window, { IngestHero, IngestDiagram, IngestCapabilities, IngestStages, IngestSpecs });
