// Variant A — App shell + all pages
// Sepia / mono / yellow-gold aesthetic. Dense, document-like.
// Everything lives inside .vAa-root to keep styles scoped.
// Content reflects Arkon v0.8 closed-beta reality (apr 2026).

const vAapp_persona_rows = [
  ['persona_007',   'Moscow · RU',        'mobile_android · WebView Shell', '2,847', 'apr 22', '96%', 'reserved'],
  ['persona_1337',  'Moscow · RU',        'mobile_android · Chrome 147',    '612',   'apr 22', '91%', 'active'],
  ['persona_412',   'Berlin · DE',        'desktop · Chrome 147 · M1',      '438',   'apr 21', '89%', 'active'],
  ['persona_893',   'New York · US',      'desktop · Firefox 127 · Win 11', '327',   'apr 20', '84%', 'active'],
  ['persona_2045',  'Moscow · RU',        'mobile_ios · Safari iOS 17',     '284',   'apr 20', '90%', 'active'],
  ['persona_0451',  'Tokyo · JP',         'desktop · Safari 17 · M2',       '196',   'apr 19', '87%', 'active'],
  ['persona_3021',  'Yekaterinburg · RU', 'mobile_ios · Safari iOS 17',     '142',   'apr 19', '83%', 'active'],
  ['persona_0088',  'London · UK',        'desktop · Edge 128 · Win 10',    '118',   'apr 18', '85%', 'idle'],
];

// cost formula: duration_seconds / 60 * $0.80 (early-access rate)
const vAapp_session_rows = [
  ['ses_b767dd', 'avito.ru/moskva/iphone_15',  'persona_007',  '38.2s',  '200 OK',    'passed',     '$0.51'],
  ['ses_5a3bc8', 'vk.com/feed',                'persona_412',  '24.7s',  '200 OK',    'passed',     '$0.33'],
  ['ses_792f4a', 'ozon.ru/category/laptop',    'persona_1337', '47.1s',  '200 OK',    'passed',     '$0.63'],
  ['ses_50c6c5', 'yandex.ru/search',           'persona_893',  '11.4s',  '200 OK',    'passed',     '$0.15'],
  ['ses_7ba3d0', 'avito.ru/moskva/kvartiry',   'persona_2045', '65.8s',  'challenge', 'passed',     '$0.88'],
  ['ses_f6143e', 'vk.com/login',               'persona_0451', '18.3s',  '200 OK',    'passed',     '$0.24'],
  ['ses_1f9a8d', '2gis.ru/moscow',             'persona_3021', '31.5s',  '200 OK',    'passed',     '$0.42'],
  ['ses_9cf206', 'ozon.ru/product/1024',       'persona_0088', '55.2s',  '200 OK',    'passed',     '$0.74'],
  ['ses_3b4a11', 'avito.ru/rossiya',           'persona_412',  '22.1s',  '200 OK',    'passed',     '$0.29'],
  ['ses_e71009', 'cloudflare.com',             'persona_893',  '14.6s',  'challenge', 'challenged', '$0.19'],
  ['ses_f12aa4', 'vk.com/id1',                 'persona_1337', '47.9s',  '200 OK',    'passed',     '$0.64'],
  ['ses_88ccf2', 'yandex.ru/maps',             'persona_0451', '8.2s',   '200 OK',    'passed',     '$0.11'],
  ['ses_4d2b91', 'google.com/search',          'persona_412',  '11.4s',  '200 OK',    'passed',     '$0.15'],
  ['ses_6a18fe', 'avito.ru/moskva/rabota',     'persona_007',  '73.5s',  '200 OK',    'passed',     '$0.98'],
  ['ses_b2e044', 'ozon.ru/search',             'persona_2045', '29.8s',  '429',       'failed',     '$0.40'],
  ['ses_91cc0d', 'vk.com/wall',                'persona_1337', '52.0s',  '200 OK',    'passed',     '$0.69'],
  ['ses_aa3317', 'yandex.ru/maps',             'persona_0088', '33.7s',  '200 OK',    'passed',     '$0.45'],
  ['ses_c7f528', 'avito.ru/moskva/avto',       'persona_893',  '66.2s',  'challenge', 'passed',     '$0.88'],
  ['ses_e5dd2b', '2gis.ru/spb',                'persona_3021', '19.4s',  '200 OK',    'passed',     '$0.26'],
  ['ses_12afbb', 'vk.com/feed',                'persona_007',  '41.7s',  'challenge', 'challenged', '$0.56'],
  ['ses_dd7640', 'ozon.ru/cart',               'persona_412',  '24.5s',  '200 OK',    'passed',     '$0.33'],
  ['ses_77e109', 'avito.ru/sankt-peterburg',   'persona_2045', '58.3s',  '200 OK',    'passed',     '$0.78'],
  ['ses_33b0a8', 'linkedin.com/feed',          'persona_0451', '7.8s',   '200 OK',    'passed',     '$0.10'],
  ['ses_50c7fd', 'linkedin.com/jobs',          'persona_893',  '89.1s',  '403',       'failed',     '$1.19'],
];

