/* Navy footer: link columns + reversed logo + bottom legal row. */
function SiteFooter({ onNav }) {
  const { Logo } = window.PHYOMICAGDesignSystem_ac1e0b;
  const narrow = window.useNarrow();
  const cols = [
    { h: "Solutions", items: ["BroilerXP", "LayerXP"] },
    { h: "About", items: ["Leadership", "History", "Governance", "Procurement", "Talk to us"] },
  ];
  const linkStyle = { fontFamily: "var(--font-body)", fontSize: 14, color: "rgba(255,255,255,0.72)", cursor: "pointer", lineHeight: 2 };
  const to = {
    "BroilerXP": "broilerxp", "LayerXP": "layerxp",
    "Leadership": "about", "History": "about", "Governance": "article:board", "Procurement": "article:procurement",
    "Talk to us": "contact",
  };
  return (
    <footer style={{ position: "relative", overflow: "hidden", background: "var(--navy)", color: "#fff", paddingTop: narrow ? 48 : 72, paddingBottom: 28 }}>
      <window.NetworkField spacing={360} intensity={0.85} seed={51} />
      <div style={{ position: "relative", zIndex: 1, width: "100%", maxWidth: 1200, marginInline: "auto", paddingInline: narrow ? 20 : 32 }}>
        <div style={{ display: "grid", gridTemplateColumns: narrow ? "1fr" : "1.4fr repeat(2, 1fr)", gap: narrow ? 32 : 32, paddingBottom: narrow ? 36 : 48 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <Logo variant="horizontal" iconSrc={(window.__resources && window.__resources.phyomicIcon) || "../../assets/phyomic-icon.png"} size={40} onDark />
            <p style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "rgba(255,255,255,0.6)", margin: 0, maxWidth: 260, lineHeight: 1.6 }}>
              Advanced Microbiomic Performance.
            </p>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <h4 style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--teal-light)", margin: "0 0 8px" }}>{c.h}</h4>
              <div style={{ display: "flex", flexDirection: "column" }}>
                {c.items.map((i) => <a key={i} onClick={() => onNav && onNav(to[i] || "home")} style={linkStyle}>{i}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div style={{ borderTop: "1px solid rgba(255,255,255,0.14)", paddingTop: 20, display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "rgba(255,255,255,0.75)" }}>© 2026 Part of The Microbiomics Group</span>
          <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "rgba(255,255,255,0.75)", display: "flex", gap: 18, flexWrap: "wrap" }}>
            <a onClick={() => onNav && onNav("article:legal")} style={linkStyle}>Privacy</a><a onClick={() => onNav && onNav("article:legal")} style={linkStyle}>Terms</a><a style={linkStyle}>Brisbane, QLD</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

window.SiteFooter = SiteFooter;