/* === SectionHeader ===
 * Canonical eyebrow + Anton headline block, used to introduce every section.
 */

const SectionHeader = ({ eyebrow, title, subtitle, align = "left" }) => (
  <header style={{
    maxWidth: align === "center" ? 720 : 880,
    margin: align === "center" ? "0 auto 48px" : "0 0 48px",
    textAlign: align,
  }}>
    <Eyebrow>{eyebrow}</Eyebrow>
    <h2 className="ol-section-title" style={{
      fontFamily: "var(--font-display)",
      fontSize: 56, lineHeight: 0.95,
      margin: "12px 0 16px",
      color: "var(--fg-1)",
      textTransform: "uppercase",
      letterSpacing: "-0.005em",
    }}>{title}</h2>
    {subtitle && (
      <p style={{
        fontFamily: "var(--font-body)", fontSize: 17,
        lineHeight: 1.55, color: "var(--fg-2)", margin: 0,
        maxWidth: 640,
      }}>{subtitle}</p>
    )}
  </header>
);

Object.assign(window, { SectionHeader });