// nav.jsx — top navigation + footer
const { useState: useStateN, useEffect: useEffectN } = React;

const NAV_ITEMS = [
  { id: "home", label: "Home" },
  { id: "orglens", label: "OrgLens AI" },
  { id: "releaseguard", label: "ReleaseGuard AI" },
  { id: "pricing", label: "Pricing" },
  { id: "customers", label: "Customers" },
  { id: "about", label: "About" },
  { id: "resources", label: "Resources" },
];

function Nav({ route, setRoute }) {
  const [scrolled, setScrolled] = useStateN(false);
  const [mobileOpen, setMobileOpen] = useStateN(false);

  useEffectN(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffectN(() => { setMobileOpen(false); }, [route]);

  useEffectN(() => {
    const desktopQuery = window.matchMedia("(min-width: 1081px)");
    const closeOnDesktop = () => {
      if (desktopQuery.matches) setMobileOpen(false);
    };

    closeOnDesktop();
    desktopQuery.addEventListener("change", closeOnDesktop);
    return () => desktopQuery.removeEventListener("change", closeOnDesktop);
  }, []);

  return (
    <header style={{
      position: "sticky",
      top: 0,
      zIndex: 50,
      background: scrolled ? "rgba(7,9,15,0.86)" : "rgba(7,9,15,0.4)",
      backdropFilter: "saturate(160%) blur(14px)",
      WebkitBackdropFilter: "saturate(160%) blur(14px)",
      borderBottom: `1px solid ${scrolled ? "var(--border-subtle)" : "transparent"}`,
      transition: "background 160ms ease, border-color 160ms ease",
    }}>
      <div className="wrap-wide" style={{
        height: "var(--nav-h)",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: 24,
      }}>
        <button onClick={() => setRoute("home")} style={{ background: "transparent", border: 0, padding: 0, color: "var(--text-primary)" }}
                aria-label="CrestIron — home">
          <Wordmark size={13} />
        </button>

        <nav aria-label="Primary" style={{ display: "flex", alignItems: "center", gap: 2 }}
             className="primary-nav">
          {NAV_ITEMS.slice(1).map((item) => (
            <button
              key={item.id}
              onClick={() => setRoute(item.id)}
              style={{
                background: "transparent",
                border: 0,
                color: route === item.id ? "var(--text-primary)" : "var(--text-secondary)",
                padding: "8px 12px",
                fontSize: 13,
                fontWeight: 500,
                letterSpacing: "-0.005em",
                borderRadius: "var(--r-2)",
                transition: "color 120ms",
                position: "relative",
              }}
              onMouseEnter={(e) => { if (route !== item.id) e.currentTarget.style.color = "var(--text-primary)"; }}
              onMouseLeave={(e) => { if (route !== item.id) e.currentTarget.style.color = "var(--text-secondary)"; }}
              aria-current={route === item.id ? "page" : undefined}
            >
              {item.label}
              {route === item.id && (
                <span style={{
                  position: "absolute",
                  bottom: -22,
                  left: "50%",
                  transform: "translateX(-50%)",
                  width: 4, height: 4, borderRadius: "50%",
                  background: "var(--accent)",
                }} />
              )}
            </button>
          ))}
        </nav>

        <div className="nav-actions" style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <button className="btn btn-ghost btn-sm" onClick={() => setRoute("contact")}>Sign in</button>
          <button className="btn btn-primary btn-sm" onClick={() => setRoute("contact")}>Book a briefing</button>
        </div>

        <button
          className="mobile-menu-toggle"
          onClick={() => setMobileOpen((open) => !open)}
          aria-label={mobileOpen ? "Close navigation menu" : "Open navigation menu"}
          aria-expanded={mobileOpen}
          aria-controls="mobile-nav-menu"
          style={{
            display: "none",
            width: 40,
            height: 40,
            borderRadius: "var(--r-2)",
            border: "1px solid var(--border)",
            background: "var(--surface-0)",
            color: "var(--text-primary)",
            alignItems: "center",
            justifyContent: "center",
            padding: 0,
          }}
        >
          <span aria-hidden="true" style={{ display: "grid", gap: 5 }}>
            <span style={{ width: 18, height: 2, background: "currentColor", borderRadius: 999, transform: mobileOpen ? "translateY(7px) rotate(45deg)" : "none", transition: "transform 140ms ease" }} />
            <span style={{ width: 18, height: 2, background: "currentColor", borderRadius: 999, opacity: mobileOpen ? 0 : 1, transition: "opacity 140ms ease" }} />
            <span style={{ width: 18, height: 2, background: "currentColor", borderRadius: 999, transform: mobileOpen ? "translateY(-7px) rotate(-45deg)" : "none", transition: "transform 140ms ease" }} />
          </span>
        </button>
      </div>

      {mobileOpen && (
        <div id="mobile-nav-menu" className="mobile-nav-menu">
          <nav aria-label="Mobile primary navigation" className="wrap-wide" style={{ paddingTop: 12, paddingBottom: 16 }}>
            {NAV_ITEMS.map((item) => (
              <button
                key={item.id}
                onClick={() => setRoute(item.id)}
                aria-current={route === item.id ? "page" : undefined}
                style={{
                  width: "100%",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  background: route === item.id ? "var(--surface-1)" : "transparent",
                  border: "1px solid var(--border-subtle)",
                  borderRadius: "var(--r-2)",
                  color: route === item.id ? "var(--text-primary)" : "var(--text-secondary)",
                  padding: "12px 14px",
                  marginBottom: 8,
                  fontSize: 14,
                  fontWeight: 500,
                  textAlign: "left",
                }}
              >
                <span>{item.label}</span>
                {route === item.id && <span className="dot dot-ok" aria-hidden="true" />}
              </button>
            ))}
            <button className="btn btn-primary btn-lg" style={{ width: "100%", justifyContent: "center", marginTop: 8 }} onClick={() => setRoute("contact")}>Book a briefing</button>
          </nav>
        </div>
      )}

      <style>{`
        @media (max-width: 1080px) {
          .primary-nav { display: none !important; }
          .mobile-menu-toggle { display: inline-flex !important; }
        }
        @media (min-width: 1081px) {
          .mobile-nav-menu { display: none !important; }
        }
        @media (max-width: 560px) {
          .nav-actions { display: none !important; }
        }
        .mobile-nav-menu {
          border-top: 1px solid var(--border-subtle);
          background: rgba(7,9,15,0.96);
          box-shadow: 0 20px 48px rgba(0,0,0,0.36);
        }
      `}</style>
    </header>
  );
}

/* ────────────────────────────── Footer ────────────────────────────────── */

function Footer({ setRoute }) {
  const year = new Date().getFullYear();
  return (
    <footer style={{ borderTop: "1px solid var(--border-subtle)", marginTop: 64, paddingTop: 64, paddingBottom: 32 }}>
      <div className="wrap-wide">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 48, marginBottom: 48 }}
             className="footer-grid">
          <div>
            <Wordmark size={13} />
            <p className="body-sm" style={{ marginTop: 16, maxWidth: 36 + "ch" }}>
              Salesforce delivery governance and org-health products for federal agencies,
              public-sector integrators, and enterprise Centers of Excellence.
            </p>
            <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 8 }}>
              <span className="mono-sm muted" style={{ letterSpacing: "0.08em", textTransform: "uppercase" }}>HQ</span>
              <span className="body-sm" style={{ color: "var(--text-primary)" }}>Reston, Virginia · USA</span>
            </div>
          </div>
          <FooterCol title="Products" items={[
            ["OrgLens AI", "orglens"],
            ["ReleaseGuard AI", "releaseguard"],
            ["Pricing", "pricing"],
          ]} setRoute={setRoute} />
          <FooterCol title="Company" items={[
            ["About", "about"],
            ["Customers", "customers"],
            ["Contact", "contact"],
          ]} setRoute={setRoute} />
          <FooterCol title="Resources" items={[
            ["Documentation", "resources"],
            ["Release notes", "resources"],
            ["Security", "resources"],
          ]} setRoute={setRoute} />
          <FooterCol title="Compliance" items={[
            ["Section 508 / WCAG 2.2", "resources"],
            ["SOC 2 control mapping", "resources"],
            ["FedRAMP control mapping", "resources"],
          ]} setRoute={setRoute} />
        </div>

        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", gap: 16,
          paddingTop: 24, borderTop: "1px solid var(--border-subtle)",
        }}>
          <div className="mono-sm muted">© {year} CrestIron, Inc. · CAGE 9X7K2 · DUNS 117394462</div>
          <div className="mono-sm muted" style={{ display: "flex", gap: 24 }}>
            <span>v2026.05.13</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span className="dot dot-ok" /> All systems operational
            </span>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 560px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

function FooterCol({ title, items, setRoute }) {
  return (
    <div>
      <div className="mono-sm muted" style={{ letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 16 }}>
        {title}
      </div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map(([label, route]) => (
          <li key={label}>
            <button
              onClick={() => setRoute(route)}
              style={{
                background: "transparent", border: 0, padding: 0,
                color: "var(--text-secondary)", fontSize: 13, textAlign: "left",
                fontFamily: "inherit",
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = "var(--text-primary)"}
              onMouseLeave={(e) => e.currentTarget.style.color = "var(--text-secondary)"}
            >
              {label}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

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