// Leonard's Farm: SectionHeading component

// Section heading block: eyebrow + big display title + optional lead paragraph.
function SectionHeading({ eyebrow, title, lead, align = 'left', maxWidth = '640px' }) {
  return (
    <div style={{
      textAlign: align,
      marginInline: align === 'center' ? 'auto' : undefined,
      maxWidth: align === 'center' ? maxWidth : undefined,
    }}>
      {eyebrow && (
        <div style={{
          fontFamily: 'var(--font-body)',
          fontWeight: 'var(--fw-semibold)',
          fontSize: 'var(--fs-eyebrow)',
          letterSpacing: 'var(--ls-eyebrow)',
          textTransform: 'uppercase',
          color: 'var(--brand-primary)',
          marginBottom: 'var(--space-3)',
        }}>
          {eyebrow}
        </div>
      )}
      <h2 style={{ fontSize: 'var(--fs-h2)' }}>{title}</h2>
      {lead && (
        <p style={{
          marginTop: 'var(--space-4)',
          fontSize: 'var(--fs-lead)',
          color: 'var(--text-muted)',
          maxWidth: align === 'left' ? maxWidth : undefined,
          lineHeight: 'var(--lh-snug)',
        }}>
          {lead}
        </p>
      )}
    </div>
  );
}

window.SectionHeading = SectionHeading;