// Reusable legal/policy page. Content comes from window.__PAGE_DATA__:
//   { title, intro, updated, sections: [ { heading, paras: [ string | {text, sub:[string]} ] } ] }
// Hero: page name in UPPERCASE with a solid black highlight, over the skyline GIF (full-bleed).
function PageLegal() {
  const { PageHero, Reveal } = window.JMK;
  const d = window.__PAGE_DATA__ || {};

  const renderPara = (p, j) => {
    if (typeof p === "string") {
      return (
        <p key={j} style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-700)", margin: "0 0 14px" }}>
          {p}
        </p>
      );
    }
    return (
      <div key={j} style={{ margin: "0 0 14px" }}>
        {p.text && (
          <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-700)", margin: "0 0 8px" }}>{p.text}</p>
        )}
        {p.sub && (
          <div style={{ paddingLeft: 20, borderLeft: "2px solid var(--color-border)" }}>
            {p.sub.map((s, k) => (
              <p key={k} style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-base)", lineHeight: "var(--leading-relaxed)", color: "var(--ink-500)", margin: "0 0 8px" }}>{s}</p>
            ))}
          </div>
        )}
      </div>
    );
  };

  return (
    <React.Fragment>
      <PageHero title={d.title} bgImage="assets/hero-nyc.gif" highlight center minHeight="58vh" tagline={d.intro} />
      <section style={{ background: "#ffffff", padding: "clamp(64px,9vw,110px) clamp(20px,5vw,64px)" }}>
        <div style={{ maxWidth: 820, margin: "0 auto" }}>
          {(d.sections || []).map((s, i) => (
            <Reveal key={i} delay={Math.min(i * 30, 180)}>
              <div style={{ marginBottom: 40 }}>
                {s.heading && (
                  <h2 style={{ fontFamily: "var(--font-editorial)", fontSize: "clamp(22px,3vw,32px)", color: "var(--ink-900)", margin: "0 0 18px" }}>{s.heading}</h2>
                )}
                {(s.paras || []).map(renderPara)}
              </div>
            </Reveal>
          ))}
          {d.updated && (
            <p style={{ fontFamily: "var(--font-ui)", fontSize: "var(--text-2xs)", color: "var(--ink-300)", marginTop: 48 }}>{d.updated}</p>
          )}
        </div>
      </section>
    </React.Fragment>
  );
}
window.JMK = window.JMK || {};
window.JMK.PageLegal = PageLegal;