// Nav + Footer for NorthPoint site.
function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" });
}

function Nav({ onQuote }) {
  const [solid, setSolid] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const w = useW();
  const mobile = w < 768;
  const compact = w < 1180;
  React.useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  React.useEffect(() => { if (!mobile) setMenuOpen(false); }, [mobile]);
  const showReviews = typeof window !== "undefined" && window.SHOW_REVIEWS;
  const links = [["Products", "products"], ["Gallery", "gallery"], ["Financing", "financing"], ["Process", "process"], ...(showReviews ? [["Reviews", "reviews"]] : []), ["Areas", "areas"]];
  const handleLink = (id) => { setMenuOpen(false); scrollToId(id); };
  const bgOn = solid || menuOpen;
  return (
    <header style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 100,
      background: bgOn ? "rgba(21,17,13,0.96)" : "transparent",
      backdropFilter: bgOn ? "blur(10px)" : "none",
      borderBottom: solid ? `1px solid ${NP.lineL}` : "1px solid transparent",
      transition: "background .3s ease, border-color .3s ease" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: mobile ? "0 20px" : "0 36px",
        height: solid ? 68 : (mobile ? 72 : 100),
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, transition: "height .3s ease" }}>
        <a href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); setMenuOpen(false); }} style={{ display: "flex", flex: "0 0 auto" }}>
          <NPLogoImg onDark height={solid ? 44 : (mobile ? 48 : 68)} style={{ transition: "height .3s ease" }} />
        </a>
        {!mobile && (
          <nav style={{ display: "flex", alignItems: "center", gap: compact ? 18 : 26, flex: "1 1 auto", justifyContent: "center" }}>
            {links.map(([label, id]) => (
              <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); scrollToId(id); }}
                onMouseEnter={(e) => (e.currentTarget.style.color = NP.gold)}
                onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(243,237,227,0.82)")}
                style={{ fontFamily: FONT.body, fontSize: 13.5, fontWeight: 600, color: "rgba(243,237,227,0.82)",
                  textDecoration: "none", letterSpacing: "0.01em", transition: "color .15s", whiteSpace: "nowrap" }}>{label}</a>
            ))}
          </nav>
        )}
        <div style={{ display: "flex", alignItems: "center", gap: 12, flex: "0 0 auto" }}>
          {!compact && !mobile && <a href="tel:6233309095" style={{ fontFamily: FONT.body, fontSize: 14, fontWeight: 700, color: NP.textL, textDecoration: "none", letterSpacing: "0.01em", whiteSpace: "nowrap" }}>(623) 330-9095</a>}
          {!mobile && <Btn variant="solid" onClick={onQuote} style={{ padding: "12px 20px", fontSize: 12.5 }}>Free Quote</Btn>}
          {mobile && (
            <button onClick={() => setMenuOpen((o) => !o)} aria-label={menuOpen ? "Close menu" : "Open menu"}
              style={{ background: "none", border: `1px solid ${NP.lineL}`, borderRadius: 3, color: NP.textL, cursor: "pointer",
                width: 44, height: 44, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 5, padding: 0, flex: "0 0 auto" }}>
              <span style={{ width: 20, height: 1.5, background: NP.textL, display: "block", transition: "transform .22s ease",
                transform: menuOpen ? "rotate(45deg) translateY(6.5px)" : "none" }} />
              <span style={{ width: 20, height: 1.5, background: NP.textL, display: "block", transition: "opacity .22s ease", opacity: menuOpen ? 0 : 1 }} />
              <span style={{ width: 20, height: 1.5, background: NP.textL, display: "block", transition: "transform .22s ease",
                transform: menuOpen ? "rotate(-45deg) translateY(-6.5px)" : "none" }} />
            </button>
          )}
        </div>
      </div>
      {mobile && (
        <div style={{ maxHeight: menuOpen ? "600px" : 0, overflow: "hidden", transition: "max-height .35s ease",
          borderTop: menuOpen ? `1px solid ${NP.lineL}` : "none", background: "rgba(21,17,13,0.98)" }}>
          <div style={{ padding: "16px 20px 28px", display: "flex", flexDirection: "column" }}>
            {links.map(([label, id]) => (
              <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); handleLink(id); }}
                style={{ fontFamily: FONT.body, fontSize: 17, fontWeight: 600, color: NP.textL,
                  textDecoration: "none", padding: "14px 0", borderBottom: `1px solid ${NP.lineL}`, display: "block" }}>{label}</a>
            ))}
            <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 12 }}>
              <a href="tel:6233309095" style={{ fontFamily: FONT.body, fontSize: 16, fontWeight: 700, color: NP.gold, textDecoration: "none" }}>(623) 330-9095</a>
              <Btn variant="solid" full onClick={() => { setMenuOpen(false); onQuote(); }}>Request a Free Quote</Btn>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}

