// ZION BrushTitle — huge brush-script section header.
// Use `accent` to split-color part of the title (white + orange treatment).
function BrushTitle({ children, accent, size = 'lg', align = 'center', tag = 'h2' }) {
  const sizeClass = { sm: 't-brush-sm', md: 't-brush-md', lg: 't-brush', xl: 't-brush-xl' }[size];
  const Tag = tag;
  return (
    <Tag style={{
      margin: 0, textAlign: align, color: '#fff',
      fontFamily: "var(--font-script)", fontStyle: 'italic',
      textTransform: 'uppercase',
      letterSpacing: '0.005em', lineHeight: 0.88,
      fontSize: size === 'xl' ? 'clamp(72px, 14vw, 220px)'
              : size === 'lg' ? 'clamp(56px, 10vw, 160px)'
              : size === 'md' ? 'clamp(40px, 6vw, 84px)'
              : 'clamp(28px, 4vw, 56px)',
    }}>
      {children}
      {accent && <> <span style={{ color: '#F7591F' }}>{accent}</span></>}
    </Tag>
  );
}

window.BrushTitle = BrushTitle;