// circuit.jsx — Abstract circuit grid SVG (nodes + traces) for the hero.
// Procedural so it doesn't look hand-drawn-pretty. Echoes the dog logo.

function CircuitGrid({ density = "regular", className = "" }) {
  // build a deterministic-ish set of nodes and traces
  const cols = density === "dense" ? 14 : density === "sparse" ? 8 : 11;
  const rows = density === "dense" ? 9 : density === "sparse" ? 5 : 7;
  const W = 1200, H = 700;
  const cellW = W / (cols + 1);
  const cellH = H / (rows + 1);

  // PRNG (mulberry32) seeded for stability
  const seed = density === "dense" ? 7331 : density === "sparse" ? 24 : 1337;
  let s = seed;
  const rand = () => {
    s |= 0; s = s + 0x6D2B79F5 | 0;
    let t = Math.imul(s ^ s >>> 15, 1 | s);
    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
    return ((t ^ t >>> 14) >>> 0) / 4294967296;
  };

  const nodes = [];
  for (let r = 1; r <= rows; r++) {
    for (let c = 1; c <= cols; c++) {
      if (rand() < 0.55) {
        nodes.push({
          x: c * cellW + (rand() - 0.5) * cellW * 0.25,
          y: r * cellH + (rand() - 0.5) * cellH * 0.25,
          r: 1.6 + rand() * 1.8,
          pulse: rand() < 0.18,
          delay: rand() * 4,
        });
      }
    }
  }

  // Orthogonal traces between random pairs
  const traces = [];
  for (let i = 0; i < nodes.length; i++) {
    if (rand() < 0.45) {
      const a = nodes[i];
      const b = nodes[Math.floor(rand() * nodes.length)];
      if (!b || a === b) continue;
      const dx = b.x - a.x, dy = b.y - a.y;
      if (Math.abs(dx) + Math.abs(dy) > 220) continue;
      const midX = rand() < 0.5 ? b.x : a.x;
      traces.push(`M ${a.x} ${a.y} L ${midX} ${a.y} L ${midX} ${b.y} L ${b.x} ${b.y}`);
    }
  }

  return (
    <svg viewBox={`0 0 ${W} ${H}`} className={className}
         preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs>
        <linearGradient id="trace-grad" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%"   stopColor="var(--accent-light)" stopOpacity="0.55" />
          <stop offset="100%" stopColor="var(--accent)"       stopOpacity="0.25" />
        </linearGradient>
        <radialGradient id="node-grad" cx="50%" cy="50%" r="50%">
          <stop offset="0%"   stopColor="var(--accent-light)" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.4" />
        </radialGradient>
      </defs>

      {/* faint dot grid backdrop */}
      <g opacity="0.35">
        {Array.from({ length: rows * cols }).map((_, i) => {
          const r = Math.floor(i / cols) + 1;
          const c = (i % cols) + 1;
          return (
            <circle key={i} cx={c * cellW} cy={r * cellH} r="0.8"
                    fill="rgba(255,255,255,0.18)" />
          );
        })}
      </g>

      {/* traces */}
      <g fill="none" stroke="url(#trace-grad)" strokeWidth="1.1">
        {traces.map((d, i) => <path key={i} d={d} />)}
      </g>

      {/* nodes */}
      <g>
        {nodes.map((n, i) => (
          <g key={i} className={n.pulse ? "node-pulse" : ""}
             style={n.pulse ? { animationDelay: `${n.delay}s` } : null}>
            <circle cx={n.x} cy={n.y} r={n.r + 3}
                    fill="url(#node-grad)" opacity="0.18" />
            <circle cx={n.x} cy={n.y} r={n.r}
                    fill="url(#node-grad)" />
            <circle cx={n.x} cy={n.y} r={n.r * 0.45}
                    fill="#F5F5F7" opacity="0.85" />
          </g>
        ))}
      </g>
    </svg>
  );
}

window.CircuitGrid = CircuitGrid;