interface NetworkGraphicProps {
  accent?: "blue" | "green";
  className?: string;
}

const nodes = [
  { x: 40, y: 40, r: 3 },
  { x: 140, y: 20, r: 2.5 },
  { x: 220, y: 70, r: 4 },
  { x: 300, y: 30, r: 2.5 },
  { x: 90, y: 130, r: 2.5 },
  { x: 190, y: 150, r: 3.5 },
  { x: 280, y: 130, r: 2.5 },
  { x: 20, y: 190, r: 2 },
  { x: 340, y: 190, r: 3 },
];

const edges: [number, number][] = [
  [0, 1],
  [1, 2],
  [2, 3],
  [1, 4],
  [4, 5],
  [5, 6],
  [2, 5],
  [4, 7],
  [6, 8],
  [0, 4],
];

export default function NetworkGraphic({
  accent = "blue",
  className = "",
}: NetworkGraphicProps) {
  const stroke = accent === "green" ? "#12B76A" : "#3B7BFF";
  const dot = accent === "green" ? "#6EE7B7" : "#6FA8FF";

  return (
    <svg
      viewBox="0 0 360 220"
      className={className}
      aria-hidden="true"
      role="img"
    >
      <g opacity="0.55">
        {edges.map(([a, b], i) => (
          <line
            key={i}
            x1={nodes[a].x}
            y1={nodes[a].y}
            x2={nodes[b].x}
            y2={nodes[b].y}
            stroke={stroke}
            strokeWidth="1"
          />
        ))}
      </g>
      {nodes.map((n, i) => (
        <circle
          key={i}
          cx={n.x}
          cy={n.y}
          r={n.r}
          fill={dot}
          className="animate-pulse-slow"
          style={{ animationDelay: `${(i % 5) * 0.6}s` }}
        />
      ))}
    </svg>
  );
}