/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "comfortable",
  "accent": "#ED8C1F",
  "heroStyle": "split"
} /*EDITMODE-END*/;

const SECTIONS = [
{ id: "overview", label: "Overview" },
{ id: "quick-start", label: "Quick start" },
{ id: "disclaimer", label: "Alpha disclaimer" },
{ id: "connectors", label: "Connect a client" },
{ id: "authentication", label: "Authentication" },
{ id: "endpoints", label: "Endpoints & transport" },
{ id: "capabilities", label: "Tool capabilities" },
{ id: "safety", label: "Safe usage" },
{ id: "faq", label: "FAQ" }];


const N8N_OAUTH_JSON = `{
  "nodes": [
    {
      "parameters": {
        "endpointUrl": "https://mcp.apaleo.com/mcp",
        "authentication": "mcpOAuth2Api",
        "options": {}
      },
      "type": "@n8n/n8n-nodes-langchain.mcpClientTool",
      "typeVersion": 1.2,
      "position": [752, 224],
      "id": "64321b60-7acd-4b74-9d69-76d12bb2a1e5",
      "name": "Apaleo MCP Client"
    }
  ],
  "connections": {
    "Apaleo MCP Client": { "ai_tool": [[]] }
  },
  "pinData": {},
  "meta": { "templateCredsSetupCompleted": true }
}`;

const N8N_BEARER_JSON = `{
  "nodes": [
    {
      "parameters": {
        "endpointUrl": "https://mcp.apaleo.com/mcp",
        "serverTransport": "httpStreamable",
        "authentication": "bearerAuth",
        "include": "selected",
        "includeTools": "={{ [\\"ListProperties\\"] }}",
        "options": {}
      },
      "type": "@n8n/n8n-nodes-langchain.mcpClientTool",
      "typeVersion": 1.1,
      "position": [880, 688],
      "id": "8e32b074-cca1-46d9-a403-3cb18ae4ade5",
      "name": "MCP Client",
      "credentials": {
        "httpBearerAuth": { "id": "cznFyIx8gEmmmhtT", "name": "Test_Bearer" }
      }
    },
    {
      "parameters": {
        "method": "POST",
        "url": "https://identity.apaleo.com/connect/token",
        "authentication": "genericCredentialType",
        "genericAuthType": "httpBasicAuth",
        "sendBody": true,
        "contentType": "form-urlencoded",
        "specifyBody": "string",
        "body": "grant_type=client_credentials",
        "options": {}
      },
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 4.2,
      "position": [96, 416],
      "id": "69a10f05-f1c2-45ae-b7fe-bfe82132e3a9",
      "name": "Get Access Token"
    }
  ],
  "connections": {
    "MCP Client": { "ai_tool": [[{ "node": "AI Agent", "type": "ai_tool", "index": 0 }]] },
    "Get Access Token": { "main": [[{ "node": "AI Agent", "type": "main", "index": 0 }]] }
  },
  "pinData": {},
  "meta": { "templateCredsSetupCompleted": true }
}`;

// ── TOC (matches Claude-plugin docs pattern) ──
function TOC({ active }) {
  const [helpOpen, setHelpOpen] = useState(false);
  const popRef = useRef(null);
  useEffect(() => {
    if (!helpOpen) return;
    const onDoc = (e) => {if (popRef.current && !popRef.current.contains(e.target)) setHelpOpen(false);};
    const onKey = (e) => {if (e.key === "Escape") setHelpOpen(false);};
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => {document.removeEventListener("mousedown", onDoc);document.removeEventListener("keydown", onKey);};
  }, [helpOpen]);
  return (
    <nav className="toc">
      <div className="toc-label">On this page</div>
      <ul>
        {SECTIONS.map((s) =>
        <li key={s.id} className={active === s.id ? "active" : ""}>
            <a href={`#${s.id}`}>{s.label}</a>
          </li>
        )}
      </ul>
      <div className={`toc-foot toc-foot-pop ${helpOpen ? "open" : ""}`} ref={popRef}>
        <div className="toc-foot-label">Need help?</div>
        <button type="button" className="toc-foot-link toc-foot-trigger" onClick={() => setHelpOpen((o) => !o)} aria-expanded={helpOpen} aria-haspopup="menu">
          <MIcon name="mail" size={14} /> Contact the team
          <MIcon name="expand_more" size={14} />
        </button>
        <div className="toc-foot-menu" role="menu" aria-hidden={!helpOpen}>
          <a href="mailto:support@apaleo.com" role="menuitem" onClick={() => setHelpOpen(false)}>
            <span className="toc-foot-menu-ico"><MIcon name="mail" size={16} color="#ED8C1F" /></span>
            <span>
              <span className="toc-foot-menu-title">Email support</span>
              <span className="toc-foot-menu-sub">support@apaleo.com</span>
            </span>
          </a>
          <a href="https://apaleo.dev/index.html" target="_blank" rel="noreferrer" role="menuitem" onClick={() => setHelpOpen(false)}>
            <span className="toc-foot-menu-ico"><MIcon name="open_in_new" size={16} color="#ED8C1F" /></span>
            <span>
              <span className="toc-foot-menu-title">Developer portal</span>
              <span className="toc-foot-menu-sub">apaleo.dev</span>
            </span>
          </a>
        </div>
      </div>
    </nav>);

}

