// Top navigation — pages: home, how, pricing, book, areas, faq, about, contact
function TopNav({ page, navigate, theme }) {
  const links = [
  { id: "pricing", label: "Pricing" },
  { id: "how", label: "How it works" },
  { id: "areas", label: "Service area" },
  { id: "faq", label: "FAQ" },
  { id: "about", label: "About" },
  { id: "realtors", label: "Realtors" },
  { id: "estate", label: "Estate" }];

  const [menuOpen, setMenuOpen] = React.useState(false);
  // Lock body scroll while the mobile menu is open.
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const go = (id) => { setMenuOpen(false); navigate(id); };

  const navCls = "nav " + (theme === "white" ? "is-on-white" : theme === "charcoal" ? "is-on-charcoal" : "");
  return (
    <nav className={navCls}>
      <button className="nav__logo" onClick={() => go("home")} aria-label="Tossit home" style={{ lineHeight: "0", opacity: "1", fontFamily: "\"Helvetica Neue\"", fontSize: "12px" }}>
        <img src="assets/tossit-logo.svg" alt="Tossit" style={{ opacity: "1" }} />
      </button>
      <div className="nav__links">
        {links.map((l) =>
        <button
          key={l.id}
          className={"nav__link" + (page === l.id ? " is-active" : "")}
          onClick={() => go(l.id)}>
          {l.label}</button>
        )}
      </div>
      <div className="nav__right">
        <button className="nav__login" onClick={() => go("contact")}>Contact</button>
        <button className="btn btn--primary btn--sm" onClick={() => {window.location.href = "Quote.html";}}>
          Get an instant quote <span className="arrow" aria-hidden>→</span>
        </button>
      </div>
      <button className="nav__toggle" aria-label={menuOpen ? "Close menu" : "Open menu"} aria-expanded={menuOpen}
        onClick={() => setMenuOpen((o) => !o)}>
        {menuOpen ?
        <svg viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg> :
        <svg viewBox="0 0 24 24" fill="none"><path d="M3 6h18M3 12h18M3 18h18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /></svg>}
      </button>
      {menuOpen &&
      <>
        <div className="nav__scrim" onClick={() => setMenuOpen(false)} aria-hidden />
        <div className="nav__mobile" role="dialog" aria-label="Menu">
          {links.map((l) =>
          <button key={l.id} className={"nav__mobile-link" + (page === l.id ? " is-active" : "")} onClick={() => go(l.id)}>
            {l.label}</button>
          )}
          <button className="nav__mobile-link" onClick={() => go("contact")}>Contact</button>
          <div className="nav__mobile-cta">
            <button className="btn btn--primary btn--lg" onClick={() => {window.location.href = "Quote.html";}}>
              Get an instant quote <span className="arrow" aria-hidden>→</span>
            </button>
          </div>
        </div>
      </>}
    </nav>);

}
window.TopNav = TopNav;

function Footer({ navigate }) {
  const cols = [
  { h: "Service", links: [["How it works", "how"], ["Pricing", "pricing"], ["Service area", "areas"], ["Get an instant quote", "_quote"]] },
  { h: "Company", links: [["About", "about"], ["Contact", "contact"], ["FAQ", "faq"], ["Redeem home reset credit", "redeem"]] },
  { h: "Legal", links: [["Privacy Policy", "_privacy"], ["Messaging Terms", "_terms"]] }];

  return (
    <footer className="footer">
      <div className="footer__top">
        <div className="footer__brand">
          <img className="footer__logo" src="assets/tossit-logo-white.svg" alt="Tossit" />
          <p className="footer__tag">A breath of <em>fresh air</em> for your home.</p>
        </div>
        <div className="footer__cols">
          {cols.map((c) =>
          <div key={c.h}>
              <span className="footer__head">{c.h}</span>
              <ul>
                {c.links.map(([label, target]) =>
              <li key={label}>
                    {target === "#" ? <a href="#">{label}</a> :
                target === "_quote" ? <a href="Quote.html">{label}</a> :
                target === "_privacy" ? <a href="privacy.html">{label}</a> :
                target === "_terms" ? <a href="terms.html">{label}</a> :
                <button onClick={() => navigate(target)}>{label}</button>}
                  </li>
              )}
              </ul>
            </div>
          )}
        </div>
      </div>
      <div className="footer__bot">
        <span>© 2026 Tossit, Inc.</span>
        <span>Salt Lake City<span className="red-dot"></span>Park City</span>
      </div>
    </footer>);

}
window.Footer = Footer;