/** Sexy Geek DS — section header — display title with optional right-aligned CTA link. */
function SectionHeader({ title, cta, onCta }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 18, gap: 16 }}>
      <h2 className="gx-caret" style={{
        fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700,
        fontSize: 'clamp(20px, 2.2vw, 26px)', color: '#EFEFEF',
        lineHeight: 1.1, textTransform: 'uppercase', letterSpacing: '0.01em',
        margin: 0,
      }}>{title}</h2>
      {cta && (
        <button
          type="button"
          onClick={onCta}
          onMouseEnter={() => setHov(true)}
          onMouseLeave={() => setHov(false)}
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            background: 'transparent', border: 'none', cursor: 'pointer',
            fontFamily: "'Inter', sans-serif", fontSize: 12, fontWeight: 600,
            letterSpacing: '0.04em', textTransform: 'uppercase',
            color: hov ? '#62D8FF' : '#9999B2',
            transition: 'color 0.2s', whiteSpace: 'nowrap', padding: 0,
          }}
        >
          {cta}
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ transform: hov ? 'translateX(2px)' : 'none', transition: 'transform 0.2s' }}>
            <path d="M5 12h14M12 5l7 7-7 7" />
          </svg>
        </button>
      )}
    </div>
  );
}

window.SexyGeekDS = window.SexyGeekDS || {};
window.SexyGeekDS.SectionHeader = SectionHeader;