// Quantum Spaces — Nav + Footer.

function Nav() {
  const links = [
    ["The problem", "problem"], ["Why now", "whynow"],
    ["Four pillars", "pillars"], ["How we work", "principles"], ["Get involved", "involved"],
  ];
  const [open, setOpen] = React.useState(false);
  const jump = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 62, behavior: "smooth" });
    setOpen(false);
  };
  return (
    <nav>
      <div className="container">
        <div className="nav-inner">
          <a className="nav-logo" aria-label="Quantum Spaces">Quantum<span className="nl-teal">Spaces</span></a>
          <ul className="nav-links">
            {links.map(([label, id]) => (
              <li key={id}><a onClick={() => jump(id)}>{label}</a></li>
            ))}
          </ul>
          <button className="nav-toggle" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(!open)}>
            <span className={"nav-toggle-bar" + (open ? " a" : "")}></span>
            <span className={"nav-toggle-bar" + (open ? " b" : "")}></span>
          </button>
        </div>
      </div>
      <div className={"nav-drawer" + (open ? " open" : "")}>
        {links.map(([label, id]) => (
          <a key={id} className="nav-drawer-link" onClick={() => jump(id)}>{label}</a>
        ))}
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-inner">
          <div className="footer-left">
            <div className="footer-logo" aria-label="Quantum Spaces">Quantum<span className="nl-teal">Spaces</span></div>
            <div className="footer-links">
              <a href="/privacy.html">Privacy Policy</a><a href="/cookies.html">Cookie Policy</a><a href="/contact.html">Contact</a>
            </div>
          </div>
          <div className="footer-copy">© 2026 The Quantum Spaces Project, Inc. &amp; FriendlyPhotons. All Rights Reserved.</div>
        </div>
      </div>
    </footer>
  );
}

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