const { SectionHeading } = window.MyMailerDesignSystem_77208c || {};

function Section({ id, tone = "page", eyebrow, title, lead, children, align, width }) {
  const bg = tone === "sunken" ? "var(--surface-sunken)" : tone === "card" ? "var(--surface-card)" : "var(--surface-page)";
  return (
    <section id={id} style={{background:bg,padding:"var(--section-y) 0",borderTop:"1px solid var(--border-subtle)"}}>
      <div style={{maxWidth: width || "var(--container-max)",margin:"0 auto",padding:"0 var(--gutter)",display:"grid",gap:44}}>
        {(eyebrow||title||lead) ? <SectionHeading eyebrow={eyebrow} title={title} lead={lead} align={align} maxWidth={780}/> : null}
        {children}
      </div>
    </section>
  );
}
Object.assign(window, { Section });