// ui_kits/or/primitives.jsx — small primitives shared across Or screens.

const { useEffect: useEffectO, useState: useStateO } = React;

function OContainer({ children, style }) {
  return (
    <div style={{ width: "min(1160px, calc(100vw - 48px))", margin: "0 auto", ...style }}>
      {children}
    </div>
  );
}

// Inline-loaded Or lockup. Strips the bg rect, animates the dot on the breath cycle.
function OrLockup({ size = 28 }) {
  const [markup, setMarkup] = useStateO("");
  useEffectO(() => {
    fetch("../../brand_family/or/lockup-horizontal-dark.svg")
      .then((r) => r.text())
      .then((t) => setMarkup(
        t.replace(/<\?xml[^?]*\?>\s*/, "")
         .replace(/<!--[\s\S]*?-->\s*/g, "")
         .replace(/<rect width="\d+(?:\.\d+)?"[^>]*fill="#050A10"[^>]*\/>/, "")
         .replace(/<svg([^>]*)>/, (m, attrs) =>
           `<svg${attrs.replace(/\s(width|height)="[^"]*"/g, "")} height="${size}">`)
         .replace(/<circle cx="30" cy="5.25" r="5.25" fill="#FAF7F2"\/>/,
                  `<circle cx="30" cy="5.25" r="5.25" fill="#FAF7F2"><animate attributeName="opacity" values="1;0.82;1" dur="4s" repeatCount="indefinite"/></circle>`)
      ));
  }, [size]);
  return (
    <a
      href="#/"
      style={{ display: "inline-flex", alignItems: "center", textDecoration: "none" }}
      dangerouslySetInnerHTML={{ __html: markup }}
      aria-label="or by tehom"
    />
  );
}

// Inline icon loader (same pattern as Yehi kit)
function OrIcon({ name, size = 16, color }) {
  const [markup, setMarkup] = useStateO("");
  useEffectO(() => {
    fetch(`../../assets/icons/${name}.svg`)
      .then((r) => r.text())
      .then((t) => setMarkup(
        t.replace(/<\?xml[^?]*\?>\s*/, "")
         .replace(/<!--[\s\S]*?-->\s*/g, "")
         .replace(/<svg([^>]*)>/, (m, attrs) =>
           `<svg${attrs.replace(/\s(width|height)="[^"]*"/g, "")} width="${size}" height="${size}">`)
      ));
  }, [name, size]);
  return (
    <span
      style={{ display: "inline-flex", alignItems: "center", color: color || "currentColor", lineHeight: 1 }}
      dangerouslySetInnerHTML={{ __html: markup }}
    />
  );
}

function MetaEyebrowO({ children, color }) {
  return (
    <div
      style={{
        fontFamily: "var(--font-mono)",
        color: color || "var(--fg-4)",
        fontSize: 11,
        letterSpacing: "0.1em",
        textTransform: "uppercase",
        lineHeight: 1.4,
      }}
    >
      {children}
    </div>
  );
}

function MonoTagO({ children, color }) {
  return (
    <span
      style={{
        fontFamily: "var(--font-mono)",
        fontSize: 11,
        color: color || "var(--fg-3)",
        letterSpacing: "0.02em",
      }}
    >
      {children}
    </span>
  );
}

// ScripturePin — the brand's inline scripture-citation pattern. Mono, light slate.
function ScripturePin({ children }) {
  return (
    <span
      style={{
        fontFamily: "var(--font-mono)",
        fontSize: 11,
        color: "var(--tehom-utility)",
        letterSpacing: "0.02em",
        whiteSpace: "nowrap",
      }}
    >
      {children}
    </span>
  );
}

// VirtueBadge — small label for a virtue. Distinct from Yehi's Badge.
function VirtueBadge({ id, name }) {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 6,
        padding: "3px 8px",
        background: "rgba(201, 169, 97, 0.08)",
        color: "var(--tehom-signal)",
        fontFamily: "var(--font-mono)",
        fontSize: 10,
        letterSpacing: "0.06em",
        textTransform: "lowercase",
        lineHeight: 1.2,
      }}
    >
      {name || id}
    </span>
  );
}

// AlignmentDot — the Or-specific status vocabulary
//   attended       — light filled
//   under-attended — gold filled (signal — "needs more light")
//   void           — hairline ring
function AlignmentDot({ state }) {
  const cfg = {
    attended:        { fill: "var(--fg-1)",         border: "none" },
    "under-attended": { fill: "var(--tehom-signal)", border: "none" },
    void:            { fill: "transparent",         border: "1px solid var(--tehom-muted)" },
  }[state] || { fill: "transparent", border: "1px solid var(--tehom-muted)" };
  return (
    <span
      aria-label={state}
      style={{
        display: "inline-block",
        width: 9, height: 9,
        borderRadius: 999,
        background: cfg.fill,
        border: cfg.border,
        flexShrink: 0,
      }}
    />
  );
}

Object.assign(window, {
  OContainer, OrLockup, OrIcon, MetaEyebrowO, MonoTagO, ScripturePin, VirtueBadge, AlignmentDot,
});