/* UI.jsx — small reusable primitives: Button, Rule, Eyebrow, GrainOverlay, MarginNote */

function Button({ children, variant = "primary", onClick, style }) {
  const base = {
    fontFamily: "var(--mono)", fontWeight: 700, fontSize: 12, letterSpacing: "0.12em",
    textTransform: "uppercase", padding: "14px 24px", cursor: "pointer", border: "none",
    transition: "box-shadow .12s, transform .12s, background .15s, color .15s",
  };
  const variants = {
    primary:   { ...base, background: "var(--ink)", color: "var(--bone)", boxShadow: "3px 3px 0 0 var(--ember)" },
    secondary: { ...base, background: "transparent", color: "var(--ink)", border: "1.5px solid var(--ink)" },
    ghost:     { ...base, background: "transparent", color: "var(--ember)", padding: "6px 0", borderBottom: "1.5px solid var(--ember)" },
  };
  return (
    <button className={"btn btn-" + variant} style={{ ...variants[variant], ...style }} onClick={onClick}>
      {children}
    </button>
  );
}

function Eyebrow({ children, color = "var(--ink-soft)", style }) {
  return <div className="u-label" style={{ color, ...style }}>{children}</div>;
}

function Rule({ kind = "rule", style }) {
  return <hr className={kind} style={style} />;
}

/* Low-opacity dust/paper grain — the only "texture" in the system. */
function GrainOverlay({ opacity = 0.05 }) {
  const svg = encodeURIComponent(
    `<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>`
  );
  return (
    <div aria-hidden="true" style={{
      position: "fixed", inset: 0, pointerEvents: "none", zIndex: 50, opacity,
      mixBlendMode: "multiply",
      backgroundImage: `url("data:image/svg+xml,${svg}")`,
    }} />
  );
}

Object.assign(window, { Button, Eyebrow, Rule, GrainOverlay });