$(function () {

  // WebP支持检测（首次运行时缓存结果）
  function checkWebPSupport(callback) {
    if (typeof localStorage !== 'undefined' && localStorage.getItem('webpSupport') !== null) {
      return callback(localStorage.getItem('webpSupport') === 'true')
    }

    const img = new Image()
    img.onload = function () {
      const result = img.width > 0 && img.height > 0
      localStorage.setItem('webpSupport', result)
      callback(result)
    }
    img.onerror = function () {
      localStorage.setItem('webpSupport', false)
      callback(false)
    }

    img.src =
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
  }
  checkWebPSupport(function (isSupported) {
    $('img').each(function () {
      const $img = $(this)
      const webpSrc = $img.closest('picture').find('source[type="image/webp"]').data('srcset')
      const fallbackSrc = $img.data('src')

      // 动态设置真实图片路径
      $img.data('original', isSupported ? webpSrc : fallbackSrc)
    })

    $('img').lazyload({
      threshold: 200,
      effect: 'fadeIn',
      appear: function () {
        const realSrc = $(this).data('original')
        $(this).attr('src', realSrc)
        $(this).addClass('lazy-loaded')
      },
      load: function () {
        $(this).addClass('lazy-loaded')
      },
      error: function () {
        $(this).attr('src', 'img/error.jpg')
      },
    })
  })

  // 初始化懒加载
  $('img').lazyload({
    effect: 'fadeIn', // 淡入效果
    threshold: 100, // 提前300px加载
    failure_limit: 15, // 最大容错数量
    skip_invisible: true, // 加载隐藏图片
    appear: function () {
      // 加载前回调
      $(this).css('background', 'transparent')
      $(this).removeClass('lazyload')
    },
    load: function () {
      // 加载完成回调
      $(this).addClass('lazy-loaded')
    },
  })

  // 获取DOM元素
  const kvSection = document.getElementById('kv-section')
  const kvBg = document.getElementById('kv-bg')
  const secondText = document.getElementById('second-text')

  // 配置参数
  const TRIGGER_HEIGHT = window.innerHeight // 滚动触发区间为一个屏幕高度
  // const TRIGGER_HEIGHT = $('#kv-section').innerHeight

  // 监听滚动事件
  window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY || document.documentElement.scrollTop

    if (scrollTop > 0) {
      $('.ias-conctrol-kvtxt').hide()
    } else {
      $('.ias-conctrol-kvtxt').show()
    }

    // 计算滚动比例 (0 到 1)
    // 当滚动距离从 0 到 TRIGGER_HEIGHT 时，progress 从 0 变到 1
    let progress = scrollTop / TRIGGER_HEIGHT
    progress = Math.max(0, Math.min(1, progress)) // 限制在 0-1 之间

    // 1. KV 区域透明度: 100% -> 0%
    // opacity = 1 - progress
    const kvOpacity = 1 - progress
    kvSection.style.opacity = kvOpacity

    // 2. KV 图片高斯模糊: 0px -> 50px
    // blur = progress * 50
    const blurValue = progress * 50
    kvBg.style.filter = `blur(${blurValue}px)`

    // 3. 第二屏文案透明度: 0% -> 100% 且 上移动画
    // 为了让效果更自然，我们让文案在滚动过半后开始显现
    // 当 progress > 0.5 时，textProgress 从 0 变到 1
    let textProgress = (progress - 0.3) * 6
    textProgress = Math.max(0, Math.min(1, textProgress))

    secondText.style.opacity = textProgress
    // 位移从 50px 到 0px
    // const translateY = 50 * (1 - textProgress)
    // secondText.style.transform = `translateY(${translateY}px)`
  })

  // 初始化触发一次，确保状态正确
  window.dispatchEvent(new Event('scroll'))

  // 网络四大原则
  var mySwiper = new Swiper('.as-tpl-hm-banner01', {
    loop: false,
    pagination: {
      el: '.swiper-pagination01',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next01',
      prevEl: '.swiper-button-prev01',
    },
    slidesPerView: 1,
    speed: 500,
    loop: false,
    autoplay: false,
    spaceBetween: 10,
    keyboard: true,
    observer: true,
    observeParents: true,
    breakpoints: {
      // 当窗口宽度 >= 900px (平板/小PC)
      900: {
        slidesPerView: 2,
        spaceBetween: 20
      },
    },
    on: {
      transitionStart: function (mySwiper) {
        $('.as-tpl-hm-banner01').find('img').trigger('appear')
      },
      slideChangeTransitionEnd: function () {
        gatabswiper(this)
      },
    },
  })

  // 隐私保护四大原则
  var mySwiper = new Swiper('.as-tpl-hm-banner02', {
    loop: false,
    pagination: {
      el: '.swiper-pagination02',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next02',
      prevEl: '.swiper-button-prev02',
    },
    slidesPerView: 1,
    speed: 500,
    loop: false,
    autoplay: false,
    spaceBetween: 10,
    keyboard: true,
    observer: true,
    observeParents: true,
    breakpoints: {
      // 当窗口宽度 >= 900px (平板/小PC)
      900: {
        slidesPerView: 2,
        spaceBetween: 20
      },
    },
    on: {
      transitionStart: function (mySwiper) {
        $('.as-tpl-hm-banner02').find('img').trigger('appear')
      },
      slideChangeTransitionEnd: function () {
        gatabswiper(this)
      },
    },
  })

  // 看不见的安全，触手可及的安心
  var mySwiper = new Swiper('.as-tpl-hm-banner03', {
    loop: false,
    pagination: {
      el: '.swiper-pagination03',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next03',
      prevEl: '.swiper-button-prev03',
    },
    slidesPerView: 1,
    speed: 500,
    loop: false,
    autoplay: false,
    spaceBetween: 10,
    keyboard: true,
    observer: true,
    observeParents: true,
    breakpoints: {
      // 当窗口宽度 >= 900px (平板/小PC)
      900: {
        slidesPerView: 2,
        spaceBetween: 20
      },
    },
    on: {
      transitionStart: function (mySwiper) {
        $('.as-tpl-hm-banner03').find('img').trigger('appear')
      },
      slideChangeTransitionEnd: function () {
        gatabswiper(this)
      },
    },
  })

  // 证书查看轮播
  var mySwiper = new Swiper('.as-tpl-hm-banner04', {
    loop: false,
    pagination: {
      el: '.swiper-pagination04',
      type: 'fraction',
      renderFraction: function (currentClass, totalClass) {
        return '<span class="' + currentClass + '"></span>' +
          ' / ' +
          '<span class="' + totalClass + '"></span>'
      },
    },
    navigation: {
      nextEl: '.swiper-button-next04',
      prevEl: '.swiper-button-prev04',
    },
    slidesPerView: 1,
    speed: 500,
    loop: false,
    autoplay: false,
    spaceBetween: 20,
    keyboard: true,
    observer: true,
    observeParents: true,

    on: {
      transitionStart: function (mySwiper) {
        $('.as-tpl-hm-banner04').find('img').trigger('appear')
      },
      slideChangeTransitionEnd: function () {
        gatabswiper(this)
      },
    },
  })

  // 弹窗
  $('.security-features-item').on('click', function () {
    $('.pop-pic').find('img').trigger('appear')
    let i = $(this).data('item')

    $('.sae-con,.iso,.ccrc').hide()
    $('.pop-pic').show()
    if (i == 1) {
      $('.iso').show()
    }
    if (i == 2) {
      $('.sae-con').show()
    }
    if (i == 3) {
      $('.ccrc').show()
    }
  })
  $('.pop-pic-box .cl ').on('click', function () {
    $('.pop-pic,.sae-con,.iso,.ccrc').hide()
  })

  // 了解隐私安全特性
  $('.security-features-more').on('click', function () {
    if ($(this).hasClass('on')) {
      $(this).removeClass('on')
      $('.security-features-list').slideUp()
    } else {
      $(this).addClass('on')
      $('.security-features-list').slideDown()
    }
  })


  $(".setion5_desc .tit").click(function () {
    var _this = $(this)
    _this.parent().toggleClass('active').siblings().removeClass('active')
    _this.next().slideToggle()
    _this.parent().siblings().find('.txt').slideUp()

    if (screenwidth < 900) {
      $(".ias-mobile-tpl-header").hide()
      setTimeout(function () {
        $('html, body').animate({ scrollTop: _this.parent().offset().top - 150 }, 500)

        setTimeout(function () {
          $(".ias-mobile-tpl-header").show()
        }, 500)
      }, 500)
    }
  })
  $(".setion5_desc .all.all1").click(function () {
    $(".setion5_desc").addClass('active')
    for (let i = 0; i < $(".setion5_desc .list").length; i++) {
      $(".setion5_desc .list").eq(i).addClass('active')
      $(".setion5_desc .list").eq(i).find('.txt').slideDown()
    }
  })
  $(".setion5_desc .all.all2").click(function () {
    $(".setion5_desc").removeClass('active')
    for (let i = 0; i < $(".setion5_desc .list").length; i++) {
      $(".setion5_desc .list").eq(i).removeClass('active')
      $(".setion5_desc .list").eq(i).find('.txt').slideUp()
    }
  })


})