import { useEffect, useState } from "react";
import { Wordmark } from "./Wordmark";
import { scrollToSection } from "../scroll";

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

export function SiteHeader() {
  const [active, setActive] = useState("hero");

  useEffect(() => {
    const sections = ["hero", ...links.map((l) => l.id)]
      .map((id) => document.getElementById(id))
      .filter((el): el is HTMLElement => el !== null);

    const observer = new IntersectionObserver(
      (entries) => {
        const visible = entries
          .filter((entry) => entry.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
        if (visible) setActive(visible.target.id);
      },
      { rootMargin: "-45% 0px -45% 0px", threshold: [0, 0.25, 0.5, 1] },
    );

    sections.forEach((section) => observer.observe(section));
    return () => observer.disconnect();
  }, []);

  return (
    <header className="site-header">
      <a
        className="site-header__brand"
        href="#hero"
        onClick={(event) => {
          event.preventDefault();
          scrollToSection("hero");
        }}
      >
        <Wordmark size={24} />
        <span className="sr-only">— back to top</span>
      </a>

      <nav className="site-nav" aria-label="Sections">
        <ul>
          {links.map((link) => (
            <li key={link.id}>
              <a
                href={`#${link.id}`}
                aria-current={active === link.id ? "true" : undefined}
                onClick={(event) => {
                  event.preventDefault();
                  scrollToSection(link.id);
                }}
              >
                {link.label}
              </a>
            </li>
          ))}
        </ul>
      </nav>
    </header>
  );
}