// BrandInline — renders text, replacing {{LOGO}} tokens with an inline mini-logo.
// Used so body copy shows the logo wherever we would have written "devxnet".
function BrandInline({ children, size = 14 }) {
  if (typeof children !== "string") return <>{children}</>;
  const parts = children.split(/(\{\{LOGO\}\})/g);
  return (
    <>
      {parts.map((p, i) => {
        if (p === "{{LOGO}}") {
          return (
            <span key={i} style={{
              display: "inline-flex",
              alignItems: "baseline",
              fontFamily: "'Inter Tight', Inter, system-ui",
              fontWeight: 600,
              letterSpacing: "-0.03em",
              color: "var(--ink)",
              fontSize: "1.02em",
              verticalAlign: "baseline",
            }}>
              dev<span style={{
                color: "var(--accent)",
                fontFamily: "'JetBrains Mono', ui-monospace, monospace",
                fontWeight: 500,
                fontSize: "0.82em",
                margin: "0 0.04em",
                transform: "translateY(-0.04em)",
                display: "inline-block",
              }}>×</span>net
            </span>
          );
        }
        return <React.Fragment key={i}>{p}</React.Fragment>;
      })}
    </>
  );
}

window.BrandInline = BrandInline;