function Footer({ onQuote }) {
  const w = useW();
  const mobile = w < 768;
  const showReviews = typeof window !== "undefined" && window.SHOW_REVIEWS;
  const cols = [
    ["Products", ["Lattice & Solid Covers", "Louvered Systems", "Insulated Roof Panels", "Privacy & Roll-Downs"]],
    ["Company", ["Project Gallery", "Our Process", ...(showReviews ? ["Reviews"] : []), "Financing"]],
    ["Service Areas", ["Phoenix & Scottsdale", "Gilbert & Mesa", "Chandler & Tempe", "Queen Creek", "Rio Verde"]],
  ];
  return (
    <footer style={{ background: "#100d0a", color: NP.textL2, borderTop: `1px solid ${NP.lineL}` }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: mobile ? "48px 20px 0" : "72px 48px 0" }}>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1.5fr 1fr 1fr 1.2fr", gap: mobile ? 36 : 48 }}>
          <div>
            <NPLogoImg onDark height={64} />
            <p style={{ fontFamily: FONT.body, fontSize: 15, lineHeight: 1.65, marginTop: 22, maxWidth: 300 }}>
              Custom Alumawood pergolas and patio covers, built for the Arizona sun. Licensed, bonded & insured — backed by a 5-year workmanship warranty.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 7, marginTop: 22 }}>
              <a href="tel:6233309095" style={{ fontFamily: FONT.body, fontSize: 15.5, fontWeight: 700, color: NP.textL, textDecoration: "none" }}>(623) 330-9095</a>
              <a href="mailto:info@northpointpergolas.com" style={{ fontFamily: FONT.body, fontSize: 14.5, color: NP.textL2, textDecoration: "none" }}>info@northpointpergolas.com</a>
            </div>
            <div style={{ display: "flex", gap: 14, marginTop: 24 }}>
              {window.SHOW_REVIEWS
                ? <React.Fragment><Stars size={13} /><span style={{ fontFamily: FONT.body, fontSize: 13, color: NP.textL }}>5.0 · Google Reviews</span></React.Fragment>
                : <span style={{ fontFamily: FONT.body, fontSize: 13, fontWeight: 600, letterSpacing: "0.03em", color: NP.gold }}>Licensed · Bonded · Insured</span>}
            </div>
          </div>
          {cols.map(([title, items]) => (
            <div key={title}>
              <div style={{ fontFamily: FONT.body, fontSize: 12.5, fontWeight: 700, letterSpacing: "0.18em", textTransform: "uppercase", color: NP.gold, marginBottom: 18 }}>{title}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                {items.map((it) => (
                  <span key={it} style={{ fontFamily: FONT.body, fontSize: 14.5, color: NP.textL2, cursor: "pointer", transition: "color .15s" }}
                    onMouseEnter={(e) => (e.currentTarget.style.color = NP.textL)}
                    onMouseLeave={(e) => (e.currentTarget.style.color = NP.textL2)}>{it}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", alignItems: mobile ? "flex-start" : "center", flexDirection: mobile ? "column" : "row",
          justifyContent: "space-between", flexWrap: "wrap", gap: 16,
          marginTop: mobile ? 40 : 64, padding: "28px 0 30px", borderTop: `1px solid ${NP.lineL}` }}>
          <span style={{ fontFamily: FONT.body, fontSize: 13 }}>© 2026 NorthPoint Pergolas · ROC #366340 · Phoenix, Arizona</span>
          <div style={{ display: "flex", gap: 22, fontFamily: FONT.body, fontSize: 13, alignItems: "center" }}>
            <a href="trade-partners.html" style={{ textDecoration: "none", color: NP.textL2, fontWeight: 600, transition: "color .15s" }}
              onMouseEnter={(e) => (e.currentTarget.style.color = NP.gold)}
              onMouseLeave={(e) => (e.currentTarget.style.color = NP.textL2)}>Contractors & Trade Partners</a>
            <a href="privacy.html" style={{ textDecoration: "none", color: NP.textL2, transition: "color .15s" }}
              onMouseEnter={(e) => (e.currentTarget.style.color = NP.textL)}
              onMouseLeave={(e) => (e.currentTarget.style.color = NP.textL2)}>Privacy</a>
            <span style={{ color: NP.gold, fontWeight: 700, cursor: "pointer" }} onClick={onQuote}>Get a Free Quote →</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

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