// Bloque 2 — HERO
// Fondo blanco, título editorial masivo izquierda, diagrama de nodos que se dibuja a la derecha.
const HomeHero = () => {
  return (
    <section style={{
      background: '#FFFFFF', color: '#1E1F26',
      paddingTop: 88, paddingBottom: 112, position: 'relative', overflow: 'hidden',
    }}>
      {/* Grid técnico sutil de fondo */}
      <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 75% 45%, #000 0%, transparent 65%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 75% 45%, #000 0%, transparent 65%)',
      }}/>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 64, alignItems: 'center', position: 'relative' }}>
          <div>
            <Reveal>
              <Eyebrow color="#F4024C">OMNIX · COGNITIVE OPERATIONS · SOVEREIGN AI</Eyebrow>
              <Rule width={56}/>
            </Reveal>
            <Reveal delay={80}>
              <h1 style={{
                fontFamily: 'var(--font-display)', fontWeight: 800,
                fontSize: 84, lineHeight: 0.98, letterSpacing: '-0.03em',
                margin: '0 0 28px', maxWidth: 720, color: '#000',
              }}>
                De cognición<br/>a acción <span style={{ color: '#F4024C' }}>autónoma</span>.
              </h1>
            </Reveal>
            <Reveal delay={140}>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 20, lineHeight: 1.5,
                color: '#52557A', maxWidth: 560, margin: '0 0 36px',
              }}>
                Plataforma de cognición operacional soberana para grandes empresas críticas.
                OMNIX entrena modelos de dominio especializado <span style={{ color: '#1E1F26', fontFamily: 'var(--font-mono)', fontSize: 15 }}>(SDMs)</span> sobre
                tus datos, reglas y procesos. Detecta, prioriza, decide y ejecuta.
              </p>
            </Reveal>
            <Reveal delay={200}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 32 }}>
                <Button variant="primary" icon="arrow-right" href="diagnostico.html">Solicitar diagnóstico cognitivo</Button>
                <Button variant="ghost" href="plataforma.html">Ver plataforma</Button>
              </div>
            </Reveal>
            <Reveal delay={260}>
              <div style={{ display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#96A3B5', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                  Producción · 8 países · <CountUp to={600} suffix="M+"/> transacciones
                </div>
              </div>
            </Reveal>
          </div>

          {/* Diagrama estilo Aera — nodos y trazos que se dibujan */}
          <Reveal delay={200} y={0}>
            <NodeArchitectureDiagram/>
          </Reveal>
        </div>
      </Container>
    </section>
  );
};