// ── Hero ──
function Hero({ heroStyle }) {
  return (
    <header className={`hero hero-${heroStyle}`}>
      <div className="hero-inner">
        <div className="hero-copy">
          <div className="hero-eyebrow">
            <span className="hero-tag"><span className="dot" /> Closed Alpha</span>
            <span className="hero-eyebrow-text">MCP server</span>
          </div>
          <h1 className="hero-title">
            Connect any LLM or automation tool to <span className="hero-em">Apaleo PMS</span>.
          </h1>
          <p className="hero-sub">
            Apaleo MCP gives large language models and automation platforms a secure way to work
            with the Apaleo API through the Model Context Protocol — with OAuth, scoped permissions,
            and around 230 tools across booking, finance, inventory, and operations.
          </p>
          <div className="hero-actions">
            <a href="#quick-start" className="btn btn-primary">
              Get started <MIcon name="arrow_forward" size={16} />
            </a>
            <a href="#connectors" className="btn btn-secondary">Connect a client</a>
          </div>
          <div className="hero-meta hero-meta-tight">
            <span><MIcon name="cable" size={14} /> Streamable HTTP</span>
            <span><MIcon name="lock" size={14} /> OAuth 2.0</span>
            <span><MIcon name="hub" size={14} /> ~230 tools</span>
          </div>
        </div>
        <div className="hero-visual">
          <div className="hero-terminal">
            <div className="hero-terminal-head">
              <span className="dots"><span /><span /><span /></span>
              <span>mcp.apaleo.com</span>
              <span className="pill">Streamable HTTP</span>
            </div>
            <div className="hero-terminal-body">
              <div className="row"><span className="com"># tools/list — abbreviated</span></div>
              <div className="row"><span className="pun">{"{"}</span></div>
              <div className="row">&nbsp;&nbsp;<span className="key">"server"</span><span className="pun">:</span> <span className="str">"apaleo-mcp"</span><span className="pun">,</span></div>
              <div className="row">&nbsp;&nbsp;<span className="key">"transport"</span><span className="pun">:</span> <span className="str">"http+stream"</span><span className="pun">,</span></div>
              <div className="row">&nbsp;&nbsp;<span className="key">"auth"</span><span className="pun">:</span> <span className="str">"oauth2"</span><span className="pun">,</span></div>
              <div className="row">&nbsp;&nbsp;<span className="key">"tools"</span><span className="pun">:</span> <span className="pun">[</span></div>
              <div className="row">&nbsp;&nbsp;&nbsp;&nbsp;<span className="str">"ListProperties"</span><span className="pun">,</span></div>
              <div className="row">&nbsp;&nbsp;&nbsp;&nbsp;<span className="str">"GetReservation"</span><span className="pun">,</span></div>
              <div className="row">&nbsp;&nbsp;&nbsp;&nbsp;<span className="str">"AssignUnit"</span><span className="pun">,</span></div>
              <div className="row">&nbsp;&nbsp;&nbsp;&nbsp;<span className="str">"PostCharge"</span><span className="pun">,</span></div>
              <div className="row">&nbsp;&nbsp;&nbsp;&nbsp;<span className="com">/* …226 more */</span></div>
              <div className="row">&nbsp;&nbsp;<span className="pun">]</span></div>
              <div className="row"><span className="pun">{"}"}</span></div>
              <div className="row" style={{ marginTop: 8 }}><span className="ok">✓ ready</span> <span className="com">— sign in via OAuth to call tools</span></div>
            </div>
          </div>
        </div>
      </div>
    </header>);

}

// ── Connector tabs section ──
const CONNECTORS = [
{ id: "claude", label: "Claude", logo: "claude" },
{ id: "chatgpt", label: "ChatGPT", logo: "chatgpt" },
{ id: "n8n", label: "n8n", logo: "n8n" }];


