/* ==================================================
   스타일5 메인페이지 전체 JS
   기준 업체명 : 오산 센트럴시티 운암뜰
   --------------------------------------------------
   [기능 목록]
   1. 모바일 사이드 메뉴 열기 / 닫기
   2. 모바일 사이드 메뉴 하부메뉴 아코디언
   3. 메인 비주얼 자동 롤링
   --------------------------------------------------
   ※ 홍보관 미리보기는 CSS 애니메이션으로만 동작하므로
      별도 JS가 필요하지 않음
   ================================================== */




document.addEventListener("DOMContentLoaded", function () {
  /* ==================================================
     1. 모바일 사이드 메뉴 관련 요소
     --------------------------------------------------
     햄버거 버튼 클릭 시 열리는 사이드 메뉴
     ================================================== */
  const menuBtn = document.querySelector(".m_menu_btn");
  const closeBtn = document.querySelector(".side_menu_close");
  const sideMenu = document.querySelector(".mobile_side_menu");
  const overlay = document.querySelector(".menu_overlay");




  /* ==================================================
     2. 모바일 사이드 메뉴 열기 / 닫기
     --------------------------------------------------
     열릴 때 : 메뉴 활성화 + 오버레이 표시 + body 스크롤 잠금
     닫힐 때 : 메뉴 비활성화 + 오버레이 숨김 + body 스크롤 복구
     ================================================== */
  if (menuBtn && closeBtn && sideMenu && overlay) {
    /* 메뉴 열기 */
    menuBtn.addEventListener("click", function () {
      sideMenu.classList.add("active");
      overlay.classList.add("active");
      document.body.style.overflow = "hidden";
    });




    /* 닫기 버튼 클릭 */
    closeBtn.addEventListener("click", function () {
      sideMenu.classList.remove("active");
      overlay.classList.remove("active");
      document.body.style.overflow = "";
    });




    /* 오버레이 클릭 시 닫기 */
    overlay.addEventListener("click", function () {
      sideMenu.classList.remove("active");
      overlay.classList.remove("active");
      document.body.style.overflow = "";
    });
  }




  /* ==================================================
     3. 모바일 사이드 메뉴 하부메뉴 아코디언
     --------------------------------------------------
     - 메인 메뉴 클릭 시 하위 메뉴 열림
     - 하나 열리면 다른 메뉴는 닫힘
     - 다시 클릭하면 닫힘
     ================================================== */
  const sideMainMenus = document.querySelectorAll(".side_main_menu");




  sideMainMenus.forEach(function (menu) {
    menu.addEventListener("click", function (e) {
      e.preventDefault();




      const currentLi = this.parentElement;
      const currentSub = this.nextElementSibling;
      const isOpen = currentLi.classList.contains("active");




      /* 먼저 모든 메뉴 닫기 */
      document.querySelectorAll(".side_menu_list > li").forEach(function (item) {
        item.classList.remove("active");
      });




      document.querySelectorAll(".side_sub_menu").forEach(function (sub) {
        sub.style.display = "none";
      });




      /* 현재 닫혀 있던 메뉴면 다시 열기 */
      if (!isOpen && currentSub) {
        currentLi.classList.add("active");
        currentSub.style.display = "block";
      }
    });
  });




  /* ==================================================
     4. 메인 비주얼 롤링
     --------------------------------------------------
     - PC용 슬라이드 / 모바일용 슬라이드 각각 실행
     - 3.5초 간격으로 active 클래스 변경
     - HTML에서 첫 번째 슬라이드는 active 상태로 시작
     ================================================== */
  const pcSlides = document.querySelectorAll(".visual_pc .visual_slide");
  const moSlides = document.querySelectorAll(".visual_mo .visual_slide");




  function rollingSlides(slides) {
    /* 슬라이드가 없으면 종료 */
    if (!slides.length) return;




    let currentIndex = 0;




    setInterval(function () {
      /* 현재 슬라이드 비활성화 */
      slides[currentIndex].classList.remove("active");




      /* 다음 슬라이드 순번 계산 */
      currentIndex = (currentIndex + 1) % slides.length;




      /* 다음 슬라이드 활성화 */
      slides[currentIndex].classList.add("active");
    }, 3500);
  }




  /* PC 메인 비주얼 실행 */
  rollingSlides(pcSlides);




  /* 모바일 메인 비주얼 실행 */
  rollingSlides(moSlides);
});