import { AbsoluteFill, useCurrentFrame } from "remotion";

const NODES = [
  { x: 180, y: 150 }, { x: 320, y: 220 }, { x: 520, y: 100 },
  { x: 680, y: 200 }, { x: 820, y: 120 }, { x: 960, y: 80 },
  { x: 1200, y: 150 }, { x: 1350, y: 280 }, { x: 1500, y: 180 },
  { x: 1650, y: 320 }, { x: 1750, y: 200 }, { x: 240, y: 360 },
  { x: 120, y: 450 }, { x: 650, y: 420 }, { x: 800, y: 380 },
  { x: 960, y: 300 }, { x: 960, y: 480 }, { x: 820, y: 580 },
  { x: 1100, y: 440 }, { x: 1300, y: 520 }, { x: 1550, y: 480 },
  { x: 1750, y: 560 }, { x: 350, y: 750 }, { x: 550, y: 820 },
  { x: 750, y: 760 }, { x: 1050, y: 800 }, { x: 1250, y: 700 },
  { x: 1450, y: 820 }, { x: 1650, y: 750 }, { x: 100, y: 700 },
];

type Connection = { from: number; to: number };

const CONNECTIONS: Connection[] = [];
for (let i = 0; i < NODES.length; i++) {
  for (let j = i + 1; j < NODES.length; j++) {
    const dx = NODES[i].x - NODES[j].x;
    const dy = NODES[i].y - NODES[j].y;
    if (dx * dx + dy * dy < 370 * 370) {
      CONNECTIONS.push({ from: i, to: j });
    }
  }
}

// Periods 90 and 180 both divide evenly into 900 (total frames), ensuring seamless loop.
export const HeroNetwork = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill>
      <svg
        width={1920}
        height={1080}
        style={{ position: "absolute", top: 0, left: 0 }}
      >
        {CONNECTIONS.map((conn, i) => {
          const phase = (i * 137) % 180;
          const opacity =
            ((Math.sin(((frame + phase) / 180) * 2 * Math.PI) + 1) / 2) * 0.5 + 0.06;
          return (
            <line
              key={i}
              x1={NODES[conn.from].x}
              y1={NODES[conn.from].y}
              x2={NODES[conn.to].x}
              y2={NODES[conn.to].y}
              stroke="#7DB6FF"
              strokeOpacity={opacity}
              strokeWidth={1.2}
            />
          );
        })}
        {NODES.map((node, i) => {
          const phase = (i * 113) % 90;
          const pulse = (Math.sin(((frame + phase) / 90) * 2 * Math.PI) + 1) / 2;
          const r = 5 + pulse * 2.5;
          const glowR = 18 + pulse * 10;
          const glowAlpha = 0.07 + pulse * 0.12;
          return (
            <g key={i}>
              <circle cx={node.x} cy={node.y} r={glowR} fill="#0E63F6" opacity={glowAlpha} />
              <circle cx={node.x} cy={node.y} r={r} fill="#7DB6FF" opacity={0.85} />
            </g>
          );
        })}
      </svg>
    </AbsoluteFill>
  );
};
