// Small presentational primitives shared across pages, matching the charte.

export function Container({ children, style }) {
  return <div style={{ maxWidth: 1240, margin: '0 auto', ...style }}>{children}</div>
}

export function Eyebrow({ children, color = '#0A5C94', style }) {
  return (
    <div
      style={{
        fontSize: 13,
        fontWeight: 700,
        letterSpacing: '.1em',
        textTransform: 'uppercase',
        color,
        ...style,
      }}
    >
      {children}
    </div>
  )
}

export function GoldRule({ style }) {
  return <div style={{ width: 60, height: 3, background: '#D4A017', ...style }} />
}

export function Placeholder({ label, height, minHeight, style }) {
  return (
    <div className="mk-placeholder" style={{ height, minHeight, ...style }}>
      <span className="mk-placeholder-label">{label}</span>
    </div>
  )
}
