$(document).ready(function () {
  $('.progress-item span').click(function () {
    let className = $(this).attr("class").split(' ')[0];
    // 錨點
    $('html,body').animate({ scrollTop: $(`#${className}`).offset().top }, 300);

    let percent = '';

    if (className === "journey") {
      percent = '20'
    } else if (className === "team") {
      percent = '40'
    } else if (className === "ai-ad") {
      percent = '60'
    } else if (className === "seo") {
      percent = '80'
    } else if (className === "ai-video") {
      percent = '100'
    }

    // if (className === "journey") {
    //   percent = '17'
    // } else if (className === "team") {
    //   percent = '34'
    // } else if (className === "ai-ad") {
    //   percent = '51'
    // } else if (className === "seo") {
    //   percent = '68'
    // } else if (className === "ai-video") {
    //   percent = '85'
    // } else if (className === "blog") {
    //   percent = '100'
    // }

    if ($(this).hasClass('info')) {
      $('#progress-bar').val('0');
      $(this).nextAll().removeClass('border-change');
    } else if ($(this).hasClass(className)) {
      // $(this).nextAll().removeClass('border-change');
      $('#progress-bar').val(percent);
      $(this).prevAll().addClass('border-change');
      $(this).addClass('border-change');
    }
  });
});

var scroll = 0;
let scrollVal = '';

// $(window).scroll(function () {
//   console.log($('#info').offset().top);
//   // 於特定區塊顯示進度條
//   if ($(this).scrollTop() > $('#info').offset().top - 200) {
//     $(".progress-item").css("opacity", "1");
//   } else if ($(this).scrollTop() < $('#info').offset().top) {
//     $(".progress-item").css("opacity", "0");
//   }
//   if ($(this).scrollTop() > $('#blog').offset().top - 700) {
//     $(".progress-item").css("opacity", "0");
//   }

//   // 依捲軸高度調整 progress-bar value
//   if ($(this).scrollTop() > $('#info').offset().top - 100 && $(this).scrollTop() < $('#info').offset().top + 50) {
//     scrollVal = '0';
//     $('.info').nextAll().removeClass('border-change');
//   } else if ($(this).scrollTop() > $('#journey').offset().top - 100 && $(this).scrollTop() < $('#journey').offset().top + 50) {
//     scrollVal = '20';
//     $('.journey').nextAll().removeClass('border-change');
//     $('.journey').prevAll().addClass('border-change');
//     $('.journey').addClass('border-change');
//   } else if ($(this).scrollTop() > $('#team').offset().top - 100 && $(this).scrollTop() < $('#team').offset().top + 50) {
//     scrollVal = '40';
//     $('.team').nextAll().removeClass('border-change');
//     $('.team').prevAll().addClass('border-change');
//     $('.team').addClass('border-change');
//   } else if ($(this).scrollTop() > $('#ai-ad').offset().top - 100 && $(this).scrollTop() < $('#ai-ad').offset().top + 50) {
//     scrollVal = '60';
//     $('.ai-ad').nextAll().removeClass('border-change');
//     $('.ai-ad').prevAll().addClass('border-change');
//     $('.ai-ad').addClass('border-change');
//   } else if ($(this).scrollTop() > $('#seo').offset().top - 100 && $(this).scrollTop() < $('#seo').offset().top + 50) {
//     scrollVal = '80';
//     $('.seo').nextAll().removeClass('border-change');
//     $('.seo').prevAll().addClass('border-change');
//     $('.seo').addClass('border-change');
//   } else if ($(this).scrollTop() > $('#ai-video').offset().top - 100 && $(this).scrollTop() < $('#ai-video').offset().top + 500) {
//     scrollVal = '100';
//     $('.ai-video').nextAll().removeClass('border-change');
//     $('.ai-video').prevAll().addClass('border-change');
//     $('.ai-video').addClass('border-change');
//   }
//   // else if ($(this).scrollTop() > $('#blog').offset().top - 100 && $(this).scrollTop() < $('#blog').offset().top + 50) {
//   //   scrollVal = '100';
//   //   $('.blog').addClass('border-change');
//   // }

//   $('#progress-bar').val(scrollVal);
// })