<!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; }
  </style>
</helmet>

<div style="position:relative; min-height:100vh; width:100%; background: radial-gradient(1100px 700px at 15% -10%, rgba(22,82,240,0.28), transparent 60%), radial-gradient(900px 600px at 110% 10%, rgba(18,212,138,0.10), transparent 55%), #0a0d14; color:#EDEFF5; overflow-x:hidden;">

  <!-- NAV -->
  <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="#features" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Features</a>
      <a href="#pricing" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">Pricing</a>
      <a href="#faq" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">FAQ</a>
      <a href="./API Docs.dc.html" style="font-size:13.5px; font-weight:600; color:#C7CCDA;">API Docs</a>
    </nav>
    <div style="display:flex; align-items:center; gap:10px;">
      <div onClick="{{ openLogin }}" style="cursor:pointer; padding:9px 18px; border-radius:10px; font-size:13.5px; font-weight:700; color:#EDEFF5;">Log in</div>
      <div onClick="{{ openRegister }}" style="cursor:pointer; padding:9px 20px; border-radius:10px; font-size:13.5px; font-weight:700; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 4px 20px rgba(22,82,240,0.4);">Sign up</div>
    </div>
  </header>

  <!-- HERO -->
  <section style="padding:100px 48px 80px; max-width:1080px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px;">
    <div style="padding:6px 14px; border-radius:20px; background:rgba(22,82,240,0.12); border:1px solid rgba(22,82,240,0.3); font-size:12.5px; font-weight:700; color:#5b9dff;">Live on-chain analytics · Polymarket &amp; beyond</div>
    <h1 style="margin:0; font-size:52px; font-weight:800; letter-spacing:-0.03em; line-height:1.08; max-width:760px;">See every trader and market before the crowd does</h1>
    <p style="margin:0; font-size:17px; color:#8B93A7; max-width:600px; line-height:1.6;">Deep trader profiling, wallet clustering, and real-time market analytics for professional prediction market traders.</p>
    <div style="display:flex; gap:14px; margin-top:8px;">
      <div onClick="{{ openRegister }}" style="cursor:pointer; padding:14px 26px; border-radius:12px; font-size:14.5px; font-weight:700; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 8px 30px rgba(22,82,240,0.4);">Start free</div>
      <a href="#features" style="padding:14px 26px; border-radius:12px; font-size:14.5px; font-weight:700; color:#EDEFF5; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.04); white-space:nowrap;">See features</a>
    </div>

    <!-- product preview mock -->
    <div style="margin-top:40px; width:100%; border-radius:20px; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.09); backdrop-filter:blur(24px); box-shadow:0 20px 60px rgba(0,0,0,0.4); padding:20px; display:grid; grid-template-columns:1.4fr 1fr; gap:14px; text-align:left;">
      <div style="border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:18px;">
        <div style="font-size:12px; font-weight:700; color:#8B93A7; margin-bottom:10px;">Yes Price History</div>
        <svg viewBox="0 0 500 140" style="width:100%; height:140px;">
          <defs>
            <linearGradient id="hfill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#12D48A" stop-opacity="0.35"/>
              <stop offset="100%" stop-color="#12D48A" stop-opacity="0"/>
            </linearGradient>
          </defs>
          <path d="{{ heroArea }}" fill="url(#hfill)" stroke="none"></path>
          <path d="{{ heroLine }}" fill="none" stroke="#12D48A" stroke-width="2.5"></path>
        </svg>
      </div>
      <div style="border-radius:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); padding:18px; display:flex; flex-direction:column; gap:10px;">
        <div style="font-size:12px; font-weight:700; color:#8B93A7;">Top Traders</div>
        <sc-for list="{{ heroTraders }}" as="t" hint-placeholder-count="3">
          <div style="display:flex; align-items:center; gap:10px;">
            <div style="width:24px; height:24px; border-radius:7px; background:{{ t.bg }};"></div>
            <div style="font-size:12.5px; font-weight:700; flex:1;">{{ t.handle }}</div>
            <div style="font-size:12px; font-family:'Roboto Mono'; font-weight:700; color:#12D48A;">{{ t.pnl }}</div>
          </div>
        </sc-for>
      </div>
    </div>
  </section>

  <!-- FEATURES -->
  <section id="features" style="padding:80px 48px; max-width:1200px; margin:0 auto;">
    <div style="text-align:center; margin-bottom:48px;">
      <div style="font-size:12.5px; font-weight:700; color:#5b9dff; margin-bottom:10px;">FEATURES</div>
      <h2 style="margin:0 0 12px; font-size:34px; font-weight:800; letter-spacing:-0.02em;">Everything you need to read the market</h2>
      <p style="margin:0; color:#8B93A7; font-size:15px;">Built for quants who need signal, not noise.</p>
    </div>
    <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:18px;">
      <sc-for list="{{ features }}" as="f" hint-placeholder-count="6">
        <div style="padding:26px; border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px);">
          <div style="width:42px; height:42px; border-radius:12px; background:{{ f.iconBg }}; margin-bottom:16px; display:flex; align-items:center; justify-content:center;">
            <div style="width:16px; height:16px; border-radius:5px; background:{{ f.dotColor }};"></div>
          </div>
          <div style="font-size:16px; font-weight:700; margin-bottom:8px;">{{ f.title }}</div>
          <div style="font-size:13.5px; color:#8B93A7; line-height:1.6;">{{ f.desc }}</div>
        </div>
      </sc-for>
    </div>
  </section>

  <!-- PRICING -->
  <section id="pricing" style="padding:80px 48px; max-width:1160px; margin:0 auto;">
    <div style="text-align:center; margin-bottom:48px;">
      <div style="font-size:12.5px; font-weight:700; color:#5b9dff; margin-bottom:10px;">PRICING</div>
      <h2 style="margin:0 0 12px; font-size:34px; font-weight:800; letter-spacing:-0.02em;">Simple, usage-based plans</h2>
      <p style="margin:0; color:#8B93A7; font-size:15px;">Upgrade any time as your call volume grows.</p>
    </div>
    <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;">
      <sc-for list="{{ plans }}" as="p" hint-placeholder-count="3">
        <div style="{{ p.cardStyle }}">
          <sc-if value="{{ p.featured }}" hint-placeholder-val="{{ false }}">
            <div style="position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:5px 14px; border-radius:20px; background:linear-gradient(135deg,#1652F0,#4c8dff); font-size:11px; font-weight:800; letter-spacing:0.04em;">MOST POPULAR</div>
          </sc-if>
          <div style="font-size:15px; font-weight:700; margin-bottom:6px;">{{ p.name }}</div>
          <div style="display:flex; align-items:baseline; gap:4px; margin-bottom:18px;">
            <div style="font-size:36px; font-weight:800; font-family:'Roboto Mono'; letter-spacing:-0.02em;">{{ p.price }}</div>
            <div style="font-size:13px; color:#8B93A7;">{{ p.period }}</div>
          </div>
          <div style="display:flex; flex-direction:column; gap:10px; margin-bottom:22px;">
            <sc-for list="{{ p.items }}" as="item" hint-placeholder-count="4">
              <div style="display:flex; align-items:center; gap:9px; font-size:13.5px; color:#C7CCDA;">
                <div style="width:6px; height:6px; border-radius:50%; background:#12D48A; flex:none;"></div>
                <span>{{ item }}</span>
              </div>
            </sc-for>
          </div>
          <div onClick="{{ openRegister }}" style="{{ p.btnStyle }}">{{ p.btnLabel }}</div>
        </div>
      </sc-for>
    </div>
  </section>

  <!-- FAQ -->
  <section id="faq" style="padding:80px 48px 100px; max-width:820px; margin:0 auto;">
    <div style="text-align:center; margin-bottom:44px;">
      <div style="font-size:12.5px; font-weight:700; color:#5b9dff; margin-bottom:10px;">FAQ</div>
      <h2 style="margin:0; font-size:34px; font-weight:800; letter-spacing:-0.02em;">Common questions</h2>
    </div>
    <div style="display:flex; flex-direction:column; gap:10px;">
      <sc-for list="{{ faqs }}" as="q" hint-placeholder-count="6">
        <div style="border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); overflow:hidden;">
          <div onClick="{{ q.onToggle }}" style="cursor:pointer; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;">
            <div style="font-size:14.5px; font-weight:700;">{{ q.question }}</div>
            <div style="flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:16px; color:#5b9dff; transform:{{ q.iconTransform }};">+</div>
          </div>
          <sc-if value="{{ q.open }}" hint-placeholder-val="{{ false }}">
            <div style="padding:0 22px 18px; font-size:13.5px; color:#8B93A7; line-height:1.7;">{{ q.answer }}</div>
          </sc-if>
        </div>
      </sc-for>
    </div>
  </section>

  <!-- FOOTER -->
  <footer style="padding:32px 48px; border-top:1px solid rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:space-between; color:#5B6377; font-size:12.5px;">
    <div>© 2026 {{ brandName }}. All rights reserved.</div>
    <div style="display:flex; gap:20px;">
      <a href="./API Docs.dc.html" style="color:#5B6377;">API Docs</a>
      <a href="#faq" style="color:#5B6377;">FAQ</a>
      <a href="#pricing" style="color:#5B6377;">Pricing</a>
    </div>
  </footer>

  <!-- AUTH MODAL -->
  <sc-if value="{{ authOpen }}" hint-placeholder-val="{{ false }}">
    <div onClick="{{ closeAuth }}" style="position:fixed; inset:0; z-index:100; background:rgba(6,8,13,0.7); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;">
      <div onClick="{{ stopProp }}" style="width:400px; max-width:92vw; border-radius:20px; background:rgba(16,20,29,0.9); border:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(30px); box-shadow:0 30px 80px rgba(0,0,0,0.5); padding:32px;">
        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;">
          <div style="font-size:19px; font-weight:800;">{{ authTitle }}</div>
          <div onClick="{{ closeAuth }}" style="cursor:pointer; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-size:14px; color:#8B93A7;">✕</div>
        </div>
        <div style="display:flex; flex-direction:column; gap:14px;">
          <sc-if value="{{ isRegisterMode }}" hint-placeholder-val="{{ false }}">
            <div style="display:flex; flex-direction:column; gap:6px;">
              <label style="font-size:12.5px; font-weight:600; color:#C7CCDA;">Full name</label>
              <input placeholder="Jane Trader" style="padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13.5px; font-family:'Manrope'; outline:none;" />
            </div>
          </sc-if>
          <div style="display:flex; flex-direction:column; gap:6px;">
            <label style="font-size:12.5px; font-weight:600; color:#C7CCDA;">Email</label>
            <input placeholder="you@domain.com" style="padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13.5px; font-family:'Manrope'; outline:none;" />
          </div>
          <div style="display:flex; flex-direction:column; gap:6px;">
            <label style="font-size:12.5px; font-weight:600; color:#C7CCDA;">Password</label>
            <input type="password" placeholder="••••••••" style="padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:#EDEFF5; font-size:13.5px; font-family:'Manrope'; outline:none;" />
          </div>
          <div style="margin-top:6px; padding:13px; border-radius:11px; text-align:center; font-size:14px; font-weight:700; cursor:pointer; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 8px 24px rgba(22,82,240,0.4);">{{ authSubmitLabel }}</div>
          <div style="text-align:center; font-size:12.5px; color:#8B93A7; margin-top:4px;">
            {{ authSwitchPrompt }} <span onClick="{{ switchAuthMode }}" style="color:#5b9dff; font-weight:700; cursor:pointer;">{{ authSwitchAction }}</span>
          </div>
        </div>
      </div>
    </div>
  </sc-if>

