// PageHeader — compact navy banner for secondary content pages (FAQ, Links, etc.).
// Same visual language as the Home hero (navy background, gold eyebrow, display headline)
// but without the hero-specific imagery, so it fits any content page.
// `eyebrow` and `lead` are both optional — omit either (or both) for a page that only needs
// the title. `className` lets one specific page (e.g. Links Hub) scope a padding override
// without touching this shared rule for every other page that uses it.
const PageHeader = ({ eyebrow, title, lead, className = "" }) => (
  <section className={"scl-page-header" + (className ? " " + className : "")}>
    <div className="scl-container">
      {eyebrow && (
        <div className="scl-eyebrow scl-eyebrow--light">
          <span className="scl-rule" /> {eyebrow}
        </div>
      )}
      <h1 className="scl-page-header__title">{title}</h1>
      {lead && <p className="scl-page-header__lead">{lead}</p>}
    </div>
  </section>
);

window.PageHeader = PageHeader;