// Shared primitives for the Escrow Kit landing page.
// All components are attached to window so other Babel scripts can use them.

const { useState, useEffect, useRef, useMemo } = React;

/* =========================================================
   BrandMark — Aztec layered-diamond glyph (CSS mask)
   ========================================================= */
function BrandMark({ size = 40, style = {} }) {
  return (
    <span
      aria-hidden="true"
      style={{
        display: "inline-block",
        width: size,
        height: size,
        background: "currentColor",
        WebkitMask: "url(design/assets/logos/symbol.svg) center/contain no-repeat",
        mask: "url(design/assets/logos/symbol.svg) center/contain no-repeat",
        ...style,
      }}
    />
  );
}

/* =========================================================
   CTA — chartreuse → orchid on hover, square corners.
   ========================================================= */
function CTA({ children, variant = "primary", as = "button", href, onClick, style = {} }) {
  const [hover, setHover] = useState(false);
  const base = {
    fontFamily: "var(--ff-sans)",
    fontWeight: 500,
    fontSize: 15,
    letterSpacing: "-0.01em",
    lineHeight: 1,
    padding: "14px 22px",
    border: 0,
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
    textDecoration: "none",
    transition: "background 140ms linear, color 140ms linear, border-color 140ms linear",
  };
  const styles =
    variant === "ghost"
      ? {
          ...base,
          background: hover ? "var(--az-ink)" : "transparent",
          color: hover ? "var(--az-parchment)" : "var(--az-ink)",
          border: "1px solid var(--az-ink)",
          ...style,
        }
      : variant === "ghost-dark"
      ? {
          ...base,
          background: hover ? "var(--az-parchment)" : "transparent",
          color: hover ? "var(--az-ink)" : "var(--az-parchment)",
          border: "1px solid var(--az-parchment)",
          ...style,
        }
      : {
          ...base,
          background: hover ? "var(--az-orchid)" : "var(--az-chartreuse)",
          color: hover ? "var(--az-parchment)" : "var(--az-ink)",
          ...style,
        };
  const Tag = as;
  return (
    <Tag
      href={href}
      onClick={onClick}
      style={styles}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      {children}
    </Tag>
  );
}

/* =========================================================
   SectionHead — Thermochrome label + Arizona serif title.
   Set asSubsection when nested inside a chapter wrapper:
   number column drops, the H2 shrinks, padding tightens.
   ========================================================= */
function SectionHead({ number, label, title, sub, align = "left", color, asSubsection = false }) {
  const isDark = color === "dark";
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: asSubsection ? 18 : 28,
        maxWidth: 980,
        textAlign: align,
        margin: align === "center" ? "0 auto" : undefined,
      }}
    >
      {!asSubsection && (
        <div
          style={{
            display: "flex",
            gap: 16,
            alignItems: "baseline",
            fontFamily: "var(--ff-display-alt)",
            fontSize: 14,
            letterSpacing: "0.04em",
            color: isDark ? "var(--az-chartreuse)" : "var(--az-ink-soft)",
            textTransform: "none",
          }}
        >
          <span style={{ fontVariantNumeric: "tabular-nums" }}>{number}</span>
          <span
            style={{
              width: 32,
              height: 1,
              background: isDark ? "var(--az-chartreuse)" : "var(--az-ink)",
              display: "inline-block",
              transform: "translateY(-4px)",
            }}
          />
          <span>{label}</span>
        </div>
      )}
      {asSubsection && label && (
        <div
          style={{
            fontFamily: "var(--ff-display-alt)",
            fontSize: 12,
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            color: isDark ? "var(--az-chartreuse)" : "var(--az-stone)",
          }}
        >
          {label}
        </div>
      )}
      <h2
        style={{
          margin: 0,
          fontFamily: "var(--ff-display)",
          fontWeight: 300,
          fontSize: asSubsection ? "clamp(28px, 3.6vw, 44px)" : "clamp(40px, 5.4vw, 72px)",
          lineHeight: asSubsection ? 1 : 0.95,
          letterSpacing: "-0.04em",
          color: isDark ? "var(--az-parchment)" : "var(--az-ink)",
          maxWidth: 920,
        }}
      >
        {title}
      </h2>
      {sub && (
        <p
          style={{
            margin: 0,
            fontFamily: "var(--ff-serif)",
            fontWeight: 300,
            fontSize: asSubsection ? 17 : 20,
            lineHeight: 1.5,
            color: isDark ? "rgba(242,238,225,0.78)" : "var(--az-ink)",
            maxWidth: 680,
          }}
        >
          {sub}
        </p>
      )}
    </div>
  );
}

/* =========================================================
   StatusBadge — PoC / In progress / Launched / Submit
   ========================================================= */
