const canvas = document.getElementById('netcanvas');
const ctx = canvas.getContext('2d');

let w = canvas.width = window.innerWidth;
let h = canvas.height = window.innerHeight;

// Partikel-Definition
class Node {
  constructor() {
    this.x = Math.random() * w;
    this.y = Math.random() * h;
    this.vx = (Math.random() - 0.5) * 0.2;
    this.vy = (Math.random() - 0.5) * 0.2;
  }
  move() {
    this.x += this.vx;
    this.y += this.vy;
    if (this.x < 0 || this.x > w) this.vx *= -1;
    if (this.y < 0 || this.y > h) this.vy *= -1;
  }
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
    ctx.fill();
  }
}

// Konfiguration
const config = {
  nodeCount: 30,
  connectDist: 80,
  lineAlpha: 0.08,
  glowColor: 'rgba(152, 165, 177, 0.4)',
  nodeColor: 'rgba(135, 162, 184, 0.6)'
};

// Erzeuge Nodes
const nodes = [];
for (let i = 0; i < config.nodeCount; i++) {
  nodes.push(new Node());
}

// Animation
function animate() {
  ctx.clearRect(0, 0, w, h);

  // Linien zeichnen
  ctx.strokeStyle = config.glowColor;
  ctx.lineWidth = 0.8;
  ctx.shadowBlur = 3;
  ctx.shadowColor = config.glowColor;

  for (let i = 0; i < nodes.length; i++) {
    const a = nodes[i];
    for (let j = i + 1; j < nodes.length; j++) {
      const b = nodes[j];
      const dx = a.x - b.x, dy = a.y - b.y;
      const dist = Math.hypot(dx, dy);
      if (dist < config.connectDist) {
        ctx.globalAlpha = config.lineAlpha * (1 - dist / config.connectDist);
        ctx.beginPath();
        ctx.moveTo(a.x, a.y);
        ctx.lineTo(b.x, b.y);
        ctx.stroke();
      }
    }
  }

  // Nodes zeichnen
  ctx.globalAlpha = 1;
  ctx.fillStyle = config.nodeColor;
  ctx.shadowBlur = 4;
  ctx.shadowColor = config.nodeColor;
  nodes.forEach(n => {
    n.move();
    n.draw();
  });

  requestAnimationFrame(animate);
}

animate();

// Responsiv
window.addEventListener('resize', () => {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
});