export function SectionHead({ mark = 'green', title, action, sticky, style }) {
  const markColor = { green: 'var(--green)', amber: 'var(--amber)', cyan: 'var(--cyan)', violet: 'var(--violet)' }[mark] || 'var(--green)';
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 6,
      fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600, letterSpacing: '.22em',
      color: 'var(--muted)', textTransform: 'uppercase',
      padding: '18px 0 10px',
      ...(sticky ? { position: 'sticky', top: 0, zIndex: 5, background: 'linear-gradient(var(--bg) 75%, transparent)' } : {}),
      ...style,
    }}>
      <span style={{ color: markColor, flex: 'none' }}>▍</span>
      <span style={{ whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', minWidth: 0 }}>{title}</span>
      {action ? <span style={{ marginLeft: 'auto', flex: 'none' }}>{action}</span> : null}
    </div>
  );
}