// Button.jsx — square, ink-first
function Button({ variant = 'primary', children, onClick, icon }) {
  const [hover, setHover] = React.useState(false);

  const btnBase = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    padding: variant === 'icon' ? 0 : '10px 18px',
    width: variant === 'icon' ? 38 : 'auto',
    height: variant === 'icon' ? 38 : 'auto',
    justifyContent: variant === 'icon' ? 'center' : undefined,
    fontFamily: 'var(--font-body)',
    fontSize: 12.5,
    fontWeight: 600,
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
    cursor: 'pointer',
    border: 'none',
    transition: 'all 200ms cubic-bezier(0.25,0,0,1)',
  };

  const variants = {
    primary: {
      background: hover ? '#343B44' : 'var(--c-smoke)',
      color: '#FFFFFF',
      transform: hover ? 'translateY(-1px)' : 'translateY(0)',
    },
    secondary: {
      background: 'transparent',
      color: hover ? 'var(--ink-coral)' : 'var(--c-smoke)',
      border: `1px solid ${hover ? 'var(--ink-coral)' : 'var(--c-smoke)'}`,
    },
    ghost: {
      background: 'transparent',
      color: hover ? 'var(--c-smoke)' : 'var(--c-whisper)',
      padding: '10px 0',
    },
    icon: {
      background: '#FFFFFF',
      color: hover ? 'var(--ink-coral)' : 'var(--c-whisper)',
      border: `1px solid ${hover ? 'var(--ink-coral)' : 'var(--c-border)'}`,
    },
  };

  return (
    <button
      style={{ ...btnBase, ...variants[variant] }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={onClick}
    >
      {icon}
      {children}
    </button>
  );
}

window.Button = Button;