/* Grow in Uganda — page mount helper + shared page header band */

/* ---- Inner page hero band (for non-home pages) ---- */
function PageHeader({ eyebrow, title, sub, children }) {
  return (
    <div style={{ background: "var(--sand-100)", borderBottom: "1px solid var(--border)" }}>
      <div className="gu-container" style={{ padding: "56px 28px 48px" }}>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(2rem,5vw,2.75rem)", color: "var(--brown-800)",
          letterSpacing: "-.01em", margin: "12px 0 14px", textWrap: "balance", lineHeight: 1.08 }}>{title}</h1>
        <p style={{ color: "var(--fg-muted)", fontSize: "var(--text-md)", lineHeight: 1.6, maxWidth: 640, margin: 0 }}>{sub}</p>
        {children && <div style={{ marginTop: 24 }}>{children}</div>}
      </div>
    </div>
  );
}

/* ---- Section heading helper ---- */
function SectionHead({ eyebrow, title, action, center, light }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16,
      textAlign: center ? "center" : "left", flexDirection: center ? "column" : "row",
      ...(center ? { alignItems: "center" } : {}), marginBottom: center ? 44 : 36 }}>
      <div>
        <Eyebrow light={light}>{eyebrow}</Eyebrow>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(1.6rem,3.4vw,2.25rem)",
          color: light ? "var(--fg-on-dark)" : "var(--brown-800)", margin: "12px 0 0", textWrap: "balance" }}>{title}</h2>
      </div>
      {action}
    </div>
  );
}

/* ---- Mount a page: chrome + content + modal host ---- */
function mountPage(Content) {
  const page = (window.GU && window.GU.page) || "";
  function App() {
    useEffect(() => { refreshIcons(); });
    return (
      <React.Fragment>
        <Header page={page} />
        <main><Content /></main>
        <Footer />
      </React.Fragment>
    );
  }
  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
  const mr = document.getElementById("modal-root");
  if (mr) ReactDOM.createRoot(mr).render(<ModalHost />);
  refreshIcons();
}

Object.assign(window, { PageHeader, SectionHead, mountPage });