// Shared layout for legal / policy pages (Privacy, Terms, Descriptions).
// Children are rendered as long-form text inside the .hp-legal block.
function HpLegal({ title, eyebrow, updated, children }) {
  return (
    <section
      className="hp-section--xl"
      style={{ background: "var(--cream)", borderBottom: "1px solid var(--rule)" }}
    >
      <div className="hp-container" style={{ maxWidth: 820 }}>
        <div className="hp-eyebrow-row">
          <span className="eyebrow" style={{ borderBottom: "1px solid var(--coral)", paddingBottom: 2 }}>
            {eyebrow}
          </span>
          {updated && <span className="eyebrow hp-hide-sm">Last updated · {updated}</span>}
        </div>
        <h1 className="hp-hero-title" style={{ marginBottom: 48, maxWidth: "16ch" }}>
          {title}
        </h1>
        <div className="hp-legal">
          {children}
        </div>
      </div>
    </section>
  );
}
window.HpLegal = HpLegal;