/* global React */
const { useState: useStateNav, useEffect: useEffectNav } = React;

function Logo({ size = 22 }) {
  return (
    <span className="logo">
      <svg width={size} height={size} viewBox="0 0 22 22" aria-hidden="true" className="logo__mark">
        <rect x="2" y="3"  width="18" height="3.6" rx="1.6" fill="var(--accent)" />
        <rect x="2" y="9"  width="18" height="3.6" rx="1.6" fill="var(--accent)" opacity="0.62" />
        <rect x="2" y="15" width="18" height="3.6" rx="1.6" fill="var(--accent)" opacity="0.32" />
      </svg>
      <span className="logo__word">Py<span className="logo__dash">-</span>Stack<span className="logo__eda"> EDA</span></span>
    </span>
  );
}

function Nav({ onCta }) {
  const [scrolled, setScrolled] = useStateNav(false);
  useEffectNav(() => {
    const f = () => setScrolled(window.scrollY > 24);
    f(); window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  const links = [
    ["Thesis", "#thesis"],
    ["Architecture", "#architecture"],
    ["Platform", "#ide"],
    ["Team", "#team"],
  ];
  return (
    <header className={"nav " + (scrolled ? "is-scrolled" : "")}>
      <div className="container nav__inner">
        <a href="#top" className="nav__brand"><Logo /></a>
        <nav className="nav__links">
          {links.map(([t, h]) => <a key={h} href={h}>{t}</a>)}
        </nav>
        <div className="nav__actions">
          <a href="#cta" className="btn btn-primary" onClick={onCta}>
            Request access <span className="arr">{"\u2192"}</span>
          </a>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Nav, Logo });