function Nav({ variant }) {
  const siteMode = typeof window !== "undefined" && window.__siteMode;
  const [path, setPath] = React.useState(() => (typeof window !== "undefined" ? window.location.pathname || "/" : "/"));
  React.useEffect(() => {
    if (!siteMode) return;
    const onPop = () => setPath(window.location.pathname || "/");
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, [siteMode]);

  const siteLinks = [
    { label: "Services", href: "/services" },
    { label: "Open source", href: "/open-source" },
    { label: "Work", href: "/work" },
    { label: "Stories", href: "/blog" },
  ];
  const links = siteMode ? siteLinks : CONTENT.nav;

  return (
    <nav className="bx-nav">
      <a href={siteMode ? "/" : "/"} style={{ display: "inline-flex" }}><Logo /></a>
      <div className="bx-nav-links">
        {links.map((l, idx) => {
          const active = siteMode && path === l.href;
          return (
            <React.Fragment key={l.label}>
              {idx > 0 && <span className="bx-nav-separator" aria-hidden="true">·</span>}
              <a
                href={l.href}
                style={active ? { color: "var(--ink)", textDecoration: "underline", textUnderlineOffset: 4 } : null}
              >
                {l.label}
              </a>
            </React.Fragment>
          );
        })}
      </div>
      <div className="bx-nav-actions" style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <ThemeSwitch />
        <a href={siteMode ? "/contact" : "/contact"} className="bx-cta bx-nav-contact-btn" aria-label="Contact">
          <span className="bx-contact-text">Get in touch →</span>
          <svg className="bx-contact-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 20, height: 20 }}>
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
            <polyline points="22,6 12,13 2,6" />
          </svg>
        </a>
      </div>
    </nav>
  );
}

Object.assign(window, { Nav });