// Sticky top nav with mobile hamburger overlay.
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive] = React.useState("");
  const [open, setOpen] = React.useState(false);
  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);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const links = [
    ["examples", "Document types"],
    ["how", "How it works"],
    ["compare", "Compare"],
    ["operations", "For ops teams"],
    ["pricing", "Pricing"],
  ];

  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">
          {links.map(([id, l]) => (
            <a key={id} href={`#${id}`} className={"nav-link" + (active === id ? " active" : "")}>{l}</a>
          ))}
        </div>
        <div className="nav-cta-desktop" style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <a href="contact.html" className="btn btn-primary btn-sm arrow">Request free trial</a>
        </div>
        <button
          className="nav-hamburger"
          aria-label={open ? "Close menu" : "Open menu"}
          onClick={() => setOpen(!open)}
          style={{
            background: "transparent", border: 0, padding: 8, cursor: "pointer",
            width: 40, height: 40, alignItems: "center", justifyContent: "center",
          }}>
          {open ? (
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M6 6l12 12M6 18L18 6"/></svg>
          ) : (
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
          )}
        </button>
      </div>
    </nav>
    {open && (
      <div className="nav-mobile-overlay" style={{
        position: "fixed", inset: "60px 0 0 0", zIndex: 90,
        background: "var(--bg)", flexDirection: "column", padding: "24px 22px",
        gap: 4,
      }}>
        {links.map(([id, l]) => (
          <a key={id} href={`#${id}`} onClick={() => setOpen(false)}
             style={{ fontSize: 22, fontWeight: 550, color: "var(--ink)", padding: "14px 0", borderBottom: "1px solid var(--line)" }}>{l}</a>
        ))}
        <a href="contact.html" className="btn btn-primary arrow" style={{ marginTop: 24, justifyContent: "center", width: "100%" }}>
          Request free trial
        </a>
      </div>
    )}
    </>
  );
};

window.Nav = Nav;