/* Chatterkick action button — sharp corners, one accent color per instance.
   Synced from Claude Design. The component body (base style + the four variants)
   is byte-faithful to the design source; only the module wrapper differs.

   The design copy is an ES module (`import * as React from "react"` /
   `export function Button`) that resolves through the surface-generated
   `_ds_bundle.js`. That bundle is on the never-sync list, so it does not exist
   here. This file follows the same convention as `slides/*.jsx`: no imports, no
   exports, React comes from the UMD global, and the component is published on
   `window` for `<script type="text/babel">` consumers. */

const base = {
  fontFamily: 'var(--font-sans, "Montserrat", system-ui, sans-serif)',
  fontWeight: 700,
  fontSize: 15,
  lineHeight: 1,
  border: 0,
  borderRadius: 0,
  cursor: "pointer",
  display: "inline-block",
  textDecoration: "none",
  transition: "background 140ms, filter 140ms",
};

const variants = {
  primary: { background: "#B11871", color: "#fff", padding: "14px 32px" },
  yellow: { background: "#DEE22A", color: "#111", padding: "14px 32px" },
  ghost: { background: "transparent", color: "#fff", border: "1.5px solid #fff", padding: "12px 28px", fontSize: 14 },
  light: { background: "#fff", color: "#111", padding: "14px 28px", fontSize: 14 },
};

/** Chatterkick action button — sharp corners, one accent color per instance. */
function Button({ variant = "primary", children = "Button", href, onClick }) {
  const style = { ...base, ...(variants[variant] || variants.primary) };
  if (href) {
    return React.createElement("a", { href, style, onClick }, children);
  }
  return React.createElement("button", { type: "button", style, onClick }, children);
}

Object.assign(window, { Button });