const anchors = Array.from(document.querySelectorAll('#fullpage .section'))
    .map(sec => sec.getAttribute('data-anchor'));

if (anchors.length > 0) {
  let playerInitialized = false;
  
  new fullpage('#fullpage', {
      anchors: anchors,
      autoScrolling: true,
      scrollingSpeed: 1500, // cuộn mượt và chậm hơn // đơn vị: milliseconds (ms)
      fitToSection: false,
      scrollBar: false, // tắt scrollbar thực sự
      responsiveWidth: 768, // Tự động tắt fullPage khi width < 768
      recordHistory: true, // Tắt ghi vào lịch sử trình duyệt (không đổi URL)
      onLeave: function(origin, destination, direction) {
          const navItems = document.querySelectorAll('.we-custom-nav-fullpage ul li');
          navItems.forEach(item => item.classList.remove('active'));
          navItems[destination.index].classList.add('active');
          //
          // const header = document.querySelector('.sticky-header');
          // if (destination.index === 0) {
          //     header.classList.add('d-none');
          // } else {
          //     header.classList.remove('d-none');
          // }
      },
      afterLoad: function(origin, destination, direction) {
          const currentSection = destination.item;

          // Kiểm tra nếu section hiện tại có chứa phần tử #youtube-player
          if ($(destination.item).find('#youtube-player').length > 0) {
            if(!playerInitialized) {
              onYouTubeIframeAPIReady();
              playerInitialized = true;
              onYoutubePlayerReady();
            } else {
              onYoutubePlayerReady();
            }
          }

          // Kích hoạt animation cho phần tử trong section đang active
          currentSection.querySelectorAll('.we-animate-me').forEach(el => {
            const anim = el.dataset.anim || ''; // lấy kiểu anim từ data-anim

            // Xoá class cũ nếu có (reset animation cũ)
            el.classList.remove('we-active-animate', anim);
            void el.offsetWidth; // force reflow để đảm bảo animation chạy lại

            // Thêm class để kích hoạt animation
            el.classList.add('we-active-animate', anim);
          });

          // Kích hoạt animation cho phần tử trong section đang active
          currentSection.querySelectorAll('.we-gowidth-me').forEach(el => {
            const anim = el.dataset.anim || ''; // lấy kiểu anim từ data-anim

            // Xoá class cũ nếu có (reset animation cũ)
            el.classList.remove('we-active-gowidth', anim);
            void el.offsetWidth; // force reflow để đảm bảo animation chạy lại

            // Thêm class để kích hoạt animation
            el.classList.add('we-active-gowidth', anim);
          });

          // Kích hoạt animation cho phần tử trong section đang active
          currentSection.querySelectorAll('.we-borderwidth-me').forEach(el => {
            const anim = el.dataset.anim || ''; // lấy kiểu anim từ data-anim

            // Xoá class cũ nếu có (reset animation cũ)
            el.classList.remove('we-active-borderwidth', anim);
            void el.offsetWidth; // force reflow để đảm bảo animation chạy lại

            // Thêm class để kích hoạt animation
            el.classList.add('we-active-borderwidth', anim);
          });

          // Tuỳ chọn: gỡ class ở section không active (nếu muốn reset)
          document.querySelectorAll('.fp-section:not(.active)').forEach(sec => {
            sec.querySelectorAll('.we-animate-me').forEach(el => {
              const anim = el.dataset.anim || '';
              el.classList.remove('we-active-animate', anim);
            });
            sec.querySelectorAll('.we-gowidth-me').forEach(el => {
              const anim = el.dataset.anim || '';
              el.classList.remove('we-active-gowidth', anim);
            });
            sec.querySelectorAll('.we-borderwidth-me').forEach(el => {
              const anim = el.dataset.anim || '';
              el.classList.remove('we-active-borderwidth', anim);
            });
            // Ẩn video khi section không còn hoạt động
            sec.querySelectorAll('#youtube-container').forEach(el => {
              el.classList.remove('show');
            });
            sec.querySelectorAll('#youtube-player').forEach(el => {
              el.classList.remove('active');
            });
          });
      }
  });
}

// Gắn sự kiện click cho từng span
document.querySelectorAll('.we-custom-nav-fullpage ul li').forEach((li) => {
    li.addEventListener('click', () => {
        const index = parseInt(li.getAttribute('data-index'));
        fullpage_api.moveTo(index + 1); // FullPage index bắt đầu từ 1

        // Xoá phần #anchor khỏi URL sau khi chuyển section
        setTimeout(() => {
            const cleanUrl = window.location.href.split('#')[0];
            history.replaceState(null, '', cleanUrl);
        }, 10);       
    });
});