// Primitives.jsx — Button, Badge, ProductImage placeholders
const Button = ({ variant = "primary", size = "md", children, onClick, ...rest }) => {
  const base = {
    fontFamily: "var(--font-body)", fontWeight: 600, lineHeight: 1, cursor: "pointer",
    border: "2px solid transparent", borderRadius: "var(--r-md)",
    transition: "all 200ms cubic-bezier(0.2,0.8,0.2,1)",
    display: "inline-flex", alignItems: "center", gap: 8, textDecoration: "none",
  };
  const sizes = {
    sm: { padding: "8px 14px", fontSize: 13 },
    md: { padding: "12px 20px", fontSize: 14 },
    lg: { padding: "16px 28px", fontSize: 16 },
  };
  const variants = {
    primary: { background: "var(--tp-red)", color: "#fff" },
    secondary: { background: "var(--tp-navy)", color: "var(--tp-cream)" },
    ghost: { background: "transparent", color: "var(--tp-navy)", borderColor: "var(--tp-navy)" },
    onNavy: { background: "var(--tp-cream)", color: "var(--tp-navy)" },
  };
  return <button onClick={onClick} style={{...base, ...sizes[size], ...variants[variant]}} {...rest}>{children}</button>;
};

const Badge = ({ tone = "navy", children }) => {
  const tones = {
    navy:   { background: "var(--tp-navy)", color: "var(--tp-cream)" },
    red:    { background: "var(--tp-red)", color: "#fff" },
    gold:   { background: "var(--tp-warning)", color: "var(--tp-ink)" },
    stock:  { background: "rgba(47,107,58,0.12)", color: "var(--tp-success)" },
    pill:   { background: "var(--tp-cream)", color: "var(--tp-navy)", border: "1px solid var(--tp-stitch)", borderRadius: 999 },
  };
  return <span style={{
    display: "inline-flex", alignItems: "center", gap: 6,
    fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 700, lineHeight: 1,
    textTransform: "uppercase", letterSpacing: "0.08em",
    padding: "6px 10px", borderRadius: "var(--r-sm)",
    ...tones[tone]
  }}>{children}</span>;
};

// Decorative product image placeholder. Real photos would replace these.
const ProductImage = ({ tone = "cream", label = "CARD", aspect = "1/1", style = {} }) => {
  const palettes = {
    cream:  ["#d8c89a", "#b39a5e", "var(--tp-navy)"],
    navy:   ["#1a2747", "#2a3a64", "var(--tp-cream)"],
    red:    ["#c8232c", "#9a1a22", "var(--tp-cream)"],
    field:  ["#3a7d48", "#2f6b3a", "var(--tp-cream)"],
  };
  const [a, b, fg] = palettes[tone] || palettes.cream;
  return (
    <div style={{
      aspectRatio: aspect, background: `linear-gradient(135deg, ${a} 0%, ${b} 100%)`,
      display: "flex", alignItems: "center", justifyContent: "center",
      color: fg, fontFamily: "var(--font-display)", fontSize: 18, letterSpacing: "0.08em",
      position: "relative", ...style
    }}>
      <span style={{opacity: 0.85}}>{label}</span>
    </div>
  );
};

const Eyebrow = ({ children, color = "var(--tp-red)" }) => (
  <div style={{
    fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 700, lineHeight: 1,
    textTransform: "uppercase", letterSpacing: "0.08em", color
  }}>{children}</div>
);

const StitchDivider = () => (
  <div className="tp-stitch-divider" style={{margin: "0"}}/>
);

Object.assign(window, { Button, Badge, ProductImage, Eyebrow, StitchDivider });