// Nav + Footer chrome.

const Nav = ({ active, onNav }) => {
  const items = ["Home", "Nodes", "Network", "About"];
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={`pyrra-nav ${scrolled ? "is-scrolled" : ""}`}>
      <a className="pyrra-nav__brand" href="#/home" onClick={(e) => { e.preventDefault(); onNav("Home"); }}>
        <img src={R("assets/pyrra-flame.png")} alt="" className="pyrra-nav__flame" />
        <span className="pyrra-nav__wordmark">PYRRA</span>
      </a>
      <nav className="pyrra-nav__links">
        {items.map((it) => (
          <a
            key={it}
            href={`#/${it.toLowerCase()}`}
            className={`pyrra-nav__link ${active === it ? "is-active" : ""}`}
            onClick={(e) => { e.preventDefault(); onNav(it); }}
          >
            {it}
          </a>
        ))}
      </nav>
      <Button onClick={() => onNav("Waitlist")}>Join Waitlist</Button>
    </header>
  );
};

const Footer = ({ onNav }) => {
  const go = (p) => (e) => { e.preventDefault(); onNav(p); };
  return (
    <footer className="pyrra-footer">
      <div className="pyrra-footer__inner">
        <div className="pyrra-footer__brand">
          <img src={R("assets/pyrra-flame.png")} alt="" />
          <span>PYRRA</span>
        </div>
        <div className="pyrra-footer__cols">
          <div>
            <h5>Product</h5>
            <a href="#/nodes" onClick={go("Nodes")}>Nodes</a>
            <a href="#/network" onClick={go("Network")}>Network</a>
            <a href="#/specs" onClick={go("Specs")}>Site Specifications</a>
            <a href="#/financials" onClick={go("Financials")}>Financial Projections</a>
            <a href="#/waitlist" onClick={go("Waitlist")}>Waitlist</a>
          </div>
          <div>
            <h5>Company</h5>
            <a href="#/about" onClick={go("About")}>About</a>
            <a href="#/waitlist" onClick={go("Waitlist")}>For Building Owners</a>
            <a href="#/contact" onClick={go("Contact")}>Partnerships</a>
          </div>
          <div>
            <h5>Contact</h5>
            <a href="#/contact" onClick={go("Contact")}>Get in touch</a>
            <a href="#/privacy" onClick={go("Privacy")}>Privacy</a>
            <a href="#/terms" onClick={go("Terms")}>Terms</a>
          </div>
        </div>
      </div>
      <div className="pyrra-footer__strip">
        <span>© 2026 Pyrra Inference Inc. · Local inference infrastructure</span>
        <span>Made for the city.</span>
      </div>
    </footer>
  );
};

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