document.addEventListener('DOMContentLoaded', () => {
  const header = document.querySelector('header');
  const headerBox = document.querySelector('.header');
  if (!header.classList.contains('noani')) {
    gsap.fromTo('.header', { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 1.2 });
  }

  if (header.classList.contains('inner')) {
    header.classList.add('pin');
    headerBox.classList.add('done');
  }

  if (!isMobile()) {
    if (!header.classList.contains('inner')) {
      const initST = headerBox.offsetTop;
      ScrollTrigger.create({
        trigger: 'header',
        start: 'top top',
        end: `top top-=${initST}`,
        onUpdate: (self) => {
          requestAnimationFrame(() => {
            const progress = self.progress.toFixed(3);
            headerBox.style.top = `${initST * (1 - progress)}px`;

            const action = self.progress === 1 ? 'add' : 'remove';
            headerBox.classList[action]('done');
          });
        },
      });
    }
  } else {
    header.classList.add('pin');
    headerBox.classList.add('done');
  }
});

document.addEventListener('alpine:init', () => {
  Alpine.store('videoList', {
    list: [],
    push(video) {
      this.list.push(video);
    },
    stopAll() {
      this.list.forEach((video) => video.pause());
    },
  });

  Alpine.data('video', () => ({
    playing: false,
    init() {
      const { video } = this.$refs;
      this.$store.videoList.push(video);
      video.addEventListener('play', () => (this.playing = true));
      video.addEventListener('pause', () => {
        if (video.seeking) return;
        this.playing = false;
      });
      video.addEventListener('ended', () => (this.playing = false));
    },
    play() {
      this.$store.videoList.stopAll();
      this.$refs.video.play();
    },
    pause() {
      this.$refs.video.pause();
    },
    playFullscreen() {
      playVideoFullscreen(this.$refs.video);
    },
  }));
});