/* Brand.jsx — Seal, Wordmark, Stamp. SVG inlined so page webfonts apply. */

function Seal({ size = 120, color = "var(--stamp-red)", style }) {
  return (
    <svg viewBox="0 0 240 240" width={size} height={size} style={style} aria-label="Bureau of Radical Compliance seal">
      <defs>
        <path id={"st-"+size} d="M 120 120 m -92 0 a 92 92 0 1 1 184 0" />
        <path id={"sb-"+size} d="M 120 120 m -78 0 a 78 78 0 1 0 156 0" />
      </defs>
      <g fill="none" stroke={color} strokeWidth="2.5">
        <circle cx="120" cy="120" r="112" /><circle cx="120" cy="120" r="100" /><circle cx="120" cy="120" r="62" />
      </g>
      <g fill={color} fontFamily="var(--stencil)">
        <text fontSize="15.5" letterSpacing="2.2"><textPath href={"#st-"+size} startOffset="50%" textAnchor="middle">BUREAU OF RADICAL COMPLIANCE</textPath></text>
        <text fontSize="11" letterSpacing="2.6"><textPath href={"#sb-"+size} startOffset="50%" textAnchor="middle">★ EST. WHENEVER CONVENIENT ★</textPath></text>
      </g>
      <text x="120" y="118" textAnchor="middle" fontFamily="var(--serif-display)" fontSize="58" fill={color}>∗</text>
      <text x="120" y="150" textAnchor="middle" fontFamily="var(--mono)" fontSize="9.5" letterSpacing="2" fill={color}>TERMS APPLY</text>
      <g stroke={color} strokeWidth="2">
        <line x1="120" y1="20" x2="120" y2="30" /><line x1="120" y1="210" x2="120" y2="220" />
        <line x1="20" y1="120" x2="30" y2="120" /><line x1="210" y1="120" x2="220" y2="120" />
      </g>
    </svg>
  );
}

function Wordmark({ width = 320, ink = "var(--ink)", tagline = true }) {
  const h = tagline ? width * (150/600) : width * (110/600);
  return (
    <svg viewBox={tagline ? "0 0 600 150" : "0 0 600 112"} width={width} height={h} aria-label="The Unprinciples">
      <text x="2" y="30" fontFamily="var(--mono)" fontSize="13" letterSpacing="6.5" fill="var(--ember)">A PRACTICAL GUIDE TO</text>
      <text x="0" y="98" fontFamily="var(--serif-display)" fontSize="68" fill={ink}>THE<tspan dx="20" fontStyle="italic">Un</tspan><tspan dx="4">principles</tspan></text>
      {tagline && <text x="3" y="126" fontFamily="var(--mono)" fontSize="12.5" letterSpacing="2.2" fill="var(--sand-text)">honoring burner culture whenever convenient<tspan fill="var(--ember)" baselineShift="super" fontSize="9">*</tspan></text>}
    </svg>
  );
}

/* A rubber stamp — stencil text in a ruled box, rotated as if applied by hand. */
function Stamp({ children, rotate = -5, size = 18, color = "var(--stamp-red)", thunk = false, style }) {
  return (
    <span className={"stamp" + (thunk ? " stamp-thunk" : "")} style={{
      fontFamily: "var(--stencil)", fontSize: size, color, lineHeight: 1,
      border: `2.5px solid ${color}`, padding: "6px 11px", display: "inline-block",
      transform: `rotate(${rotate}deg)`, whiteSpace: "nowrap", ...style,
    }}>{children}</span>
  );
}

Object.assign(window, { Seal, Wordmark, Stamp });