/* Page-style header for non-home screens (Aktuelles, Kontakt, Impressum, Datenschutz). */

const PageHeader = ({ eyebrow, title, lede, meta }) => (
  <section className="dlg-pageheader">
    <PageHeaderStyles/>
    <div className="dlg-pageheader__bg"/>
    <div className="container dlg-pageheader__inner">
      {eyebrow && <Eyebrow tone="white">{eyebrow}</Eyebrow>}
      <h1>{title}</h1>
      {lede && <p>{lede}</p>}
      {meta && <div className="dlg-pageheader__meta">{meta}</div>}
    </div>
  </section>
);

const PageHeaderStyles = () => (
  <style>{`
    .dlg-pageheader { position: relative; color: #fff; overflow: hidden; background: var(--dlg-navy-800); padding: 64px 0 56px; }
    .dlg-pageheader__bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(900px 320px at 78% 30%, rgba(212,167,60,0.16), transparent 60%),
        linear-gradient(180deg, var(--dlg-navy-900) 0%, var(--dlg-navy-700) 100%);
    }
    .dlg-pageheader__bg::after {
      content: ""; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: linear-gradient(180deg, transparent, #000 20%, #000 90%, transparent);
    }
    .dlg-pageheader__inner { position: relative; max-width: 820px; }
    .dlg-pageheader h1 { font-family: var(--font-serif); font-size: 48px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin: 16px 0 14px; color: #fff; text-wrap: balance; }
    .dlg-pageheader p { font-size: 17px; line-height: 1.55; color: #d3def0; margin: 0; max-width: 640px; }
    .dlg-pageheader__meta { margin-top: 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--dlg-gold-400); letter-spacing: 1.5px; text-transform: uppercase; }
  `}</style>
);

Object.assign(window, { PageHeader });