// right-click none
document.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
  });
});

// loading
const initLoading = () => {
  const loading = document.querySelector('.loading');
  const main = document.querySelector('.mainContents');
  const body = document.body;
  const hasVisited = sessionStorage.getItem('hasVisited');

  if (hasVisited) {
    if (loading) loading.style.display = 'none';
    if (main) main.classList.add('show');
    body.classList.add('is-scrollable');

    // 2回目以降の訪問時：即座にポップアップを動かす
    initPopup();
  } else {
    window.addEventListener('load', () => {
      loading.classList.add('animate');

      const startTime = performance.now();
      const MIN_LOADING_TIME = 3500;
      const wait = Math.max(0, MIN_LOADING_TIME - (performance.now() - startTime));

      setTimeout(() => {
        // ① ローディングのフェードアウトを開始
        loading.classList.add('fade-out');
        
        // ② フェードアウト開始と同時に、メインコンテンツを表示状態にする
        if (main) main.classList.add('show');
        if (body) body.classList.add('is-scrollable');

        // ③ その直後にポップアップを表示（これでバッティングを防ぎます）
        initPopup();
      }, wait);

      loading.addEventListener('animationend', (e) => {
        if (e.animationName === 'fadeOut') {
          // フェードアウトアニメーションが完全に終わったら、古いローディング要素を消すだけにする
          if (loading) loading.style.display = 'none';
          sessionStorage.setItem('hasVisited', 'true');
        }
      });
    });
  }
};

initLoading();

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

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

  if (isActive) {
    drawer.style.visibility = "visible";
    body.classList.add("is-fixed"); 
  } else {
    body.classList.remove("is-fixed");
    setTimeout(() => {
      if (!drawer.classList.contains("is-active")) {
        drawer.style.visibility = "hidden";
      }
    }, 300);
  }
});

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

    setTimeout(() => {
      drawer.style.visibility = "hidden";
    }, 300);
  });
});

drawer.addEventListener("click", () => {
  hamburger.classList.remove("is-active");
  drawer.classList.remove("is-active");
  body.classList.remove("is-fixed"); 

  setTimeout(() => {
    drawer.style.visibility = "hidden";
  }, 300);
});

// nav2 wrap
const listItems = document.querySelectorAll('.nav2 li');
const listContainer = document.querySelector('.nav2');

function checkWrap() {
  let prevOffsetTop = listItems[0].offsetTop;
  
  listItems.forEach((item, index) => {
    if (item.offsetTop !== prevOffsetTop) {
      listItems[index - 1].querySelector('a').style.borderRight = 'none';
    }
    prevOffsetTop = item.offsetTop;
  });
}

window.addEventListener('resize', checkWrap);

checkWrap();

// delayScroll
function delayScrollAnime() {
  var time = 0.2;
  var value = time;
  $('.delayScroll').each(function () {
    var parent = this; 
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    var childs = $(this).children(); 
    
    if (scroll >= elemPos - windowHeight && !$(parent).hasClass("play")) {
      $(childs).each(function () {
        
        if (!$(this).hasClass("fadeUp")) {
          
          $(parent).addClass("play"); 
          $(this).css("animation-delay", value + "s");
          $(this).addClass("fadeUp");
          value = value + time;
          
          var index = $(childs).index(this);
          if((childs.length-1) == index){
            $(parent).removeClass("play");
          }
        }
      })
    }
  })
}

$(window).scroll(function (){
  delayScrollAnime()
});

// anime-up
document.addEventListener("DOMContentLoaded", () => {
  const objects = document.querySelectorAll('.anime-up');

  const cb = function(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('displayed');
        observer.unobserve(entry.target);
      }
    });
  };

  const options = {
    root: null,
    rootMargin: "0px",
    threshold: 0
  };

  const io = new IntersectionObserver(cb, options);

  objects.forEach(object => {
    io.observe(object);
  });
});

const animationTargetElements = document.querySelectorAll(".anime-up");

animationTargetElements.forEach(targetElement => {
  const originalHTML = targetElement.innerHTML;
  const tempDiv = document.createElement("div");
  tempDiv.innerHTML = originalHTML;
  
  targetElement.innerHTML = "";

  let charIndex = 0; 

  tempDiv.childNodes.forEach(node => {
    if (node.nodeType === Node.TEXT_NODE) {

      node.textContent.split("").forEach(char => {
        const spanWrapper = document.createElement("span");
        const innerSpan = document.createElement("span");
        innerSpan.style.animationDelay = `${(charIndex * 0.05)}s`;
        innerSpan.textContent = char;
        spanWrapper.appendChild(innerSpan);
        targetElement.appendChild(spanWrapper);
        charIndex++;
      });
    } else if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains("jp")) {
      const jpWrapper = document.createElement("span");
      jpWrapper.classList.add("jp");

      node.textContent.split("").forEach(char => {
        const spanWrapper = document.createElement("span");
        const innerSpan = document.createElement("span");
        innerSpan.style.animationDelay = `${(charIndex * 0.05)}s`;
        innerSpan.textContent = char;
        spanWrapper.appendChild(innerSpan);
        jpWrapper.appendChild(spanWrapper);
        charIndex++;
      });

      targetElement.appendChild(jpWrapper);
    }
  });
});

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

    $(document).on("click", ".js-modal-video", function () {
      $("body").addClass("video-noscroll");
    });

    const observer = new MutationObserver(function () {
      if (!$(".modal-video").length) {
        $("body").removeClass("video-noscroll");
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  }
})();

