// Shared small components

const Eyebrow = ({ children, style = {} }) => (
  <span style={{
    fontFamily: "'JetBrains Mono', ui-monospace, monospace",
    fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
    color: "var(--muted)", ...style,
  }}>{children}</span>
);

const Rule = ({ color, style = {} }) => (
  <div style={{ height: 1, background: color || "var(--hairline)", width: "100%", ...style }} />
);

const Chip = ({ children, active, onClick }) => (
  <button onClick={onClick} style={{
    fontFamily: "'JetBrains Mono', ui-monospace, monospace",
    fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
    padding: "8px 14px", borderRadius: 999,
    border: `1px solid ${active ? "var(--ink)" : "var(--hairline)"}`,
    background: active ? "var(--ink)" : "transparent",
    color: active ? "var(--paper)" : "var(--ink)",
    cursor: "pointer", transition: "all .2s ease",
  }}>{children}</button>
);

const Btn = ({ children, variant = "primary", onClick, icon, style = {} }) => {
  const base = {
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: "14px 22px", fontSize: 13, letterSpacing: "0.04em",
    fontFamily: "'Inter Tight', system-ui, sans-serif", fontWeight: 500,
    border: "1px solid transparent", cursor: "pointer",
    transition: "all .25s ease", textDecoration: "none",
  };
  const variants = {
    primary: { background: "var(--ink)", color: "var(--paper)", borderColor: "var(--ink)" },
    ghost:   { background: "transparent", color: "var(--ink)", borderColor: "var(--ink)" },
    gold:    { background: "var(--accent)", color: "var(--ink)", borderColor: "var(--accent)" },
    light:   { background: "transparent", color: "var(--paper)", borderColor: "rgba(255,255,255,.25)" },
  };
  return (
    <button onClick={onClick} style={{ ...base, ...variants[variant], ...style }}>
      {children}
      {icon !== false && <span style={{ fontFamily: "serif", fontSize: 16, transform: "translateY(-1px)" }}>→</span>}
    </button>
  );
};

Object.assign(window, { Eyebrow, Rule, Chip, Btn });