function StatusBadge({ status }) {
  const map = {
    "PoC": { bg: "var(--az-chartreuse)", fg: "var(--az-ink)", dot: "var(--az-ink)" },
    "Launched": { bg: "var(--az-ink)", fg: "var(--az-chartreuse)", dot: "var(--az-chartreuse)" },
    "In progress": { bg: "transparent", fg: "var(--az-stone)", dot: "var(--az-stone)", border: "1px dashed var(--az-stone-2)" },
    "Open slot": { bg: "transparent", fg: "var(--az-stone)", dot: "var(--az-stone)", border: "1px dashed var(--az-stone-2)" },
  };
  const s = map[status] || map["PoC"];
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        padding: "5px 10px",
        background: s.bg,
        color: s.fg,
        border: s.border || "none",
        fontFamily: "var(--ff-display-alt)",
        fontSize: 11,
        letterSpacing: "0.05em",
        fontWeight: 500,
        textTransform: "uppercase",
      }}
    >
      <span
        style={{
          width: 6,
          height: 6,
          background: s.dot,
          display: "inline-block",
          transform: "rotate(45deg)",
        }}
      />
      {status}
    </span>
  );
}

/* =========================================================
   CodeBlock — monospace, parchment-2 fill, hairline border,
   optional copy button.
   ========================================================= */
function CodeBlock({ children, language = "noir", copyable = false, label, variant = "light" }) {
  const [copied, setCopied] = useState(false);
  const ref = useRef(null);
  const isDark = variant === "dark";
  const onCopy = () => {
    const text = ref.current ? ref.current.innerText : "";
    if (!navigator.clipboard) return;
    navigator.clipboard.writeText(text).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1400);
    });
  };
  return (
    <div
      style={{
        background: isDark ? "var(--az-ink)" : "var(--az-parchment-2)",
        border: isDark ? "1px solid rgba(242,238,225,0.18)" : "1px solid rgba(26,20,0,0.18)",
        position: "relative",
      }}
    >
      {(label || copyable) && (
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "10px 16px",
            borderBottom: isDark ? "1px solid rgba(242,238,225,0.14)" : "1px solid rgba(26,20,0,0.14)",
            fontFamily: "var(--ff-display-alt)",
            fontSize: 11,
            letterSpacing: "0.06em",
            color: isDark ? "rgba(242,238,225,0.6)" : "var(--az-stone)",
            textTransform: "uppercase",
          }}
        >
          <span>{label || language}</span>
          {copyable && (
            <button
              onClick={onCopy}
              style={{
                background: "transparent",
                border: 0,
                cursor: "pointer",
                fontFamily: "var(--ff-display-alt)",
                fontSize: 11,
                letterSpacing: "0.06em",
                color: copied
                  ? "var(--az-chartreuse-deep)"
                  : (isDark ? "var(--az-chartreuse)" : "var(--az-ink)"),
                textTransform: "uppercase",
                padding: 0,
              }}
            >
              {copied ? "Copied" : "Copy"}
            </button>
          )}
        </div>
      )}
      <pre
        ref={ref}
        style={{
          margin: 0,
          padding: "20px 22px",
          fontFamily: "var(--ff-mono)",
          fontSize: 14,
          lineHeight: 1.55,
          color: isDark ? "var(--az-parchment)" : "var(--az-ink-soft)",
          whiteSpace: "pre",
          overflowX: "auto",
        }}
      >
        {children}
      </pre>
    </div>
  );
}

/* =========================================================
   Inline token highlighting — used inside CodeBlock.
   ========================================================= */
const tok = {
  kw: { color: "var(--az-orchid)" },                 // keyword
  fn: { color: "var(--az-ink-soft)", fontWeight: 600 }, // function
  ty: { color: "var(--az-malachite-2)" },            // type
  str: { color: "var(--az-chartreuse-deep)" },       // string
  num: { color: "var(--az-vermillion)" },            // number / literal
  cm: { color: "var(--az-stone-2)", fontStyle: "italic" }, // comment
  pn: { color: "var(--az-stone)" },                  // punctuation
};
const tokDark = {
  kw: { color: "var(--az-orchid)" },
  fn: { color: "var(--az-chartreuse)", fontWeight: 600 },
  ty: { color: "var(--az-aqua)" },
  str: { color: "var(--az-chartreuse-mid)" },
  num: { color: "var(--az-vermillion)" },
  cm: { color: "rgba(242,238,225,0.45)", fontStyle: "italic" },
  pn: { color: "rgba(242,238,225,0.6)" },
};

Object.assign(window, { BrandMark, CTA, SectionHead, StatusBadge, CodeBlock, tok, tokDark });