/* Reusable page masthead used at the top of interior pages.
   Clears the fixed nav and gives each page a strong, on-brand identity.
   Colors are driven by CSS variables (--ph-bg / --ph-fg / --ph-accent) so the
   Tweaks panel can recolor a page's masthead live, per page. */

function PageHeader({
  eyebrow, title, titleItalic, subtitle,
  bg = 'var(--pine-teal)', fg = 'var(--parchment)', accent = 'var(--golden-glow)',
  label = 'page header', bgImage = null, fadeColor = 'var(--parchment)', titleImage = null
}) {
  const soft = (pct) => 'color-mix(in srgb, var(--ph-fg) ' + pct + '%, transparent)';
  // Cream halo to lift the lettering off the engraving.
  const halo = '0 0 2px rgba(254, 242, 228, 0.6), 0 1px 5px rgba(254, 242, 228, 0.4), 0 0 10px rgba(254, 242, 228, 0.28)';
  // Light wash so the engraving blends a bit more with the cream page.
  const scrim = 'rgba(254, 242, 228, 0.43)';
  const headerBackground = bgImage ?
  `url("${bgImage}") center / cover no-repeat` :
  'rgb(55, 8, 33)';
  return (
    <header data-screen-label={label} data-page-masthead="" style={{
      '--ph-bg': bg, '--ph-fg': fg, '--ph-accent': accent,
      position: 'relative', overflow: 'hidden',
      position: 'relative', overflow: 'hidden',
      color: 'var(--ph-fg)',
      padding: 'clamp(150px, 14vw, 200px) var(--gutter) clamp(140px, 17vw, 240px)',
      textAlign: 'center', background: headerBackground, backgroundColor: 'rgb(55, 8, 33)'
    }}>
      {bgImage ?
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: scrim, pointerEvents: 'none' }} /> :
      null}
      {bgImage ?
      <div aria-hidden="true" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 'clamp(64px, 8vw, 120px)', background: `linear-gradient(to bottom, transparent, ${fadeColor})`, pointerEvents: 'none', zIndex: 2 }} /> :
      null}
      <div style={{ position: 'relative', zIndex: 1 }}>
      {eyebrow ?
        <div className="eyebrow" style={{ marginBottom: 0, color: "rgb(55, 8, 33)", fontSize: "24px", textShadow: halo }}>{eyebrow}</div> :
        null}

      <h1 className="display" style={{

          fontSize: 'clamp(52px, 8vw, 116px)',
          lineHeight: 0.95,
          margin: 'clamp(28px, 4vw, 48px) auto',
          fontFamily: "LesEnfantsDuParadis", color: "rgb(67, 25, 42)"
        }}>
        {titleImage ?
          <img src={titleImage} alt={[title, titleItalic].filter(Boolean).join(' ')}
          style={{ display: 'block', margin: '0 auto', width: 'auto', height: 'auto', maxWidth: 'min(760px, 86%)', maxHeight: 'clamp(84px, 11vw, 150px)' }} /> :
          <React.Fragment>
          {title}
          {titleItalic ?
            <span style={{ fontStyle: 'italic', color: 'var(--ph-accent)' }}>{' '}{titleItalic}</span> :
            null}
        </React.Fragment>}
      </h1>

      {subtitle ?
        <p style={{ ...{
            maxWidth: '46ch', margin: '0 auto',
            fontWeight: 300,
            lineHeight: 1.15,
            color: soft(82), fontFamily: "RandomHandwritten", fontSize: "26px", whiteSpace: 'pre-line'
          }, fontFamily: "RandomHandwritten", color: "rgb(55, 8, 33)", textShadow: halo, fontSize: "40px" }}>{subtitle}</p> :
        null}

      </div>
    </header>);

}

window.PageHeader = PageHeader;