Smooth scrolling

import type { MouseEvent } from 'react';
import { useReducedMotion } from 'motion/react';

const sections = [
  { id: 'features', title: 'Features' },
  { id: 'pricing', title: 'Pricing' },
  { id: 'faq', title: 'FAQ' }
];

export function LandingPage() {
  const reduceMotion = useReducedMotion();

  function jump(event: MouseEvent<HTMLAnchorElement>, id: string) {
    const target = document.getElementById(id);
    if (!target) return;
    event.preventDefault();
    // Glide there, or jump instantly for people who prefer less motion.
    target.scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth' });
    // Move focus as well so the next Tab starts from the section, without cutting the glide short.
    target.focus({ preventScroll: true });
    history.pushState(null, '', `#${id}`);
  }

  return (
    <>
      <nav className='sticky top-0 z-10 flex h-16 items-center gap-6 border-b bg-background px-6 text-sm font-medium'>
        {sections.map((section) => (
          <a
            key={section.id}
            href={`#${section.id}`}
            onClick={(event) => jump(event, section.id)}
            className='text-muted-foreground hover:text-foreground'
          >
            {section.title}
          </a>
        ))}
      </nav>
      {sections.map((section) => (
        // scroll-mt-20 (80px) keeps the 64px sticky nav from covering the heading.
        <section
          key={section.id}
          id={section.id}
          tabIndex={-1}
          className='min-h-screen scroll-mt-20 px-6 py-16 outline-none'
        >
          <h2 className='text-2xl font-semibold'>{section.title}</h2>
        </section>
      ))}
    </>
  );
}