import { useEffect, type RefObject } from 'react'

/**
 * In-page anchors scroll to the target minus the fixed header, exactly as the
 * original landing did. The header height is read at click time because it
 * changes with the breakpoint and with the logo's fluid width.
 */
export function useAnchorScroll(headerRef: RefObject<HTMLElement | null>) {
  useEffect(() => {
    const onClick = (event: MouseEvent) => {
      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey) return

      const link = (event.target as Element | null)?.closest('a[href^="#"]')
      const href = link?.getAttribute('href')
      if (!href || href === '#') return

      const target = document.querySelector(href)
      if (!target) return

      event.preventDefault()
      const offset = (headerRef.current?.offsetHeight ?? 0) + 8
      window.scrollTo({ top: target.getBoundingClientRect().top + window.scrollY - offset, behavior: 'smooth' })
    }

    document.addEventListener('click', onClick)
    return () => document.removeEventListener('click', onClick)
  }, [headerRef])
}