<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body { margin: 0; background: #0a0d14; font-family: 'Manrope', system-ui, sans-serif; }
    * { box-sizing: border-box; }
    a { color: #5b9dff; text-decoration: none; }
    a:hover { color: #8ab8ff; }
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
    pre { margin: 0; }
  </style>
</helmet>

<div style="position:relative; min-height:100vh; width:100%; background: radial-gradient(1100px 700px at 15% -10%, rgba(22,82,240,0.22), transparent 60%), #0a0d14; color:#EDEFF5;">

  <header style="position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:16px 48px; backdrop-filter:blur(20px); background:rgba(10,13,20,0.6); border-bottom:1px solid rgba(255,255,255,0.07);">
    <div style="display:flex; align-items:center; gap:10px;">
      <div style="width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 0 20px rgba(22,82,240,0.6);"></div>
      <div style="font-weight:800; font-size:17px; letter-spacing:-0.02em;">{{ brandName }}<span style="color:#5b9dff;">.</span></div>
    </div>
    <nav style="display:flex; align-items:center; gap:32px;">
      <a href="./Landing.dc.html#features" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Features</a>
      <a href="./Landing.dc.html#pricing" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Pricing</a>
      <a href="./Landing.dc.html#faq" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">FAQ</a>
      <div style="font-size:13.5px; font-weight:700; color:#5b9dff;">API Docs</div>
    </nav>
    <a href="./Landing.dc.html" style="padding:9px 20px; border-radius:10px; font-size:13.5px; font-weight:700; background:linear-gradient(135deg,#1652F0,#4c8dff);">Get API key</a>
  </header>

  <div style="display:flex; max-width:1280px; margin:0 auto;">
    <!-- SIDEBAR -->
    <aside style="width:230px; flex:none; padding:36px 16px; position:sticky; top:68px; align-self:flex-start; height:calc(100vh - 68px); overflow-y:auto;">
      <div style="font-size:11px; font-weight:700; color:#5B6377; letter-spacing:0.06em; padding:0 12px 8px;">GETTING STARTED</div>
      <sc-for list="{{ sidebarTop }}" as="s" hint-placeholder-count="3">
        <div onClick="{{ s.onClick }}" style="cursor:pointer; padding:9px 12px; border-radius:9px; font-size:13.5px; font-weight:600; color:{{ s.color }}; background:{{ s.bg }}; margin-bottom:2px;">{{ s.label }}</div>
      </sc-for>
      <div style="font-size:11px; font-weight:700; color:#5B6377; letter-spacing:0.06em; padding:16px 12px 8px;">ENDPOINTS</div>
      <sc-for list="{{ sidebarEndpoints }}" as="s" hint-placeholder-count="6">
        <div onClick="{{ s.onClick }}" style="cursor:pointer; display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:9px; font-size:13px; font-weight:600; color:{{ s.color }}; background:{{ s.bg }}; margin-bottom:2px;">
          <span style="font-size:10px; font-weight:800; font-family:'Roboto Mono'; color:{{ s.methodColor }};">{{ s.method }}</span>
          <span>{{ s.label }}</span>
        </div>
      </sc-for>
    </aside>

    <!-- CONTENT -->
    <main style="flex:1; min-width:0; padding:36px 40px 100px;">
      <h1 style="margin:0 0 10px; font-size:30px; font-weight:800; letter-spacing:-0.02em;">API Reference</h1>
      <p style="margin:0 0 32px; color:#8B93A7; font-size:14.5px; max-width:640px; line-height:1.6;">Programmatic access to every trader and market metric in {{ brandName }}. All endpoints return JSON over HTTPS.</p>

      <!-- Auth -->
      <section style="margin-bottom:40px;">
        <h2 style="font-size:19px; font-weight:800; margin:0 0 12px;">Authentication</h2>
        <p style="color:#8B93A7; font-size:13.5px; line-height:1.7; margin:0 0 14px;">Pass your API key as a bearer token on every request. Keys are available from your account dashboard after signing up.</p>
        <div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); padding:18px 20px; font-family:'Roboto Mono'; font-size:13px; color:#C7CCDA; overflow-x:auto;">
<pre>curl https://api.predictalytics.io/v1/markets \
  -H "Authorization: Bearer YOUR_API_KEY"</pre>
        </div>
      </section>

      <!-- Rate limits -->
      <section style="margin-bottom:40px;">
        <h2 style="font-size:19px; font-weight:800; margin:0 0 12px;">Rate limits</h2>
        <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:14px;">
          <sc-for list="{{ rateLimits }}" as="r" hint-placeholder-count="3">
            <div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); padding:16px 18px;">
              <div style="font-size:12.5px; font-weight:700; color:#8B93A7; margin-bottom:6px;">{{ r.plan }}</div>
              <div style="font-size:20px; font-weight:800; font-family:'Roboto Mono';">{{ r.limit }}</div>
            </div>
          </sc-for>
        </div>
      </section>

      <!-- Endpoints -->
      <sc-for list="{{ endpoints }}" as="ep" hint-placeholder-count="6">
        <section id="{{ ep.id }}" style="margin-bottom:40px; scroll-margin-top:80px;">
          <div style="display:flex; align-items:center; gap:12px; margin-bottom:10px;">
            <span style="font-size:11px; font-weight:800; font-family:'Roboto Mono'; padding:4px 9px; border-radius:6px; background:{{ ep.methodBg }}; color:{{ ep.methodColor }};">{{ ep.method }}</span>
            <span style="font-family:'Roboto Mono'; font-size:14.5px; font-weight:700; color:#EDEFF5;">{{ ep.path }}</span>
          </div>
          <p style="color:#8B93A7; font-size:13.5px; line-height:1.6; margin:0 0 14px;">{{ ep.desc }}</p>

          <div style="display:grid; grid-template-columns:1fr 1fr; gap:14px;">
            <div style="border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:16px 18px;">
              <div style="font-size:11px; font-weight:700; color:#5B6377; text-transform:uppercase; margin-bottom:10px;">Parameters</div>
              <sc-for list="{{ ep.params }}" as="p" hint-placeholder-count="2">
                <div style="display:flex; align-items:baseline; gap:8px; margin-bottom:8px; font-size:12.5px;">
                  <span style="font-family:'Roboto Mono'; font-weight:700; color:#5b9dff;">{{ p.name }}</span>
                  <span style="color:#5B6377; font-size:11.5px;">{{ p.type }}</span>
                  <span style="color:#8B93A7;">{{ p.desc }}</span>
                </div>
              </sc-for>
            </div>
            <div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); padding:16px 18px; font-family:'Roboto Mono'; font-size:12px; color:#C7CCDA; overflow-x:auto;">
              <pre>{{ ep.example }}</pre>
            </div>
          </div>
        </section>
      </sc-for>
    </main>
  </div>
