// Card.jsx — base card with hover lift
function ChCard({ children, style, onClick, hoverable = true }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: '#fff',
        borderRadius: 12,
        padding: '28px 32px',
        boxShadow: hoverable && hover
          ? '0 12px 40px rgba(27,84,79,0.14)'
          : '0 2px 20px rgba(27,84,79,0.08)',
        transform: hoverable && hover ? 'translateY(-4px)' : 'translateY(0)',
        transition: 'all 220ms cubic-bezier(0.22, 0.61, 0.36, 1)',
        cursor: onClick ? 'pointer' : 'default',
        ...style,
      }}
    >
      {children}
    </div>
  );
}

window.ChCard = ChCard;