class AudioComparison extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin: 2rem 0;
        }
        .comparison-container {
          position: relative;
          background: #1e1e1e;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }
        .audio-wrapper {
          position: relative;
          height: 80px;
        }
        audio {
          width: 100%;
          opacity: 0.7;
          transition: opacity 0.3s ease;
        }
        audio.active {
          opacity: 1;
        }
        .toggle-container {
          display: flex;
          justify-content: center;
          padding: 1rem;
          background: #2a2a2a;
        }
        .toggle-switch {
          position: relative;
          display: inline-block;
          width: 120px;
          height: 44px;
        }
        .toggle-switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }
        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(to right, #4f46e5, #7c3aed);
          transition: .4s;
          border-radius: 34px;
        }
        .slider:before {
          position: absolute;
          content: "";
          height: 36px;
          width: 36px;
          left: 4px;
          bottom: 4px;
          background-color: white;
          transition: .4s;
          border-radius: 50%;
        }
        input:checked + .slider {
          background: linear-gradient(to right, #7c3aed, #4f46e5);
        }
        input:checked + .slider:before {
          transform: translateX(76px);
        }
        .labels {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 0 12px;
          pointer-events: none;
        }
        .label {
          color: white;
          font-weight: bold;
          font-size: 14px;
          text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }
        .before-label {
          margin-left: 50px;
        }
        .after-label {
          margin-right: 50px;
        }
      </style>
      <div class="comparison-container">
        <div class="audio-wrapper">
          <audio id="before-audio" controls>
            <source src="" type="audio/mpeg">
            Your browser does not support the audio element.
          </audio>
          <audio id="after-audio" controls class="active">
            <source src="" type="audio/mpeg">
            Your browser does not support the audio element.
          </audio>
        </div>
        <div class="toggle-container">
          <label class="toggle-switch">
            <input type="checkbox" checked>
            <span class="slider"></span>
            <div class="labels">
              <span class="label before-label">Before</span>
              <span class="label after-label">After</span>
            </div>
          </label>
        </div>
      </div>
    `;

    const beforeAudio = this.shadowRoot.getElementById('before-audio');
    const afterAudio = this.shadowRoot.getElementById('after-audio');
    const toggle = this.shadowRoot.querySelector('input[type="checkbox"]');

    // Set audio sources from attributes
    if (this.hasAttribute('before-src')) {
      beforeAudio.querySelector('source').src = this.getAttribute('before-src');
      beforeAudio.load();
    }
    if (this.hasAttribute('after-src')) {
      afterAudio.querySelector('source').src = this.getAttribute('after-src');
      afterAudio.load();
    }

    // Toggle functionality
    toggle.addEventListener('change', () => {
      if (toggle.checked) {
        beforeAudio.classList.remove('active');
        afterAudio.classList.add('active');
      } else {
        beforeAudio.classList.add('active');
        afterAudio.classList.remove('active');
      }
    });
  }
}

customElements.define('audio-comparison', AudioComparison);