(function(){
  if (document.getElementById('confetti-canvas')) return;
  const canvas = document.createElement('canvas');
  canvas.id = 'confetti-canvas';
  document.body.appendChild(canvas);
  const ctx = canvas.getContext('2d');

  let W = canvas.width = window.innerWidth;
  let H = canvas.height = window.innerHeight;

  window.addEventListener('resize', () => {
    W = canvas.width = window.innerWidth;
    H = canvas.height = window.innerHeight;
  });

  class Particle {
    constructor(x, y, color, size, velocity, angle, life, shape) {
      this.x = x;
      this.y = y;
      this.color = color;
      this.size = size;
      this.vx = velocity * Math.cos(angle);
      this.vy = velocity * Math.sin(angle);
      this.life = life;
      this.totalLife = life;
      this.shape = shape;
      this.rotation = Math.random() * Math.PI * 2;
      this.rotationSpeed = (Math.random() - 0.5) * 0.3;
    }
    update() {
      this.vy += 0.03;
      this.vx *= 0.995;
      this.vy *= 0.995;
      this.x += this.vx;
      this.y += this.vy;
      this.rotation += this.rotationSpeed;
      this.life--;
    }
    draw(ctx) {
      ctx.save();
      ctx.translate(this.x, this.y);
      ctx.rotate(this.rotation);
      ctx.globalAlpha = Math.max(0, this.life / this.totalLife);
      ctx.fillStyle = this.color;
      if (this.shape === 'rect') {
        ctx.fillRect(-this.size/2, -this.size/2, this.size, this.size*0.6);
      } else if (this.shape === 'circle') {
        ctx.beginPath();
        ctx.arc(0, 0, this.size/2, 0, Math.PI*2);
        ctx.fill();
      }
      ctx.restore();
    }
  }

  let particles = [];
  let animating = false;
  const colors = ['#ff2d55','#ff9500','#ffcc00','#32d74b','#5ac8fa','#5856d6','#ff375f','#ff9f0a'];

  function loop() {
    if (!animating) return;
    ctx.clearRect(0,0,W,H);
    for (let i = particles.length - 1; i >= 0; i--) {
      const p = particles[i];
      p.update();
      p.draw(ctx);
      if (p.life <= 0) particles.splice(i, 1);
    }
    if (particles.length === 0) {
      animating = false;
      ctx.clearRect(0,0,W,H);
      return;
    }
    requestAnimationFrame(loop);
  }

  // confete a partir do topo da tela
  function launchConfettiFromTop(options = {}) {
    const opts = Object.assign({
      count: 550,
      spread: Math.PI, // 180 graus
      velocity: 1,
      size: 8,
      life: 350,
      shapes: ['rect','circle']
    }, options);

    for (let i = 0; i < opts.count; i++) {
      const x = Math.random() * W; // espalha horizontalmente
      const y = -40; // levemente acima da tela
      const angle = Math.PI / 2 + (Math.random() - 0.5) * 0.3; // para baixo
      const speed = opts.velocity * (0.6 + Math.random()*15);
      const size = opts.size * (0.6 + Math.random()*1.4);
      const color = opts.colors ? opts.colors[Math.floor(Math.random()*opts.colors.length)] : colors[Math.floor(Math.random()*colors.length)];
      const life = Math.floor(opts.life * (0.6 + Math.random()*0.8));
      const shape = opts.shapes[Math.floor(Math.random()*opts.shapes.length)];
      particles.push(new Particle(x, y, color, size, speed, angle, life, shape));
    }

    if (!animating) {
      animating = true;
      requestAnimationFrame(loop);
    }
  }

  window.launchConfettiFromTop = launchConfettiFromTop;

  // Listener para qualquer elemento com classe .btn-confete
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.btn-confete').forEach(function(btn){
      btn.addEventListener('click', function() {
        launchConfettiFromTop();
      });
    });
  });
})();