/* global React */
const { useState: useStateShared, useEffect: useEffectShared, useRef: useRefShared } = React;

// ── Apaleo dot-mark logo ──
function ApaleoMark({ size = 28, color = "#030B24" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 105 105" fill="none" style={{ color, flex: "none" }}>
      <path d="M 32.407 94.63 C 27.84 94.63 24.157 98.366 20.873 101.54 C 18.657 103.682 15.64 105 12.315 105 C 5.514 105 0 99.486 0 92.685 C 0 85.884 5.514 80.37 12.315 80.37 C 15.64 80.37 18.657 81.688 20.873 83.83 C 24.157 87.005 27.84 90.741 32.407 90.741 C 36.975 90.741 40.658 87.005 43.942 83.83 C 46.158 81.688 49.175 80.37 52.5 80.37 C 59.301 80.37 64.815 85.884 64.815 92.685 C 64.815 99.486 59.301 105 52.5 105 C 49.175 105 46.158 103.682 43.942 101.54 C 40.658 98.366 36.975 94.63 32.407 94.63 Z" fill="currentColor" />
      <path d="M 105 92.685 C 105 99.486 99.486 105 92.685 105 C 85.884 105 80.37 99.486 80.37 92.685 C 80.37 85.884 85.884 80.37 92.685 80.37 C 99.486 80.37 105 85.884 105 92.685 Z" fill="currentColor" />
      <path d="M 72.593 54.444 C 77.16 54.444 80.843 58.181 84.127 61.355 C 86.343 63.497 89.36 64.815 92.685 64.815 C 99.486 64.815 105 59.301 105 52.5 C 105 45.699 99.486 40.185 92.685 40.185 C 89.36 40.185 86.343 41.503 84.127 43.645 C 80.843 46.819 77.16 50.556 72.593 50.556 C 68.025 50.556 64.342 46.819 61.058 43.645 C 58.842 41.503 55.825 40.185 52.5 40.185 C 49.175 40.185 46.158 41.503 43.942 43.645 C 40.658 46.819 36.975 50.556 32.407 50.556 C 27.84 50.556 24.157 46.819 20.873 43.645 C 18.657 41.503 15.64 40.185 12.315 40.185 C 5.514 40.185 0 45.699 0 52.5 C 0 59.301 5.514 64.815 12.315 64.815 C 15.64 64.815 18.657 63.497 20.873 61.355 C 24.157 58.181 27.84 54.444 32.407 54.444 C 36.975 54.444 40.658 58.181 43.942 61.355 C 46.158 63.497 49.175 64.815 52.5 64.815 C 55.825 64.815 58.842 63.497 61.058 61.355 C 64.342 58.181 68.025 54.444 72.593 54.444 Z" fill="currentColor" />
      <path d="M 72.593 14.259 C 77.16 14.259 80.843 17.995 84.127 21.17 C 86.343 23.312 89.36 24.63 92.685 24.63 C 99.486 24.63 105 19.116 105 12.315 C 105 5.514 99.486 0 92.685 0 C 89.36 0 86.343 1.318 84.127 3.46 C 80.843 6.634 77.16 10.37 72.593 10.37 C 68.025 10.37 64.342 6.634 61.058 3.46 C 58.842 1.318 55.825 0 52.5 0 C 45.699 0 40.185 5.514 40.185 12.315 C 40.185 19.116 45.699 24.63 52.5 24.63 C 55.825 24.63 58.842 23.312 61.058 21.17 C 64.342 17.995 68.025 14.259 72.593 14.259 Z" fill="currentColor" />
      <path d="M 0 12.315 C 0 5.514 5.514 0 12.315 0 C 19.116 0 24.63 5.514 24.63 12.315 C 24.63 19.116 19.116 24.63 12.315 24.63 C 5.514 24.63 0 19.116 0 12.315 Z" fill="currentColor" />
    </svg>);

}

function MIcon({ name, size = 20, color }) {
  return <span className="material-symbols-rounded" style={{ fontSize: size, color, lineHeight: 1, flex: "none" }}>{name}</span>;
}

function NavPath({ items }) {
  return (
    <span className="navpath">
      {items.map((it, i) =>
      <React.Fragment key={i}>
          {i > 0 && <MIcon name="chevron_right" size={14} color="#9197AC" />}
          <span className="navpath-chip">{it}</span>
        </React.Fragment>
      )}
    </span>);

}

