const btnStyles = {
  base: {
    fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 600,
    letterSpacing: '0.18em', textTransform: 'uppercase',
    padding: '16px 28px', borderRadius: 6, cursor: 'pointer',
    transition: 'all 200ms var(--ease-out)', border: '1px solid transparent',
    display: 'inline-flex', alignItems: 'center', gap: 10,
  },
  primary: {
    background: 'var(--gfc-cyan)', color: '#000',
    boxShadow: 'var(--glow-md-cyan)',
  },
  gradient: {
    background: 'linear-gradient(135deg, #7B2CFF 0%, #FF2BD1 100%)', color: '#fff',
    boxShadow: '0 0 24px rgba(255,43,209,.45), 0 0 48px rgba(123,44,255,.3)',
  },
  ghost: {
    background: 'transparent', color: 'var(--gfc-cyan)',
    border: '1px solid rgba(0,229,255,0.5)', boxShadow: 'var(--glow-xs-cyan)',
  },
};
const GFCButton = ({ variant = 'primary', onClick, children }) => {
  const [hover, setHover] = React.useState(false);
  const s = { ...btnStyles.base, ...btnStyles[variant] };
  if (hover) {
    if (variant === 'primary') s.boxShadow = 'var(--glow-lg-cyan)';
    if (variant === 'gradient') s.transform = 'translateY(-1px)';
    if (variant === 'ghost') { s.background = 'rgba(0,229,255,0.08)'; s.boxShadow = 'var(--glow-sm-cyan)'; }
  }
  return (
    <button style={s} onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
      {children}
    </button>
  );
};
Object.assign(window, { GFCButton });