/* Nav — sticky, scroll-aware. Official lowercase wordmark. */
const FORM = "https://form.respondi.app/5Ibt22x2";

function Nav({ darkTop }) {
  const { Button } = window.CheerDesignSystem_4677f5;
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const go = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" });
  };

  const onDark = darkTop && !scrolled;
  const cls = "nav" + (scrolled ? " is-scrolled" : "") + (onDark ? " nav--ondark" : "");

  return (
    <header className={cls}>
      <a className="nav__logo" href="#top" onClick={go("top")} aria-label="cheer design">
        <img src={onDark ? "cheer-ds/assets/logo/cheer-wordmark-white.svg" : "cheer-ds/assets/logo/cheer-wordmark-black.svg"} alt="cheer desıgn" />
      </a>
      <nav className="nav__links">
        <a href="#para-quem" onClick={go("para-quem")}>Para quem</a>
        <a href="#diferencial" onClick={go("diferencial")}>O estúdio</a>
        <a href="#servicos" onClick={go("servicos")}>Serviços</a>
        <a href="#create" onClick={go("create")}>Metodologia</a>
        <a href="#cases" onClick={go("cases")}>Cases</a>
      </nav>
      <div className="nav__cta">
        <Button variant="dark" size="sm" rightIcon={<window.Icon.Arrow />}
          onClick={() => window.open(FORM, "_blank")}>
          Conversa estratégica
        </Button>
      </div>
    </header>
  );
}

window.Nav = Nav;
window.FORM = FORM;