/* Mindburn Labs — Tiny UI atoms used across sections */

const Icon = ({ name, size = 14 }) => {
  const common = { width: size, height: size, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "square", strokeLinejoin: "miter" };
  switch (name) {
    case "arrow-right": return <svg {...common}><path d="M3 8 H13 M9 4 L13 8 L9 12" /></svg>;
    case "arrow-up-right": return <svg {...common}><path d="M5 11 L11 5 M6 5 H11 V10" /></svg>;
    case "check": return <svg {...common}><path d="M3 8.5 L6.5 12 L13 4.5" /></svg>;
    case "close": return <svg {...common}><path d="M4 4 L12 12 M12 4 L4 12" /></svg>;
    case "search": return <svg {...common}><circle cx="7" cy="7" r="4.5" /><path d="M10.5 10.5 L14 14" /></svg>;
    case "sun": return <svg {...common}><circle cx="8" cy="8" r="3" /><path d="M8 1 V3 M8 13 V15 M1 8 H3 M13 8 H15 M3 3 L4.5 4.5 M11.5 11.5 L13 13 M3 13 L4.5 11.5 M11.5 4.5 L13 3" /></svg>;
    case "moon": return <svg {...common}><path d="M13 9.5 A6 6 0 1 1 6.5 3 A5 5 0 0 0 13 9.5 Z" /></svg>;
    case "contrast": return <svg {...common}><circle cx="8" cy="8" r="6" /><path d="M8 2 V14 A6 6 0 0 0 8 2 Z" fill="currentColor" /></svg>;
    case "dot": return <svg {...common} viewBox="0 0 10 10"><circle cx="5" cy="5" r="2" fill="currentColor" /></svg>;
    case "lock": return <svg {...common}><rect x="3" y="7" width="10" height="7" /><path d="M5 7 V5 A3 3 0 0 1 11 5 V7" /></svg>;
    case "shield": return <svg {...common}><path d="M8 2 L13 4 V8.5 C13 11.5 10.5 13.5 8 14.5 C5.5 13.5 3 11.5 3 8.5 V4 Z" /></svg>;
    case "bolt": return <svg {...common}><path d="M9 1 L3 9 H8 L7 15 L13 7 H8 Z" /></svg>;
    case "chevron-down": return <svg {...common}><path d="M4 6 L8 10 L12 6" /></svg>;
    case "menu": return <svg {...common}><path d="M2 4 H14 M2 8 H14 M2 12 H14" /></svg>;
    case "copy": return <svg {...common}><rect x="5" y="5" width="9" height="9" /><path d="M2 11 V2 H11" /></svg>;
    case "external": return <svg {...common}><path d="M9 2 H14 V7 M14 2 L7 9 M12 8 V14 H2 V4 H8" /></svg>;
    default: return null;
  }
};

function Button({ variant = "secondary", size = "md", children, iconRight, iconLeft, ...rest }) {
  const cls = ["btn", `btn--${variant}`, size !== "md" && `btn--${size}`].filter(Boolean).join(" ");
  return (
    <button className={cls} {...rest}>
      {iconLeft && <Icon name={iconLeft} />}
      <span>{children}</span>
      {iconRight && <Icon name={iconRight} />}
    </button>
  );
}

function Tag({ variant, children, dot = false }) {
  const cls = ["tag", variant && `tag--${variant}`].filter(Boolean).join(" ");
  return <span className={cls}>{dot && <span className="dot" />}{children}</span>;
}

function Eyebrow({ children }) {
  return <span className="eyebrow">{children}</span>;
}

function SectionLabel({ num, title }) {
  return (
    <div className="section-label">
      <span className="section-label__num">{num}</span>
      <span className="section-label__title">{title}</span>
    </div>
  );
}

function Spec({ label, code, children, flush = false, gridded = false }) {
  const bodyCls = ["spec__body", flush && "spec__body--flush", gridded && "spec__body--grid"].filter(Boolean).join(" ");
  return (
    <div className="spec">
      <div className="spec__label">
        <span>{label}</span>
        {code && <span>{code}</span>}
      </div>
      <div className={bodyCls}>{children}</div>
    </div>
  );
}

function Swatch({ name, value, varName }) {
  return (
    <div className="swatch">
      <div className="swatch__color" style={{ background: value }} />
      <div className="swatch__meta">
        <span className="swatch__name">{name}</span>
        <span className="swatch__val">{varName || value}</span>
      </div>
    </div>
  );
}

function FieldRow({ k, children }) {
  return (
    <div className="frow">
      <dt>{k}</dt>
      <dd>{children}</dd>
    </div>
  );
}

Object.assign(window, { Icon, Button, Tag, Eyebrow, SectionLabel, Spec, Swatch, FieldRow });