// Diagrama vectorial: 4 capas de nodos conectados a un nodo central "Cortex"
const NodeArchitectureDiagram = () => {
  const W = 560, H = 520;
  // Sources (izquierda), Cortex (centro), Actions (derecha)
  const cortex = { x: 280, y: 260 };
  const sources = [
    { x: 60, y: 90, label: 'ERP' },
    { x: 60, y: 170, label: 'CRM' },
    { x: 60, y: 250, label: 'SCADA' },
    { x: 60, y: 330, label: 'WMS' },
    { x: 60, y: 410, label: 'TMS' },
  ];
  const actions = [
    { x: 500, y: 130, label: 'REROUTE' },
    { x: 500, y: 220, label: 'REASSIGN' },
    { x: 500, y: 310, label: 'CLOSE-INCIDENT' },
    { x: 500, y: 400, label: 'ALERT' },
  ];
  return (
    <div style={{
      background: '#FAFBFD', border: '1.5px solid #1E1F26', padding: 0,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Header técnico */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '14px 20px', borderBottom: '1.5px solid #1E1F26',
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: '#52557A', textTransform: 'uppercase',
      }}>
        <span>OMNIX · RUNTIME ARCHITECTURE</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"/>
          LIVE
        </span>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ display: 'block', width: '100%', height: 'auto', background: '#FAFBFD' }}>
        <defs>
          <marker id="arrow-ink" 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="#1E1F26" strokeWidth="1.5"/>
          </marker>
          <marker id="arrow-fuxia" 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="#F4024C" strokeWidth="1.5"/>
          </marker>
        </defs>

        {/* Grid muy sutil */}
        <g stroke="#E4EBF3" strokeWidth="0.5">
          {Array.from({length: 12}).map((_, i) => <line key={`v${i}`} x1={i*50} y1="0" x2={i*50} y2={H}/>)}
          {Array.from({length: 11}).map((_, i) => <line key={`h${i}`} x1="0" y1={i*50} x2={W} y2={i*50}/>)}
        </g>

        {/* Trazos ingest → cortex (dibujo animado) */}
        {sources.map((s, i) => (
          <DrawLine key={`in${i}`}
            d={`M ${s.x + 30} ${s.y} L ${(s.x + cortex.x)/2} ${s.y} L ${(s.x + cortex.x)/2} ${cortex.y} L ${cortex.x - 40} ${cortex.y}`}
            stroke="#1E1F26" strokeWidth="1"
            duration={1000} delay={200 + i * 90}
          />
        ))}

        {/* Trazos cortex → actions */}
        {actions.map((a, i) => (
          <DrawLine key={`out${i}`}
            d={`M ${cortex.x + 40} ${cortex.y} L ${(cortex.x + a.x)/2} ${cortex.y} L ${(cortex.x + a.x)/2} ${a.y} L ${a.x - 30} ${a.y}`}
            stroke="#F4024C" strokeWidth="1"
            duration={1000} delay={900 + i * 100}
          />
        ))}

        {/* Cortex central — cuadrado con anillo */}
        <g transform={`translate(${cortex.x}, ${cortex.y})`}>
          <circle r="60" fill="none" stroke="#1E1F26" strokeWidth="1" opacity="0.15"/>
          <circle r="48" fill="none" stroke="#1E1F26" strokeWidth="1" opacity="0.25"/>
          <rect x="-40" y="-40" width="80" height="80" fill="#FFFFFF" stroke="#1E1F26" strokeWidth="1.5"/>
          <text y="-6" textAnchor="middle" fontFamily="var(--font-display)" fontWeight="800" fontSize="20" fill="#000">OMNIX</text>
          <text y="14" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.2em" fill="#F4024C">CORTEX</text>
          <text y="30" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" letterSpacing="0.2em" fill="#52557A">SDM · 20B</text>
        </g>

        {/* Nodos fuente */}
        {sources.map((s, i) => (
          <g key={`src${i}`}>
            <rect x={s.x} y={s.y - 12} width="30" height="24" fill="#FFFFFF" stroke="#1E1F26" strokeWidth="1.25"/>
            <text x={s.x - 10} y={s.y + 4} textAnchor="end" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#1E1F26">{s.label}</text>
            <PulseDot cx={s.x + 15} cy={s.y} r={2.5} color="#0050BD" pulse={false}/>
          </g>
        ))}

        {/* Nodos acción */}
        {actions.map((a, i) => (
          <g key={`act${i}`}>
            <polygon
              points={`${a.x - 12},${a.y} ${a.x},${a.y - 12} ${a.x + 12},${a.y} ${a.x},${a.y + 12}`}
              fill="#FFFFFF" stroke="#F4024C" strokeWidth="1.5"/>
            <text x={a.x + 22} y={a.y + 4} fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.14em" fill="#1E1F26">{a.label}</text>
          </g>
        ))}

        {/* Labels de zonas */}
        <text x={60} y={40} fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.24em" fill="#96A3B5">INGEST · DATA</text>
        <text x={280} y={40} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.24em" fill="#96A3B5">COGNITION</text>
        <text x={500} y={40} textAnchor="end" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="0.24em" fill="#96A3B5">EXECUTION</text>

        {/* Partículas fluyendo por un path de referencia (invisible) para dar sensación de datos vivos */}
        <path id="flow-path-hero" d={`M 90 250 L 220 250 L 220 260 L 240 260`} fill="none" stroke="none"/>
        <FlowingParticle pathId="flow-path-hero" color="#0050BD" duration={3} size={2.5}/>
      </svg>

      {/* Footer del panel */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        borderTop: '1.5px solid #1E1F26',
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#52557A',
      }}>
        <div style={{ padding: '12px 16px', borderRight: '1px solid #E4EBF3' }}>
          <div style={{ color: '#96A3B5', fontSize: 9 }}>DETECT</div>
          <div style={{ color: '#1E1F26', fontSize: 12, marginTop: 4 }}>Real-time</div>
        </div>
        <div style={{ padding: '12px 16px', borderRight: '1px solid #E4EBF3' }}>
          <div style={{ color: '#96A3B5', fontSize: 9 }}>DECIDE</div>
          <div style={{ color: '#1E1F26', fontSize: 12, marginTop: 4 }}>Deterministic</div>
        </div>
        <div style={{ padding: '12px 16px' }}>
          <div style={{ color: '#96A3B5', fontSize: 9 }}>EXECUTE</div>
          <div style={{ color: '#F4024C', fontSize: 12, marginTop: 4 }}>Autonomous</div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { HomeHero, NodeArchitectureDiagram });