// Top nav — single bar shared between index and download pages

function Nav({ active }) {
  const [scrolled, setScrolled] = React.useState(false);
  const { lang, setLang } = useLang();
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const NAV_LINKS = [
    { href: "index.html#install",  label: { zh: "安装",     en: "Install" } },
    { href: "index.html#agents",   label: { zh: "工作流",   en: "Workflow" } },
    { href: "index.html#features", label: { zh: "特性",     en: "Features" } },
    { href: "index.html#config",   label: { zh: "配置",     en: "Config" } },
    { href: "configuration.html",  label: { zh: "文档",     en: "Docs" } },
  ];

  return (
    <nav className="nav" style={scrolled ? { borderBottomColor: "var(--rule-2)" } : {}}>
      <div className="nav-inner">
        <a className="brand" href="index.html">
          <span className="brand-mark"></span>
          <span className="brand-name">
            <b>Carbon Code</b><span>DS · v{window.CARBONCODE_VERSION}</span>
          </span>
        </a>
        <div className="nav-links" role="navigation">
          {NAV_LINKS.map((l) => (
            <a
              key={t(l.label, "en")}
              href={l.href}
              className={l.key && active === l.key ? "on" : ""}
              style={l.key && active === l.key ? { color: "var(--accent)" } : {}}
            >
              {t(l.label, lang)}
            </a>
          ))}
        </div>
        <div className="nav-cta">
          <div className="lang-switch" role="group" aria-label="Language">
            <button
              type="button"
              className={lang === "en" ? "on" : ""}
              aria-pressed={lang === "en"}
              onClick={() => setLang("en")}
            >EN</button>
            <button
              type="button"
              className={lang === "zh" ? "on" : ""}
              aria-pressed={lang === "zh"}
              onClick={() => setLang("zh")}
            >中文</button>
          </div>
          <a className="btn btn-ghost btn-sm" href="https://github.com/Yapie0/carboncode" target="_blank" rel="noreferrer">
            <Ic.Github size={13}/> GitHub
          </a>
          <a className="btn btn-primary btn-sm" href="https://www.npmjs.com/package/@carboncode/cli" target="_blank" rel="noreferrer">
            npm
          </a>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;