$(function () {
  /* ==========================================
     0. 공통 설정 및 라이브러리 등록
     ========================================== */
  gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

  // TOP 버튼 공통 함수
  const goToTop = (duration = 1) => {
    gsap.to(window, {
      duration: duration,
      scrollTo: 0,
      ease: "power3.inOut",
      onComplete: () => { ScrollTrigger.refresh(); }
    });
  };

  /* ==========================================
     1. 주요기능(Features) 데이터 로드 및 탭 전환
     ========================================== */
  async function loadFeatures() {
    const $featureDisplay = $('#feature-display');
    const $menuList = $('#menu-list');

    if ($featureDisplay.length === 0 || $menuList.length === 0) return;

    try {
      const response = await fetch('../source/data/product.json');
      const data = await response.json();
      const features = data.features;

      $menuList.empty();

      // [수정] 클래스 변경을 포함한 아이템 렌더링 함수
      const renderItems = (categoryData) => {
        // 1. 기존 카테고리 관련 클래스들 모두 제거 (클린업)
        // 기존에 어떤 카테고리 클래스가 붙었을지 모르니, 'feature-list' 외의 클래스는 지우는 게 안전합니다.
        $featureDisplay.removeClass().addClass('feature-list');

        // 2. 현재 카테고리명을 소문자로 변환하여 클래스 추가 (예: Core -> core)
        const categoryClass = categoryData.category.toLowerCase();
        $featureDisplay.addClass(categoryClass);

        // 3. 아이템 출력
        $featureDisplay.empty();
        categoryData.items.forEach(item => {
          const itemHtml = `
            <div class="list-item">
              <div class="img-box">
                <img src="${item.image}" alt="${item.title}">
              </div>
              <div class="text-box">
                <p class="item-title"><strong>${item.title}</strong></p>
                <ul>
                  ${item.descriptions.map(desc => `<li>${desc}</li>`).join('')}
                </ul>
              </div>
            </div>`;
          $featureDisplay.append(itemHtml);
        });
      };

      // 1. 초기 실행 (첫 번째 카테고리 전체 데이터를 넘김)
      if (features && features.length > 0) {
        renderItems(features[0]);

        // 2. 메뉴 생성 및 클릭 이벤트
        features.forEach((cat, index) => {
          const $li = $('<li>').text(cat.category);
          if (index === 0) $li.addClass('active');

          $li.on('click', function () {
            if ($(this).hasClass('active')) return;

            $menuList.find('li').removeClass('active');
            $(this).addClass('active');

            gsap.to($featureDisplay, {
              opacity: 0,
              y: 15,
              duration: 0.25,
              onComplete: () => {
                // [수정] 렌더링 시 카테고리 객체 전체를 넘겨서 이름과 아이템을 모두 쓰게 함
                renderItems(cat);
                gsap.to($featureDisplay, { opacity: 1, y: 0, duration: 0.3 });
              }
            });
          });

          $menuList.append($li);
        });
      }

    } catch (error) {
      console.error("데이터 로드 중 오류 발생:", error);
    }
  }

  loadFeatures();

  /* ==========================================
     3. TOP 버튼 및 UI 제어
     ========================================== */
  // 1) 본문 내 TOP 버튼들과 우측 하단 고정 버튼 구분
  const $contentTopBtns = $('.main .top-btn, .sub .top-btn');
  const $footerTopBtnContainer = $('#scrollTopBtn').closest('.top-btn');

  // 클릭 이벤트 등록
  $contentTopBtns.on('click', (e) => { e.preventDefault(); goToTop(0.8); });
  $('#scrollTopBtn').on('click', (e) => { e.preventDefault(); goToTop(1.2); });

  // 2) 고정 버튼 노출 제어 (600px 이상일 때 등장)
  $(window).on('scroll', function () {
    const scrollTop = $(this).scrollTop();
    if (scrollTop > 600) {
      $footerTopBtnContainer.fadeIn(300).addClass('visible');
    } else {
      $footerTopBtnContainer.fadeOut(300).removeClass('visible');
    }
  });

  // 3) 푸터 진입 시 본문 내 TOP 버튼 숨기기
  if ($('.footer').length > 0) {
    ScrollTrigger.create({
      trigger: ".footer",
      start: "top bottom",
      onEnter: () => {
        $footerTopBtnContainer.addClass('at-footer');
        gsap.to($contentTopBtns, {
          opacity: 0,
          pointerEvents: 'none',
          duration: 0.3,
          overwrite: true
        });
      },
      onLeaveBack: () => {
        $footerTopBtnContainer.removeClass('at-footer');
        gsap.to($contentTopBtns, {
          opacity: 1,
          pointerEvents: 'auto',
          duration: 0.3,
          overwrite: true
        });
      },
    });
  }

  // 브레드크럼
  $('.bc-item.select-box').on('click', function (e) {
    e.stopPropagation();
    $('.bc-item.select-box').not($(this)).removeClass('active');
    $(this).toggleClass('active');
  });
  $(document).on('click', () => $('.bc-item.select-box').removeClass('active'));

  /* ==========================================
     4. 메인 슬라이더 및 그리드
     ========================================== */
  const $slider = $('.slide-wrapper');
  if ($slider.length > 0) {
    let isPaused = false;
    const total = $('.slide-item').length;
    $('.total').text(total);

    const moveNext = () => {
      $slider.stop().animate({ marginLeft: "-100%" }, 800, function () {
        $slider.find('.slide-item:first').appendTo($slider);
        $slider.css({ marginLeft: 0 });
        updateStatus();
        playCurrentVideo();
      });
    };

    const movePrev = () => {
      $slider.find('.slide-item:last').prependTo($slider);
      $slider.css({ marginLeft: "-100%" });
      $slider.stop().animate({ marginLeft: 0 }, 800, () => {
        updateStatus();
        playCurrentVideo();
      });
    };

    const updateStatus = () => {
      $('.current').text(parseInt($slider.find('.slide-item:first').attr('data-index')) + 1);
    };

    const playCurrentVideo = () => {
      $('video').each(function () { this.pause(); this.currentTime = 0; });
      if (isPaused) return;
      const currentVideo = $slider.find('.slide-item:first video')[0];
      if (currentVideo) {
        $(currentVideo).get(0).play().catch(e => { });
        $(currentVideo).off('ended').on('ended', moveNext);
      }
    };

    $('.btn-next').on('click', moveNext);
    $('.btn-prev').on('click', movePrev);
    $('.btn-toggle').on('click', function () {
      isPaused = !isPaused;
      const name = isPaused ? 'play-outline' : 'pause-outline';
      $(this).find('ion-icon').attr('name', name);
      isPaused ? $('video').each(function () { this.pause(); }) : playCurrentVideo();
    });
    playCurrentVideo();
  }

  // 그리드 와이드 효과
  const $rows = $('.row'), $grid = $('.grid');
  if ($rows.length > 0) {
    const initGridEvents = () => {
      const isMobile = window.matchMedia('(max-width: 64em)').matches;
      $rows.off('mouseenter click');
      if (isMobile) {
        $rows.on('click', function () { $rows.removeClass('wide'); $(this).addClass('wide'); });
      } else {
        $rows.on('mouseenter', function () { $rows.removeClass('wide'); $(this).addClass('wide'); });
        $grid.on('mouseleave', () => { $rows.removeClass('wide').eq(0).addClass('wide'); });
      }
    };
    initGridEvents();
    $(window).on('resize', initGridEvents);
  }

  /* ==========================================
     5. 브랜드, 연혁, FAQ
     ========================================== */
  // 브랜드 로고
  const $brandList = $('.brand-list .section-content');
  if ($brandList.length > 0) {
    let lIdx = 1;
    const loadL = () => {
      const img = new Image();
      const p = `../case/images/logo_${lIdx}.svg`;
      img.src = p;
      img.onload = () => {
        $brandList.append(`<div class="logo-item"><img src="${p}"></div>`);
        lIdx++;
        loadL();
      };
    };
    loadL();
  }

  // 연혁 (History)
  const $timelineInner = $('.section.timeline .inner');
  if ($timelineInner.length > 0) {
    $.getJSON('../source/data/history.json', function (data) {
      let hHtml = `<div class="history-sticky-container"><div class="history-left"><h2 class="year-display">${data.history[0].year}</h2><div class="history-nav"><button class="btn-prev-year"><ion-icon name="arrow-up-outline"></ion-icon></button><button class="btn-next-year"><ion-icon name="arrow-down-outline"></ion-icon></button></div></div><div class="history-right">`;
      data.history.forEach(g => {
        hHtml += `<div class="history-group" data-year="${g.year}">`;
        g.items.forEach(i => { hHtml += `<div class="history-item"><span class="month">${i.month}</span><span class="desc">${i.content}</span></div>`; });
        hHtml += `</div>`;
      });
      hHtml += `</div></div>`;
      $timelineInner.html(hHtml);

      const groups = gsap.utils.toArray(".history-group");
      ScrollTrigger.create({ trigger: ".section.timeline", start: "top top", end: "bottom bottom", pin: ".history-left" });

      groups.forEach(g => {
        ScrollTrigger.create({
          trigger: g,
          start: "top 20%",
          end: "bottom 20%",
          onEnter: () => $('.year-display').text($(g).data('year')),
          onEnterBack: () => $('.year-display').text($(g).data('year'))
        });
      });

      $('.btn-prev-year').on('click', () => {
        const idx = groups.findIndex(g => $(g).data('year').toString() === $('.year-display').text()) - 1;
        if (idx >= 0) gsap.to(window, { scrollTo: groups[idx] });
      });
      $('.btn-next-year').on('click', () => {
        const idx = groups.findIndex(g => $(g).data('year').toString() === $('.year-display').text()) + 1;
        if (idx < groups.length) gsap.to(window, { scrollTo: groups[idx] });
      });
    });
  }

  // FAQ
  $(document).on('click', '.faq-question', function () {
    const $item = $(this).closest('.faq-item');
    $item.toggleClass('active').find('.faq-answer').stop().slideToggle(300);
    $('.faq-item').not($item).removeClass('active').find('.faq-answer').slideUp(300);
  });

  // 이메일 복사
  $('#copyEmail').on('click', function () {
    navigator.clipboard.writeText($(this).find('.email-address').text()).then(() => alert('이메일 주소가 복사되었습니다.'));
  });
});