// ----------------- Shared shell -----------------
const VAAppShell = ({page, setPage, children, setTopPage}) => {
  const nav = [
    ['overview', 'overview'],
    ['sessions', 'sessions'],
    ['personas', 'personas'],
    ['keys',     'api keys'],
    ['usage',    'usage & billing'],
    ['settings', 'settings'],
  ];
  return (
    <div className="vAa-root">
      <aside className="vAa-side">
        <div className="vAa-mark" onClick={() => setTopPage('landing')}>
          arkon <span>/ console</span>
        </div>
        <div className="vAa-env">
          <span className="vAa-dot"/>
          env: <span className="vAa-acc">beta · v0.8</span><br/>
          org: early-access
        </div>
        <nav className="vAa-nav">
          {nav.map(n => (
            <a key={n[0]}
               className={page === n[0] ? 'on' : ''}
               onClick={() => setPage(n[0])}>
              {n[1]}
            </a>
          ))}
        </nav>
        <div className="vAa-foot">
          <div style={{color:'#5a5448', marginBottom:6}}>v0.8.3 · apr 22</div>
          <div style={{display:'flex', gap:10}}>
            <span className="vAa-link" onClick={() => setTopPage('docs')}>docs</span>
            <span className="vAa-link" style={{opacity:0.4, cursor:'default'}}>status</span>
            <span className="vAa-link" style={{opacity:0.4, cursor:'default'}}>discord</span>
          </div>
        </div>
      </aside>
      <main className="vAa-main">{children}</main>
    </div>
  );
};

