const siteHeader = document.getElementById('siteHeader')
const mainNavbar = document.getElementById('mainNavbar')
const navbarToggler = document.querySelector('.navbar-toggler')
const bootstrapCollapse = mainNavbar && window.bootstrap ? new bootstrap.Collapse(mainNavbar, { toggle: false }) : null

const syncHeaderState = () => {
  const menuOpen = !!mainNavbar?.classList.contains('show')
  if (siteHeader) siteHeader.classList.toggle('menu-open', menuOpen)
  if (navbarToggler) navbarToggler.setAttribute('aria-expanded', menuOpen ? 'true' : 'false')
}

const onScroll = () => {
  if (!siteHeader || siteHeader.classList.contains('page-navbar-solid')) return
  if (window.scrollY > 30) siteHeader.classList.add('scrolled')
  else if (!siteHeader.classList.contains('menu-open')) siteHeader.classList.remove('scrolled')
}
window.addEventListener('scroll', onScroll)
onScroll()

mainNavbar?.addEventListener('show.bs.collapse', () => {
  siteHeader?.classList.add('menu-open', 'scrolled')
  document.body.classList.add('modal-open')
  syncHeaderState()
})

mainNavbar?.addEventListener('hide.bs.collapse', () => {
  siteHeader?.classList.remove('menu-open')
  document.body.classList.remove('modal-open')
  syncHeaderState()
  onScroll()
})

mainNavbar?.addEventListener('shown.bs.collapse', syncHeaderState)
mainNavbar?.addEventListener('hidden.bs.collapse', syncHeaderState)

mainNavbar?.querySelectorAll('.nav-link:not(.dropdown-toggle), .dropdown-item').forEach((link) => {
  link.addEventListener('click', () => {
    if (window.innerWidth < 992 && mainNavbar.classList.contains('show')) bootstrapCollapse?.hide()
  })
})

const openModal = (id) => {
  const modal = document.getElementById(id)
  if (!modal) return
  modal.classList.add('is-open')
  document.body.classList.add('modal-open')
}
const closeModal = (id) => {
  const modal = document.getElementById(id)
  if (!modal) return
  modal.classList.remove('is-open')
  if (!document.querySelector('.custom-modal.is-open') && !mainNavbar?.classList.contains('show')) document.body.classList.remove('modal-open')
}
document.getElementById('openLanguageModal')?.addEventListener('click', () => openModal('languageModal'))
document.getElementById('openLanguageModalMobile')?.addEventListener('click', () => openModal('languageModal'))
document.getElementById('openSearchModal')?.addEventListener('click', () => openModal('searchModal'))
document.getElementById('openSearchModalMobile')?.addEventListener('click', () => openModal('searchModal'))
document.querySelectorAll('[data-close-modal]').forEach((btn) => btn.addEventListener('click', () => closeModal(btn.dataset.closeModal)))
document.querySelectorAll('.custom-modal').forEach((modal) => {
  modal.addEventListener('click', (e) => {
    if (e.target === modal) closeModal(modal.id)
  })
})

document.querySelectorAll('.footer-social-item').forEach((item) => {
  const closeAll = () => document.querySelectorAll('.footer-social-item.is-open').forEach((el) => el.classList.remove('is-open'))
  item.addEventListener('mouseenter', () => item.classList.add('is-open'))
  item.addEventListener('mouseleave', () => item.classList.remove('is-open'))
  item.addEventListener('click', (e) => {
    if (window.matchMedia('(hover: none)').matches) {
      e.preventDefault()
      const willOpen = !item.classList.contains('is-open')
      closeAll()
      if (willOpen) item.classList.add('is-open')
    }
  })
  item.addEventListener('focusin', () => item.classList.add('is-open'))
  item.addEventListener('focusout', () => item.classList.remove('is-open'))
  document.addEventListener('click', (e) => {
    if (!item.contains(e.target)) item.classList.remove('is-open')
  })
})

const resetSlideVideos = (selector) => {
  document.querySelectorAll(selector).forEach((video) => {
    try { video.pause(); video.currentTime = 0 } catch {}
    video.classList.remove('is-ready')
  })
}

document.querySelectorAll('.slide-media-layer, .card-media-layer').forEach((wrap) => {
  wrap.addEventListener('click', () => {
    const video = wrap.querySelector('.slide-video')
    if (!video) return
    video.classList.add('is-ready')
    video.play().catch(() => {})
  })
})

if (document.querySelector('#heroSwiper') && window.Swiper) {
  const heroSlides = Array.from(document.querySelectorAll('#heroSwiper .swiper-slide[data-bullet-title]'))
  const heroBulletTitles = heroSlides.map((slide) => slide.getAttribute('data-bullet-title') || '')

  new Swiper('#heroSwiper', {
    loop: true,
    speed: 900,
    effect: 'fade',
    fadeEffect: { crossFade: true },
    autoplay: { delay: 5000, disableOnInteraction: false },
    navigation: { nextEl: '.hero-next', prevEl: '.hero-prev' },
    pagination: {
      el: '.hero-pagination',
      clickable: true,
      renderBullet: function (index, className) {
        return `<span class="${className} hero-bar-bullet"><em>${heroBulletTitles[index] || ''}</em></span>`
      },
    },
    on: { slideChangeTransitionStart: () => resetSlideVideos('#heroSwiper .slide-video') },
  })
}

if (document.querySelector('#showcaseSwiper') && window.Swiper) {
  new Swiper('#showcaseSwiper', {
    loop: true,
    speed: 700,
    centeredSlides: true,
    slidesPerView: 1.12,
    spaceBetween: 12,
    autoplay: { delay: 4500, disableOnInteraction: false },
    navigation: { nextEl: '.showcase-next', prevEl: '.showcase-prev' },
    pagination: { el: '.showcase-pagination', clickable: true },
    breakpoints: {
      768: { slidesPerView: 1.72, spaceBetween: 12 },
      992: { slidesPerView: 2.18, spaceBetween: 12 },
    },
    on: { slideChangeTransitionStart: () => resetSlideVideos('#showcaseSwiper .slide-video') },
  })
}