const btnBase = {
  fontFamily: 'Inter, system-ui, sans-serif',
  fontWeight: 600,
  fontSize: 14,
  letterSpacing: '-0.005em',
  lineHeight: 1,
  borderRadius: 4,
  padding: '12px 18px',
  border: '1px solid transparent',
  cursor: 'pointer',
  display: 'inline-flex',
  alignItems: 'center',
  gap: 8,
  transition: 'all 140ms cubic-bezier(0.2,0,0,1)',
  whiteSpace: 'nowrap',
};

function Button({ variant = 'primary', size = 'md', children, onClick, disabled, type = 'button', style: customStyle, iconLeft, iconRight, as, href }) {
  const [hover, setHover] = React.useState(false);
  const [active, setActive] = React.useState(false);

  const sizeStyle = size === 'lg'
    ? { padding: '14px 22px', fontSize: 15 }
    : size === 'sm' ? { padding: '8px 12px', fontSize: 13 } : {};

  let v = {};
  if (variant === 'primary') {
    const bg = disabled ? '#D2D8E0' : active ? '#B85420' : hover ? '#D4652E' : '#E8753D';
    v = { background: bg, color: disabled ? '#7B8593' : '#fff', borderColor: bg };
  } else if (variant === 'secondary') {
    v = { background: hover ? '#0F1E3D' : 'transparent', color: hover ? '#fff' : '#0F1E3D', borderColor: '#0F1E3D' };
  } else if (variant === 'secondary-light') {
    v = { background: hover ? 'rgba(255,255,255,0.08)' : 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.5)' };
  } else if (variant === 'tertiary') {
    return (
      <a href={href || '#'} onClick={onClick} style={{
        fontFamily: btnBase.fontFamily, fontWeight: 600, fontSize: 14, color: hover ? '#2C4E67' : '#355A78',
        borderBottom: '1px solid currentColor', textDecoration: 'none', paddingBottom: 2,
        display: 'inline-flex', alignItems: 'center', gap: 6, transition: 'color 140ms',
        ...customStyle,
      }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
        {children}{iconRight}
      </a>
    );
  } else if (variant === 'icon') {
    v = { background: hover ? '#F3F5F8' : '#fff', color: '#0F1E3D', borderColor: '#E6EAF0', padding: 8 };
  }

  const style = { ...btnBase, ...sizeStyle, ...v, cursor: disabled ? 'not-allowed' : 'pointer', ...customStyle };
  const Tag = as || 'button';
  return (
    <Tag type={type} disabled={disabled} onClick={onClick} style={style} href={href}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setActive(false); }}
      onMouseDown={() => setActive(true)} onMouseUp={() => setActive(false)}>
      {iconLeft}{children}{iconRight}
    </Tag>
  );
}
window.Button = Button;