function ConnectorTabs() {
  const [active, setActive] = useState("claude");
  const [n8nMode, setN8nMode] = useState("oauth");
  return (
    <>
      <div className="connectors-tabs" role="tablist" data-comment-anchor="7a6eb459cd-div-213-7">
        {CONNECTORS.map((c) =>
        <button key={c.id} className={active === c.id ? "is-active" : ""} onClick={() => setActive(c.id)} role="tab">
            <BrandLogo name={c.logo} size={16} />{c.label}
          </button>
        )}
      </div>

      {/* Claude */}
      <div className={`connector-panel ${active === "claude" ? "is-active" : ""}`}>
        <p className="sec-body">Connect the Apaleo MCP server as a remote custom connector in Claude.</p>
        <figure className="video-figure">
          <video src={(window.__resources && window.__resources.claudeVideo) || "assets/claude-connect.mp4"} controls playsInline preload="metadata" />
          <figcaption>
            <MIcon name="play_circle" size={16} />
            Walkthrough — adding Apaleo MCP as a remote connector in Claude.
          </figcaption>
        </figure>
        <ol className="sub-steps">
          <li data-comment-anchor="fcb4e741dd-li-231-11">
            <span className="sub-num">1</span>
            <div>
              <div className="sub-title">Open Claude's connector page</div>
              <div className="sub-body">Add a new remote MCP connector.</div>
              <a className="step-cta" href="https://claude.ai/settings/connectors" target="_blank" rel="noreferrer">
                <BrandLogo name="claude" size={14} />
                Open Claude connectors
                <MIcon name="open_in_new" size={14} />
              </a>
            </div>
          </li>
          <li>
            <span className="sub-num">2</span>
            <div>
              <div className="sub-title">Enter the connection details</div>
              <div className="kv">
                <div className="k">Name</div><div>Apaleo MCP</div>
                <div className="k">Remote MCP server URL</div><div><code>https://mcp.apaleo.com/mcp</code></div>
                <div className="k">Client ID / Secret</div><div>Leave empty unless you want to use a specific client — see <a href="#authentication">Authentication</a>.</div>
              </div>
            </div>
          </li>
          <li>
            <span className="sub-num">3</span>
            <div>
              <div className="sub-title">Connect &amp; approve</div>
              <div className="sub-body">Select the connection, press <kbd>Connect</kbd>, and approve the requested permissions on the redirected sign-in page.</div>
            </div>
          </li>
          <li>
            <span className="sub-num">4</span>
            <div>
              <div className="sub-title">Adjust tool permissions <span className="tag tag-warn" style={{ marginLeft: 6 }}>Recommended</span></div>
              <div className="sub-body">You can block specific tools entirely, or have Claude ask for approval before using them. Gate any write tool while you're experimenting.</div>
            </div>
          </li>
        </ol>
        <Callout kind="info" title="Heads up">
          Claude's UI labels may change over time, but the key inputs always stay the same: the MCP server URL and the OAuth sign-in flow.
        </Callout>
      </div>

      {/* ChatGPT */}
      <div className={`connector-panel ${active === "chatgpt" ? "is-active" : ""}`}>
        <p className="sec-body">Connect the Apaleo MCP server as a custom connector in ChatGPT.</p>
        <figure className="video-figure">
          <video src={(window.__resources && window.__resources.chatgptVideo) || "assets/chatgpt-connect.mp4"} controls playsInline preload="metadata" />
          <figcaption>
            <MIcon name="play_circle" size={16} />
            Walkthrough — adding Apaleo MCP as a custom connector in ChatGPT.
          </figcaption>
        </figure>
        <ol className="sub-steps">
          <li data-comment-anchor="18c7ea7b0f-li-280-11">
            <span className="sub-num">1</span>
            <div>
              <div className="sub-title">Enable Developer mode</div>
              <div className="sub-body">Open ChatGPT's <kbd>Advanced settings</kbd> and turn on Developer mode, then press <kbd>Create app</kbd>.</div>
              <a className="step-cta" href="https://chatgpt.com/#settings/Connectors" target="_blank" rel="noreferrer">
                <BrandLogo name="chatgpt" size={14} />
                Open ChatGPT connectors
                <MIcon name="open_in_new" size={14} />
              </a>
            </div>
          </li>
          <li>
            <span className="sub-num">2</span>
            <div>
              <div className="sub-title">Enter the details</div>
              <div className="kv">
                <div className="k">Name</div><div>Apaleo MCP</div>
                <div className="k">MCP Server URL</div><div><code>https://mcp.apaleo.com/mcp</code></div>
                <div className="k">Client ID / Secret</div><div>Leave empty unless using a specific client — see <a href="#authentication">Authentication</a>.</div>
              </div>
            </div>
          </li>
          <li>
            <span className="sub-num">3</span>
            <div>
              <div className="sub-title">Approve permissions</div>
              <div className="sub-body">Approve the requested permissions on the redirected page. You're ready to go.</div>
            </div>
          </li>
          <li>
            <span className="sub-num">4</span>
            <div>
              <div className="sub-title">Use it inside a chat</div>
              <div className="sub-body">To specifically use Apaleo MCP, select it inside a conversation from the connector switcher.</div>
            </div>
          </li>
        </ol>
        <p className="sec-body" data-comment-anchor="782e253cbe-p-300-9">
          <a href="https://developers.openai.com/apps-sdk/deploy/connect-chatgpt" target="_blank" rel="noreferrer">
            Official reference: ChatGPT Apps SDK <MIcon name="open_in_new" size={13} />
          </a>
        </p>
      </div>

      {/* n8n — OAuth or Bearer */}
      <div className={`connector-panel ${active === "n8n" ? "is-active" : ""}`}>
        <p className="sec-body">
          Two ways to connect from n8n: an interactive <strong>OAuth</strong> flow for personal workflows,
          or a <strong>service-to-service bearer</strong> flow for headless agents.
        </p>
        <div className="n8n-modes" role="tablist" aria-label="n8n connection modes">
          <button
            type="button"
            role="tab"
            aria-selected={n8nMode === "oauth"}
            className={`n8n-mode ${n8nMode === "oauth" ? "is-active" : ""}`}
            onClick={() => setN8nMode("oauth")}>

            <MIcon name="login" size={16} />
            <span>
              <span className="n8n-mode-title">OAuth</span>
              <span className="n8n-mode-sub">Interactive sign-in</span>
            </span>
          </button>
          <button
            type="button"
            role="tab"
            aria-selected={n8nMode === "bearer"}
            className={`n8n-mode ${n8nMode === "bearer" ? "is-active" : ""}`}
            onClick={() => setN8nMode("bearer")}>

            <MIcon name="key" size={16} />
            <span>
              <span className="n8n-mode-title">Bearer token</span>
              <span className="n8n-mode-sub">Service-to-service</span>
            </span>
          </button>
        </div>

        {n8nMode === "oauth" &&
        <div className="n8n-mode-panel">
            <ol className="sub-steps">
              <li>
                <span className="sub-num">1</span>
                <div>
                  <div className="sub-title">Drop the MCP Client node into your workflow</div>
                  <div className="sub-body">Paste this JSON onto your canvas — it sets the endpoint and auth type for you.</div>
                  <CodeBlock lang="JSON · n8n node">{N8N_OAUTH_JSON}</CodeBlock>
                </div>
              </li>
              <li>
                <span className="sub-num">2</span>
                <div>
                  <div className="sub-title">Set up the credential</div>
                  <div className="sub-body">Open the node and click <kbd>Set up credential</kbd>. When prompted for the server URL, enter <code>https://mcp.apaleo.com/</code>.</div>
                </div>
              </li>
              <li>
                <span className="sub-num">3</span>
                <div>
                  <div className="sub-title">Connect &amp; approve</div>
                  <div className="sub-body">Select the new connection, press <kbd>Connect</kbd>, and approve the requested permissions on the redirected page.</div>
                </div>
              </li>
            </ol>
          </div>
        }

        {n8nMode === "bearer" &&
        <div className="n8n-mode-panel">
            <p className="sec-body">
              For headless agents, drive MCP from n8n with a service-to-service client-credentials flow:
              an HTTP Request node fetches a token from the Apaleo identity server, then the MCP Client
              node uses it as a bearer token.
            </p>
            <Callout kind="info" title="Three credentials needed">
              <strong>HTTP Basic Auth</strong> (Apaleo Client ID / Secret), <strong>OpenAI API Key</strong> (or your model of choice),
              and a <strong>Bearer Auth</strong> credential whose token is the expression
              <code>{"{{$(\"Get Access Token\").item.json.access_token}}"}</code>.
            </Callout>
            <CodeBlock lang="JSON · n8n workflow">{N8N_BEARER_JSON}</CodeBlock>

            <h4 style={{ margin: "24px 0 8px", font: "500 14px/20px var(--font-ui)", color: "var(--fg1)", textTransform: "uppercase", letterSpacing: "0.06em" }}>How the bearer flow works</h4>
            <ol className="sub-steps">
              <li>
                <span className="sub-num">1</span>
                <div>
                  <div className="sub-title">Get Access Token</div>
                  <div className="sub-body">HTTP Basic Auth using your Apaleo Client ID + Secret, hitting <code>POST https://identity.apaleo.com/connect/token</code> with <code>grant_type=client_credentials</code>.</div>
                </div>
              </li>
              <li>
                <span className="sub-num">2</span>
                <div>
                  <div className="sub-title">Bearer Auth credential</div>
                  <div className="sub-body">References the token from step 1 via <code>{"{{$(\"Get Access Token\").item.json.access_token}}"}</code>, so it auto-refreshes.</div>
                </div>
              </li>
              <li>
                <span className="sub-num">3</span>
                <div>
                  <div className="sub-title">MCP Client node</div>
                  <div className="sub-body">Uses Streamable HTTP transport against <code>https://mcp.apaleo.com/mcp</code> with the bearer credential.</div>
                </div>
              </li>
            </ol>
          </div>
        }
      </div>
    </>);

}

