// Shared site chrome for theaiparentguide.com — nav + footer + a simple
// prose "legal/info" page shell. Exposes globals for the utility pages.
const DSc = window.AIForParentsDesignSystem_cccd50;
const { Button: SBtn, Kicker: SKick, CJPortrait: SCJ } = DSc;

const EMAIL = "hello@theaiparentguide.com";

function SiteNav({ active }) {
  const [open, setOpen] = React.useState(false);
  const link = { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 14, textDecoration: "none" };
  const on = { ...link, color: "var(--afp-amber)" };
  const off = { ...link, color: "var(--text-on-navy)" };
  const dim = { ...link, color: "var(--navy-300)", opacity: 0.5, cursor: "not-allowed" };
  return (
    <div style={{ background: "var(--surface-navy)", borderBottom: "1px solid var(--line-on-navy)", position: "relative" }}>
      <div className="wrap" style={{ height: 66, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <a href="/" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
          <SCJ src="/assets/cj/cj-headshot.png" frame="box" size={34} style={{ border: "1px solid var(--afp-white)" }} />
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "#fff" }}>AI for Parents</span>
        </a>
        <div className="r-nav-links" style={{ display: "flex", alignItems: "center", gap: 28 }}>
          <a href="/guides/" style={active === "guides" ? on : off}>The Guides</a>
          <a href="/videos/" style={active === "videos" ? on : off}>Videos</a>
          <a href="/about/" style={active === "about" ? on : off}>About</a>
          <SBtn variant="primary" size="sm" as="a" href="/subscribe/">Subscribe</SBtn>
        </div>
        <button className="r-menu-btn" onClick={() => setOpen(!open)} aria-label="Menu"
          style={{ background: "transparent", border: "1px solid var(--line-on-navy)", borderRadius: 8, width: 40, height: 36, alignItems: "center", justifyContent: "center", cursor: "pointer", color: "#fff", fontSize: 18, lineHeight: 1 }}>
          {open ? "✕" : "☰"}
        </button>
      </div>
      <div className={"r-mobile-menu" + (open ? " open" : "")} style={{ flexDirection: "column", gap: 4, padding: "8px 20px 16px", background: "var(--surface-navy)", borderTop: "1px solid var(--line-on-navy)" }}>
        <a href="/guides/" style={{ ...(active === "guides" ? on : off), padding: "10px 0" }}>The Guides</a>
        <a href="/videos/" style={{ ...(active === "videos" ? on : off), padding: "10px 0" }}>Videos</a>
        <a href="/about/" style={{ ...(active === "about" ? on : off), padding: "10px 0" }}>About</a>
        <a href="/subscribe/" style={{ ...link, color: "var(--afp-amber)", fontWeight: 600, padding: "10px 0" }}>Subscribe</a>
      </div>
    </div>
  );
}

function SiteFooter() {
  const col = (h, items) => (
    <div>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "#fff", marginBottom: 10 }}>{h}</div>
      {items.map(([label, href]) => (
        <div key={label} style={{ padding: "3px 0" }}>
          {href ? <a href={href} style={{ fontSize: 13.5, color: "var(--text-on-navy-muted)", textDecoration: "none" }}>{label}</a>
                : <span style={{ fontSize: 13.5, color: "var(--navy-300)", opacity: 0.5 }}>{label}</span>}
        </div>
      ))}
    </div>
  );
  return (
    <div style={{ background: "var(--navy-900)", color: "var(--text-on-navy-muted)" }}>
      <div className="wrap r-footer-cols r-stack" style={{ padding: "40px 40px 30px", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 30 }}>
        <div style={{ maxWidth: 300 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <img src="/assets/brand/favicon.png" alt="" width="26" height="26" style={{ borderRadius: 6, display: "block" }} />
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "#fff" }}>AI for Parents</div>
          </div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 14, color: "var(--afp-amber)", marginTop: 4 }}>TheAIParentGuide.com</div>
          <p style={{ fontSize: 12.5, lineHeight: 1.5, marginTop: 12 }}>Calm, plain-English AI guidance for parents of teens. Educational use only — not legal, medical, or school-policy advice.</p>
        </div>
        {col("Start here", [["The Guides", "/guides/"], ["Subscribe", "/subscribe/"], ["About", "/about/"], ["Videos", "/videos/"]])}
        {col("The fine print", [["Privacy", "/privacy/"], ["Terms of Use", "/terms/"], ["Disclaimer", "/disclaimer/"], ["Affiliate Disclosure", "/affiliates/"]])}
        {col("Get in touch", [["YouTube", "https://www.youtube.com/@TheAIParentGuide"], ["Contact", "/contact/"], ["Sponsor & partner", "/sponsor/"], [EMAIL, "mailto:" + EMAIL]])}
      </div>
      <div className="wrap" style={{ padding: "14px 40px 30px", borderTop: "1px solid var(--line-on-navy)", fontSize: 12, color: "var(--navy-300)" }}>
        © 2026 AI for Parents · TheAIParentGuide.com
      </div>
    </div>
  );
}

// Prose helpers for the utility pages
function Sec({ children }) {
  return <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 21, color: "var(--afp-navy)", margin: "28px 0 10px", lineHeight: 1.2 }}>{children}</h2>;
}
function Para({ children }) {
  return <p style={{ fontSize: 15.5, lineHeight: 1.62, color: "var(--text-body)", margin: "0 0 12px" }}>{children}</p>;
}
function Bullets({ items }) {
  return (
    <ul style={{ margin: "0 0 12px", paddingLeft: 0, listStyle: "none", display: "grid", gap: 8 }}>
      {items.map((it, i) => (
        <li key={i} style={{ position: "relative", paddingLeft: 20, fontSize: 15.5, lineHeight: 1.55, color: "var(--text-body)" }}>
          <span style={{ position: "absolute", left: 0, top: 9, width: 7, height: 7, borderRadius: 2, background: "var(--afp-amber)" }}></span>
          {it}
        </li>
      ))}
    </ul>
  );
}
function Mail() {
  return <a href={"mailto:" + EMAIL} style={{ color: "var(--afp-navy)", fontWeight: 600, textDecoration: "underline", textUnderlineOffset: 2, textDecorationColor: "var(--afp-amber)" }}>{EMAIL}</a>;
}

// Page shell: slim navy header + white article + footer
function LegalShell({ kicker, title, intro, updated, children, active, wide }) {
  return (
    <div style={{ background: "var(--surface-white)" }}>
      <SiteNav active={active} />
      <div style={{ background: "var(--afp-navy)" }}>
        <div className="wrap" style={{ padding: "42px 40px 40px" }}>
          <SKick tone="amber">{kicker || "AI for Parents"}</SKick>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 38, letterSpacing: "-0.01em", color: "#fff", margin: "12px 0 0", lineHeight: 1.08 }}>{title}</h1>
          {intro && <p style={{ fontSize: 17, lineHeight: 1.5, color: "var(--text-on-navy-muted)", maxWidth: 620, margin: "14px 0 0" }}>{intro}</p>}
        </div>
      </div>
      <div className="wrap" style={{ padding: "40px 40px 56px", maxWidth: wide ? 1200 : 820 }}>
        {children}
        {updated && <p style={{ fontSize: 12.5, color: "var(--text-secondary)", marginTop: 30, fontStyle: "italic" }}>Last updated: {updated}</p>}
      </div>
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { SiteNav, SiteFooter, LegalShell, Sec, Para, Bullets, Mail, AFP_EMAIL: EMAIL });