// Reusable site primitives: buttons, cards, stats

const Button = ({ children, href, variant = "primary", size = "md", style = {} }) => {
  const sizes = {
    sm: { padding: "8px 14px", fontSize: 12 },
    md: { padding: "12px 20px", fontSize: 14 },
    lg: { padding: "16px 26px", fontSize: 15 },
  };
  const variants = {
    primary: { background: SIGNAL, color: CREAM, border: "none" },
    secondary: { background: "transparent", color: INK, border: `1px solid ${INK}33` },
    ghost: { background: "transparent", color: CREAM, border: `1px solid rgba(245,241,234,0.25)` },
    inverted: { background: CREAM, color: INK, border: "none" },
  };
  return (
    <a href={href} style={{
      ...sizes[size], ...variants[variant],
      fontFamily: "'Inter', sans-serif", fontWeight: 600, letterSpacing: "-0.01em",
      borderRadius: 10, textDecoration: "none", display: "inline-flex",
      alignItems: "center", gap: 8, ...style,
    }}>{children}</a>
  );
};

const StatCard = ({ value, label, dark }) => (
  <div style={{
    padding: "24px 0",
    borderTop: `1px solid ${dark ? "rgba(245,241,234,0.15)" : `${INK}19`}`,
  }}>
    <div style={{ fontFamily: "'Inter', sans-serif", fontWeight: 800, fontSize: 56, letterSpacing: "-0.045em", lineHeight: 1, color: dark ? CREAM : INK }}>
      {value}
    </div>
    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: dark ? "rgba(245,241,234,0.78)" : MIST, marginTop: 12 }}>
      {label}
    </div>
  </div>
);

const Display = ({ children, size = 72, color = INK, style = {} }) => (
  <h1 data-type="display" style={{
    fontFamily: "'Inter', sans-serif", fontWeight: 800,
    fontSize: size, letterSpacing: "-0.045em", lineHeight: 0.98,
    color, margin: 0, ...style,
  }}>{children}</h1>
);

const H2 = ({ children, color = INK, style = {} }) => (
  <h2 data-type="h2" style={{
    fontFamily: "'Inter', sans-serif", fontWeight: 800,
    fontSize: 48, letterSpacing: "-0.04em", lineHeight: 1.05,
    color, margin: 0, ...style,
  }}>{children}</h2>
);

const Lede = ({ children, color = STONE, style = {} }) => (
  <p data-type="lede" style={{
    fontFamily: "'Inter', sans-serif", fontWeight: 400,
    fontSize: 18, lineHeight: 1.55, color,
    maxWidth: 640, margin: 0, ...style,
  }}>{children}</p>
);

// Inline wordmark for use inside headlines — matches logo treatment exactly.
// "noral" inherits the surrounding heading color; "AI" is always Signal orange.
// Inherits font-size from parent so it scales with the headline.
const Wordmark = ({ inkColor }) => (
  <span style={{
    fontFamily: "'Inter', sans-serif",
    fontWeight: 800,
    letterSpacing: "-0.045em",
    color: inkColor || "inherit",
    whiteSpace: "nowrap",
  }}>
    noral<span style={{ color: SIGNAL }}>AI</span>
  </span>
);

Object.assign(window, { Button, StatCard, Display, H2, Lede, Wordmark });