class ParticlesBackground extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 0;
        }
        
        #particles-js {
          width: 100%;
          height: 100%;
          background-color: #0f172a;
          background-image: url("");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: 50% 50%;
        }
      </style>
      
      <div id="particles-js"></div>
    `;

    // Load particles.js dynamically
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';
    script.onload = () => this.initParticles();
    document.head.appendChild(script);
  }

  initParticles() {
    if (typeof particlesJS !== 'undefined') {
      particlesJS(this.shadowRoot.getElementById('particles-js'), {
        "particles": {
          "number": {
            "value": 120,
            "density": { "enable": true, "value_area": 1200 }
          },
          "color": { 
            "value": ["#4f46e5", "#ec4899", "#8b5cf6"]
          },
          "shape": { 
            "type": ["circle", "triangle", "star"],
            "stroke": { "width": 0, "color": "#000000" },
            "polygon": { "nb_sides": 5 }
          },
          "opacity": {
            "value": 0.7,
            "random": true,
            "anim": { 
              "enable": true, 
              "speed": 1, 
              "opacity_min": 0.1, 
              "sync": false 
            }
          },
          "size": {
            "value": 4,
            "random": true,
            "anim": { 
              "enable": true, 
              "speed": 4, 
              "size_min": 0.3, 
              "sync": false 
            }
          },
          "line_linked": {
            "enable": true,
            "distance": 180,
            "color": "#4f46e5",
            "opacity": 0.5,
            "width": 1.5,
            "blink": true
          },
          "move": {
            "enable": true,
            "speed": 3,
            "direction": "none",
            "random": true,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "attract": { 
              "enable": true, 
              "rotateX": 800, 
              "rotateY": 1600 
            }
          }
},
        "interactivity": {
          "detect_on": "canvas",
          "events": {
            "onhover": { "enable": true, "mode": "grab" },
            "onclick": { "enable": true, "mode": "push" },
            "resize": true
          },
          "modes": {
            "grab": { "distance": 140, "line_linked": { "opacity": 1 } },
            "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 },
            "repulse": { "distance": 200, "duration": 0.4 },
            "push": { "particles_nb": 4 },
            "remove": { "particles_nb": 2 }
          }
        },
        "retina_detect": true
      });
    }
  }
}

customElements.define('particles-bg', ParticlesBackground);