function TopBar({ route, navigate }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 6);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`topbar ${scrolled ? "scrolled" : ""}`}>
      <div className="topbar-inner">
        <a className="brand" href="#/" onClick={(e)=>{e.preventDefault(); navigate("/")}}>
          <img src="./assets/icon.png" alt=""/>
          <span className="word">Schienengenerator</span>
        </a>
        <nav className="nav-links">
          <a href="#features" onClick={(e)=>{
            e.preventDefault();
            if (route !== "/") { navigate("/"); setTimeout(()=>document.getElementById("features")?.scrollIntoView({behavior:"smooth"}), 30); }
            else document.getElementById("features")?.scrollIntoView({behavior:"smooth"});
          }}>So funktioniert's</a>
          <a href="#download" onClick={(e)=>{e.preventDefault(); navigate("/download")}}>Download</a>
        </nav>
        <Button variant="primary" icon="download" href="#/download" onClick={(e)=>{e.preventDefault(); navigate("/download")}}>
          Download
        </Button>
      </div>
    </header>
  );
}

window.TopBar = TopBar;