// ── App ──
function App() {
  const t = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : { tweaks: TWEAK_DEFAULTS, setTweak: () => {} };
  const tweaks = t.tweaks || TWEAK_DEFAULTS;

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    document.documentElement.dataset.density = tweaks.density;
  }, [tweaks.accent, tweaks.density]);

  const [active, setActive] = useState(SECTIONS[0].id);
  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY + 140;
      let cur = SECTIONS[0].id;
      for (const s of SECTIONS) {
        const el = document.getElementById(s.id);
        if (el && el.offsetTop <= y) cur = s.id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const Tweaks = window.TweaksPanel;
  const { TweakSection, TweakRadio, TweakColor } = window;

  return (
    <div className="page">
      {/* Top bar */}
      <div className="topbar">
        <div className="topbar-inner">
          <div className="topbar-brand">
            <ApaleoMark size={22} />
            <span className="topbar-name">apaleo</span>
            <span className="topbar-divider" />
            <span className="topbar-section">MCP · Docs</span>
          </div>
          <div className="topbar-nav">
            <a className="topbar-link" href="https://apaleo.dev/index.html" target="_blank" rel="noreferrer">apaleo.dev</a>
            <a className="topbar-link" href="mailto:support@apaleo.com">Support</a>
            <a className="topbar-cta" href="#quick-start">
              Get started <MIcon name="arrow_forward" size={14} />
            </a>
          </div>
        </div>
      </div>

      <Hero heroStyle={tweaks.heroStyle} />

      <div className="body">
        <aside className="body-toc">
          <TOC active={active} />
        </aside>

        <main className="body-main">

          {/* Overview */}
          <section id="overview" className="sec">
            <div className="sec-eyebrow"><MIcon name="info" size={14} /> Overview</div>
            <h2 className="sec-title">A bridge between LLMs and Apaleo</h2>
            <p className="sec-lead">
              The Apaleo MCP server speaks the Model Context Protocol — an open standard for letting
              language models call tools securely. Plug it into Claude, ChatGPT, n8n, or any
              MCP-capable client and it shows up as a structured set of tools mapped to the Apaleo API.
            </p>

            <div className="stat-row">
              <div>
                <div className="stat-num">~230<span className="small">tools</span></div>
                <div className="stat-lbl">Across the Apaleo API</div>
              </div>
              <div>
                <div className="stat-num">9<span className="small">domains</span></div>
                <div className="stat-lbl">Operational coverage</div>
              </div>
              <div>
                <div className="stat-num">OAuth 2.0</div>
                <div className="stat-lbl">Scope-based access</div>
              </div>
            </div>
          </section>

          {/* Quick start */}
          <section id="quick-start" className="sec">
            <div className="sec-eyebrow"><MIcon name="rocket_launch" size={14} /> Quick start</div>
            <h2 className="sec-title">From zero to your first call</h2>
            <p className="sec-lead">Three steps to get from nothing to a working MCP connection. None of this requires production data — alpha access is for test tenants only.</p>

            <ol className="sub-steps">
              <li>
                <span className="sub-num">1</span>
                <div>
                  <div className="sub-title">Create a developer account <span className="tag tag-warn" style={{ marginLeft: 6 }}>Required</span></div>
                  <div className="sub-body">
                    A free Apaleo developer account is the prerequisite for using MCP at all — it gives you a test tenant to point MCP at and the dev account code we need to enable alpha access. It's separate from any production hotel.
                  </div>
                  <div className="link-row">
                    <CodeChip mono={false}>https://identity.apaleo.com/account/register-dev-account</CodeChip>
                    <a href="https://identity.apaleo.com/account/register-dev-account" target="_blank" rel="noreferrer" className="icon-btn" title="Open registration">
                      <MIcon name="open_in_new" size={16} />
                    </a>
                  </div>
                </div>
              </li>
              <li>
                <span className="sub-num">2</span>
                <div>
                  <div className="sub-title">Request alpha access</div>
                  <div className="sub-body">
                    Email your dev account code (e.g. <code>SDXE</code>) to <a href="mailto:support@apaleo.com">support@apaleo.com</a> so we can enable MCP for your tenant. We'll confirm when it's switched on.
                  </div>
                </div>
              </li>
              <li data-comment-anchor="82284860cd-li-527-15">
                <span className="sub-num">3</span>
                <div>
                  <div className="sub-title">Connect your client</div>
                  <div className="sub-body">Pick the tool you want to drive Apaleo from. Each guide takes 2–5 minutes.</div>
                  <div className="connector-grid">
                    <a className="connector-card" href="#connectors" onClick={() => {}}>
                      <div className="connector-card-icon"><BrandLogo name="claude" size={22} /></div>
                      <div>
                        <div className="connector-card-title">Claude</div>
                        <div className="connector-card-sub">Custom connector</div>
                      </div>
                      <MIcon name="arrow_forward" size={16} />
                    </a>
                    <a className="connector-card" href="#connectors">
                      <div className="connector-card-icon"><BrandLogo name="chatgpt" size={22} /></div>
                      <div>
                        <div className="connector-card-title">ChatGPT</div>
                        <div className="connector-card-sub">Apps SDK</div>
                      </div>
                      <MIcon name="arrow_forward" size={16} />
                    </a>
                    <a className="connector-card" href="#connectors">
                      <div className="connector-card-icon"><BrandLogo name="n8n" size={22} /></div>
                      <div>
                        <div className="connector-card-title">n8n</div>
                        <div className="connector-card-sub">OAuth or bearer token</div>
                      </div>
                      <MIcon name="arrow_forward" size={16} />
                    </a>
                  </div>
                </div>
              </li>
            </ol>
          </section>

          {/* Disclaimer */}
          <section id="disclaimer" className="sec" data-comment-anchor="da58f6203b-section-572-11">
            <div className="sec-eyebrow"><MIcon name="gavel" size={14} /> Alpha disclaimer</div>
            <h2 className="sec-title">Closed Alpha — please read</h2>
            <p className="sec-lead">By participating in the Apaleo MCP Closed Alpha you ("Test User") acknowledge and agree to the terms below.</p>

            <Callout kind="warn" title="Test data only">
              Participation is strictly limited to Apaleo test accounts. Live data, Personally
              Identifiable Information (PII), or any sensitive, confidential, or proprietary data
              must not be used under any circumstances.
            </Callout>

            <div className="disclaimer">
              <h3><MIcon name="gavel" size={16} color="#7A3D00" /> What you're agreeing to</h3>
              <ul>
                <li><strong>Alpha software.</strong> The MCP server is provided on an "as is" and "as available" basis. It may contain bugs, performance issues, or become unavailable without prior notice.</li>
                <li><strong>Account scope.</strong> The MCP server enables access to all properties of the connected Apaleo account. It is your sole responsibility to manage access and configuration.</li>
                <li><strong>LLM behavior.</strong> Using LLMs with MCP can produce non-deterministic, unexpected, or hallucinated outputs that may lead to unintended actions on data.</li>
                <li><strong>Test User responsibility.</strong> You connect to and use the MCP server entirely at your own risk and on your own authority. Apaleo assumes no liability for direct or indirect outcomes, damages, data loss, or other consequences arising from use during the alpha.</li>
                <li><strong>Architecture compliance.</strong> You are solely responsible for your agent design, LLM selection and configuration, and full compliance with applicable data regulations and best practices.</li>
                <li><strong>Revocation of access.</strong> Apaleo reserves the right to revoke or restrict access to the MCP alpha server at any time, without prior notice, at its sole discretion.</li>
              </ul>
            </div>

            <p className="sec-body" style={{ fontSize: 13, color: "var(--fg3)" }}>
              By utilizing the Apaleo MCP server in the context of the Closed Alpha, you signify your
              acknowledgment of, understanding of, and agreement with the terms outlined here.
            </p>
          </section>

          {/* Connectors */}
          <section id="connectors" className="sec">
            <div className="sec-eyebrow"><MIcon name="cable" size={14} /> Connect a client</div>
            <h2 className="sec-title">Step-by-step connection guides</h2>
            <p className="sec-lead">
              Pick the tool you want to drive Apaleo from. UI labels in third-party tools change over
              time — the key inputs always stay the same: the MCP server URL and the OAuth sign-in flow.
            </p>
            <ConnectorTabs />
          </section>

          {/* Authentication */}
          <section id="authentication" className="sec">
            <div className="sec-eyebrow"><MIcon name="lock" size={14} /> Authentication</div>
            <h2 className="sec-title">OAuth 2.0, with optional custom clients</h2>
            <p className="sec-lead">
              Apaleo MCP authenticates against the Apaleo identity server. You can connect with the
              default flow, or register your own application for tighter scope control.
            </p>

            <h3 style={{ font: "500 18px/24px var(--font-ui)", color: "var(--apaleo-navy)", margin: "24px 0 8px" }}>Option A — Default connector flow</h3>
            <p className="sec-body">
              For Claude, ChatGPT, and n8n (OAuth) you can leave the Client ID and Client
              Secret empty. The connector starts an OAuth sign-in flow against Apaleo and you approve
              scopes interactively.
            </p>

            <h3 style={{ font: "500 18px/24px var(--font-ui)", color: "var(--apaleo-navy)", margin: "32px 0 8px" }}>Option B — Register your own application</h3>
            <p className="sec-body">
              Recommended for production-style automations and for the bearer-token flow. Background reading in the developer
              portal: <a href="https://apaleo.dev/guides/oauth-connection/simple-client.html" target="_blank" rel="noreferrer">OAuth simple-client overview</a> and
              {" "}<a href="https://apaleo.dev/guides/oauth-connection/register-simple-client-app.html" target="_blank" rel="noreferrer">Register a simple-client app</a>.
            </p>

            <ol className="sub-steps">
              <li>
                <span className="sub-num">1</span>
                <div>
                  <div className="sub-title">Register an application</div>
                  <div className="sub-body">In your developer account, click <kbd>Register an app</kbd> and choose <strong>OAuth simple client (custom) app</strong> for MCP usage.</div>
                  <div className="kv">
                    <div className="k">Name</div><div>e.g. <em>My Hotel MCP Integration</em></div>
                    <div className="k">Description</div><div>e.g. <em>MCP server for AI assistant integration</em></div>
                    <div className="k">Redirect URIs</div><div>Can be left empty for MCP usage.</div>
                    <div className="k">Scopes</div><div>Add <code>mcp:tools</code> plus any others your app needs (e.g. <code>inventory.read</code>, <code>booking.read</code>).</div>
                  </div>
                </div>
              </li>
              <li>
                <span className="sub-num">2</span>
                <div>
                  <div className="sub-title">Get your credentials</div>
                  <div className="sub-body">After registration, you'll receive a Client ID (e.g. <code>SDXE-AC-MYAPP</code>) and a Client Secret (e.g. <code>ZiEWFgFeSP…5yhTgsZgx</code>).</div>
                  <Callout kind="warn" title="Keep these secure">
                    Never commit them to source control or paste them into chat windows. Treat them like database credentials.
                  </Callout>
                </div>
              </li>
              <li>
                <span className="sub-num">3</span>
                <div>
                  <div className="sub-title">Use them with your client</div>
                  <div className="sub-body">Paste them into your connector's Client ID / Secret fields, or use them in a server-side client-credentials flow — see the n8n bearer example.</div>
                </div>
              </li>
            </ol>
          </section>

          {/* Endpoints */}
          <section id="endpoints" className="sec">
            <div className="sec-eyebrow"><MIcon name="api" size={14} /> Endpoints &amp; transport</div>
            <h2 className="sec-title">One production endpoint, Streamable HTTP</h2>
            <p className="sec-lead">All MCP traffic uses Streamable HTTP against a single production endpoint.</p>

            <table className="tbl">
              <thead>
                <tr><th style={{ width: "30%" }}>Purpose</th><th>URL</th><th style={{ width: "20%" }}>Notes</th></tr>
              </thead>
              <tbody>
                <tr><td>MCP server</td><td><code>https://mcp.apaleo.com/mcp</code></td><td>Production</td></tr>
                <tr><td>OAuth token endpoint</td><td><code>https://identity.apaleo.com/connect/token</code></td><td>Client-credentials flow</td></tr>
                <tr><td>Developer portal</td><td><a href="https://apaleo.dev/index.html" target="_blank" rel="noreferrer">apaleo.dev</a></td><td>Register apps</td></tr>
              </tbody>
            </table>
          </section>

          {/* Capabilities */}
          <section id="capabilities" className="sec" data-comment-anchor="3d17e367e6-section-685-11">
            <div className="sec-eyebrow"><MIcon name="build" size={14} /> Tool capabilities</div>
            <h2 className="sec-title">Coverage across the Apaleo API</h2>
            <p className="sec-lead">The MCP server exposes tools that map closely onto the public Apaleo API.</p>

            <div className="capability-grid">
              <div><div className="cap-ico"><MIcon name="event_available" size={16} color="#ED8C1F" /></div><div><div className="cap-title">Availability <span className="cap-tag">V1</span></div><div className="cap-sub">capacity, ARI, restrictions</div></div></div>
              <div><div className="cap-ico"><MIcon name="bookmark_added" size={16} color="#ED8C1F" /></div><div><div className="cap-title">Booking <span className="cap-tag">V1</span></div><div className="cap-sub">reservations, blocks, groups</div></div></div>
              <div><div className="cap-ico"><MIcon name="payments" size={16} color="#ED8C1F" /></div><div><div className="cap-title">Finance <span className="cap-tag">V1</span></div><div className="cap-sub">folios, charges, payments</div></div></div>
              <div><div className="cap-ico"><MIcon name="hotel" size={16} color="#ED8C1F" /></div><div><div className="cap-title">Inventory <span className="cap-tag">V1</span></div><div className="cap-sub">units, unit groups, services</div></div></div>
              <div><div className="cap-ico"><MIcon name="history" size={16} color="#ED8C1F" /></div><div><div className="cap-title">Logs <span className="cap-tag">V1</span></div><div className="cap-sub">audit trail, change history</div></div></div>
              <div><div className="cap-ico"><MIcon name="support_agent" size={16} color="#ED8C1F" /></div><div><div className="cap-title">Operations <span className="cap-tag">V1</span></div><div className="cap-sub">arrivals, in-house, housekeeping</div></div></div>
              <div><div className="cap-ico"><MIcon name="price_change" size={16} color="#ED8C1F" /></div><div><div className="cap-title">Rate plans <span className="cap-tag">V1</span></div><div className="cap-sub">pricing rules, restrictions</div></div></div>
              <div><div className="cap-ico"><MIcon name="monitoring" size={16} color="#ED8C1F" /></div><div><div className="cap-title">Reports <span className="cap-tag">V1</span><span className="cap-tag cap-tag-nsfw">NSFW</span></div><div className="cap-sub">occupancy, revenue, statistics</div></div></div>
              <div><div className="cap-ico"><MIcon name="settings" size={16} color="#ED8C1F" /></div><div><div className="cap-title">Settings <span className="cap-tag">V1</span></div><div className="cap-sub">property setup, taxes, currencies</div></div></div>
            </div>

            <p className="sec-body">
              A list of every tool, its description, and its JSON schema is available through any MCP
              inspector, or via the <code>tools/list</code> JSON-RPC method.
            </p>
          </section>

          {/* Safety */}
          <section id="safety" className="sec">
            <div className="sec-eyebrow"><MIcon name="shield" size={14} /> Safe usage</div>
            <h2 className="sec-title">Practical guardrails</h2>
            <p className="sec-lead">For both technical operators and hotel teams running MCP-driven automations.</p>

            <div className="safe-cols">
              <div className="safe-card">
                <h3><MIcon name="terminal" size={18} color="#ED8C1F" /> For technical teams</h3>
                <p className="safe-sub">If you're integrating MCP into agents, workflows, or back-office tooling.</p>
                <ul>
                  <li>Only point MCP at a <strong>test tenant</strong> for the duration of the alpha.</li>
                  <li>Register a dedicated app and grant the <strong>minimum scopes</strong> your agent needs.</li>
                  <li>For long-running automations, fetch tokens via the <a href="#connectors">client-credentials flow</a> instead of pasting bearer tokens.</li>
                  <li>Log every tool invocation (input + output) to your own audit store.</li>
                  <li>Treat MCP responses as untrusted input downstream — sanitize before re-prompting.</li>
                </ul>
              </div>
              <div className="safe-card">
                <h3><MIcon name="hotel" size={18} color="#ED8C1F" /> For hotel teams &amp; ops</h3>
                <p className="safe-sub">If you're using MCP through Claude, ChatGPT, or another assistant.</p>
                <ul>
                  <li>Don't connect MCP to a live property. Use a copy of your test tenant.</li>
                  <li>Never paste real guest data, payment info, or PII into a chat window.</li>
                  <li>Start with read-only flows (arrivals, occupancy reports) before enabling writes.</li>
                  <li>In Claude / ChatGPT, ask the assistant to <strong>request approval</strong> before changes.</li>
                  <li>Keep a human in the loop for refunds, rate plan edits, and reservation cancellations.</li>
                </ul>
              </div>
            </div>
          </section>

          {/* FAQ */}
          <section id="faq" className="sec">
            <div className="sec-eyebrow"><MIcon name="help" size={14} /> FAQ</div>
            <h2 className="sec-title">Frequently asked</h2>
            <p className="sec-lead">If you're stuck, start here. Most issues come down to scopes or hitting a stale connector.</p>

            <div className="faqs">
              <FAQ q="Who can join the Closed Alpha?">
                Anyone with an Apaleo developer account. Email your dev account code to <a href="mailto:support@apaleo.com">support@apaleo.com</a> and we'll enable MCP on your tenant.
              </FAQ>
              <FAQ q="Can I use MCP on a live hotel?">
                Not during the alpha. The server is only meant for test tenants — see the <a href="#disclaimer">Alpha disclaimer</a>.
              </FAQ>
              <FAQ q="Why does my client ask for a Client ID and Secret?">
                You can leave them empty for the default OAuth flow. Provide them only if you've registered your own app — see <a href="#authentication">Authentication</a>.
              </FAQ>
              <FAQ q="A tool returns a vague 'something went wrong'">
                Almost always a missing scope. Disconnect, reconnect, and approve every requested scope this time. Compare what you granted against what the tool needs (folio writes, unit moves, etc.).
              </FAQ>
              <FAQ q="What's the MCP server URL?">
                <code>https://mcp.apaleo.com/mcp</code> — that's the single production endpoint for all MCP traffic.
              </FAQ>
              <FAQ q="How do I see all available tools?">
                Connect with any MCP inspector and browse the tool list, or call <code>tools/list</code> over JSON-RPC from your own client.
              </FAQ>
            </div>
          </section>

          <footer className="page-foot">
            <div className="foot-thanks">
              <MIcon name="favorite" size={16} color="#ED8C1F" />
              <span>Thanks for kicking the tires. Tell us what breaks — we ship fast.</span>
            </div>
            <div className="foot-links">
              <a href="mailto:support@apaleo.com">support@apaleo.com</a>
              <span className="foot-sep">·</span>
              <a href="https://apaleo.dev/index.html" target="_blank" rel="noreferrer">apaleo.dev</a>
            </div>
          </footer>
        </main>
      </div>

      {/* Tweaks panel */}
      {Tweaks &&
      <Tweaks title="Tweaks">
          <TweakSection title="Layout">
            <TweakRadio
            label="Density"
            value={tweaks.density}
            onChange={(v) => t.setTweak("density", v)}
            options={[
            { value: "comfortable", label: "Comfortable" },
            { value: "compact", label: "Compact" }]
            } />
          
            <TweakRadio
            label="Hero style"
            value={tweaks.heroStyle}
            onChange={(v) => t.setTweak("heroStyle", v)}
            options={[
            { value: "split", label: "Split" },
            { value: "centered", label: "Centered" }]
            } />
          
          </TweakSection>
          <TweakSection title="Color">
            <TweakColor
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => t.setTweak("accent", v)}
            options={["#ED8C1F", "#D97757", "#19213B", "#23a566"]} />
          
          </TweakSection>
        </Tweaks>
      }
    </div>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);