components/parallax-bg.js

class ParallaxBackground extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: relative;
          height: 100vh;
          overflow: hidden;
        }
        .bg-image {
          position: absolute;
          width: 100%;
          height: 100%;
          background-size: cover;
          background-position: center;
          background-attachment: fixed;
          will-change: transform;
        }
      </style>
      <div class="bg-image"></div>
    `;

    const imageUrl = this.getAttribute('image') || 'https://static.photos/cityscape/1200x630/1';
    const bgImage = this.shadowRoot.querySelector('.bg-image');
    bgImage.style.backgroundImage = `url(${imageUrl})`;
  }
}

customElements.define('parallax-bg', ParallaxBackground);