// KAIJA — Header
const { useState, useEffect } = React;

function Header({ onJoinBeta }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 4);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={"nav " + (scrolled ? "scrolled" : "")}>
      <div className="shell nav-inner">
        <a href="#top" className="nav-logo">
          <img src="assets/kaija-logo.png" alt="KAIJA" />
        </a>
        <nav className="nav-links">
          <a href="#product">Product</a>
          <a href="#how">Workflow</a>
          <a href="#developers">Developers</a>
          <a href="docs/docs-preview.html">Docs</a>
          <a href="docs/docs-preview.html#/security">Security</a>
          <a href="marketplace.html" className="nav-soon">
            Marketplace<span className="soon-badge">Soon</span>
          </a>
        </nav>
        <div className="nav-cta">
          <a className="btn btn-primary btn-sm" href="beta.html">
            Join beta
          </a>
        </div>
      </div>
    </header>
  );
}
window.Header = Header;