// Buttons + chip atoms used across the kit.
// Exports: PrimaryButton, SecondaryButton, GhostButton, Chip, Eyebrow, GoldRule.

const T = window.Tokens;

const baseBtn = {
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  gap: 8,
  minHeight: 48,
  padding: "13px 20px",
  borderRadius: 12,
  fontFamily: T.fontSans,
  fontSize: 14,
  fontWeight: 700,
  letterSpacing: "0.02em",
  cursor: "pointer",
  border: "1px solid transparent",
  transition: "background 200ms ease, border-color 200ms ease, transform 200ms ease",
  textDecoration: "none",
  whiteSpace: "nowrap",
};

function PrimaryButton({ children, onClick, href, style, fullWidth }) {
  const [hover, setHover] = React.useState(false);
  const s = {
    ...baseBtn,
    background: hover ? T.burgundyAccent : T.burgundy,
    color: "#fff",
    boxShadow: T.shadowCta,
    width: fullWidth ? "100%" : undefined,
    ...style,
  };
  const Tag = href ? "a" : "button";
  return (
    <Tag href={href} onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={s}>
      {children}
    </Tag>
  );
}

function SecondaryButton({ children, onClick, href, style }) {
  const [hover, setHover] = React.useState(false);
  const s = {
    ...baseBtn,
    background: hover ? T.ivory : "#fff",
    color: T.burgundy,
    borderColor: hover ? T.gold : T.borderStrong,
    ...style,
  };
  const Tag = href ? "a" : "button";
  return (
    <Tag href={href} onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={s}>
      {children}
    </Tag>
  );
}

function GhostOnDarkButton({ children, onClick, href, style }) {
  const [hover, setHover] = React.useState(false);
  const s = {
    ...baseBtn,
    background: "transparent",
    color: "#fff",
    borderColor: hover ? T.gold : "rgba(255,255,255,0.25)",
    ...style,
  };
  const Tag = href ? "a" : "button";
  return (
    <Tag href={href} onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={s}>
      {children}
    </Tag>
  );
}

function Chip({ children, tone = "mint", icon }) {
  const tones = {
    mint:     { bg: T.mint,     fg: T.charcoal, weight: 600 },
    burgundy: { bg: T.burgundy, fg: "#fff",     weight: 700 },
    gold:     { bg: "rgba(200,161,90,0.16)", fg: T.burgundy, weight: 700 },
  };
  const c = tones[tone] || tones.mint;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      background: c.bg, color: c.fg,
      fontFamily: T.fontSans, fontSize: 11, fontWeight: c.weight,
      textTransform: "uppercase", letterSpacing: "0.18em",
      padding: "6px 12px", borderRadius: 999, whiteSpace: "nowrap",
    }}>
      {icon}
      {children}
    </span>
  );
}

function Eyebrow({ children, color }) {
  return (
    <p style={{
      ...window.Atoms.eyebrow,
      color: color || T.burgundyAccent,
    }}>{children}</p>
  );
}

function GoldRule({ style }) {
  return <hr style={{ ...window.Atoms.goldRule, ...style }} />;
}

Object.assign(window, { PrimaryButton, SecondaryButton, GhostOnDarkButton, Chip, Eyebrow, GoldRule });