;(function () {
  document.addEventListener('DOMContentLoaded', function () {
    if (window.innerWidth < 960) {
      // on mobile, show project as swiper
      setTimeout(() => {
        new Swiper('.swiper-container', {
          slidesPerView: 1,
          centeredSlides: true,
          loop: true,
          autoplay: {
            autoplay: true,
            delay: 3000,
          },
          breakpoints: {
            1024: {
              pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
                clickable: true,
              },
            },
          },
        })
      }, 1000)
    } else {
      function handleClass(ele, reg, newcls) {
        ele.className = ele.className.replace(reg, '')
        ele.className += ' ' + newcls
      }
      // on PC, hover & show QR code
      const qrcode = document.querySelector('.staking-qrcode')
      const qrcodeImg = document.querySelector('.staking-qrcode img')
      const stakeNow = document.querySelector('.stake-now.desktop')
      const banner = document.querySelector('.banner-img')
      let tick = null
      if (!stakeNow) return
      stakeNow.addEventListener('mouseover', function () {
        handleClass(qrcodeImg, / fade-out/g, 'fade-in-qrcode')
        handleClass(qrcode, / fade-out/g, 'fade-in')
        qrcode.setAttribute('style', 'display:block')
        handleClass(banner, / fade-in-half/g, 'fade-out-half')
        if (tick) {
          clearTimeout(tick)
        }
      })

      stakeNow.addEventListener(
        'mouseout',
        function (event) {
          handleClass(qrcode, / fade-in/g, 'fade-out')
          handleClass(qrcodeImg, / fade-in-qrcode/g, 'fade-out')
          tick = setTimeout(() => {
            qrcode.setAttribute('style', 'display:none')
          }, 500)
          handleClass(banner, / fade-out-half/g, 'fade-in-half')
        },
        true,
      )
    }

    // make Tokenlon & imKey linkable
    // const tokenlon = document.querySelector('.tokenlon')
    // const tokenlonContent = tokenlon.innerHTML.split('Tokenlon')
    // tokenlon.innerHTML = tokenlonContent.join("<a href='https://tokenlon.im'>Tokenlon</a>")

    // const imkey = document.querySelector('.imkey')
    // const imkeyContent = imkey.innerHTML.split('imKey')
    // imkey.innerHTML = imkeyContent.join("<a href='https://imkey.im'>imKey</a>")
  })
})()