// ── Animated neural-particle background + Hero intelligence core ────────

// Full-page drifting particle network drawn on the fixed canvas.
function initNeural() {
  const canvas = document.getElementById('neural-canvas');
  if (!canvas) return () => {};
  const ctx = canvas.getContext('2d');
  let w, h, dpr, nodes = [], raf, mouse = { x: -9999, y: -9999 };
  let running = true;

  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  function resize() {
    dpr = Math.min(window.devicePixelRatio || 1, 2);
    w = canvas.clientWidth; h = canvas.clientHeight;
    canvas.width = w * dpr; canvas.height = h * dpr;
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    const target = Math.round((w * h) / 26000);
    const count = Math.max(36, Math.min(96, target));
    nodes = new Array(count).fill(0).map(() => ({
      x: Math.random() * w,
      y: Math.random() * h,
      vx: (Math.random() - 0.5) * 0.22,
      vy: (Math.random() - 0.5) * 0.22,
      r: Math.random() * 1.4 + 0.6,
    }));
  }

  function tick() {
    if (!running) return;
    ctx.clearRect(0, 0, w, h);
    const linkDist = 132;
    for (let i = 0; i < nodes.length; i++) {
      const n = nodes[i];
      if (!reduced) { n.x += n.vx; n.y += n.vy; }
      if (n.x < 0 || n.x > w) n.vx *= -1;
      if (n.y < 0 || n.y > h) n.vy *= -1;

      // subtle mouse attraction
      const mdx = mouse.x - n.x, mdy = mouse.y - n.y;
      const md = Math.hypot(mdx, mdy);
      if (md < 150) { n.x += (mdx / md) * 0.25; n.y += (mdy / md) * 0.25; }
    }
    for (let i = 0; i < nodes.length; i++) {
      for (let j = i + 1; j < nodes.length; j++) {
        const a = nodes[i], b = nodes[j];
        const d = Math.hypot(a.x - b.x, a.y - b.y);
        if (d < linkDist) {
          const o = (1 - d / linkDist) * 0.5;
          ctx.strokeStyle = `rgba(110,140,255,${o * 0.5})`;
          ctx.lineWidth = 0.6;
          ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
        }
      }
    }
    for (const n of nodes) {
      ctx.beginPath();
      ctx.fillStyle = 'rgba(150,170,255,0.7)';
      ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
      ctx.fill();
    }
    raf = requestAnimationFrame(tick);
  }

  function onMove(e) { mouse.x = e.clientX; mouse.y = e.clientY; }
  function onLeave() { mouse.x = -9999; mouse.y = -9999; }

  resize();
  tick();
  window.addEventListener('resize', resize);
  window.addEventListener('mousemove', onMove);
  window.addEventListener('mouseleave', onLeave);

  return {
    setRunning(v) { running = v; if (v && !reduced) tick(); },
    destroy() { running = false; cancelAnimationFrame(raf); window.removeEventListener('resize', resize); window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseleave', onLeave); ctx.clearRect(0,0,w,h); },
  };
}

// Hero intelligence core — layered orbital reasoning system (SVG + CSS)
function HeroCore() {
  const ringNodes = (r, n, dur, rev) => {
    const items = [];
    for (let i = 0; i < n; i++) {
      const a = (i / n) * Math.PI * 2;
      items.push(
        <circle key={i} cx={150 + r * Math.cos(a)} cy={150 + r * Math.sin(a)} r={i === 0 ? 3.4 : 2.1}
          fill={i === 0 ? 'var(--accent-to)' : 'rgba(180,195,255,0.9)'} />
      );
    }
    return (
      <g style={{ transformOrigin: '150px 150px', animation: `${rev ? 'spin-rev' : 'spin-slow'} ${dur}s linear infinite` }}>
        <circle cx="150" cy="150" r={r} fill="none" stroke="rgba(120,140,255,0.18)" strokeWidth="1" />
        {items}
      </g>
    );
  };

  // outer dashed ring with tick marks
  const ticks = [];
  for (let i = 0; i < 60; i++) {
    const a = (i / 60) * Math.PI * 2;
    const long = i % 5 === 0;
    const r1 = long ? 138 : 142, r2 = 146;
    ticks.push(
      <line key={i}
        x1={150 + r1 * Math.cos(a)} y1={150 + r1 * Math.sin(a)}
        x2={150 + r2 * Math.cos(a)} y2={150 + r2 * Math.sin(a)}
        stroke="rgba(120,140,255,0.4)" strokeWidth={long ? 1 : 0.6} />
    );
  }

  return (
    <div className="relative w-full flex items-center justify-center select-none" style={{ animation: 'float-y 8s ease-in-out infinite' }}>
      {/* ambient glow */}
      <div className="absolute rounded-full blur-3xl" style={{ width: 380, height: 380, background: 'radial-gradient(circle, rgba(91,134,255,0.34), rgba(164,118,255,0.15) 45%, transparent 70%)' }}></div>

      {/* bracket frame corners */}
      <svg viewBox="0 0 300 300" className="absolute w-[clamp(280px,40vw,500px)] h-auto pointer-events-none" aria-hidden="true">
        <g stroke="rgba(120,140,255,0.32)" strokeWidth="1" fill="none">
          <path d="M10 30 V10 H30" /><path d="M270 10 H290 V30" />
          <path d="M290 270 V290 H270" /><path d="M30 290 H10 V270" />
        </g>
        <text x="12" y="22" fill="rgba(138,145,164,0.6)" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="1">CIRA·CORE</text>
        <text x="248" y="22" fill="rgba(138,145,164,0.6)" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="1">v2.0</text>
        <text x="12" y="285" fill="rgba(138,145,164,0.55)" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="1">RID 0xA47F</text>
        <text x="222" y="285" fill="rgba(138,145,164,0.55)" fontFamily="JetBrains Mono, monospace" fontSize="7" letterSpacing="1">STABLE</text>
      </svg>

      <svg viewBox="0 0 300 300" className="relative w-[clamp(280px,38vw,460px)] h-auto" aria-hidden="true">
        <defs>
          <radialGradient id="core-g" cx="50%" cy="50%" r="50%">
            <stop offset="0" stopColor="#EAF0FF" />
            <stop offset="0.45" stopColor="var(--accent-from)" />
            <stop offset="1" stopColor="var(--accent-to)" />
          </radialGradient>
          <filter id="soft-blur"><feGaussianBlur stdDeviation="2.4" /></filter>
          <linearGradient id="scan-g" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="var(--accent-from)" stopOpacity="0" />
            <stop offset="1" stopColor="var(--accent-from)" stopOpacity="0.9" />
          </linearGradient>
        </defs>

        {/* crosshair axes */}
        <g stroke="rgba(120,140,255,0.14)" strokeWidth="0.8">
          <line x1="14" y1="150" x2="286" y2="150" strokeDasharray="2 4" />
          <line x1="150" y1="14" x2="150" y2="286" strokeDasharray="2 4" />
        </g>

        {/* tick dial */}
        <g style={{ transformOrigin: '150px 150px', animation: 'scan-rot 60s linear infinite' }}>{ticks}</g>

        {/* rotating scan sweep */}
        <g style={{ transformOrigin: '150px 150px', animation: 'scan-rot 7s linear infinite' }}>
          <path d="M150 150 L150 22 A128 128 0 0 1 240 60 Z" fill="url(#scan-g)" opacity="0.12" />
        </g>

        {/* connective mesh inside */}
        <g stroke="rgba(120,140,255,0.22)" strokeWidth="0.8" fill="none">
          <path d="M150 60 L210 150 L150 240 L90 150 Z" />
          <path d="M90 150 L210 150" /><path d="M150 60 L150 240" />
          <path d="M110 100 L190 200" /><path d="M190 100 L110 200" />
        </g>

        {ringNodes(120, 3, 38, true)}
        {ringNodes(94, 6, 28, false)}
        {ringNodes(64, 4, 20, true)}

        {/* glowing core */}
        <circle cx="150" cy="150" r="28" fill="url(#core-g)" filter="url(#soft-blur)" opacity="0.7" />
        <circle cx="150" cy="150" r="17" fill="url(#core-g)" style={{ transformOrigin: '150px 150px', animation: 'pulse-core 3.6s ease-in-out infinite' }} />
        <circle cx="150" cy="150" r="17" fill="none" stroke="rgba(255,255,255,0.5)" strokeWidth="0.8" />
      </svg>
    </div>
  );
}

Object.assign(window, { initNeural, HeroCore });