function CodeChip({ children, mono = true }) {
  const [copied, setCopied] = useStateShared(false);
  const copy = () => {
    navigator.clipboard?.writeText(children).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1400);
    });
  };
  return (
    <span className="code-chip" onClick={copy}>
      <span style={{ fontFamily: mono ? "var(--font-mono)" : "var(--font-ui)" }}>{children}</span>
      <MIcon name={copied ? "check" : "content_copy"} size={14} />
    </span>);

}

function Callout({ kind = "tip", title, children }) {
  const map = {
    tip: { icon: "lightbulb", bg: "#FFF4E5", fg: "#7A3D00", border: "#FFD699" },
    warn: { icon: "warning", bg: "#FFFAEB", fg: "#B3670F", border: "#FFE0A3" },
    info: { icon: "info", bg: "#DAE9FC", fg: "#2748B8", border: "#B8CFF7" },
    note: { icon: "sticky_note_2", bg: "#F5F6FA", fg: "#3E4457", border: "#E6E8F0" }
  };
  const m = map[kind];
  return (
    <div className="callout" style={{ background: m.bg, color: m.fg, borderColor: m.border }}>
      <MIcon name={m.icon} size={18} color={m.fg} />
      <div>
        {title && <div className="callout-title">{title}</div>}
        <div className="callout-body">{children}</div>
      </div>
    </div>);

}

function FAQ({ q, children }) {
  const [open, setOpen] = useStateShared(false);
  return (
    <div className={`faq ${open ? "faq-open" : ""}`}>
      <button className="faq-q" onClick={() => setOpen(!open)}>
        <span>{q}</span>
        <MIcon name={open ? "remove" : "add"} size={20} color="#3E4457" />
      </button>
      {open && <div className="faq-a">{children}</div>}
    </div>);

}

// Multi-line code block with copy
function CodeBlock({ lang = "json", children }) {
  const [copied, setCopied] = useStateShared(false);
  const text = typeof children === "string" ? children : "";
  const copy = async () => {
    if (!text) return;
    let ok = false;
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(text);
        ok = true;
      }
    } catch (e) {/* fall through to legacy path */}
    if (!ok) {
      try {
        const ta = document.createElement("textarea");
        ta.value = text;
        ta.setAttribute("readonly", "");
        ta.style.position = "fixed";
        ta.style.top = "0";
        ta.style.left = "0";
        ta.style.opacity = "0";
        ta.style.pointerEvents = "none";
        document.body.appendChild(ta);
        ta.focus();
        ta.select();
        ta.setSelectionRange(0, ta.value.length);
        ok = document.execCommand("copy");
        document.body.removeChild(ta);
      } catch (e) {ok = false;}
    }
    if (ok) {
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    }
  };
  return (
    <div className="codeblock">
      <div className="codeblock-head" data-comment-anchor="32cd63d933-div-95-7">
        <span className="codeblock-lang">{lang}</span>
        <button
          type="button"
          aria-live="polite"
          aria-label={copied ? "Copied to clipboard" : "Copy to clipboard"}
          className={`codeblock-copy ${copied ? "is-ok" : ""}`}
          onClick={copy}>
          <MIcon name={copied ? "check" : "content_copy"} size={12} />
          {copied ? "Copied!" : "Copy"}
        </button>
      </div>
      <pre><code>{text}</code></pre>
    </div>);

}

