/* Nav.jsx — editorial masthead-style header */

function Nav(){
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(()=>{
    const onScroll = ()=> setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive:true });
    return ()=> window.removeEventListener("scroll", onScroll);
  },[]);
  const click = (id)=> (e)=>{ e.preventDefault(); scrollToId(id); };

  return (
    <header className={"masthead " + (scrolled ? "is-scrolled" : "")}>
      <div className="masthead-inner shell">
        <div className="masthead-side left">
          <span className="mh-meta">
            <span className="mh-dot" />
            <span>v1.0 · iOS</span>
          </span>
        </div>

        <a href="#top" className="masthead-mark" onClick={click("top")} aria-label="All Things Potato — home">
          <span className="mh-word a">All</span>{" "}
          <span className="mh-word b">Things</span>{" "}
          <span className="mh-word c">Potato</span>
        </a>

        <div className="masthead-side right">
          <a href="#download" className="mh-cta" onClick={click("download")}>
            <span>Download</span>
            <span className="mh-arrow" aria-hidden="true">↗</span>
          </a>
        </div>
      </div>

      <nav className="masthead-tabs shell" aria-label="Primary">
        <div className="mh-rule" />
        <div className="mh-links">
          <a href="#worlds"   onClick={click("worlds")}>Worlds</a>
          <span className="mh-sep" aria-hidden="true">·</span>
          <a href="#features" onClick={click("features")}>Features</a>
          <span className="mh-sep" aria-hidden="true">·</span>
          <a href="#premium"  onClick={click("premium")}>Premium</a>
          <span className="mh-sep" aria-hidden="true">·</span>
          <a href="#privacy"  onClick={click("privacy")}>Privacy</a>
        </div>
        <div className="mh-rule" />
      </nav>
    </header>
  );
}

Object.assign(window, { Nav });