document.addEventListener('DOMContentLoaded', () => {
  const header = document.getElementById('site-header')
  const toggle = document.getElementById('menu-toggle')
  const overlay = document.getElementById('fullscreen-nav')
  const closeBtn = document.getElementById('menu-close')
  const links = overlay?.querySelectorAll('[data-nav-link]')

  const openMenu = () => {
    overlay?.classList.add('is-open')
    overlay?.setAttribute('aria-hidden', 'false')
    toggle?.setAttribute('aria-expanded', 'true')
    document.body.classList.add('menu-open')
  }

  const closeMenu = () => {
    overlay?.classList.remove('is-open')
    overlay?.setAttribute('aria-hidden', 'true')
    toggle?.setAttribute('aria-expanded', 'false')
    document.body.classList.remove('menu-open')
  }

  toggle?.addEventListener('click', () => {
    if (overlay?.classList.contains('is-open')) closeMenu()
    else openMenu()
  })
  closeBtn?.addEventListener('click', closeMenu)
  links?.forEach((a) => a.addEventListener('click', closeMenu))

  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeMenu()
  })

  let ticking = false
  window.addEventListener('scroll', () => {
    if (!header) return
    if (!ticking) {
      window.requestAnimationFrame(() => {
        header.classList.toggle('is-scrolled', window.scrollY > 24)
        ticking = false
      })
      ticking = true
    }
  })

  /* FAQ accordion — одна відкрита або кілька; тут класичний toggle */
  document.querySelectorAll('.faq-item').forEach((item) => {
    const btn = item.querySelector('.faq-btn')
    btn?.addEventListener('click', () => {
      const open = item.classList.contains('is-open')
      document.querySelectorAll('.faq-item').forEach((el) => el.classList.remove('is-open'))
      if (!open) item.classList.add('is-open')
    })
  })

  /* Scroll reveal */
  const revealEls = document.querySelectorAll('.reveal')
  if (revealEls.length && 'IntersectionObserver' in window) {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((en) => {
          if (en.isIntersecting) {
            en.target.classList.add('is-visible')
            io.unobserve(en.target)
          }
        })
      },
      { rootMargin: '0px 0px -8% 0px', threshold: 0.08 },
    )
    revealEls.forEach((el) => io.observe(el))
  }

  /* Легкий parallax для mockup у кейсі (менший зсув на мобільних) */
  const parallaxWraps = document.querySelectorAll('[data-parallax]')
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
  if (parallaxWraps.length && !reduceMotion) {
    let raf = 0
    const mqCoarse = window.matchMedia('(max-width: 959.98px)')
    const onScroll = () => {
      cancelAnimationFrame(raf)
      raf = requestAnimationFrame(() => {
        const vh = window.innerHeight || 800
        const amp = mqCoarse.matches ? 10 : 22
        parallaxWraps.forEach((wrap) => {
          const inner = wrap.querySelector('img')
          if (!inner) return
          const rect = wrap.getBoundingClientRect()
          const progress = Math.min(1, Math.max(0, 1 - rect.top / vh))
          const shift = (progress - 0.35) * amp
          inner.style.transform = `translate3d(0, ${shift}px, 0)`
        })
      })
    }
    window.addEventListener('scroll', onScroll, { passive: true })
    onScroll()
  }

  /* Дуже легкий 3D-nudge для hero mockup на desktop */
  const tiltZone = document.querySelector('[data-showcase-tilt]')
  const tiltTarget = tiltZone?.querySelector('.case-showcase')
  const wideEnough = window.matchMedia('(min-width: 960px)')
  if (tiltZone && tiltTarget && wideEnough.matches && !reduceMotion) {
    const reset = () => {
      tiltTarget.style.transform = ''
    }
    tiltZone.addEventListener('mousemove', (e) => {
      const r = tiltZone.getBoundingClientRect()
      const x = (e.clientX - r.left) / r.width - 0.5
      const y = (e.clientY - r.top) / r.height - 0.5
      tiltTarget.style.transform = `rotateY(${x * 5.5}deg) rotateX(${-y * 4}deg)`
    })
    tiltZone.addEventListener('mouseleave', reset)
    wideEnough.addEventListener('change', (ev) => {
      if (!ev.matches) reset()
    })
  }

  document.body.classList.add('page-fade')
})