// ----------------- Overview -----------------
const VAOverview = ({setPage, openSession}) => {
  const stats = [
    ['browserscan authenticity', '87%',       'desktop · 15/15 mobile',  '[measured · 2026-04-21]'],
    ['sessions · last 24h',      '58',        'beta cohort traffic',     '+9 vs yesterday'],
    ['minutes this month',       '82 / 200',  'beta allocation',         '$65.60 at $0.80/min'],
  ];
  return (
    <>
      <header className="vAa-phdr">
        <div className="vAa-breadcrumb">~ / console / <span>overview</span></div>
        <h1 className="vAa-h1">Overview</h1>
        <p className="vAa-sub">Signed in · early access · beta 3 of 10 teams approved · wednesday 22 april 2026 · eu-west-1 (armenia).</p>
      </header>

      <section className="vAa-stats">
        {stats.map(s => (
          <div key={s[0]} className="vAa-stat">
            <div className="lbl">{s[0]}</div>
            <div className="num">{s[1]}</div>
            <div className="cap">{s[2]}</div>
            <div className="dl">{s[3]}</div>
          </div>
        ))}
      </section>

      <section className="vAa-section">
        <div className="vAa-sec-hd">
          <div>§ detection sweeps — last run 2026-04-21</div>
          <div style={{color:'#5a5448'}}>measured against public probes</div>
        </div>
        <div className="vAa-spark">
          {[
            ['browserscan · desktop',   87, 42],
            ['browserscan · mobile',   100, 53],
            ['sannysoft · desktop',    100, 71],
            ['iphey · desktop',        100, 64],
            ['nowsecure · mobile',     100, 58],
            ['creepjs · desktop',       82, 48],
          ].map(row => (
            <div key={row[0]} className="vAa-row">
              <span className="nm">{row[0]}</span>
              <div className="bar-wrap">
                <div className="ark" style={{width: row[1]+'%'}}/>
                <div className="pws" style={{width: row[2]+'%'}}/>
              </div>
              <span className="num">{row[1]}</span>
              <span className="num dim">{row[2]}</span>
            </div>
          ))}
        </div>
        <div className="vAa-legend">
          <span><i className="sw ark"/> arkon (patched chromium 147)</span>
          <span><i className="sw pws"/> stock chromium (baseline)</span>
        </div>
      </section>

      <section className="vAa-section">
        <div className="vAa-sec-hd">
          <div>§ recent sessions</div>
          <a className="vAa-link" onClick={() => setPage('sessions')}>view all {vAapp_session_rows.length} →</a>
        </div>
        <table className="vAa-table">
          <thead>
            <tr><th>id</th><th>target</th><th>persona</th><th>duration</th><th>result</th><th>cost</th></tr>
          </thead>
          <tbody>
            {vAapp_session_rows.slice(0, 5).map(r => (
              <tr key={r[0]} onClick={() => openSession(r[0])}>
                <td className="mono acc">{r[0]}</td>
                <td>{r[1]}</td>
                <td className="mono dim">{r[2]}</td>
                <td>{r[3]}</td>
                <td>
                  <span className={`vAa-badge ${r[5]==='passed' ? 'ok' : r[5]==='challenged' ? 'idle' : 'bad'}`}>{r[5]}</span>
                  <span style={{marginLeft:8, color:'#5a5448', fontSize:11}}>{r[4]}</span>
                </td>
                <td className="num">{r[6]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      <section className="vAa-section">
        <div className="vAa-sec-hd">
          <div>§ quick start</div>
          <div style={{color:'#5a5448'}}>ark_mission api · async</div>
        </div>
        <div className="vAa-quick">
          <pre className="vAa-code">
<span className="cm"># 1. install</span>{'\n'}
$ pip install arkon{'\n\n'}
<span className="cm"># 2. export key (create in api keys tab)</span>{'\n'}
$ export ARKON_API_KEY=<span className="str">ark_live_7f2a...</span>{'\n\n'}
<span className="cm"># 3. open a browser and run a mission</span>{'\n'}
<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">"arkady_007"</span>) <span className="kw">as</span> b:{'\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'}
    ){'\n'}
    <span className="fn">print</span>(result.items)  <span className="cm"># 149 listings, similar to our avito E2E</span>
          </pre>
          <div className="vAa-quick-side">
            <p>Beta allocation: 200 session-minutes / month. You've used <strong>82 min</strong> so far.</p>
            <p>Next step: <span className="vAa-link">ark_mission() grammar</span> · <span className="vAa-link">persona library (1,008)</span> · <span className="vAa-link">file false-positive</span></p>
          </div>
        </div>
      </section>
    </>
  );
};

// ----------------- Sessions list -----------------
const VASessions = ({openSession}) => {
  const [q, setQ] = React.useState('');
  const [status, setStatus] = React.useState('all');
  const [range, setRange] = React.useState('24h');
  const [persona, setPersona] = React.useState('all');
  const filtered = vAapp_session_rows.filter(r =>
    (!q || r[1].toLowerCase().includes(q.toLowerCase()))
    && (status === 'all' || r[5] === status)
    && (persona === 'all' || r[2] === persona)
  );
  const uniquePersonas = [...new Set(vAapp_session_rows.map(r => r[2]))];
  return (
    <>
      <header className="vAa-phdr">
        <div className="vAa-breadcrumb">~ / console / <span>sessions</span></div>
        <h1 className="vAa-h1">Sessions</h1>
        <p className="vAa-sub">Live and historical sessions. Replay retention 30 days during beta · auto-delete after. BYO-key encryption on partner tier.</p>
      </header>

      <div className="vAa-toolbar">
        <div className="vAa-segment">
          {['24h','7d','30d'].map(r => (
            <button key={r} className={range === r ? 'on' : ''} onClick={() => setRange(r)}>last {r}</button>
          ))}
        </div>
        <div className="vAa-segment">
          {['all','passed','challenged','failed'].map(s => (
            <button key={s} className={status === s ? 'on' : ''} onClick={() => setStatus(s)}>{s}</button>
          ))}
        </div>
        <select value={persona} onChange={e => setPersona(e.target.value)} className="mono" style={{fontSize:12, padding:'4px 8px'}}>
          <option value="all">all personas</option>
          {uniquePersonas.map(p => <option key={p} value={p}>{p}</option>)}
        </select>
        <div className="vAa-search">
          <span>/</span>
          <input placeholder="entry url…" value={q} onChange={e => setQ(e.target.value)}/>
        </div>
        <div style={{marginLeft:'auto', color:'#5a5448', fontSize:12}}>
          showing {filtered.length} of {vAapp_session_rows.length}
        </div>
        <button className="vAa-btn" disabled style={{opacity:0.4, cursor:'not-allowed'}}>export csv · post-GA</button>
      </div>

      <section className="vAa-section" style={{padding:0, border:'none'}}>
        <table className="vAa-table full">
          <thead>
            <tr>
              <th>id</th><th>target</th><th>persona</th>
              <th>duration</th><th>result</th><th>response</th>
              <th className="num">cost</th><th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(r => (
              <tr key={r[0]} onClick={() => openSession(r[0])}>
                <td className="mono acc">{r[0]}</td>
                <td>{r[1]}</td>
                <td className="mono dim">{r[2]}</td>
                <td>{r[3]}</td>
                <td><span className={`vAa-badge ${r[5]==='passed' ? 'ok' : r[5]==='challenged' ? 'idle' : 'bad'}`}>{r[5]}</span></td>
                <td className="mono dim">{r[4]}</td>
                <td className="num">{r[6]}</td>
                <td className="dim">open →</td>
              </tr>
            ))}
            {filtered.length === 0 && (
              <tr><td colSpan={8} style={{padding:'48px 20px', textAlign:'center', color:'#5a5448'}}>
                No sessions match. Try clearing the persona filter or widening date range.
              </td></tr>
            )}
          </tbody>
        </table>
      </section>
    </>
  );
};

// ----------------- Session detail -----------------
const VASessionDetail = ({sessionId, setPage}) => {
  const timeline = [
    [ 0.00, 'sys', 'session.boot · persona=arkady_007 · proxy=mobile-ru-1'],
    [ 0.87, 'sys', 'persona.rules.applied · 24 checks (nav_require_search_entry, ip_never_rotate_on_captcha, timing_active_hours, session_idle_ratio, destroy_tz_ip_mismatch, …)'],
    [ 1.12, 'net', 'proxy.bind · modem=hilink-3 · ja4=t13d1516h2_8daaf6152771_b186095e22b6 · rtt=42ms'],
    [ 2.34, 'nav', 'page.goto · url=https://avito.ru'],
    [ 3.76, 'sys', 'ark_mission.step_1_of_4 · goal="scrape top 30 iphone 15"'],
    [ 5.02, 'cdp', 'cdp.input.dispatch · patched (canvas noise injection)'],
    [ 7.11, 'cdp', 'cdp.input.dispatch · patched (audio fingerprint smoothing)'],
    [ 9.77, 'sys', 'challenge.detected · vendor=cloudflare-turnstile'],
    [12.44, 'sys', 'challenge.behavioral_pass · method=rule_based · elapsed=2.67s'],
    [18.91, 'sys', 'extract.schema_match · 149 listings / 43s'],
    [38.20, 'sys', 'session.close · reason=user_requested'],
  ];
  const __total = timeline[timeline.length - 1][0];
  const __cost = (__total / 60 * 0.80).toFixed(2);
  return (
    <>
      <header className="vAa-phdr">
        <div className="vAa-breadcrumb">
          ~ / console / <a className="vAa-link" onClick={() => setPage('sessions')}>sessions</a> / <span>{sessionId}</span>
        </div>
        <div style={{display:'flex', alignItems:'baseline', gap:20, flexWrap:'wrap'}}>
          <h1 className="vAa-h1">{sessionId}</h1>
          <span className="vAa-badge ok">passed</span>
          <span style={{color:'#5a5448', fontSize:13}}>arkady_007 · 2026-04-22 06:17 UTC · {__total.toFixed(1)}s · ${__cost} · proxy mobile-ru-1 · key <span className="mono">ark_live_7f2a…</span></span>
        </div>
      </header>

      <div className="vAa-tabs">
        <a className="on">events</a>
        <a style={{opacity:0.4, cursor:'default'}}>console <small>soon</small></a>
        <a style={{opacity:0.4, cursor:'default'}}>network (38) <small>soon</small></a>
        <a style={{opacity:0.4, cursor:'default'}}>dom <small>soon</small></a>
        <a style={{opacity:0.4, cursor:'default'}}>telemetry <small>soon</small></a>
      </div>

      <section className="vAa-section">
        <div className="vAa-grid2">
          <div>
            <div style={{color:'#5a5448', fontSize:11, marginBottom:8, letterSpacing:'0.08em', textTransform:'uppercase'}}>§ event timeline</div>
            <div className="vAa-tl">
              {timeline.map((e, i) => (
                <div key={i} className={`vAa-te ${e[1]}`}>
                  <span className="t">{e[0].toFixed(2)}s</span>
                  <span className="k">{e[1]}</span>
                  <span className="tx">{e[2]}</span>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div style={{color:'#5a5448', fontSize:11, marginBottom:8, letterSpacing:'0.08em', textTransform:'uppercase'}}>§ metadata</div>
            <dl className="vAa-meta">
              <dt>persona</dt><dd>arkady_007 · mobile_android · redroid (AOSP 12)</dd>
              <dt>device</dt><dd>SM-A546B default · 412 × 915 · 2.625x DPR</dd>
              <dt>user agent</dt><dd className="mono small">Mozilla/5.0 (Linux; Android 12; SM-A546B) AppleWebKit/537.36 Chrome/147.0.7718.0 Mobile</dd>
              <dt>chromium</dt><dd>147.0.7718.0 · V8 14.7.136 · 19 patches (3,944 LOC)</dd>
              <dt>locale</dt><dd>ru-RU · Europe/Moscow</dd>
              <dt>proxy</dt><dd className="mono">mobile-ru-1 · huawei e3372 · tele2 ru</dd>
              <dt>tls ja4</dt><dd className="mono">t13d1516h2_8daaf6152771_b186095e22b6</dd>
              <dt>rules engine</dt><dd>24 checks applied · 0 violations</dd>
              <dt>started</dt><dd>2026-04-22 06:17:03 UTC</dd>
              <dt>finished</dt><dd>2026-04-22 06:17:41 UTC · {__total.toFixed(1)}s</dd>
              <dt>api key</dt><dd className="mono">ark_live_7f2a…</dd>
              <dt>billed</dt><dd>{(__total/60).toFixed(3)} min × $0.80 = ${__cost}</dd>
            </dl>
          </div>
        </div>
      </section>

      <section className="vAa-section">
        <div style={{color:'#5a5448', fontSize:11, marginBottom:12, letterSpacing:'0.08em', textTransform:'uppercase'}}>§ cursor trace</div>
        <div className="vAa-trace">
          <svg viewBox="0 0 780 260" style={{width:'100%', display:'block'}}>
            <rect width="780" height="260" fill="#ebe4d0"/>
            {Array.from({length: 13}).map((_, i) => (
              <line key={'v'+i} x1={i*60} y1={0} x2={i*60} y2={260} stroke="#d9d0b4" strokeWidth="0.5"/>
            ))}
            {Array.from({length: 5}).map((_, i) => (
              <line key={'h'+i} x1={0} y1={i*60} x2={780} y2={i*60} stroke="#d9d0b4" strokeWidth="0.5"/>
            ))}
            <path d="M 40 240 Q 200 180 260 120 Q 320 60 380 90 T 440 150 Q 520 200 500 160 L 620 130"
              fill="none" stroke="#1a1813" strokeWidth="1.4"/>
            {[[40,240],[260,120],[380,90],[500,160],[620,130]].map((p,i) => (
              <circle key={i} cx={p[0]} cy={p[1]} r="3" fill="#b8860b"/>
            ))}
            <g fontFamily="ui-monospace, monospace" fontSize="9" fill="#5a5448">
              <text x={46} y={255}>t=2.34</text>
              <text x={266} y={115}>t=5.02</text>
              <text x={386} y={85}>t=9.77</text>
              <text x={506} y={175}>t=12.44</text>
              <text x={626} y={125}>t=38.20</text>
            </g>
          </svg>
          <div style={{fontSize:11, color:'#5a5448', marginTop:8, fontFamily:'ui-monospace, monospace'}}>
            trace · 2,418 samples · resample: 60hz · persona arkady_007 · 24 behavioral rules applied
          </div>
        </div>
      </section>
    </>
  );
};

// ----------------- Personas -----------------
const VAPersonas = () => {
  const personas = [
    ['persona_007',  'Arkady Bondarev',    'mobile_android · WebView Shell', 'ru-RU', 'reserved for Claude', '96%', 'reserved'],
    ['persona_1337', '—',                  'mobile_android · Chrome 147',    'ru-RU', 'Moscow',              '91%', 'active'],
    ['persona_412',  'berlin-chrome-m1',   'desktop · Chrome 147 · M1',      'de-DE', 'Berlin',              '89%', 'active'],
    ['persona_893',  'nyc-firefox-w11',    'desktop · Firefox 127 · Win 11', 'en-US', 'New York',            '84%', 'active'],
    ['persona_2045', 'moscow-safari-ios',  'mobile_ios · Safari iOS 17',     'ru-RU', 'Moscow',              '90%', 'active'],
    ['persona_0451', 'tokyo-safari-m2',    'desktop · Safari 17 · M2',       'ja-JP', 'Tokyo',               '87%', 'active'],
    ['persona_3021', '—',                  'mobile_ios · Safari iOS 17',     'ru-RU', 'Yekaterinburg',       '83%', 'active'],
    ['persona_0088', 'london-edge-win',    'desktop · Edge 128 · Win 10',    'en-GB', 'London',              '85%', 'idle'],
    ['persona_1140', '—',                  'mobile_android · Chrome 147',    'ru-RU', 'Novosibirsk',         '89%', 'active'],
    ['persona_0612', 'saopaulo-chrome-lin','desktop · Chrome 147 · Linux',   'pt-BR', 'São Paulo',           '79%', 'idle'],
    ['persona_0284', 'seoul-whale-m3',     'desktop · Whale 3 · M3',         'ko-KR', 'Seoul',               '82%', 'active'],
    ['persona_1802', 'mumbai-chrome-a',    'mobile_android · Chrome 147',    'hi-IN', 'Mumbai',              '76%', 'active'],
    ['persona_0330', 'sf-arc-m1',          'desktop · Arc 1.70 · M1',        'en-US', 'San Francisco',       '93%', 'active'],
    ['persona_0708', '—',                  'mobile_android · Chrome 147',    'ru-RU', 'Kazan',               '88%', 'active'],
    ['persona_1905', '—',                  'mobile_ios · Safari iOS 16',     'en-US', 'Los Angeles',         '84%', 'active'],
    ['persona_2233', 'paris-firefox-m2',   'desktop · Firefox 128 · M2',     'fr-FR', 'Paris',               '87%', 'active'],
    ['persona_0067', '—',                  'mobile_android · redroid',       'ru-RU', 'Krasnodar',           '88%', 'active'],
    ['persona_0901', 'amsterdam-chrome',   'desktop · Chrome 147 · Win 11',  'nl-NL', 'Amsterdam',           '85%', 'active'],
    ['persona_4120', '—',                  'mobile_android · WebView Shell', 'ru-RU', 'Nizhny Novgorod',     '89%', 'active'],
    ['persona_0515', 'istanbul-chrome-a',  'mobile_android · Chrome 147',    'tr-TR', 'Istanbul',            '82%', 'idle'],
    ['persona_1688', '—',                  'desktop · Chrome 147 · Linux',   'ru-RU', 'Moscow',              '85%', 'active'],
    ['persona_0299', 'sydney-safari-m2',   'desktop · Safari 17 · M2',       'en-AU', 'Sydney',              '87%', 'active'],
    ['persona_3100', '—',                  'mobile_ios · Safari iOS 17',     'ru-RU', 'Sochi',               '86%', 'active'],
    ['persona_0074', '—',                  'mobile_android · Chrome 147',    'ru-RU', 'Vladivostok',         '86%', 'active'],
  ];
  return (
    <>
      <header className="vAa-phdr">
        <div className="vAa-breadcrumb">~ / console / <span>personas</span></div>
        <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
          <div>
            <h1 className="vAa-h1">Personas</h1>
            <p className="vAa-sub">Synthetic identities — fingerprint + 24 behavioral rules + persistent cookie jar (up to 137 entries). Custom personas on partner tier.</p>
          </div>
          <button className="vAa-btn primary" onClick={() => window.location.href='mailto:hi@tryarkon.com?subject=Custom%20persona%20request'}>+ request custom</button>
        </div>
      </header>

      <section className="vAa-stats" style={{marginBottom:24}}>
        <div className="vAa-stat"><div className="lbl">total personas</div><div className="num">1,008</div><div className="cap">production library</div><div className="dl">+12 this month</div></div>
        <div className="vAa-stat"><div className="lbl">desktop</div><div className="num">247</div><div className="cap">chrome · firefox · safari · edge</div><div className="dl">—</div></div>
        <div className="vAa-stat"><div className="lbl">mobile_android</div><div className="num">592</div><div className="cap">redroid + WebView Shell</div><div className="dl">—</div></div>
        <div className="vAa-stat"><div className="lbl">mobile_ios · locales</div><div className="num">169 · 47</div><div className="cap">ios 16–17 · 47 locales</div><div className="dl">—</div></div>
      </section>

      <section className="vAa-section" style={{padding:0, border:'none'}}>
        <table className="vAa-table full">
          <thead>
            <tr>
              <th>id</th><th>name</th><th>stack</th><th>locale</th>
              <th>origin</th>
              <th className="num">browserscan</th>
              <th>state</th><th></th>
            </tr>
          </thead>
          <tbody>
            {personas.map(r => (
              <tr key={r[0]}>
                <td className="mono acc">{r[0]}</td>
                <td className="dim">{r[1]}</td>
                <td className="dim">{r[2]}</td>
                <td className="dim">{r[3]}</td>
                <td>{r[4]}</td>
                <td className="num">{r[5]}</td>
                <td><span className={`vAa-badge ${r[6]==='active' ? 'ok' : 'idle'}`}>{r[6]}</span></td>
                <td className="dim">inspect →</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{padding:'16px 20px', fontSize:12, color:'#5a5448', borderTop:'1px solid #d9d0b4'}}>
          sessions: 2,847 on persona_007 · browserscan median 87% across library · showing 24 of 1,008
        </div>
      </section>
    </>
  );
};

// ----------------- API Keys -----------------
const VAKeys = () => {
  const [showCreate, setShowCreate] = React.useState(false);
  const keys = [
    ['production-v1',   'ark_live_7f2a…', '2026-01-12', '4 min ago',  'live', 'active'],
    ['staging-agents',  'ark_live_b392…', '2026-02-04', '1h ago',     'live', 'active'],
    ['local-dev',       'ark_test_c881…', '2026-03-17', '2 days ago', 'test', 'active'],
    ['ci-bench-runner', 'ark_test_7a00…', '2026-04-08', '42 min ago', 'test', 'active'],
  ];
  return (
    <>
      <header className="vAa-phdr">
        <div className="vAa-breadcrumb">~ / console / <span>api keys</span></div>
        <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
          <div>
            <h1 className="vAa-h1">API Keys</h1>
            <p className="vAa-sub">Keys shown once at creation. Hash stored. Use <code>ark_test_*</code> for development — sandbox, unlimited, does not bill. <code>ark_live_*</code> is metered at $0.80/min.</p>
          </div>
          <button className="vAa-btn primary" onClick={() => setShowCreate(!showCreate)}>+ create key</button>
        </div>
      </header>

      {showCreate && (
        <section className="vAa-section" style={{background:'#ebe4d0'}}>
          <div style={{color:'#5a5448', fontSize:11, marginBottom:12, letterSpacing:'0.08em', textTransform:'uppercase'}}>§ new api key</div>
          <dl className="vAa-form">
            <dt>name</dt><dd><input defaultValue="" placeholder="e.g. production-v2" className="mono"/></dd>
            <dt>environment</dt><dd>
              <label style={{marginRight:16}}><input type="radio" name="env" defaultChecked/> <code>ark_live_</code> (metered)</label>
              <label><input type="radio" name="env"/> <code>ark_test_</code> (sandbox, free)</label>
            </dd>
            <dt>scopes</dt><dd>
              <label style={{marginRight:16}}><input type="checkbox" defaultChecked/> sessions.read</label>
              <label style={{marginRight:16}}><input type="checkbox" defaultChecked/> sessions.create</label>
              <label style={{marginRight:16}}><input type="checkbox"/> personas.write</label>
              <label><input type="checkbox"/> billing.read</label>
            </dd>
          </dl>
          <div style={{display:'flex', gap:10, marginTop:12}}>
            <button className="vAa-btn primary" disabled style={{opacity:0.4, cursor:'not-allowed'}}>create key · beta</button>
            <button className="vAa-btn" onClick={() => setShowCreate(false)}>cancel</button>
          </div>
        </section>
      )}

      <section className="vAa-section">
        <div style={{background:'#ebe4d0', border:'1px solid #b8860b', padding:'12px 16px', fontSize:13, marginBottom:20}}>
          <strong style={{color:'#b8860b'}}>beta note</strong> — during closed beta, live keys are gated by use-case review. Email <span className="mono">beta@tryarkon.com</span> to request additional production access.
        </div>
        <table className="vAa-table full">
          <thead>
            <tr><th>name</th><th>key</th><th>created</th><th>last used</th><th>env</th><th>state</th><th></th></tr>
          </thead>
          <tbody>
            {keys.map(k => (
              <tr key={k[0]}>
                <td>{k[0]}</td>
                <td className="mono acc">{k[1]}</td>
                <td className="dim">{k[2]}</td>
                <td className="dim">{k[3]}</td>
                <td><span className={`vAa-badge ${k[4]==='live' ? 'ok' : 'idle'}`}>{k[4]}</span></td>
                <td><span className={`vAa-badge ${k[5]==='active' ? 'ok' : k[5]==='revoked' ? 'bad' : 'idle'}`}>{k[5]}</span></td>
                <td className="dim">rotate · revoke</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </>
  );
};

// ----------------- Usage & Billing -----------------
const VAUsage = () => {
  // 22 daily rows (apr 1 .. apr 22) — closed-beta volume: sub-15 min/day
  const days = Array.from({length: 22}).map((_, i) => ({
    d: i+1,
    v: Math.max(1, Math.round(3 + Math.sin(i*0.6)*3 + (i % 5 === 0 ? 1 : 0) + (i > 18 ? 4 : 0) + (i*0.18)))
  }));
  const max = Math.max(...days.map(d => d.v));
  return (
    <>
      <header className="vAa-phdr">
        <div className="vAa-breadcrumb">~ / console / <span>usage &amp; billing</span></div>
        <h1 className="vAa-h1">Usage &amp; Billing</h1>
        <p className="vAa-sub">April 2026 cycle · closed-beta allocation · next invoice 30 apr</p>
      </header>

      <section className="vAa-stats">
        <div className="vAa-stat"><div className="lbl">session-minutes</div><div className="num">82 / 200</div><div className="cap">beta allocation</div><div className="dl">+12 today</div></div>
        <div className="vAa-stat"><div className="lbl">running total (MTD)</div><div className="num">$65.60</div><div className="cap">projected ~$120 EOM</div><div className="dl">early-access rate</div></div>
        <div className="vAa-stat"><div className="lbl">rate</div><div className="num">$0.80<span style={{fontSize:14, color:'#5a5448'}}>/min</span></div><div className="cap">locked 6 mo post-GA</div><div className="dl">—</div></div>
        <div className="vAa-stat"><div className="lbl">invoices paid</div><div className="num">2</div><div className="cap">since feb 2026</div><div className="dl">$143.60 ttl</div></div>
      </section>

      <section className="vAa-section">
        <div className="vAa-sec-hd">
          <div>§ session-minutes per day — april 2026</div>
          <div style={{color:'#5a5448'}}>daily, UTC · apr 1 — apr 22</div>
        </div>
        <div className="vAa-chart">
          {days.map(d => (
            <div key={d.d} className="vAa-bar" style={{height: (d.v/max*100)+'%'}} title={`apr ${d.d}: ${d.v} min`}/>
          ))}
        </div>
        <div className="vAa-chart-axis">
          <span>apr 1</span><span>apr 8</span><span>apr 15</span><span>apr 22</span>
        </div>
      </section>

      <section className="vAa-section">
        <div className="vAa-sec-hd"><div>§ recent invoices</div><div style={{color:'#5a5448'}}>beta started feb 2026 · pdf receipts available</div></div>
        <table className="vAa-table full">
          <thead><tr><th>period</th><th>minutes</th><th>rate</th><th>overages</th><th className="num">total</th><th>status</th><th></th></tr></thead>
          <tbody>
            {[
              ['mar 2026', '87', '$0.80/min', '—', '$69.60', 'paid', 'receipt.pdf'],
              ['feb 2026', '92', '$0.80/min', '—', '$74.00', 'paid', 'receipt.pdf'],
            ].map(r => (
              <tr key={r[0]}>
                <td>{r[0]}</td><td className="num">{r[1]}</td><td className="dim">{r[2]}</td>
                <td className="dim">{r[3]}</td><td className="num">{r[4]}</td>
                <td><span className="vAa-badge ok">{r[5]}</span></td>
                <td className="dim acc">{r[6]}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </>
  );
};

// ----------------- Settings -----------------
const VASettings = () => {
  const [tab, setTab] = React.useState('profile');
  const [deleteConfirm, setDeleteConfirm] = React.useState('');
  return (
    <>
      <header className="vAa-phdr">
        <div className="vAa-breadcrumb">~ / console / <span>settings</span></div>
        <h1 className="vAa-h1">Settings</h1>
        <p className="vAa-sub">Org-level configuration. Changes audited.</p>
      </header>

      <div className="vAa-tabs">
        {['profile','team','notifications','integrations','developer','danger'].map(t => (
          <a key={t} className={tab === t ? 'on' : ''} onClick={() => setTab(t)}>{t}</a>
        ))}
      </div>

      {tab === 'profile' && (
        <section className="vAa-section">
          <div className="vAa-sec-hd"><div>§ profile</div><div style={{color:'#5a5448'}}>applied to new sessions unless overridden</div></div>
          <dl className="vAa-form">
            <dt>org name</dt><dd><input defaultValue=""/></dd>
            <dt>display slug</dt><dd><input defaultValue="" placeholder="my-org" className="mono"/></dd>
            <dt>timezone</dt><dd><select defaultValue="UTC"><option>UTC</option><option>Europe/Moscow</option><option>Europe/Berlin</option><option>America/Los_Angeles</option></select></dd>
            <dt>support email</dt><dd><input defaultValue=""/></dd>
          </dl>
        </section>
      )}

      {tab === 'team' && (
        <section className="vAa-section">
          <div className="vAa-sec-hd"><div>§ team</div><div style={{color:'#5a5448'}}>sso/scim on partner tier</div></div>
          <div className="vAa-danger" style={{border:'1px dashed #d9d0b4', background:'transparent'}}>
            <div>
              <strong>No team members yet.</strong>
              <p>Teams open post-GA. During closed beta each org has one seat.</p>
            </div>
            <button className="vAa-btn" disabled style={{opacity:0.5, cursor:'not-allowed'}}>+ invite (post-GA)</button>
          </div>
        </section>
      )}

      {tab === 'notifications' && (
        <section className="vAa-section">
          <div className="vAa-sec-hd"><div>§ notifications</div><div style={{color:'#5a5448'}}>email only during beta · webhooks post-GA</div></div>
          <dl className="vAa-form">
            <dt>notify email</dt><dd><input defaultValue="" placeholder="ops@your-company.com"/></dd>
            <dt>events</dt><dd>
              <div><label><input type="checkbox" defaultChecked/> session.failed (403 / 429 / 500)</label></div>
              <div><label><input type="checkbox" defaultChecked/> quota.80_percent</label></div>
              <div><label><input type="checkbox" defaultChecked/> invoice.ready</label></div>
              <div><label><input type="checkbox"/> session.completed (noisy)</label></div>
              <div><label><input type="checkbox"/> persona.challenge_detected</label></div>
            </dd>
          </dl>
        </section>
      )}

      {tab === 'integrations' && (
        <section className="vAa-section">
          <div className="vAa-sec-hd"><div>§ integrations</div><div style={{color:'#5a5448'}}>none active · more post-GA</div></div>
          <div className="vAa-danger" style={{border:'1px dashed #d9d0b4', background:'transparent'}}>
            <div><strong>Sentry</strong><p>Forward failed sessions as errors with full event trace.</p></div>
            <button className="vAa-btn" disabled style={{opacity:0.5, cursor:'not-allowed'}}>post-GA</button>
          </div>
          <div className="vAa-danger" style={{border:'1px dashed #d9d0b4', background:'transparent'}}>
            <div><strong>Datadog</strong><p>Export session metrics as traces and logs.</p></div>
            <button className="vAa-btn" disabled style={{opacity:0.5, cursor:'not-allowed'}}>post-GA</button>
          </div>
          <div className="vAa-danger" style={{border:'1px dashed #d9d0b4', background:'transparent'}}>
            <div><strong>Slack</strong><p>Beta channel alerts. Post-GA webhooks for team incidents.</p></div>
            <button className="vAa-btn" disabled style={{opacity:0.5, cursor:'not-allowed'}}>post-GA</button>
          </div>
        </section>
      )}

      {tab === 'developer' && (
        <section className="vAa-section">
          <div className="vAa-sec-hd"><div>§ developer</div><div style={{color:'#5a5448'}}>defaults for new sessions · can be overridden per-call</div></div>
          <dl className="vAa-form">
            <dt>default region</dt><dd>
              <select defaultValue="eu-west-1">
                <option value="eu-west-1">eu-west-1 (armenia)</option>
                <option value="ru-central-1">ru-central-1 (moscow farm)</option>
              </select>
              <span style={{color:'#5a5448', marginLeft:8}}>more regions post-GA</span>
            </dd>
            <dt>default persona</dt><dd><select><option>random</option><option>arkady_007</option><option>persona_1337</option><option>persona_412</option><option>persona_893</option></select></dd>
            <dt>mission budget</dt><dd><input defaultValue="10" style={{width:80}} className="mono"/> <span style={{color:'#5a5448'}}>minutes · hard cap 30 during beta</span></dd>
            <dt>idle billing</dt><dd><label><input type="checkbox" defaultChecked/> bill idle tabs at 0.1× after 30s</label></dd>
            <dt>default model</dt><dd><select defaultValue="claude-sonnet-4.6"><option>claude-sonnet-4.6</option><option>claude-opus-4.7</option></select></dd>
          </dl>
        </section>
      )}

      {tab === 'danger' && (
        <section className="vAa-section">
          <div className="vAa-sec-hd"><div>§ danger zone</div><div style={{color:'#b8860b'}}>audited — support@tryarkon.com</div></div>
          <div className="vAa-danger">
            <div>
              <strong>Export all data</strong>
              <p>Session replays, persona history, invoices. Delivered as a signed tarball within 24h.</p>
            </div>
            <button className="vAa-btn" disabled style={{opacity:0.4, cursor:'not-allowed'}}>request export · beta</button>
          </div>
          <div className="vAa-danger">
            <div>
              <strong>Purge all session replays</strong>
              <p>Permanent. Replays deleted from hot storage immediately; tombstones remain 1 year.</p>
            </div>
            <button className="vAa-btn danger" disabled style={{opacity:0.4, cursor:'not-allowed'}}>purge replays · beta</button>
          </div>
          <div className="vAa-danger">
            <div>
              <strong>Delete account</strong>
              <p>All API keys revoked. Outstanding invoices still owed. Cannot be undone. Type <code>DELETE</code> to confirm.</p>
              <input
                value={deleteConfirm}
                onChange={e => setDeleteConfirm(e.target.value)}
                placeholder="DELETE"
                className="mono"
                style={{marginTop:8, width:180}}
              />
            </div>
            <button className="vAa-btn danger" disabled={deleteConfirm !== 'DELETE'} style={{opacity: deleteConfirm === 'DELETE' ? 1 : 0.4}}>delete account</button>
          </div>
        </section>
      )}
    </>
  );
};

Object.assign(window, {
  VAAppShell, VAOverview, VASessions, VASessionDetail,
  VAPersonas, VAKeys, VAUsage, VASettings
});