components/parallax.js

class CustomParallax extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: relative;
          overflow: hidden;
          height: 100vh;
        }
        .parallax-bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          will-change: transform;
          background-size: cover;
          background-position: center;
        }
        .content {
          position: relative;
          z-index: 1;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      </style>
      <div class="parallax-bg"></div>
      <div class="content">
        <slot></slot>
      </div>
    `;

    const bg = this.shadowRoot.querySelector('.parallax-bg');
    const speed = this.getAttribute('speed') || 0.5;
    const image = this.getAttribute('image') || '';

    if (image) {
      bg.style.backgroundImage = `url(${image})`;
    }

    window.addEventListener('scroll', () => {
      const yPos = -(window.pageYOffset * speed);
      bg.style.transform = `translate3d(0px, ${yPos}px, 0px)`;
    });
  }
}

customElements.define('custom-parallax', CustomParallax);