// Variant A — Pricing + Docs pages
// Copy reflects Arkon v0.8 closed-beta reality (apr 2026).

const VAPricing = ({setTopPage}) => {
  // Pricing calculator — beta rate $0.80/session-minute
  const [sessionsPerDay, setSessionsPerDay] = React.useState(500);
  const [avgDuration, setAvgDuration] = React.useState(8);
  const [activeDays, setActiveDays] = React.useState(22);
  const minutes = sessionsPerDay * avgDuration * activeDays;
  const rate = 0.80;
  const cost = Math.round(minutes * rate);
  const volumeTier =
    minutes >= 25000 ? 'negotiated (25k+ min/mo)' :
    minutes >= 10000 ? 'early-access flat · $0.80/min' :
    'early-access flat · $0.80/min';

  const [openFaq, setOpenFaq] = React.useState(0);

  const faqs = [
    [
      'When does beta end?',
      'Expected Q3 2026. You keep early-access pricing for 6 months after GA.'
    ],
    [
      "What's really ready today?",
      'Patched Chromium (19 patches, 3,944 LOC) on 147.0.7718.0 + V8 14.7.136; 1,008-persona library; SMS and proxy via 10 Huawei E3372 modems on Tele2 Russia; ark_mission() API; warm-up flows tested on Avito, VK, Ozon. Not ready: SOC 2 (in audit), multi-region (eu-west-1 only), fully isolated multi-tenancy.'
    ],
    [
      'Can I test it?',
      'Join the waitlist. First 20 teams approved based on use case. 3 of 10 current beta slots filled.'
    ],
    [
      'What use cases are blocked?',
      'Per AUP: credential stuffing, CSAM, payment fraud, mass fake-account creation. We will stop-ship partners who try.'
    ],
    [
      'Do you store my sessions?',
      '30-day replay retention during beta, auto-deleted after. BYO-key encryption on Partner tier. No third-party data sharing.'
    ],
    [
      'What if a challenge fails?',
      'File a false-positive report from the session page. Verified ones credit your account at 2× the billed minutes.'
    ],
    [
      'Can I self-host?',
      'Not during beta. Partner tier negotiable post-GA. The Chromium patch set is 3,944 LOC on top of upstream — requires our build pipeline.'
    ],
    [
      'Why $0.80 and not Browserbase $0.10?',
      'Different product class. We patch Chromium at the C++ source layer (19 patches, 3,944 LOC) — Canvas/Audio noise, CDP stealth, screen/navigator spoofing, WebGL GPU profile, ClientRects, measureText, font enumeration whitelist, WebGPU, SpeechSynthesis, Performance.now, Network Information, Screen Orientation, Media Capabilities, Visual Viewport. That premium is the product.'
    ],
    [
      'Volume discounts?',
      'After 25,000 minutes/month, rate is negotiated. Email beta@tryarkon.com with your projected volume.'
    ],
  ];

  return (
    <div className="vA-page vA-pricing">
      <header className="hdr">
        <div className="brand" style={{fontWeight:500}}>arkon</div>
        <nav className="nav">
          <a onClick={() => setTopPage('landing')}>landing</a>
          <a onClick={() => setTopPage('docs')}>docs</a>
          <a className="on">pricing</a>
          <a onClick={() => setTopPage('app')}>console ↗</a>
        </nav>
      </header>
      <div className="breadcrumb">~ / pricing</div>
      <section className="title">
        <div className="kicker">§ billing — closed beta · apr 2026</div>
        <h1>Per-minute,<br/>session-metered.</h1>
        <p>You pay for the wall-clock time a patched Chromium is alive with your persona bound. No per-request fees, no per-action fees. Idle tabs bill at 0.1× after 30 seconds. v0.8 · pre-production · closed beta through Q2 2026.</p>
      </section>

      <section className="body">
        <div className="tiers">
          <div className="tier">
            <h3>beta</h3>
            <div className="price">free<small> · invite-only</small></div>
            <div className="sub">100 session-minutes / month during closed beta</div>
            <hr/>
            <ul>
              <li>100 session-minutes / month</li>
              <li>2 concurrent sessions</li>
              <li>50 personas from the 1,008 library</li>
              <li>discord community support</li>
              <li>eu-west-1 region only</li>
            </ul>
            <div className="cta">
              <button className="vAa-btn" onClick={() => window.location.href='mailto:hi@tryarkon.com?subject=Waitlist%20—%20Explorer%20tier'}>join waitlist →</button>
            </div>
          </div>

          <div className="tier featured">
            <h3 className="acc">early access</h3>
            <div className="price">$0.80<small> / session-minute</small></div>
            <div className="sub">locked in for 6 months after beta ends</div>
            <hr/>
            <ul>
              <li><span className="acc">$0.80/min</span> · rate locked 6 mo post-GA</li>
              <li>20 concurrent sessions</li>
              <li>all 1,008 personas</li>
              <li>email support · 72h SLA during beta</li>
              <li>session replay · 30-day retention</li>
              <li>eu-west-1 + ru-central-1 (moscow farm)</li>
            </ul>
            <div className="cta">
              <button className="vAa-btn primary" onClick={() => window.location.href='mailto:hi@tryarkon.com?subject=Early%20access%20request'}>request access →</button>
            </div>
          </div>

          <div className="tier">
            <h3>partner</h3>
            <div className="price">custom</div>
            <div className="sub">white-glove beta partnership</div>
            <hr/>
            <ul>
              <li>dedicated engineer (Slack channel)</li>
              <li>custom persona onboarding</li>
              <li>BYO-key encryption on replays</li>
              <li>negotiated concurrency + rate</li>
              <li>priority patches for target sites</li>
              <li>self-host negotiable post-GA</li>
            </ul>
            <div className="cta">
              <button className="vAa-btn" onClick={() => window.location.href='mailto:hi@tryarkon.com?subject=Partner%20inquiry'}>talk →</button>
            </div>
          </div>
        </div>

        <div className="vA-calc">
          <div>
            <h3>§ volume estimator</h3>
            <div className="slider-row">
              <label>sessions / day<span>{sessionsPerDay.toLocaleString()}</span></label>
              <input type="range" min="10" max="10000" step="10" value={sessionsPerDay} onChange={e => setSessionsPerDay(+e.target.value)}/>
            </div>
            <div className="slider-row">
              <label>avg duration (minutes)<span>{avgDuration}</span></label>
              <input type="range" min="1" max="60" step="1" value={avgDuration} onChange={e => setAvgDuration(+e.target.value)}/>
            </div>
            <div className="slider-row">
              <label>active days / month<span>{activeDays}</span></label>
              <input type="range" min="1" max="30" step="1" value={activeDays} onChange={e => setActiveDays(+e.target.value)}/>
            </div>
          </div>
          <div>
            <h3>§ projected monthly</h3>
            <div className="total">${cost.toLocaleString()}<small> / mo</small></div>
            <div className="breakdown">
              · {minutes.toLocaleString()} session-minutes / month<br/>
              · {minutes.toLocaleString()} min × $0.80/min = ${cost.toLocaleString()}<br/>
              · volume tier: <span style={{color:'#b8860b'}}>{volumeTier}</span><br/>
              · {minutes >= 25000 ? 'contact for discounted rate' : 'email beta@tryarkon.com to request a quote'}
            </div>
          </div>
        </div>
      </section>

      <section className="body" style={{borderBottom:'none'}}>
        <div style={{fontSize:11, color:'#5a5448', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:20}}>§ frequently asked</div>
        <div style={{display:'flex', flexDirection:'column', gap:2, maxWidth:820}}>
          {faqs.map(([q, a], i) => (
            <div key={q} style={{borderBottom:'1px solid #d9d0b4', padding:'16px 0'}}>
              <div
                onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                style={{fontSize:15, color:'#1a1813', cursor:'pointer', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <span>{q}</span>
                <span style={{color:'#5a5448', fontFamily:'ui-monospace, monospace', fontSize:13}}>{openFaq === i ? '−' : '+'}</span>
              </div>
              {openFaq === i && (
                <p style={{fontSize:13, color:'#2a2620', lineHeight:1.65, marginTop:10}}>{a}</p>
              )}
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

const VADocs = ({setTopPage}) => {
  const [section, setSection] = React.useState('getting-started');
  return (
    <div className="vA-page" style={{padding:0, border:'none', minHeight:'100vh', width:1280}}>
      <header className="hdr">
        <div className="brand" style={{fontWeight:500}}>arkon</div>
        <nav className="nav">
          <a onClick={() => setTopPage('landing')}>landing</a>
          <a className="on">docs</a>
          <a onClick={() => setTopPage('pricing')}>pricing</a>
          <a onClick={() => setTopPage('app')}>console ↗</a>
        </nav>
      </header>
      <div className="vA-docs">
        <aside className="docs-nav">
          <h5>start</h5>
          <a className={section === 'getting-started' ? 'on' : ''} onClick={() => setSection('getting-started')}>getting started</a>
          <a className={section === 'first-session' ? 'on' : ''} onClick={() => setSection('first-session')}>your first session</a>
          <a onClick={() => setSection('auth')} className={section === 'auth' ? 'on' : ''}>authentication</a>

          <h5>concepts</h5>
          <a className={section === 'mission' ? 'on' : ''} onClick={() => setSection('mission')}>mission() grammar</a>
          <a className={section === 'personas' ? 'on' : ''} onClick={() => setSection('personas')}>personas</a>
          <a style={{opacity:0.4, cursor:'default'}}>rule engine (24 checks) <small>soon</small></a>
          <a style={{opacity:0.4, cursor:'default'}}>replay protocol <small>soon</small></a>

          <h5>reference</h5>
          <a style={{opacity:0.4, cursor:'default'}}>REST API <small>soon</small></a>
          <a style={{opacity:0.4, cursor:'default'}}>Python SDK <small>soon</small></a>
          <a style={{opacity:0.4, cursor:'default'}}>Node SDK <small>soon</small></a>
          <a style={{opacity:0.4, cursor:'default'}}>webhook events <small>soon</small></a>

          <h5>operations</h5>
          <a style={{opacity:0.4, cursor:'default'}}>rate limits <small>soon</small></a>
          <a style={{opacity:0.4, cursor:'default'}}>error codes <small>soon</small></a>
          <a style={{opacity:0.4, cursor:'default'}}>status page <small>soon</small></a>
        </aside>

        <article className="docs-body">
          {section === 'getting-started' && (
            <>
              <div style={{fontSize:11, color:'#5a5448', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:8}}>§ start · getting started</div>
              <h2>Getting started</h2>
              <p>arkon is a patched Chromium (19 patches on 147.0.7718.0, 3,944 LOC) bound to a persona from our 1,008-persona library. You drive it over CDP from Python or Node. This page gets you from zero to a running mission in about ten minutes.</p>

              <h3>Install</h3>
              <div className="code-block">
<span className="cm"># python 3.10+</span>{'\n'}
$ <span className="kw">pip</span> install arkon{'\n\n'}
<span className="cm"># node 18+</span>{'\n'}
$ <span className="kw">npm</span> install @arkon/sdk
              </div>

              <h3>Authenticate</h3>
              <p>Create a key in <code>~/console/api-keys</code> and export it. The SDK reads <code>ARKON_API_KEY</code> automatically.</p>
              <div className="code-block">
$ <span className="kw">export</span> ARKON_API_KEY=<span className="str">ark_live_7f2a9c41...</span>
              </div>

              <div className="callout">
                <strong>Tip:</strong> Use <code>ark_test_*</code> keys while you're wiring things up. Test-mode sessions are sandboxed, unlimited, and do not bill. They run against the same patched Chromium build.
              </div>

              <h3>First 5-line example</h3>
              <div className="code-block">
<span className="kw">from</span> arkon <span className="kw">import</span> Browser, mission{'\n\n'}
<span className="kw">async with</span> Browser.<span className="fn">create</span>(persona=<span className="str">"random"</span>) <span className="kw">as</span> b:{'\n'}
    result = <span className="kw">await</span> mission(goal=<span className="str">"open example.com settings"</span>, persona=b.persona){'\n'}
    <span className="fn">print</span>(result.actions_taken)
              </div>

              <p>That opens a real patched Chromium in eu-west-1 with a random production persona bound, runs the mission until complete or max_steps exhausted, and prints the action log.</p>

              <div className="toc-next">
                <a onClick={() => setSection('first-session')}>
                  <span className="dir">next →</span>
                  <span className="nm">Your first session</span>
                </a>
                <a onClick={() => setSection('auth')}>
                  <span className="dir">see also</span>
                  <span className="nm">Authentication</span>
                </a>
              </div>
            </>
          )}

          {section === 'first-session' && (
            <>
              <div style={{fontSize:11, color:'#5a5448', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:8}}>§ start · your first session</div>
              <h2>Your first session</h2>
              <p>A session is one <code>Browser</code> instance bound to one persona with one proxy lease. Billed wall-clock. Below, a full walkthrough on <code>avito.ru</code> — a Cloudflare Turnstile-protected Russian marketplace. We tested this end-to-end; our Avito run pulled 149 listings in 43s from a mobile persona.</p>

              <h3>Step 1 — create a session with a persona</h3>
              <div className="code-block">
<span className="kw">from</span> arkon <span className="kw">import</span> Browser{'\n\n'}
<span className="kw">async with</span> Browser.<span className="fn">create</span>({'\n'}
    persona=<span className="str">"arkady_007"</span>,           <span className="cm"># reserved Claude persona, mobile_android</span>{'\n'}
    proxy=<span className="str">"mobile-ru-1"</span>,            <span className="cm"># huawei e3372 on tele2 russia</span>{'\n'}
    region=<span className="str">"eu-west-1"</span>,{'\n'}
) <span className="kw">as</span> b:{'\n'}
    ...
              </div>

              <h3>Step 2 — low-level control (CDP-compatible)</h3>
              <p>If you want explicit control, the <code>Browser</code> object exposes CDP-compatible primitives. Mouse/keyboard events go through our patched <code>cdp.input.dispatch</code> which applies the persona's 24 behavioral rules (hover dwell, scroll inertia, click jitter, timing envelopes).</p>
              <div className="code-block">
<span className="kw">await</span> b.<span className="fn">goto</span>(<span className="str">"https://avito.ru"</span>){'\n'}
<span className="kw">await</span> b.<span className="fn">fill</span>(<span className="str">"input[name=q]"</span>, <span className="str">"iphone 15"</span>){'\n'}
<span className="kw">await</span> b.<span className="fn">click</span>(<span className="str">"button[type=submit]"</span>){'\n'}
<span className="kw">await</span> b.<span className="fn">wait_for</span>(<span className="str">".items-items"</span>){'\n'}
listings = <span className="kw">await</span> b.<span className="fn">query_all</span>(<span className="str">"[data-marker=item]"</span>)
              </div>

              <h3>Step 3 — high-level (recommended)</h3>
              <p><code>mission()</code> takes natural-language intent and drives the browser to completion or <code>max_steps</code>. It picks selectors, handles challenges via the 24-rule engine, and captures screenshots at every step.</p>
              <div className="code-block">
<span className="kw">from</span> arkon <span className="kw">import</span> mission{'\n\n'}
result = <span className="kw">await</span> mission({'\n'}
    goal=<span className="str">"scrape top 30 iphone 15 listings from avito.ru"</span>,{'\n'}
    persona=b.persona,{'\n'}
    max_steps=<span className="num">10</span>,{'\n'}
    output_schema={'{'}<span className="str">"items"</span>: [{'{'}<span className="str">"title"</span>: str, <span className="str">"price"</span>: int, <span className="str">"url"</span>: str{'}'}]{'}'},{'\n'}
){'\n'}
<span className="fn">print</span>(result.extracted_data[<span className="str">"items"</span>])  <span className="cm"># [{'{'}"title": ..., "price": ..., "url": ...{'}'}, ...]</span>
              </div>

              <h3>Step 4 — inspect in the console</h3>
              <p>Every session gets a <code>ses_*</code> id (six hex chars). Open <code>~/console/sessions/{'{'}id{'}'}</code> to replay:</p>
              <ul>
                <li><strong>events</strong> — timestamped log: <code>session.boot</code>, <code>persona.rules.applied</code>, <code>ark_mission.step_N</code>, <code>challenge.detected</code>, <code>challenge.behavioral_pass</code></li>
                <li><strong>network</strong> — every request with JA4 and RTT</li>
                <li><strong>dom</strong> — per-step snapshot</li>
                <li><strong>telemetry</strong> — CDP events + patched-path annotations</li>
                <li><strong>console</strong> — JS console output from the page</li>
              </ul>

              <div className="callout">
                <strong>Billing note:</strong> Max session duration is 600 seconds during beta. Idle tabs (no CDP events for 30 s) bill at 0.1×. If you hang a session and never close it, we hard-cap at your org's max — no orphaned 8-hour browsers.
              </div>
            </>
          )}

          {section === 'auth' && (
            <>
              <div style={{fontSize:11, color:'#5a5448', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:8}}>§ start · authentication</div>
              <h2>Authentication</h2>
              <p>Keys live at <code>Settings → API Keys</code>. Two prefixes:</p>
              <ul>
                <li><code>ark_live_*</code> — production. Metered at $0.80/min. Gated by use-case review during beta.</li>
                <li><code>ark_test_*</code> — sandbox. Unlimited. Does not bill. Same patched Chromium; challenges are stubbed.</li>
              </ul>

              <h3>HTTP</h3>
              <p>Send the key as a bearer token or read from <code>ARKON_API_KEY</code> env var.</p>
              <div className="code-block">
$ <span className="kw">curl</span> https://api.arkon.io/v1/sessions \{'\n'}
    -H <span className="str">"Authorization: Bearer $ARKON_API_KEY"</span> \{'\n'}
    -H <span className="str">"Content-Type: application/json"</span> \{'\n'}
    -d <span className="str">'{'{'}"persona":"arkady_007","proxy":"mobile-ru-1"{'}'}'</span>
              </div>

              <h3>CDP websocket</h3>
              <p>Once a session exists, connect to its CDP endpoint:</p>
              <div className="code-block">
wss://cdp.arkon.io/v1/{'{'}session_id{'}'}?key=ark_live_7f2a...
              </div>

              <h3>Scopes</h3>
              <p>Per-key: <code>sessions.read</code>, <code>sessions.create</code>, <code>personas.write</code> (partner tier), <code>billing.read</code>. Keys without <code>sessions.create</code> cannot mint new keys — avoids privilege escalation from stolen CI keys.</p>

              <div className="callout">
                <strong>Rotation:</strong> Keys should rotate quarterly. The console warns 21 days ahead and emails the org owner.
              </div>
            </>
          )}

          {section === 'mission' && (
            <>
              <div style={{fontSize:11, color:'#5a5448', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:8}}>§ concepts · mission() grammar</div>
              <h2>The mission() grammar</h2>
              <p><code>mission()</code> is the primary high-level verb in arkon. It takes a natural-language goal and drives the bound browser to completion or <code>max_steps</code>. Replaces per-step <code>act()</code> / <code>extract()</code> from the v0.6 API.</p>

              <h3>Signature</h3>
              <div className="code-block">
<span className="kw">async</span> <span className="fn">mission</span>({'\n'}
    goal: str,                         <span className="cm"># English intent</span>{'\n'}
    persona: str | PersonaRef,         <span className="cm"># "persona_007" or b.persona</span>{'\n'}
    max_steps: int = <span className="num">10</span>,{'\n'}
    output_schema: dict | None = None, <span className="cm"># optional structured output</span>{'\n'}
    model: str = <span className="str">"claude-sonnet-4.6"</span>,{'\n'}
) -&gt; <span className="fn">MissionResult</span>
              </div>

              <h3>Returns</h3>
              <div className="code-block">
<span className="kw">class</span> <span className="fn">MissionResult</span>:{'\n'}
    actions_taken: list[Action]        <span className="cm"># click, type, scroll, goto, ...</span>{'\n'}
    screenshots: list[Screenshot]      <span className="cm"># one per step</span>{'\n'}
    reasoning: list[str]               <span className="cm"># model's intent per step</span>{'\n'}
    extracted_data: dict | None        <span className="cm"># matches output_schema if set</span>
              </div>

              <h3>Goal shapes we support</h3>
              <ul>
                <li><strong>Navigation</strong> — "go to avito.ru and search for iphone 15"</li>
                <li><strong>Single action</strong> — "click the first listing"</li>
                <li><strong>Multi-step flow</strong> — "log into vk.com with the saved account, go to the feed, scroll three times"</li>
                <li><strong>Extraction</strong> — "scrape top 30 listings with title, price, url" (use <code>output_schema</code>)</li>
              </ul>

              <h3>What it won't do</h3>
              <ul>
                <li>Multi-session continuity — use an explicit <code>goto</code> with saved cookies between sessions.</li>
                <li>Arbitrary JS eval — use <code>b.evaluate()</code> directly.</li>
                <li>reCAPTCHA v2 image challenges — use <code>browser.captcha()</code> explicitly (2Captcha integration).</li>
              </ul>

              <div className="callout">
                <strong>Beta caveat:</strong> mission quality varies by site complexity. Best on sites with clear visual structure. Avito, VK, and Ozon flows are tested end-to-end. LinkedIn and Facebook-class SPAs are flakier — file false-positives from the session page for credit.
              </div>
            </>
          )}

          {section === 'personas' && (
            <>
              <div style={{fontSize:11, color:'#5a5448', letterSpacing:'0.08em', textTransform:'uppercase', marginBottom:8}}>§ concepts · personas</div>
              <h2>Personas</h2>
              <p>A persona is a bundle of identity, device, fingerprint, rules, and state. 1,008 production personas. Custom personas on Partner tier.</p>

              <h3>Fields</h3>
              <ul>
                <li><strong>identity</strong> — display name, age bracket, declared location (city + country)</li>
                <li><strong>device</strong> — <code>desktop</code> · <code>mobile_android</code> (redroid AOSP 12, default SM-A546B) · <code>mobile_ios</code></li>
                <li><strong>fingerprint</strong> — user-agent, screen, fonts (whitelisted enum), JA4, HTTP/2 settings, WebGL GPU profile, canvas entropy</li>
                <li><strong>behavioral rules</strong> — 24 checks including <code>nav_require_search_entry</code>, <code>ip_never_rotate_on_captcha</code>, <code>timing_active_hours</code>, <code>session_idle_ratio</code>, <code>destroy_tz_ip_mismatch</code></li>
                <li><strong>history</strong> — persistent cookie jar + localStorage, up to 137 entries</li>
              </ul>

              <h3>Selection</h3>
              <div className="code-block">
<span className="cm"># exact id</span>{'\n'}
Browser.<span className="fn">create</span>(persona=<span className="str">"persona_007"</span>){'\n\n'}
<span className="cm"># filter query (picks one at random from matches)</span>{'\n'}
Browser.<span className="fn">create</span>(persona={'{'}<span className="str">"device"</span>: <span className="str">"mobile_android"</span>, <span className="str">"locale"</span>: <span className="str">"ru-RU"</span>{'}'}){'\n\n'}
<span className="cm"># random across the full 1,008</span>{'\n'}
Browser.<span className="fn">create</span>(persona=<span className="str">"random"</span>)
              </div>

              <h3>State</h3>
              <p>Cookie jar + localStorage persist per-persona across sessions. For a clean start:</p>
              <div className="code-block">
Browser.<span className="fn">create</span>(persona=<span className="str">"persona_007"</span>, reset_state=<span className="kw">True</span>)
              </div>

              <h3>Mobile layer</h3>
              <p>Android personas run on redroid (AOSP 12). Default device is SM-A546B. Each container gets 21 APK slots. WebView APK 289 MB. Docker image 2.51 GB. Proxy layer: 10× Huawei E3372 modems on Tele2 Russia SIMs — <code>mobile-ru-1</code> through <code>mobile-ru-10</code>.</p>

              <div className="callout">
                <strong>Custom personas:</strong> Partner tier only. Onboarding takes 1-2 weeks and requires a 30+ day warm-up window per persona to age the cookie jar and rule-engine history.
              </div>
            </>
          )}
        </article>
      </div>
    </div>
  );
};

Object.assign(window, { VAPricing, VADocs });