// Sticky top nav.
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive] = React.useState("");
  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 8);
      const sections = ["examples", "how", "compare", "operations", "pricing"];
      let cur = "";
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top < 120) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav className="nav" style={{ borderBottomColor: scrolled ? "var(--line)" : "transparent" }}>
      <div className="container nav-inner">
        <a href="#" className="brand" aria-label="Reqscan">
          <svg className="brand-mark" width="26" height="26" viewBox="0 0 84 84" aria-hidden="true">
            <rect x="2" y="2" width="80" height="80" rx="16" fill="var(--green)"/>
            <g fill="none" stroke="#ffffff" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round">
              <path d="M22 32 L22 22 L32 22"/>
              <path d="M52 22 L62 22 L62 32"/>
              <path d="M62 52 L62 62 L52 62"/>
              <path d="M32 62 L22 62 L22 52"/>
            </g>
            <path d="M28 45 Q35 36 42 42 T56 39" fill="none" stroke="#7fd4b9" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          Reqscan
        </a>
        <div className="nav-links">
          {[
            ["examples", "Document types"],
            ["how", "How it works"],
            ["compare", "Compare"],
            ["operations", "For ops teams"],
            ["pricing", "Pricing"],
          ].map(([id, l]) => (
            <a key={id} href={`#${id}`} className={"nav-link" + (active === id ? " active" : "")}>{l}</a>
          ))}
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <a href="contact.html" className="btn btn-primary btn-sm arrow">Request free trial</a>
        </div>
      </div>
    </nav>
  );
};

window.Nav = Nav;