</div>

</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;: {&quot;width&quot;: 1440}, &quot;brandName&quot;: {&quot;editor&quot;: &quot;text&quot;, &quot;default&quot;: &quot;Predictalytics&quot;, &quot;tsType&quot;: &quot;string&quot;}}">
class Component extends DCLogic {
  scrollTo(id) {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ block: "start" });
  }

  renderVals() {
    const brandName = this.props.brandName ?? "Predictalytics";

    const endpoints = [
      { id: "get-markets", method: "GET", path: "/v1/markets", methodBg: "rgba(18,212,138,0.14)", methodColor: "#12D48A",
        desc: "List all markets with current price, volume, and liquidity.",
        params: [{ name: "category", type: "string", desc: "Filter by category" }, { name: "status", type: "string", desc: "active | resolved" }],
        example: `{\n  "id": "fed-sep-cut",\n  "question": "Fed cuts rates...",\n  "yesPrice": 71.4,\n  "volume24h": 2840000\n}` },
      { id: "get-market", method: "GET", path: "/v1/markets/{id}", methodBg: "rgba(18,212,138,0.14)", methodColor: "#12D48A",
        desc: "Get detailed data for a single market including order book and holders.",
        params: [{ name: "id", type: "string", desc: "Market identifier" }],
        example: `{\n  "orderBook": { "bids": [...], "asks": [...] },\n  "holders": [ { "trader": "0xA1...", "size": 420000 } ]\n}` },
      { id: "get-traders", method: "GET", path: "/v1/traders", methodBg: "rgba(18,212,138,0.14)", methodColor: "#12D48A",
        desc: "Search and list traders with P&L, win rate, and traits.",
        params: [{ name: "trait", type: "string", desc: "Bot | Arbitrage Trader | Resolution Farming" }, { name: "sort", type: "string", desc: "pnl | volume" }],
        example: `{\n  "handle": "quant_owl",\n  "traits": ["Arbitrage Trader"],\n  "winRate": 68.4\n}` },
      { id: "get-trader", method: "GET", path: "/v1/traders/{id}", methodBg: "rgba(18,212,138,0.14)", methodColor: "#12D48A",
        desc: "Get a trader's full position history and connected wallets.",
        params: [{ name: "id", type: "string", desc: "Trader handle or wallet" }],
        example: `{\n  "positions": [...],\n  "connectedWallets": ["0x88Ac...2f01"]\n}` },
      { id: "post-alerts", method: "POST", path: "/v1/alerts", methodBg: "rgba(22,82,240,0.16)", methodColor: "#5b9dff",
        desc: "Create an alert on a trader or market.",
        params: [{ name: "target", type: "string", desc: "Trader or market id" }, { name: "condition", type: "string", desc: "price_move | new_position" }],
        example: `{\n  "id": "alert_881",\n  "target": "arb_meridian",\n  "condition": "new_position"\n}` },
      { id: "get-agent", method: "GET", path: "/v1/mcp/context", methodBg: "rgba(18,212,138,0.14)", methodColor: "#12D48A",
        desc: "Enterprise only. MCP-compatible context feed for your own AI agent.",
        params: [{ name: "scope", type: "string", desc: "markets | traders | both" }],
        example: `{\n  "mcp_version": "1.0",\n  "resources": ["markets", "traders"]\n}` },
    ];

    const sidebarTop = [
      { label: "Authentication", color: "#C7CCDA", bg: "transparent", onClick: () => this.scrollTo("auth") },
      { label: "Rate limits", color: "#C7CCDA", bg: "transparent", onClick: () => this.scrollTo("rate-limits") },
    ];
    const sidebarEndpoints = endpoints.map((ep) => ({
      label: ep.path, method: ep.method, methodColor: ep.methodColor, color: "#C7CCDA", bg: "transparent",
      onClick: () => this.scrollTo(ep.id),
    }));

    const rateLimits = [
      { plan: "Free", limit: "20 / day" },
      { plan: "Basic", limit: "200 / day" },
      { plan: "Enterprise", limit: "2,000 / day" },
    ];

    return { brandName, endpoints, sidebarTop, sidebarEndpoints, rateLimits };
  }
}

</script>
</body>
</html>
