/* bits.jsx — ZEROTYPE furniture primitives (shared via window) */

function Brackets() {
  return (
    <span className="brackets" aria-hidden="true">
      <span className="brk tl" /><span className="brk tr" />
      <span className="brk bl" /><span className="brk br" />
    </span>
  );
}

function Reg() { return <span className="reg" aria-hidden="true" />; }

function Badge({ children = "✕" }) {
  return <span className="badge" aria-hidden="true">{children}</span>;
}

/* single chevron, points right by default; rotate via style */
function Chevron({ size = 13, sw = 2.4, style }) {
  return (
    <svg width={size} height={size * 1.18} viewBox="0 0 13 15" fill="none" style={style} aria-hidden="true">
      <path d="M2 2L9.5 7.5L2 13" stroke="currentColor" strokeWidth={sw} strokeLinecap="square" />
    </svg>
  );
}

/* row of chevrons */
function Chevrons({ n = 3, size = 12, gap = 2, style, className }) {
  return (
    <span className={"chev " + (className || "")} style={{ gap, ...style }} aria-hidden="true">
      {Array.from({ length: n }).map((_, i) => <Chevron key={i} size={size} />)}
    </span>
  );
}

/* diagonal up-right arrow ↗ */
function ArrowUR({ size = 14, sw = 2.2, className, style }) {
  return (
    <svg className={"arrow " + (className || "")} style={style} width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M4 12L12 4M12 4H5M12 4V11" stroke="currentColor" strokeWidth={sw} strokeLinecap="square" strokeLinejoin="miter" />
    </svg>
  );
}

/* chunky filled right arrow (schedule-poster style) */
function FatArrow({ w = 116, className, style }) {
  const h = w * 0.62;
  return (
    <svg className={className} style={style} width={w} height={h} viewBox="0 0 116 72" fill="none" aria-hidden="true">
      <path d="M0 27H70V12L116 36L70 60V45H0V27Z" fill="currentColor" />
    </svg>
  );
}

/* stacked chevrons pointing down (insert-disk style) */
function ChevStack({ n = 3, size = 20, style }) {
  return (
    <span style={{ display: "inline-flex", flexDirection: "column", color: "var(--decor)", lineHeight: 0, ...style }} aria-hidden="true">
      {Array.from({ length: n }).map((_, i) => (
        <Chevron key={i} size={size} sw={3} style={{ transform: "rotate(90deg)", marginBottom: -size * 0.45 }} />
      ))}
    </span>
  );
}

Object.assign(window, { Brackets, Reg, Badge, Chevron, Chevrons, ArrowUR, FatArrow, ChevStack });