Provide instant anchor scroll option

/* ❌ Bad: Always smooth, ignores preferences */
html {
  scroll-behavior: smooth;
}
 
/* ✅ Good: Respect motion preferences */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
 
/* Users who prefer reduced motion get instant scrolling (default) */

function scrollToElement(elementId: string) {
  const element = document.getElementById(elementId)
  if (!element) return
 
  const prefersReducedMotion = window.matchMedia(
    '(prefers-reduced-motion: reduce)'
  ).matches
 
  element.scrollIntoView({
    behavior: prefersReducedMotion ? 'instant' : 'smooth',
    block: 'start'
  })
 
  // Move focus to target for keyboard users
  element.focus({ preventScroll: true })
}

function useScrollToAnchor() {
  const prefersReducedMotion = useReducedMotion()
 
  const scrollTo = useCallback((elementId: string) => {
    const element = document.getElementById(elementId)
    if (!element) return
 
    element.scrollIntoView({
      behavior: prefersReducedMotion ? 'instant' : 'smooth',
      block: 'start'
    })
 
    // Set tabindex if element isn't focusable
    if (!element.hasAttribute('tabindex')) {
      element.setAttribute('tabindex', '-1')
    }
    element.focus({ preventScroll: true })
  }, [prefersReducedMotion])
 
  return scrollTo
}
 
function useReducedMotion() {
  const [prefersReduced, setPrefersReduced] = useState(false)
 
  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
    setPrefersReduced(mediaQuery.matches)
 
    const handler = (e: MediaQueryListEvent) => setPrefersReduced(e.matches)
    mediaQuery.addEventListener('change', handler)
    return () => mediaQuery.removeEventListener('change', handler)
  }, [])
 
  return prefersReduced
}

interface AnchorLinkProps {
  href: string
  children: React.ReactNode
}
 
function AnchorLink({ href, children }: AnchorLinkProps) {
  const scrollTo = useScrollToAnchor()
 
  const handleClick = (e: React.MouseEvent) => {
    if (href.startsWith('#')) {
      e.preventDefault()
      scrollTo(href.slice(1))
    }
  }
 
  return (
    <a href={href} onClick={handleClick}>
      {children}
    </a>
  )
}

<!-- Target must be focusable for keyboard navigation -->
<section id="features" tabindex="-1">
  <h2>Features</h2>
  <!-- Content -->
</section>

/* Hide focus ring when section is focused via anchor */
section:focus {
  outline: none;
}
 
/* But show focus for keyboard navigation */
section:focus-visible {
  outline: 2px solid var(--focus-color);
}