// scroll-in
jQuery(function ($) {
  var fadeIn = $('.scroll-in');

  if ($('body').hasClass('subpage')) {
    fadeIn.each(function () {
      $(this).addClass('scroll-opacity');
    });

  } else {
    $(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');
        }
      });
    });
  }
});

// slider1
$(function () {
  $(".slider1").slick({
    dots: true,
    infinite: true,
    arrows: true,
    appendArrows: $('.arrow_box'),
    prevArrow: '<img src="assets/img/arrow1.png" class="slide-arrow prev-arrow">',
    nextArrow: '<img src="assets/img/arrow2.png" class="slide-arrow next-arrow">',
    slidesToShow: 2,
    slidesToScroll: 1,
    centerMode: false,
    responsive: [
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
          centerMode: false,
        }
      }
    ]
  });
});

// slider2
$(function () {
  $(".slider2").slick({
    dots: true,
    infinite: true,
    arrows: true,
    appendArrows: $('.arrow_box2'),
    prevArrow: '<img src="assets/img/arrow1.png" class="slide-arrow prev-arrow">',
    nextArrow: '<img src="assets/img/arrow2.png" class="slide-arrow next-arrow">',
    slidesToShow: 2,
    slidesToScroll: 1,
    centerMode: false,
    responsive: [
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
          centerMode: false,
        }
      }
    ]
  });
});

window.addEventListener('DOMContentLoaded', () => {
  const header = document.querySelector('.js-header');
  const drawer = document.querySelector('.js-drawer');

  const updateDrawerPosition = () => {
    if (header && drawer) {
      const rect = header.getBoundingClientRect(); // 「*」という誤文字を綺麗に削除しました
      const topOffset = rect.bottom;
      
      document.documentElement.style.setProperty('--drawer-top', `${topOffset}px`);
    }
  };

  updateDrawerPosition();
  window.addEventListener('resize', updateDrawerPosition);
  window.addEventListener('scroll', updateDrawerPosition);
});

// Accordion
$(function () {
    $('.accordion__title').on('click', function () {
        $(this).next().slideToggle();
        $(this).toggleClass('show');
    });
});

const menuBtns = document.querySelectorAll('.acordion-btn');
const menuLists = document.querySelectorAll('.acordion');

menuBtns.forEach((element, index) => {
element.addEventListener('click', function () {
    menuBtns[index].classList.toggle('is-open');
    menuLists[index].classList.toggle('is-open');
});
});

$('.accordion-header').click(function() {
    $(this).next().slideToggle();
    $(this).toggleClass('active');
});

// popup (※initPopup関数の中身は元のままで大丈夫です)
function initPopup() {
    const isTestingMode = true;
    const storage = isTestingMode ? sessionStorage : localStorage;
    const popupOverlay = document.getElementById('popup-overlay');
    const closeButton = document.getElementById('close-button');
    if (!popupOverlay || !closeButton) {
        return;
    }
    const hasPopupVisited = storage.getItem('hasPopupVisited');
    const closePopup = () => {
        popupOverlay.classList.add('popup-hidden');
        document.body.classList.remove('no-scroll');
    };
    const setVisitedFlag = () => {
        storage.setItem('hasPopupVisited', 'true');
    };
    if (!hasPopupVisited) {
    popupOverlay.classList.remove('popup-hidden');

    if (!popupOverlay.classList.contains('off')) {
        document.body.classList.add('no-scroll');
    }

    setVisitedFlag();

      const popupLinks = popupOverlay.querySelectorAll('a');
      popupLinks.forEach((link) => {
          const href = link.getAttribute('href');

          if (!href || href.trim() === '' || href.trim() === '#') {
              link.style.pointerEvents = 'none';
              link.addEventListener('click', (event) => {
                  event.preventDefault();
              });
          }
      });

      closeButton.addEventListener('click', closePopup);
      popupOverlay.addEventListener('click', (event) => {
          if (event.target === popupOverlay) {
              closePopup();
          }
      });
    } else {
        popupOverlay.classList.add('popup-hidden');
    }
}

document.querySelectorAll('img').forEach(img => {
  img.setAttribute('draggable', 'false');
});

document.addEventListener('contextmenu', function(e) {
  if (e.target.tagName === 'IMG') {
    e.preventDefault();
  }
});