import { Logo } from "./Logo";

const links = [
  { href: "#flavors", label: "Flavors" },
  { href: "#story", label: "Story" },
  { href: "#faq", label: "FAQ" },
];

function scrollToId(id: string) {
  const el = document.getElementById(id);
  if (el) {
    el.scrollIntoView({ behavior: "smooth", block: "start" });
  }
}

export function Nav() {
  return (
    <header className="nav">
      <a
        className="nav__brand"
        href="#top"
        onClick={(event) => {
          event.preventDefault();
          window.scrollTo({ top: 0, behavior: "smooth" });
        }}
      >
        <Logo />
      </a>
      <nav className="nav__links" aria-label="Section navigation">
        {links.map((link) => (
          <a
            key={link.href}
            href={link.href}
            onClick={(event) => {
              event.preventDefault();
              scrollToId(link.href.slice(1));
            }}
          >
            {link.label}
          </a>
        ))}
      </nav>
    </header>
  );
}