/* === Primitives ===
 * Small recurring building blocks for the Obsidian Lake marketing UI.
 * Eyebrow label, status pill, corner ticks, decorative HUD bits.
 */

const Eyebrow = ({ children, color = "var(--neon-magenta)" }) => (
  <div style={{
    fontFamily: "var(--font-mono)",
    fontSize: 11,
    color,
    letterSpacing: "0.28em",
    textTransform: "uppercase",
    fontWeight: 500,
    textShadow: color === "var(--neon-magenta)" ? "var(--glow-magenta-sm)" : "none"
  }}>
    {children}
  </div>
);

const StatusPill = ({ tone = "ok", children }) => {
  const tones = {
    ok:    { c: "#00FF85" },
    warn:  { c: "#FFB627" },
    alert: { c: "#FF3344" },
    info:  { c: "#2BE5FF" },
    neutral: { c: "var(--fg-3)" },
  };
  const t = tones[tone];
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      padding: "5px 12px", borderRadius: 999, whiteSpace: "nowrap",
      fontFamily: "var(--font-mono)", fontSize: 10,
      letterSpacing: "0.24em", textTransform: "uppercase", fontWeight: 500,
      color: t.c, border: `1px solid ${t.c}`, background: "rgba(0,0,0,0.6)"
    }}>
      <span style={{
        width: 6, height: 6, borderRadius: 999,
        background: t.c, boxShadow: `0 0 8px ${t.c}`
      }}></span>
      {children}
    </span>
  );
};

// Corner ticks — the brand-signature decorative bracket on cards/sections.
// Pass `corners` as a string of corners to render: e.g. "tl tr bl br".
const CornerTicks = ({ corners = "tl", color = "var(--neon-magenta)", size = 14, glow = true }) => {
  const cornerStyles = {
    tl: { top: -1, left: -1 },
    tr: { top: -1, right: -1, transform: "scaleX(-1)" },
    bl: { bottom: -1, left: -1, transform: "scaleY(-1)" },
    br: { bottom: -1, right: -1, transform: "scale(-1,-1)" },
  };
  const set = corners.split(" ").filter(Boolean);
  return (
    <>
      {set.map((c) => (
        <span key={c} style={{
          position: "absolute", width: size, height: size, pointerEvents: "none",
          ...cornerStyles[c]
        }}>
          <span style={{
            position: "absolute", top: 0, left: 0, width: size, height: 1,
            background: color, boxShadow: glow ? `0 0 8px ${color}` : "none"
          }}></span>
          <span style={{
            position: "absolute", top: 0, left: 0, width: 1, height: size,
            background: color, boxShadow: glow ? `0 0 8px ${color}` : "none"
          }}></span>
        </span>
      ))}
    </>
  );
};

// Decorative monospace metadata strip — "SN 0042 · v1.7 · LOT 04"
const MetaStrip = ({ items = [] }) => (
  <div style={{
    display: "flex", gap: 14, flexWrap: "wrap",
    fontFamily: "var(--font-mono)", fontSize: 10,
    color: "var(--fg-3)", letterSpacing: "0.18em", textTransform: "uppercase"
  }}>
    {items.map((it, i) => (
      <span key={i}>
        {it.label && <span>{it.label} </span>}
        <span style={{ color: "var(--neon-cyan)", fontWeight: 500 }}>{it.value}</span>
      </span>
    ))}
  </div>
);

Object.assign(window, { Eyebrow, StatusPill, CornerTicks, MetaStrip });