// ── Brand logos ──
function BrandLogo({ name, size = 20 }) {
  const s = { width: size, height: size, flex: "none", display: "block" };
  switch (name) {
    case "claude":
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={s} fill="hsl(14.8, 63.1%, 59.6%)" aria-label="Claude"><path d="m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z" /></svg>);

    case "chatgpt":
      return (
        <svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg" style={s} aria-label="ChatGPT"><path fill="#000" d="m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" /></svg>);

    case "n8n":
      return (
        <svg height="1em" style={s} viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" aria-label="n8n"><path clipRule="evenodd" d="M24 8.4c0 1.325-1.102 2.4-2.462 2.4-1.146 0-2.11-.765-2.384-1.8h-3.436c-.602 0-1.115.424-1.214 1.003l-.101.592a2.38 2.38 0 01-.8 1.405c.412.354.704.844.8 1.405l.1.592A1.222 1.222 0 0015.719 15h.975c.273-1.035 1.237-1.8 2.384-1.8 1.36 0 2.461 1.075 2.461 2.4S20.436 18 19.078 18c-1.147 0-2.11-.765-2.384-1.8h-.975c-1.204 0-2.23-.848-2.428-2.005l-.101-.592a1.222 1.222 0 00-1.214-1.003H10.97c-.308.984-1.246 1.7-2.356 1.7-1.11 0-2.048-.716-2.355-1.7H4.817c-.308.984-1.246 1.7-2.355 1.7C1.102 14.3 0 13.225 0 11.9s1.102-2.4 2.462-2.4c1.183 0 2.172.815 2.408 1.9h1.337c.236-1.085 1.225-1.9 2.408-1.9 1.184 0 2.172.815 2.408 1.9h.952c.601 0 1.115-.424 1.213-1.003l.102-.592c.198-1.157 1.225-2.005 2.428-2.005h3.436c.274-1.035 1.238-1.8 2.384-1.8C22.898 6 24 7.075 24 8.4zm-1.23 0c0 .663-.552 1.2-1.232 1.2-.68 0-1.23-.537-1.23-1.2 0-.663.55-1.2 1.23-1.2.68 0 1.231.537 1.231 1.2zM2.461 13.1c.68 0 1.23-.537 1.23-1.2 0-.663-.55-1.2-1.23-1.2-.68 0-1.231.537-1.231 1.2 0 .663.55 1.2 1.23 1.2zm6.153 0c.68 0 1.231-.537 1.231-1.2 0-.663-.55-1.2-1.23-1.2-.68 0-1.231.537-1.231 1.2 0 .663.55 1.2 1.23 1.2zm10.462 3.7c.68 0 1.23-.537 1.23-1.2 0-.663-.55-1.2-1.23-1.2-.68 0-1.23.537-1.23 1.2 0 .663.55 1.2 1.23 1.2z" fill="#EA4B71" fillRule="evenodd" /></svg>);

    case "mcpjam":
      return (
        <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9010 1460" style={s} preserveAspectRatio="xMidYMid meet" aria-label="MCPJam"><g transform="translate(0,1460) scale(0.1,-0.1)" fill="#000"><path d="M2463 1446 c-258 -50 -445 -185 -547 -399 -50 -104 -69 -192 -68 -322 1 -290 141 -514 401 -645 112 -56 197 -73 366 -73 177 0 259 18 385 84 78 40 211 150 209 172 0 7 -55 60 -121 120 l-120 107 -50 -45 c-105 -95 -235 -132 -370 -105 -124 24 -205 86 -261 199 -31 63 -32 70 -32 191 0 122 1 127 33 192 40 81 111 148 190 179 45 18 78 23 157 23 93 1 105 -1 165 -31 36 -18 89 -53 117 -78 l53 -46 117 107 c65 59 119 113 121 119 2 7 -28 40 -65 75 -76 70 -205 138 -313 164 -91 23 -278 29 -367 12z" /><path d="M10 730 l0 -700 180 0 180 0 2 358 3 357 35 -55 c19 -30 99 -158 176 -285 l141 -230 91 -3 91 -3 178 298 178 298 3 -368 2 -367 187 0 186 0 -6 503 c-4 276 -7 591 -7 700 l0 197 -162 0 -163 0 -235 -400 c-129 -220 -238 -400 -241 -400 -4 0 -117 180 -250 400 l-244 400 -162 0 -163 0 0 -700z" /><path d="M3390 731 l0 -701 200 0 200 0 0 185 0 185 183 0 c256 0 371 28 490 118 110 84 167 182 187 323 31 215 -75 422 -264 514 -136 67 -148 68 -593 73 l-403 4 0 -701z m755 362 c78 -41 105 -88 105 -184 0 -81 -26 -130 -87 -166 -46 -27 -54 -28 -210 -31 l-163 -4 0 207 0 207 158 -4 c135 -4 163 -7 197 -25z" /></g></svg>);

    case "key":
      return (
        <svg viewBox="0 0 24 24" style={s} xmlns="http://www.w3.org/2000/svg" aria-label="Bearer token">
          <path fill="#19213B" d="M14.5 2a5.5 5.5 0 0 0-5.31 6.92L2 16.1V22h5.9v-2.5h2.5V17h2.5l1.18-1.19A5.5 5.5 0 1 0 14.5 2zm2 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" />
        </svg>);

    default:
      return null;
  }
}

Object.assign(window, {
  ApaleoMark, MIcon, NavPath, CodeChip, Callout, FAQ, CodeBlock, BrandLogo
});