const DL = window.DuologueDesignSystem_a613c9;

/* Shared legal-page layout: header band + single prose column with numbered
   sections. `sections` = [{ h, p:[ string | [list items] ] }]. Exposed globally
   so screen-terms.jsx and screen-privacy.jsx can reuse it. */
function LegalPage({ eyebrow = "Legal", title, updated, intro, sections }) {
  return <>
    <section style={{ position: "relative", overflow: "hidden", background: "var(--surface-page)", borderBottom: "var(--border-hairline)" }}>
      <span aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        backgroundImage: "linear-gradient(to right, rgba(9,72,182,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(9,72,182,.06) 1px, transparent 1px)",
        backgroundSize: "46px 46px",
        WebkitMaskImage: "radial-gradient(120% 100% at 30% 0%, #000 20%, transparent 78%)",
        maskImage: "radial-gradient(120% 100% at 30% 0%, #000 20%, transparent 78%)"
      }} />
      <div className="du-container" style={{ position: "relative", paddingBlock: "clamp(52px,7vw,104px)" }}>
        <div style={{ maxWidth: 820 }}>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--text-brand)", marginBottom: 18, display: "flex", gap: 10, alignItems: "center" }}>
            <span style={{ width: 6, height: 6, background: "var(--text-brand)" }} />{eyebrow}
          </div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "var(--text-display-3)", lineHeight: 1.05, letterSpacing: "var(--tracking-display)", margin: 0 }}>{title}</h1>
          <p style={{ marginTop: 18, fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--text-muted)" }}>Last updated {updated}</p>
        </div>
      </div>
    </section>

    <section className="du-container" style={{ paddingBlock: "clamp(48px,6vw,88px)" }}>
      <div style={{ maxWidth: 760 }}>
        {intro && <p style={{ fontSize: 18, lineHeight: 1.7, color: "var(--text-body)", marginBottom: 44 }}>{intro}</p>}
        {sections.map((s, i) => (
          <section key={i} style={{ marginBottom: 40 }}>
            <h2 style={{ fontSize: "var(--text-h3)", fontWeight: 700, color: "var(--text-strong)", letterSpacing: "-0.012em", lineHeight: 1.25, marginBottom: 16 }}>{i + 1}. {s.h}</h2>
            {s.p.map((para, j) => Array.isArray(para)
              ? <ul key={j} style={{ margin: "0 0 16px", paddingLeft: 22 }}>{para.map((li, k) => <li key={k} style={{ fontSize: 16.5, lineHeight: 1.7, color: "var(--text-body)", marginBottom: 8 }}>{li}</li>)}</ul>
              : <p key={j} style={{ fontSize: 16.5, lineHeight: 1.72, color: "var(--text-body)", marginBottom: 14 }}>{para}</p>
            )}
          </section>
        ))}
      </div>
    </section>
  </>;
}
window.LegalPage = LegalPage;