<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<!-- SoundCloud Embed -->
<iframe 
  id="sc-widget"
  width="100%" 
  height="166" 
  scrolling="no" 
  frameborder="no" 
  allow="autoplay"
  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1602191148&color=%2380562e&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
</iframe>

<!-- Load the SoundCloud Widget API -->
<script src="https://w.soundcloud.com/player/api.js"></script>

<!-- Your custom JS -->
<script>
  const playMixButtons = document.querySelectorAll('.mp-click-play');
  const closeMixButtons = document.querySelectorAll('.mp-click-play2');
  const iframeElement = document.getElementById('sc-widget');
  const widget = SC.Widget(iframeElement);

  const pulseTarget = document.querySelectorAll('.pulse-target'); // all elements to pulse

  const glowPulse = gsap.to(pulseTarget, {
    scale: 1.05,
    repeat: -1,
    yoyo: true,
    duration: 0.8,
    paused: true,
    ease: "power1.inOut"
  });

  const waveformContainer = document.querySelector('.waveform-container');
  const waveBars = document.querySelectorAll('.wave-bar');

  let waveformAnimation;

  function startWaveformAnimation() {
    waveformAnimation = gsap.timeline({ repeat: -1 });

    waveBars.forEach(bar => {
      waveformAnimation.to(bar, {
        scaleY: () => gsap.utils.random(1, 3),
        duration: 0.4,
        ease: "power1.inOut",
        yoyo: true,
        repeat: 1,
        stagger: {
          each: 0.05,
          from: "center"
        }
      }, 0);
    });
  }

  function stopWaveformAnimation() {
    if (waveformAnimation) {
      waveformAnimation.kill();
      waveBars.forEach(bar => gsap.set(bar, { scaleY: 1 }));
    }
  }

  // Correct PLAY event handling
  widget.bind(SC.Widget.Events.PLAY, () => {
    glowPulse.play();
    pulseTarget.forEach(target => target.classList.add('is-playing'));

    gsap.to(waveformContainer, {
      opacity: 1,
      duration: 0.8,
      ease: "power1.out"
    });

    startWaveformAnimation();
  });

  // Correct PAUSE event handling
  widget.bind(SC.Widget.Events.PAUSE, () => {
    glowPulse.pause();
    pulseTarget.forEach(target => target.classList.remove('is-playing'));

    gsap.to(waveformContainer, {
      opacity: 0,
      duration: 0.5,
      ease: "power1.out"
    });

    stopWaveformAnimation();
  });

  // Play and Pause button controls
  playMixButtons.forEach(button => {
    button.addEventListener('click', () => {
      widget.play();
    });
  });

  closeMixButtons.forEach(button => {
    button.addEventListener('click', () => {
      widget.pause();
    });
  });

</script>

<!-- SoundCloud Embed -->
<iframe 
  id="sc-widget"
  width="100%" 
  height="166" 
  scrolling="no" 
  frameborder="no" 
  allow="autoplay"
  src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1602191148&color=%2380562e&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
</iframe>

<!-- Load the SoundCloud Widget API -->
<script src="https://w.soundcloud.com/player/api.js"></script>

<!-- Your custom JS -->
<script>
  const playMixButtons = document.querySelectorAll('.mp-click-play');
  const closeMixButtons = document.querySelectorAll('.mp-click-play2');
  const iframeElement = document.getElementById('sc-widget');
  const widget = SC.Widget(iframeElement);

  // Play and Pause controls - LOOP through ALL play buttons
  playMixButtons.forEach(button => {
    button.addEventListener('click', () => {
      widget.play();
    });
  });

  // LOOP through ALL close buttons
  closeMixButtons.forEach(button => {
    button.addEventListener('click', () => {
      widget.pause();
    });
  });
</script>