type NavItem = { href: string; label: string }

const navItems: NavItem[] = [
  { href: '#introduction', label: 'Introduction' },
  { href: '#philosophy', label: 'Philosophy' },
  { href: '#skills', label: 'Skills' },
  { href: '#experience', label: 'Experience' },
  { href: '#documents', label: 'Documents' },
]

export default function NavBar() {
  return (
    <header className="fixed inset-x-0 top-0 z-50 border-b border-slate-200/70 bg-white/80 backdrop-blur">
      <nav className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3" aria-label="Primary">
        <a href="#introduction" className="font-semibold tracking-wide text-slate-800">
          Peter Myers
        </a>
        <ul className="hidden items-center gap-6 md:flex">
          {navItems.map((item) => (
            <li key={item.href}>
              <a
                href={item.href}
                className="text-sm font-medium text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-emerald-500/60 rounded"
              >
                {item.label}
              </a>
            </li>
          ))}
        </ul>
        <a
          href="#introduction"
          className="md:hidden text-sm font-medium text-slate-700 hover:text-slate-900"
          aria-label="Jump to introduction"
        >
          Menu
        </a>
      </nav>
    </header>
  )
}
