// hamburger
const hamburger = document.querySelector(".js-hamburger");
const drawer = document.querySelector(".js-drawer");
const drawerLinks = document.querySelectorAll(".js-drawer a");
const drawerItems = document.querySelectorAll(".drawer__item");

hamburger.addEventListener('click', () => {
  hamburger.classList.toggle('is-active');
  drawer.classList.toggle('is-active');

  if (drawer.classList.contains('is-active')) {
    drawerItems.forEach((item, index) => {
      item.style.setProperty('--delay', `${(index + 1) * 0.1}s`);
    });
  } else {
    drawerItems.forEach(item => {
      item.style.removeProperty('--delay');
    });
  }
});

drawerLinks.forEach(drawerLink => {
  drawerLink.addEventListener('click', () => {
    hamburger.classList.remove('is-active');
    drawer.classList.remove('is-active');
  });
});

drawer.addEventListener('click', () => {
  hamburger.classList.remove('is-active');
  drawer.classList.remove('is-active');
});

// mainImg blur
document.addEventListener("scroll", function () {
  const mainImages = document.querySelectorAll(".mainImg");
  const scrollY = window.scrollY;

  mainImages.forEach((mainImg) => {
    const afterElement = window.getComputedStyle(mainImg, '::after');

    // 既存のスクロール値に基づいてblurAmountとscaleAmountを計算
    const blurAmount = Math.min(scrollY / 300, 1) * 10; 
    const scaleAmount = 1 + (blurAmount / 100);

    // ::after疑似要素にフィルターと変形を適用
    mainImg.style.setProperty('--blurAmount', `${blurAmount}px`);
    mainImg.style.setProperty('--scaleAmount', scaleAmount);

    // JavaScriptで擬似要素のスタイルを直接操作する方法
    mainImg.style.setProperty('filter', `blur(${blurAmount}px)`);
    mainImg.style.setProperty('transform', `scale(${scaleAmount})`);
  });
});

// magaDown bg slide-in
document.addEventListener("DOMContentLoaded", function () {
  const magaDown = document.querySelector(".magaDown");

  function handleScroll() {
      const rect = magaDown.getBoundingClientRect();
      const windowHeight = window.innerHeight;

      if (rect.top < windowHeight * 0.8) {
          magaDown.classList.add("show");
      }
  }

  window.addEventListener("scroll", handleScroll);
  handleScroll(); 
});

// youtube
$(function () {
  if ($(".js-modal-video").length) {
    $(".js-modal-video").modalVideo({
      channel: "youtube",
      youtube: {
        controls: 1,
      },
    });
  }
});

// profile
window.addEventListener('scroll', function() {
  const profileBg = document.querySelector('#profile .profileBg');
  const profileBgPosition = profileBg.getBoundingClientRect().top;

  if (profileBgPosition < window.innerHeight * 0.8) {
    profileBg.classList.add('active');
  } else {
    profileBg.classList.remove('active');
  }
});

// scroll-in
jQuery(function ($) {
  var fadeIn = $('.scroll-in');
  $(window).on('scroll', function () {
    $(fadeIn).each(function () {
      var offset = $(this).offset().top;
      var scroll = $(window).scrollTop(); 
      var windowHeight = $(window).height();
      if (scroll > offset - windowHeight + 150) {
        $(this).addClass("scroll-opacity");
      }
    });
  });
});

// open-load
window.addEventListener('load', () => {
  setTimeout(() => {
    document.getElementById('main-content').classList.add('active');

    const opening = document.getElementById('opening');
    opening.parentNode.removeChild(opening);

    document.getElementById('element2').classList.add('fadeIn2');
    document.getElementById('element3').classList.add('fadeIn3');
    document.getElementById('element4').classList.add('fadeIn4');
    document.getElementById('element5').classList.add('fadeIn5');
    document.getElementById('element6').classList.add('fadeIn6');

  }, 3500);
});

// 背景色に合わせて色を変える
$(window).on('scroll', function () {
  var scrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();

  var headerY = scrollTop + 100;               
  var snsY = scrollTop + windowHeight / 2;     

  var headerTheme = null;

  $('section[data-header-theme]').each(function () {
    var $section = $(this);
    var offsetTop = $section.offset().top;
    var sectionHeight = $section.outerHeight();

    if (headerY >= offsetTop && headerY < offsetTop + sectionHeight) {
      headerTheme = $section.data('header-theme');
      return false;
    }
  });

  if (headerTheme) {
    $('#header')
      .removeClass('light-bg dark-bg')
      .addClass(headerTheme + '-bg');
  }

  var snsTheme = null;

  $('section[data-header-theme]').each(function () {
    var $section = $(this);
    var offsetTop = $section.offset().top;
    var sectionHeight = $section.outerHeight();

    if (snsY >= offsetTop && snsY < offsetTop + sectionHeight) {
      snsTheme = $section.data('header-theme');
      return false;
    }
  });

  if (snsTheme) {
    $('#element3')
      .removeClass('light-bg dark-bg')
      .addClass(snsTheme + '-bg');
  }
});

$(function () {
  $(window).trigger('scroll');
});