</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 {
  state = {
    authOpen: false,
    authMode: "login",
    openFaq: 0,
  };

  openLogin = () => this.setState({ authOpen: true, authMode: "login" });
  openRegister = () => this.setState({ authOpen: true, authMode: "register" });
  closeAuth = () => this.setState({ authOpen: false });
  switchAuthMode = () => this.setState((s) => ({ authMode: s.authMode === "login" ? "register" : "login" }));
  stopProp = (e) => e.stopPropagation();
  toggleFaq = (i) => this.setState((s) => ({ openFaq: s.openFaq === i ? -1 : i }));

  buildPath(series, w, h, pad) {
    const min = Math.min(...series);
    const max = Math.max(...series);
    const range = max - min || 1;
    const innerW = w - pad * 2;
    const innerH = h - pad * 2;
    const pts = series.map((v, i) => {
      const x = pad + (i / (series.length - 1)) * innerW;
      const y = pad + innerH - ((v - min) / range) * innerH;
      return [x, y];
    });
    let line = "M" + pts[0][0].toFixed(1) + "," + pts[0][1].toFixed(1);
    for (let i = 1; i < pts.length; i++) line += " L" + pts[i][0].toFixed(1) + "," + pts[i][1].toFixed(1);
    const area = line + ` L${pts[pts.length - 1][0].toFixed(1)},${h - pad} L${pts[0][0].toFixed(1)},${h - pad} Z`;
    return { line, area };
  }

  renderVals() {
    const brandName = this.props.brandName ?? "Predictalytics";
    const heroSeries = [40, 44, 41, 48, 52, 50, 58, 55, 62, 66, 63, 70, 68, 74, 71.4];
    const { line, area } = this.buildPath(heroSeries, 500, 140, 8);

    const features = [
      { title: "Trader Tracking", desc: "Follow any wallet's full position history, P&L, and behavior patterns across every market.", iconBg: "rgba(22,82,240,0.14)", dotColor: "#5b9dff" },
      { title: "Wallet Clustering", desc: "Detect connected wallets and coordinated accounts behind a single trading strategy.", iconBg: "rgba(124,92,255,0.14)", dotColor: "#7c5cff" },
      { title: "Market Analysis", desc: "Order book depth, liquidity, and holder concentration for every active market.", iconBg: "rgba(18,212,138,0.14)", dotColor: "#12D48A" },
      { title: "Custom Alerts", desc: "Get notified the moment a tracked trader opens a position or a market shifts sharply.", iconBg: "rgba(255,157,76,0.14)", dotColor: "#ff9d4c" },
      { title: "Trader Traits", desc: "Automatic tagging — arbitrage traders, resolution farmers, bots — at a glance.", iconBg: "rgba(246,70,93,0.14)", dotColor: "#F6465D" },
      { title: "API Access", desc: "Pull every metric programmatically into your own models and dashboards.", iconBg: "rgba(22,82,240,0.14)", dotColor: "#5b9dff" },
    ];

    const baseCard = "position:relative; padding:30px 26px; border-radius:20px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(24px); display:flex; flex-direction:column;";
    const featuredCard = "position:relative; padding:30px 26px; border-radius:20px; background:rgba(22,82,240,0.08); border:1px solid rgba(22,82,240,0.35); backdrop-filter:blur(24px); display:flex; flex-direction:column; box-shadow:0 20px 50px rgba(22,82,240,0.2);";
    const btnPrimary = "cursor:pointer; padding:12px; border-radius:11px; text-align:center; font-size:13.5px; font-weight:700; margin-top:auto; background:linear-gradient(135deg,#1652F0,#4c8dff); box-shadow:0 8px 24px rgba(22,82,240,0.4);";
    const btnSecondary = "cursor:pointer; padding:12px; border-radius:11px; text-align:center; font-size:13.5px; font-weight:700; margin-top:auto; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#EDEFF5;";

    const plans = [
      { name: "Free", price: "$0", period: "/ month", featured: false, cardStyle: baseCard, btnStyle: btnSecondary, btnLabel: "Get started",
        items: ["20 API calls / day", "Restricted web access", "Market overview only", "Community support"] },
      { name: "Pro", price: "$99", period: "/ month", featured: true, cardStyle: featuredCard, btnStyle: btnPrimary, btnLabel: "Start Pro",
        items: ["2,000 API calls / day", "Enhanced AI trader analytics", "MCP access for your AI agent", "Priority support"] },
      { name: "Enterprise", price: "Contact us", period: "", featured: false, cardStyle: baseCard, btnStyle: btnSecondary, btnLabel: "Contact sales",
        items: ["10,000+ API calls / day", "Ready to use AI analytics with your individual prompts", "MCP access for your AI agent", "Priority support"] },
    ];

    const faqDefs = [
      { q: "What data sources power your analytics?", a: "We index on-chain activity directly from Polymarket and related prediction market contracts in real time, plus supplementary off-chain resolution data." },
      { q: "How do you identify traders as bots or arbitrageurs?", a: "We apply behavioral heuristics — trade timing, position sizing, cross-market correlation — to automatically tag wallets with traits like Bot, Arbitrage Trader, or Resolution Farming." },
      { q: "Can I track a specific wallet or trader?", a: "Yes. Search any wallet address or handle to pull up its full position history, P&L, and connected wallets." },
      { q: "What's included in the API?", a: "Market and trader endpoints covering prices, order books, holders, and trader metrics. Call limits scale with your plan, from 20 to 2,000 requests per day." },
      { q: "Do you support alerts?", a: "Yes, set alerts on tracked traders or markets and get notified the moment a position opens or a price moves sharply." },
      { q: "Can I cancel or change my plan anytime?", a: "Yes, upgrade, downgrade, or cancel at any time from your account settings — changes apply at the next billing cycle." },
    ];
    const faqs = faqDefs.map((f, i) => ({
      question: f.q,
      answer: f.a,
      open: this.state.openFaq === i,
      iconTransform: this.state.openFaq === i ? "rotate(45deg)" : "rotate(0deg)",
      onToggle: () => this.toggleFaq(i),
    }));

    const heroTraders = [
      { handle: "quant_owl", pnl: "+$216K", bg: "linear-gradient(135deg,#1652F0,#4c8dff)" },
      { handle: "arb_meridian", pnl: "+$454K", bg: "linear-gradient(135deg,#12D48A,#0a8f5f)" },
      { handle: "resolvr", pnl: "+$105K", bg: "linear-gradient(135deg,#7c5cff,#4c8dff)" },
    ];

    return {
      brandName,
      heroLine: line,
      heroArea: area,
      heroTraders,
      features,
      plans,
      faqs,
      authOpen: this.state.authOpen,
      isRegisterMode: this.state.authMode === "register",
      authTitle: this.state.authMode === "login" ? "Log in" : "Create your account",
      authSubmitLabel: this.state.authMode === "login" ? "Log in" : "Create account",
      authSwitchPrompt: this.state.authMode === "login" ? "Don't have an account?" : "Already have an account?",
      authSwitchAction: this.state.authMode === "login" ? "Sign up" : "Log in",
      openLogin: this.openLogin,
      openRegister: this.openRegister,
      closeAuth: this.closeAuth,
      switchAuthMode: this.switchAuthMode,
      stopProp: this.stopProp,
    };
  }
}

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