// Shared UI helpers + global styles

// Gradient text + scrollbar + a/selection styles
(function() {
  if (document.getElementById('__shared_styles')) return;
  const s = document.createElement('style');
  s.id = '__shared_styles';
  s.textContent = `
    .gradient-text {
      background: linear-gradient(135deg, #4FB560 0%, #80C040 50%, #2E9142 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .eyebrow {
      font-size: 11px; font-weight: 700; color: var(--accent-light);
      text-transform: uppercase; letter-spacing: 0.14em;
      display: inline-flex; align-items: center; gap: 8px;
    }
    a { text-decoration: none; color: inherit; }
    ::selection { background: rgba(79,181,96,0.35); color: #fff; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: var(--bg-primary); }
    ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
  `;
  document.head.appendChild(s);
})();

export function SectionHeader({ tag, title, sub, center }) {
  return (
    <div style={{ textAlign: center ? 'center' : 'left', marginBottom: 48, maxWidth: center ? 780 : 680, margin: center ? '0 auto 48px' : '0 0 48px' }}>
      <span className="eyebrow" style={{ display: 'inline-block', marginBottom: 12 }}>{tag}</span>
      <h2 style={{ fontSize: 'clamp(1.75rem, 3vw, 2.5rem)', fontWeight: 800, letterSpacing: '-0.025em', margin: '0 0 14px', lineHeight: 1.15, textWrap: 'balance' }}>{title}</h2>
      {sub && <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--text-secondary)', margin: 0 }}>{sub}</p>}
    </div>
  );
}