Avoid scrolljacking and custom scroll behavior

// ❌ Bad: Hijacking scroll for section navigation
window.addEventListener('wheel', (e) => {
  e.preventDefault() // Blocks native scroll
  const direction = e.deltaY > 0 ? 'down' : 'up'
  scrollToNextSection(direction)
})
 
// ❌ Bad: Modifying scroll speed
window.addEventListener('scroll', (e) => {
  window.scrollTo(0, window.scrollY * 0.5) // Half-speed scroll
})
 
// ❌ Bad: Horizontal scroll from vertical input
container.addEventListener('wheel', (e) => {
  e.preventDefault()
  container.scrollLeft += e.deltaY // Confusing!
})

/* ✅ OK: CSS scroll snap (user stays in control) */
.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}
 
.section {
  scroll-snap-align: start;
}
 
/* User can still scroll freely, snap is just a guide */

// ✅ OK: Scroll-triggered animations that don't block
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate-in')
    }
  })
}, { threshold: 0.1 })
 
// Animation happens, but scrolling continues normally
document.querySelectorAll('.animate-on-scroll').forEach(el => {
  observer.observe(el)
})

// Console test: check if scrolling is hijacked
function detectScrolljacking() {
  let scrollEvents = 0
  let scrollBlocked = false
 
  const handler = (e) => {
    scrollEvents++
    if (e.defaultPrevented) {
      scrollBlocked = true
      console.warn('Scroll event was prevented!')
    }
  }
 
  window.addEventListener('wheel', handler, { passive: false })
 
  setTimeout(() => {
    window.removeEventListener('wheel', handler)
    console.log(`Scroll events: ${scrollEvents}, Blocked: ${scrollBlocked}`)
  }, 5000)
}
 
detectScrolljacking()

function ScrollEffects({ children }: { children: React.ReactNode }) {
  const [effectsEnabled, setEffectsEnabled] = useState(true)
  const prefersReducedMotion = useReducedMotion()
 
  // Disable by default if user prefers reduced motion
  useEffect(() => {
    if (prefersReducedMotion) {
      setEffectsEnabled(false)
    }
  }, [prefersReducedMotion])
 
  return (
    <div className={effectsEnabled ? 'scroll-effects-on' : ''}>
      <div className="scroll-toggle" role="region" aria-label="Scroll preferences">
        <label>
          <input
            type="checkbox"
            checked={effectsEnabled}
            onChange={(e) => setEffectsEnabled(e.target.checked)}
          />
          Enable scroll animations
        </label>
      </div>
      {children}
    </div>
  )
}

// ❌ Bad: No way to reach footer
function InfiniteList() {
  return (
    <div onScroll={loadMore}>
      {items.map(item => <Item key={item.id} {...item} />)}
      {/* Footer is unreachable! */}
    </div>
  )
}
 
// ✅ Good: Pagination fallback
function AccessibleInfiniteList() {
  return (
    <div>
      {items.map(item => <Item key={item.id} {...item} />)}
 
      <button onClick={loadMore} aria-label="Load more items">
        Load more
      </button>
 
      <nav aria-label="Pagination">
        <a href="?page=1">Page 1</a>
        <a href="?page=2">Page 2</a>
        {/* Footer always reachable via pagination */}
      </nav>
 
      <footer>Contact info, links, etc.</footer>
    </div>
  )
}