// The eyebrow + title + lead block at the top of most pages.
export default function PageHeader({ eyebrow, title, lead, center = false }) {
  return (
    <section style={{ marginBottom: 40, textAlign: center ? 'center' : 'left' }}>
      {eyebrow && <p className="eyebrow">{eyebrow}</p>}
      <h1 className="h1">{title}</h1>
      {lead && (
        <p className="lead" style={{ maxWidth: 680, marginLeft: center ? 'auto' : undefined, marginRight: center ? 'auto' : undefined }}>
          {lead}
        </p>
      )}
    </section>
  )
}