// Button.jsx — capsule buttons (yellow / dark / white / ghost · sm md lg)
const Btn = ({ variant = "yellow", size = "md", children, onClick, disabled, style = {}, ...rest }) => (
  <button
    className={`bee-btn ${variant} ${size}`}
    onClick={onClick}
    disabled={disabled}
    style={style}
    {...rest}
  >
    {children}
  </button>
);

const Pill = ({ variant = "ghost", active, children, onClick, style = {} }) => (
  <span
    className={`bee-pill ${variant} ${active ? "active" : ""}`}
    onClick={onClick}
    style={{ cursor: onClick ? "pointer" : undefined, ...style }}
  >
    {children}
  </span>
);

const InlineLink = ({ children, onClick }) => (
  <span
    onClick={onClick}
    style={{
      cursor: "pointer",
      fontWeight: 700,
      fontSize: 17,
      fontFamily: "var(--bee-font-body)",
      color: "var(--bee-ink)",
      display: "inline-flex",
      gap: 6,
      alignItems: "center",
    }}
  >
    {children}
    <span style={{ color: "var(--bee-yellow-deep)" }}>→</span>
  </span>
);

window.Btn = Btn;
window.Pill = Pill;
window.InlineLink = InlineLink;