// Buttons.jsx — Clinically Happy primary, secondary, ghost — with scale-up on hover
const buttonStyles = {
  base: {
    fontFamily: 'Montserrat, sans-serif',
    fontWeight: 700,
    fontSize: 13,
    letterSpacing: '1px',
    textTransform: 'uppercase',
    borderRadius: 8,
    cursor: 'pointer',
    transition: 'all 240ms cubic-bezier(0.22, 0.61, 0.36, 1)',
    border: 'none',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    textDecoration: 'none',
  },
};

function ChButton({ children, variant = 'primary', as = 'button', href, onClick, style }) {
  const [hover, setHover] = React.useState(false);
  const [press, setPress] = React.useState(false);

  const variants = {
    primary: {
      background: press ? '#0E2D2A' : hover ? '#143D39' : '#1B544F',
      color: '#fff',
      padding: '14px 28px',
    },
    secondary: {
      background: hover ? '#1B544F' : 'transparent',
      color: hover ? '#fff' : '#1B544F',
      border: '2px solid #1B544F',
      padding: '12px 26px',
    },
    ghost: {
      background: hover ? 'rgba(127,214,207,0.12)' : 'transparent',
      color: '#7FD6CF',
      border: '2px solid #7FD6CF',
      padding: '12px 26px',
    },
  };

  const merged = {
    ...buttonStyles.base,
    ...variants[variant],
    // Scale up on hover, press for slight shrink
    transform: press ? 'scale(0.97)' : hover ? 'scale(1.06)' : 'scale(1)',
    boxShadow: hover && !press ? '0 8px 24px rgba(27,84,79,0.18)' : 'none',
    ...style,
  };

  const handlers = {
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => { setHover(false); setPress(false); },
    onMouseDown: () => setPress(true),
    onMouseUp: () => setPress(false),
    onClick,
  };

  if (as === 'a') {
    return <a href={href} style={merged} {...handlers}>{children}</a>;
  }
  return <button style={merged} {...handlers}>{children}</button>;
}

window.ChButton = ChButton;