/* ─────────────────────────────────────────────────────────────
   SectionHeader · Standard-Headliner für Sections
   Patterns:
   - "standard" (default) — Mulish 300 · 44 px title  +  Cormorant 400 · 44 px accent
   - "auftakt"            — Cormorant Kupfer 200 · 48 px accent  +  Mulish 300 · 40 px title (einzeilig)
   Tones: 'brand' (Kupfer) · 'trauerfall' (Tiefrot) · 'vorsorge' (Salbei)
   ───────────────────────────────────────────────────────────── */

function SectionHeader({
  eyebrow, title, accent, sub, subMaxWidth,
  center=false, tone='brand', pattern='standard',
}) {
  const accentColor =
    tone === 'trauerfall' ? 'var(--accent-trauerfall)'
  : tone === 'vorsorge'   ? 'var(--accent-vorsorge)'
  :                         'var(--brand-accent)';
  const eyebrowColor = accentColor;

  return (
    <div style={{
      textAlign: center ? 'center' : 'left',
      marginBottom: 48,
      ...(center ? { maxWidth: 1140, marginLeft: 'auto', marginRight: 'auto' } : {}),
    }}>
      {eyebrow && (
        <span style={{
          font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
          color: eyebrowColor, display:'inline-flex', alignItems:'center', gap:10,
        }}>
          {center
            ? <span style={{width:6, height:6, borderRadius:'50%', background:eyebrowColor}}/>
            : <span style={{width:24, height:1, background:eyebrowColor}}/>}
          {eyebrow}
        </span>
      )}

      {pattern === 'auftakt' ? (
        <h2 style={{
          margin:'14px 0 6px', lineHeight:1.1, letterSpacing:'-.01em',
          color:'var(--ink-900)', fontWeight:400,
        }}>
          {accent && <span style={{
            fontFamily:'var(--f-display)', fontWeight:200, fontSize:48,
            color: accentColor, letterSpacing:'-.02em',
          }}>{accent}</span>}
          {accent && title ? ' ' : ''}
          {title && <span style={{
            fontFamily:'var(--f-body)', fontWeight:300, fontSize:40,
            color:'var(--ink-900)', letterSpacing:'-.01em',
          }}>{title}</span>}
        </h2>
      ) : (
        <h2 style={{
          fontFamily:'var(--f-display)', fontWeight:300,
          fontSize:44, lineHeight:1.1, letterSpacing:'-.01em',
          color:'var(--ink-900)', margin:'14px 0 6px',
        }}>
          {title}
          {accent && <> <em style={{
            fontStyle:'normal', fontFamily:'var(--f-display)', fontWeight:400,
            color: accentColor, letterSpacing:'-.015em',
          }}>{accent}</em></>}
        </h2>
      )}

      {sub && (
        <p style={{
          color:'var(--ink-500)', fontSize:16, lineHeight:1.7,
          margin:'8px 0 0',
          maxWidth: subMaxWidth || (center ? '58ch' : '52ch'),
          marginLeft: center ? 'auto' : 0,
          marginRight: center ? 'auto' : 0,
        }}>{sub}</p>
      )}
    </div>
  );
}

Object.assign(window, { SectionHeader });