// Cockpit additional screens — Table, Detail, Cmd+K, Marketing, Mobile, Settings
// Reuses helpers exposed on window from cockpit-dashboard.jsx

const monoVar = 'var(--cp-mono)';

function Frame({ theme, tokens, width = 1440, height = 920, children }) {
  const baseTheme = buildTheme(theme, tokens);
  const density = densityProfiles[tokens.density] || densityProfiles.default;
  const radius = tokens.radius ?? 8;
  const fontUI = tokens.fonts?.ui || "'Geist', system-ui, sans-serif";
  const fontMono = tokens.fonts?.mono || "'Geist Mono', monospace";
  const t = { ...baseTheme, density, radius, fontUI, fontMono };

  return (
    <div className="cp-root" style={{
      width, height, background: t.bg0, color: t.text0,
      fontFamily: fontUI, fontSize: density.bodyFs, lineHeight: 1.5,
      borderRadius: radius, overflow: 'hidden',
      border: `1px solid ${t.border}`,
      WebkitFontSmoothing: 'antialiased',
      ['--cp-radius']: `${radius}px`,
      ['--cp-radius-sm']: `${Math.max(2, radius - 2)}px`,
      ['--cp-radius-xs']: `${Math.max(2, radius - 4)}px`,
      ['--cp-mono']: fontMono,
      position: 'relative',
    }}>
      <style>{`.cp-root button, .cp-root input { font-family: inherit; }`}</style>
      {typeof children === 'function' ? children(t) : children}
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// 1. TABLE / LIST VIEW
// ─────────────────────────────────────────────────────────
const tableRows = [
  { id: 'inv_2A91F0', customer: 'Atlas Robotics', email: 'billing@atlas.io',     amount: 24800, currency: 'USD', status: 'paid',     created: '2026-04-30 13:21', method: 'card_visa' },
  { id: 'inv_2A91EC', customer: 'Northwind Trade',email: 'ar@northwind.co',      amount: 1280,  currency: 'USD', status: 'paid',     created: '2026-04-30 13:14', method: 'ach' },
  { id: 'inv_2A91DA', customer: 'Helio Studios',  email: 'finance@helio.design', amount: 9420,  currency: 'EUR', status: 'pending',  created: '2026-04-30 12:58', method: 'card_mc' },
  { id: 'inv_2A91D4', customer: 'Granite Labs',   email: 'ops@granitelabs.com',  amount: 158000,currency: 'USD', status: 'paid',     created: '2026-04-30 12:42', method: 'wire' },
  { id: 'inv_2A91C9', customer: 'Volt & Vine',    email: 'hello@voltvine.com',   amount: 6200,  currency: 'USD', status: 'failed',   created: '2026-04-30 12:33', method: 'card_visa' },
  { id: 'inv_2A91B0', customer: 'Cinder Foundry', email: 'pay@cinder.io',        amount: 3499,  currency: 'GBP', status: 'paid',     created: '2026-04-30 12:18', method: 'card_amex' },
  { id: 'inv_2A91A2', customer: 'Quill & Co.',    email: 'accounts@quill.co',    amount: 740,   currency: 'USD', status: 'refunded', created: '2026-04-30 11:51', method: 'card_visa' },
  { id: 'inv_2A9197', customer: 'Lattice Health', email: 'billing@latticehq.com',amount: 48200, currency: 'USD', status: 'paid',     created: '2026-04-30 11:33', method: 'wire' },
  { id: 'inv_2A9183', customer: 'Pine & Pixel',   email: 'ar@pinepixel.studio',  amount: 2100,  currency: 'EUR', status: 'pending',  created: '2026-04-30 11:09', method: 'card_mc' },
  { id: 'inv_2A917A', customer: 'Otter Logistics',email: 'finance@otterlog.io',  amount: 18400, currency: 'USD', status: 'paid',     created: '2026-04-30 10:48', method: 'ach' },
  { id: 'inv_2A916C', customer: 'Brick & Beam',   email: 'pay@brickandbeam.co',  amount: 5320,  currency: 'USD', status: 'paid',     created: '2026-04-30 10:22', method: 'card_visa' },
  { id: 'inv_2A915E', customer: 'Mira Aerospace', email: 'ar@miraaero.com',      amount: 91200, currency: 'USD', status: 'pending',  created: '2026-04-30 09:58', method: 'wire' },
];

// Shared pure-data arrays (reused by desktop screens + mobile variants)
const teamMembers = [
  { n:'Aria Kessler',  e:'aria@nexus.dev',     r:'Owner',     a:'Active',    l:'just now',    init:'AK', from:['chart2','chart4'] },
  { n:'Jonas Reier',   e:'jonas@nexus.dev',    r:'Admin',     a:'Active',    l:'8m ago',      init:'JR', from:['success','chart2'] },
  { n:'Mei Lin',       e:'mei@nexus.dev',      r:'Admin',     a:'Active',    l:'42m ago',     init:'ML', from:['warn','chart4'] },
  { n:'Sam Patel',     e:'sam@nexus.dev',      r:'Member',    a:'Active',    l:'2h ago',      init:'SP', from:['info','chart4'] },
  { n:'Iris Chen',     e:'iris@nexus.dev',     r:'Member',    a:'Active',    l:'yesterday',   init:'IC', from:['chart4','chart2'] },
  { n:'Devon Mwangi',  e:'devon@contractor.io',r:'Viewer',    a:'Invited',   l:'invite sent', init:'DM', from:['text3','text2'] },
  { n:'Casey Yu',      e:'casey@nexus.dev',    r:'Member',    a:'Suspended', l:'14d ago',     init:'CY', from:['error','warn'] },
];

const paletteGroups = [
  { label: 'Recent', items: [
    { i:'service', label:'billing-worker', meta:'service · eu-west-1', kbd:'↵' },
    { i:'invoice', label:'inv_2A91D4 · Granite Labs', meta:'invoice · $1,580.00 · paid' },
    { i:'page',    label:'Settings → API keys', meta:'page' },
  ]},
  { label: 'Services', items: [
    { i:'service', label:'api-gateway',     meta:'svc_a91f · us-east-1', dot:'success' },
    { i:'service', label:'auth-service',    meta:'svc_22b3 · us-east-1', dot:'success' },
    { i:'service', label:'ingest-pipeline', meta:'svc_f330 · us-east-1', dot:'success' },
    { i:'service', label:'notification-svc',meta:'svc_9a12 · eu-west-1', dot:'error' },
  ]},
  { label: 'Actions', items: [
    { i:'action', label:'Create new deploy',     meta:'context: billing-worker', kbd:'c' },
    { i:'action', label:'Open inbox',            meta:'12 unread',           kbd:'g i' },
    { i:'action', label:'Switch theme',          meta:'dark · light · high-contrast' },
    { i:'action', label:'Toggle density',        meta:'compact · default · comfy' },
  ]},
];

const marketingFeatures = [
  { icon:'cmd',    t:'Command palette', d:'Fuzzy search across services, invoices, settings, and actions. Keyboard-first.' },
  { icon:'layers', t:'Real tables',     d:'TanStack-backed, virtualised over 50k rows, with saved views and bulk actions.' },
  { icon:'pulse',  t:'Live metrics',    d:'Sparklines on every row. Heatmaps, p99, error rate — wired to your tokens.' },
  { icon:'branch', t:'Deploy timeline', d:'Every release annotated with author, commit, and rollback in one click.' },
  { icon:'gear',   t:'Theme & density', d:'Slate dark, slate light, high-contrast, plus 3 density modes — all token-driven.' },
  { icon:'users',  t:'Audit & access',  d:'Per-user activity feed, scoped API keys, SAML/OIDC ready out of the box.' },
];

const marketingStats = [
  { k:'p99 dashboard load', v:'89', u:'ms' },
  { k:'rows virtualised', v:'50k+', u:'in tables' },
  { k:'time to rebrand', v:'~1', u:'hour' },
  { k:'WCAG conformance', v:'AA', u:'minimum' },
];

function TableView({ theme, tokens }) {
  const [selected, setSelected] = React.useState(['inv_2A91F0','inv_2A91DA','inv_2A91A2']);
  const [sort, setSort] = React.useState({ k: 'created', dir: 'desc' });
  const toggle = (id) => setSelected(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
  const allOn = selected.length === tableRows.length;

  const fmt = (v, ccy) => new Intl.NumberFormat('en-US', { style:'currency', currency: ccy, minimumFractionDigits: 2 }).format(v / 100);
  const statusTone = { paid: 'healthy', pending: 'warn', failed: 'incident', refunded: 'info' };

  return (
    <Frame theme={theme} tokens={tokens}>
      {(t) => (
        <div style={{ display:'grid', gridTemplateColumns:'232px 1fr', height:'100%' }}>
          {/* sidebar (compact mirror) */}
          <Sidebar t={t} active="Invoices"/>

          <main style={{ display:'flex', flexDirection:'column', minHeight:0 }}>
            <Topbar t={t} crumbs={['Nexus Labs','production','Invoices']} cta="New invoice"/>

            {/* page header + filters */}
            <div style={{ padding:'18px 20px 12px', borderBottom:`1px solid ${t.border}` }}>
              <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:14 }}>
                <div>
                  <h1 style={{ margin:0, fontSize:22, fontWeight:600, letterSpacing:-0.4 }}>Invoices</h1>
                  <div style={{ fontSize:12.5, color:t.text2, fontFamily:monoVar, marginTop:4 }}>
                    1,248 total · <span style={{ color:t.text1 }}>$2.41M</span> last 30d
                  </div>
                </div>
                <div style={{ display:'flex', gap:6 }}>
                  <button style={ghostBtn(t)}>{I.download} Export CSV</button>
                  <button style={{
                    display:'inline-flex', alignItems:'center', gap:6, background: t.accent, color: t.accentInk,
                    border:'none', borderRadius:'var(--cp-radius-sm)', padding:'6px 12px',
                    fontSize:12.5, fontWeight:500, cursor:'pointer',
                  }}>{I.plus} New invoice</button>
                </div>
              </div>

              {/* tabs (saved views) */}
              <div style={{ display:'flex', alignItems:'center', gap:2, marginBottom:12, borderBottom:`1px solid ${t.border}`, marginLeft:-20, marginRight:-20, paddingLeft:20, paddingRight:20 }}>
                {['All','Paid','Pending','Failed','Refunded','+ Saved view'].map((tab,i) => (
                  <span key={tab} style={{
                    padding:'8px 12px', fontSize:12.5,
                    color: i===0 ? t.text0 : t.text2,
                    fontWeight: i===0 ? 500 : 400,
                    borderBottom: i===0 ? `1.5px solid ${t.accent}` : '1.5px solid transparent',
                    marginBottom:-1, cursor:'pointer',
                    fontFamily: i===5 ? monoVar : 'inherit',
                  }}>{tab}{i!==5 && <span style={{
                    marginLeft:6, fontFamily:monoVar, fontSize:10.5, color:t.text3,
                    padding:'0 5px', border:`1px solid ${t.border}`, borderRadius:3,
                  }}>{[1248,1086,128,18,16][i]}</span>}</span>
                ))}
                <span style={{ flex:1 }}/>
              </div>

              {/* filter chips */}
              <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap' }}>
                <div style={{
                  display:'flex', alignItems:'center', gap:6, padding:'4px 8px 4px 10px',
                  border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius-sm)', background:t.bg1, color:t.text2, fontSize:12.5, minWidth:280,
                }}>{I.search} Search invoices, customers, IDs… <span style={{ flex:1 }}/><Kbd t={t}>/</Kbd></div>
                <FilterChip t={t} k="Status" v="All"/>
                <FilterChip t={t} k="Date" v="Last 30 days"/>
                <FilterChip t={t} k="Amount" v="≥ $1,000"/>
                <FilterChip t={t} k="Method" v="any"/>
                <button style={ghostBtn(t,'sm')}>{I.plus} Add filter</button>
                <span style={{ flex:1 }}/>
                <span style={{ fontFamily:monoVar, fontSize:11.5, color:t.text3 }}>Density</span>
                <SegGroup t={t} value="comfy" onChange={()=>{}} options={['compact','default','comfy']}/>
              </div>
            </div>

            {/* bulk action bar (when selected > 0) */}
            {selected.length > 0 && (
              <div style={{
                padding:'8px 20px', background:t.selectionBg, borderBottom:`1px solid ${t.border}`,
                display:'flex', alignItems:'center', gap:14, fontSize:12.5,
              }}>
                <span style={{ fontFamily:monoVar, color:t.text0 }}>{selected.length} selected</span>
                <span style={{ color:t.text2 }}>·</span>
                <button style={ghostBtn(t,'sm')}>Mark paid</button>
                <button style={ghostBtn(t,'sm')}>Send reminder</button>
                <button style={ghostBtn(t,'sm')}>Export</button>
                <button style={{...ghostBtn(t,'sm'), color:t.error, borderColor:t.border}}>Void</button>
                <span style={{ flex:1 }}/>
                <button onClick={()=>setSelected([])} style={{ background:'none', border:'none', color:t.text2, fontSize:12, cursor:'pointer' }}>Clear</button>
              </div>
            )}

            {/* table */}
            <div style={{ flex:1, overflow:'auto' }}>
              <table style={{ width:'100%', borderCollapse:'collapse', fontSize:t.density.tableFs }}>
                <thead>
                  <tr style={{ background:t.bg0 }}>
                    {[
                      { k:'check', label:'', w:36 },
                      { k:'id', label:'Invoice', mono:true },
                      { k:'customer', label:'Customer' },
                      { k:'amount', label:'Amount', align:'right', sortable:true },
                      { k:'status', label:'Status' },
                      { k:'method', label:'Method' },
                      { k:'created', label:'Created', sortable:true, mono:true },
                      { k:'kebab', label:'', w:36 },
                    ].map(c => (
                      <th key={c.k} style={{
                        textAlign: c.align || 'left',
                        padding:'9px 14px',
                        position:'sticky', top:0, zIndex:1, background:t.bg0,
                        borderBottom:`1px solid ${t.border}`,
                        fontSize:11, color:t.text2, textTransform:'uppercase', letterSpacing:0.4, fontWeight:500,
                        width: c.w || 'auto', whiteSpace:'nowrap',
                      }}>
                        {c.k === 'check'
                          ? <Checkbox t={t} checked={allOn ? true : selected.length > 0 ? 'indet' : false}/>
                          : <span style={{ display:'inline-flex', alignItems:'center', gap:4, cursor: c.sortable ? 'pointer':'default' }}>
                              {c.label}
                              {c.sortable && c.k === sort.k && <span style={{ fontFamily:monoVar }}>{sort.dir==='desc'?'↓':'↑'}</span>}
                            </span>
                        }
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {tableRows.map((r,i) => {
                    const isSel = selected.includes(r.id);
                    return (
                      <tr key={r.id} onClick={()=>toggle(r.id)} style={{
                        cursor:'pointer',
                        background: isSel ? t.selectionBg : i%2 ? t.bg1 : 'transparent',
                      }}>
                        <td style={{ padding:'10px 14px', borderBottom:`1px solid ${t.border}`, position:'relative' }}>
                          {isSel && <span style={{ position:'absolute', left:0, top:0, bottom:0, width:2, background:t.accent }}/>}
                          <Checkbox t={t} checked={isSel}/>
                        </td>
                        <td style={{ padding:'10px 14px', borderBottom:`1px solid ${t.border}`, fontFamily:monoVar, color:t.text1, fontSize:11.5 }}>{r.id}</td>
                        <td style={{ padding:'10px 14px', borderBottom:`1px solid ${t.border}` }}>
                          <div style={{ color:t.text0, fontWeight:500 }}>{r.customer}</div>
                          <div style={{ fontSize:11, color:t.text3, fontFamily:monoVar }}>{r.email}</div>
                        </td>
                        <td style={{ padding:'10px 14px', borderBottom:`1px solid ${t.border}`, textAlign:'right', fontFamily:monoVar, color:t.text0, fontVariantNumeric:'tabular-nums' }}>
                          {fmt(r.amount, r.currency)}
                          <span style={{ color:t.text3, marginLeft:6, fontSize:10.5 }}>{r.currency}</span>
                        </td>
                        <td style={{ padding:'10px 14px', borderBottom:`1px solid ${t.border}` }}>
                          <Pill tone={statusTone[r.status]} t={t}>{r.status}</Pill>
                        </td>
                        <td style={{ padding:'10px 14px', borderBottom:`1px solid ${t.border}`, fontFamily:monoVar, color:t.text2, fontSize:11.5 }}>{r.method}</td>
                        <td style={{ padding:'10px 14px', borderBottom:`1px solid ${t.border}`, fontFamily:monoVar, color:t.text2, fontSize:11.5, whiteSpace:'nowrap' }}>{r.created}</td>
                        <td style={{ padding:'10px 14px', borderBottom:`1px solid ${t.border}`, color:t.text3 }}>{I.more}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>

            {/* pagination */}
            <div style={{
              borderTop:`1px solid ${t.border}`, padding:'10px 20px',
              display:'flex', alignItems:'center', justifyContent:'space-between',
              fontSize:12, color:t.text2, fontFamily:monoVar,
            }}>
              <span>Showing 1–12 of 1,248</span>
              <div style={{ display:'flex', gap:4 }}>
                <button style={ghostBtn(t,'sm')}>← Prev</button>
                {[1,2,3,'…',104].map((p,i) => (
                  <button key={i} style={{
                    ...ghostBtn(t,'sm'),
                    background: p===1 ? t.bg3 : t.bg1,
                    color: p===1 ? t.text0 : t.text1, minWidth:28, justifyContent:'center',
                  }}>{p}</button>
                ))}
                <button style={ghostBtn(t,'sm')}>Next →</button>
              </div>
            </div>
          </main>
        </div>
      )}
    </Frame>
  );
}

function FilterChip({ t, k, v }) {
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:6,
      padding:'4px 8px', border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius-sm)',
      background:t.bg1, fontSize:11.5, color:t.text1, cursor:'pointer',
    }}>
      <span style={{ color:t.text3 }}>{k}:</span>
      <span style={{ fontFamily: v.match(/[a-z]/i) ? 'inherit' : monoVar }}>{v}</span>
      <span style={{ color:t.text3, marginLeft:2 }}>×</span>
    </span>
  );
}

// ─────────────────────────────────────────────────────────
// 2. DETAIL VIEW
// ─────────────────────────────────────────────────────────
function DetailView({ theme, tokens }) {
  return (
    <Frame theme={theme} tokens={tokens}>
      {(t) => (
        <div style={{ display:'grid', gridTemplateColumns:'232px 1fr', height:'100%' }}>
          <Sidebar t={t} active="Services"/>
          <main style={{ display:'flex', flexDirection:'column', minHeight:0 }}>
            <Topbar t={t} crumbs={['Nexus Labs','production','Services','billing-worker']}/>

            {/* hero header */}
            <div style={{ padding:'20px 24px 0', borderBottom:`1px solid ${t.border}` }}>
              <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:24, marginBottom:16 }}>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8 }}>
                    <div style={{
                      width:32, height:32, borderRadius:'var(--cp-radius-sm)',
                      background: `linear-gradient(135deg, ${t.warn}, ${t.error})`,
                      display:'grid', placeItems:'center', color:'#fff', fontWeight:600, fontSize:13, fontFamily:monoVar,
                    }}>BW</div>
                    <h1 style={{ margin:0, fontSize:24, fontWeight:600, letterSpacing:-0.5 }}>billing-worker</h1>
                    <Pill tone="degraded" t={t}>Degraded</Pill>
                    <span style={{ fontFamily:monoVar, fontSize:11.5, color:t.text3, padding:'2px 7px', border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius-xs)' }}>svc_7c4d</span>
                  </div>
                  <div style={{ fontSize:13, color:t.text2, lineHeight:1.6, maxWidth:680 }}>
                    Asynchronous worker that consumes the <span style={{ fontFamily:monoVar, color:t.text1 }}>billing.events</span> stream,
                    reconciles invoices, and emits webhooks. Owner: <span style={{ color:t.text1 }}>payments</span>.
                  </div>
                  <div style={{ display:'flex', gap:18, marginTop:12, fontFamily:monoVar, fontSize:11.5, color:t.text2 }}>
                    <span>region <span style={{ color:t.text0 }}>eu-west-1</span></span>
                    <span>·</span>
                    <span>v <span style={{ color:t.text0 }}>2.41.0</span></span>
                    <span>·</span>
                    <span>deployed <span style={{ color:t.text0 }}>14m ago</span></span>
                    <span>·</span>
                    <span>by <span style={{ color:t.text0 }}>aria.k</span></span>
                  </div>
                </div>
                <div style={{ display:'flex', gap:6 }}>
                  <button style={ghostBtn(t)}>View logs</button>
                  <button style={ghostBtn(t)}>Restart</button>
                  <button style={{
                    background:t.accent, color:t.accentInk, border:'none',
                    borderRadius:'var(--cp-radius-sm)', padding:'6px 12px', fontSize:12.5, fontWeight:500, cursor:'pointer',
                  }}>Deploy</button>
                  <button style={iconBtn(t)}>{I.more}</button>
                </div>
              </div>

              {/* tabs */}
              <div style={{ display:'flex', gap:2 }}>
                {['Overview','Activity','Logs','Metrics','Settings','Access'].map((tab,i) => (
                  <span key={tab} style={{
                    padding:'10px 14px', fontSize:13,
                    color: i===0 ? t.text0 : t.text2,
                    fontWeight: i===0 ? 500 : 400,
                    borderBottom: i===0 ? `1.5px solid ${t.accent}` : '1.5px solid transparent',
                    marginBottom:-1, cursor:'pointer',
                  }}>{tab}{i===1 && <span style={{
                    marginLeft:6, padding:'1px 5px', background:t.bg2, borderRadius:99,
                    fontFamily:monoVar, fontSize:10, color:t.text2, border:`1px solid ${t.border}`,
                  }}>12</span>}</span>
                ))}
              </div>
            </div>

            {/* body — two columns */}
            <div style={{ flex:1, overflow:'auto', padding:'20px 24px', display:'grid', gridTemplateColumns:'1fr 320px', gap:20 }}>
              {/* main column */}
              <div style={{ display:'flex', flexDirection:'column', gap:16, minWidth:0 }}>
                {/* alert callout */}
                <div style={{
                  border:`1px solid ${t.border}`, borderLeft:`3px solid ${t.warn}`,
                  borderRadius:'var(--cp-radius-sm)', background:t.bg1,
                  padding:'12px 14px', display:'flex', alignItems:'flex-start', gap:12,
                }}>
                  <span style={{ width:20, height:20, borderRadius:99, background:t.bg2, display:'grid', placeItems:'center', color:t.warn, fontSize:12, fontWeight:600 }}>!</span>
                  <div style={{ flex:1, fontSize:12.5 }}>
                    <div style={{ color:t.text0, fontWeight:500, marginBottom:2 }}>Error rate climbing — 0.42% over 5m</div>
                    <div style={{ color:t.text2 }}>Retry backoff cap fix is in <span style={{ fontFamily:monoVar, color:t.text1 }}>fix(retry): exponential backoff cap</span> · awaiting deploy</div>
                  </div>
                  <button style={ghostBtn(t,'sm')}>Acknowledge</button>
                </div>

                {/* metrics row */}
                <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12 }}>
                  <Stat t={t} label="rps" value="2.1" unit="k" delta="−4.2%" deltaDir="down" series={buildSeries(36,30,8,1.4)} accent={t.chart2}/>
                  <Stat t={t} label="p99 latency" value="318" unit="ms" delta="+22%" deltaDir="down" series={buildSeries(36,300,40,2.7)} accent={t.warn}/>
                  <Stat t={t} label="error rate" value="0.42" unit="%" delta="+0.36" deltaDir="down" series={buildSeries(36,0.2,0.15,3.1)} accent={t.error}/>
                </div>

                {/* config block */}
                <Panel t={t}>
                  <PanelHead t={t} title="Configuration" actions={<button style={ghostBtn(t,'sm')}>Edit</button>}/>
                  <table style={{ width:'100%', borderCollapse:'collapse', fontSize:12.5 }}>
                    <tbody>
                      {[
                        ['runtime','node-20'],
                        ['memory','512 MiB'],
                        ['cpu','0.5 vCPU'],
                        ['min instances','3'],
                        ['max instances','40'],
                        ['concurrency','120'],
                        ['secrets','STRIPE_KEY · DATABASE_URL · +5'],
                        ['queue','billing.events (SQS)'],
                      ].map(([k,v],i,arr) => (
                        <tr key={k}>
                          <td style={{ padding:'8px 16px', width:160, color:t.text2, fontFamily:monoVar, borderBottom: i===arr.length-1?'none':`1px solid ${t.border}` }}>{k}</td>
                          <td style={{ padding:'8px 16px', color:t.text0, fontFamily:monoVar, borderBottom: i===arr.length-1?'none':`1px solid ${t.border}` }}>{v}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </Panel>

                {/* recent deploys */}
                <Panel t={t}>
                  <PanelHead t={t} title="Recent deploys" meta={<span style={{ fontFamily:monoVar, fontSize:11.5, color:t.text2 }}>last 12</span>}/>
                  <div>
                    {[
                      { v:'v2.41.0', t:'14m ago',   by:'aria.k',  msg:'merge: passkey rollout 50%', tone:'success' },
                      { v:'v2.40.4', t:'2h ago',    by:'mei.l',   msg:'fix(retry): exponential backoff cap', tone:'success' },
                      { v:'v2.40.3', t:'1d ago',    by:'jonas.r', msg:'chore(deps): bump @stripe/stripe', tone:'success' },
                      { v:'v2.40.2', t:'2d ago',    by:'aria.k',  msg:'rollback: reverted v2.40.1', tone:'warn' },
                      { v:'v2.40.1', t:'2d ago',    by:'sam.p',   msg:'feat: idempotency keys', tone:'error' },
                    ].map((d,i,arr)=>(
                      <div key={i} style={{
                        display:'grid', gridTemplateColumns:'90px 1fr 80px 24px',
                        padding:'10px 16px', gap:12, alignItems:'center',
                        borderBottom: i===arr.length-1?'none':`1px solid ${t.border}`,
                      }}>
                        <span style={{ fontFamily:monoVar, fontSize:11.5, color:t.text0, fontWeight:500 }}>{d.v}</span>
                        <span style={{ fontSize:12.5, color:t.text1 }}>{d.msg}</span>
                        <span style={{ fontFamily:monoVar, fontSize:11, color:t.text3 }}>{d.t}</span>
                        <Pill tone={d.tone} t={t}/>
                      </div>
                    ))}
                  </div>
                </Panel>
              </div>

              {/* right inspector */}
              <aside style={{ display:'flex', flexDirection:'column', gap:14 }}>
                <Panel t={t}>
                  <PanelHead t={t} title="Owner & on-call"/>
                  <div style={{ padding:'10px 14px', display:'flex', flexDirection:'column', gap:10 }}>
                    {[
                      { name:'Aria Kessler', role:'Owner · payments',  on:true, init:'AK', from:[t.chart2, t.chart4]},
                      { name:'Jonas Reier',  role:'On-call · primary', on:true, init:'JR', from:[t.success, t.chart2]},
                      { name:'Mei Lin',      role:'On-call · backup',  on:false,init:'ML', from:[t.warn, t.chart4]},
                    ].map((p,i)=>(
                      <div key={i} style={{ display:'flex', alignItems:'center', gap:10 }}>
                        <div style={{ position:'relative', width:28, height:28 }}>
                          <div style={{ width:28, height:28, borderRadius:99, background:`linear-gradient(135deg, ${p.from[0]}, ${p.from[1]})`, color:'#fff', display:'grid', placeItems:'center', fontSize:10.5, fontWeight:600, fontFamily:monoVar }}>{p.init}</div>
                          {p.on && <span style={{ position:'absolute', right:-1, bottom:-1, width:9, height:9, borderRadius:99, background:t.success, border:`2px solid ${t.bg1}` }}/>}
                        </div>
                        <div style={{ flex:1, minWidth:0 }}>
                          <div style={{ fontSize:12.5, color:t.text0, fontWeight:500 }}>{p.name}</div>
                          <div style={{ fontSize:11, color:t.text3, fontFamily:monoVar }}>{p.role}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </Panel>

                <Panel t={t}>
                  <PanelHead t={t} title="Dependencies"/>
                  <div style={{ padding:'4px 0' }}>
                    {[
                      { n:'auth-service', s:'healthy' },
                      { n:'postgres-billing', s:'healthy' },
                      { n:'redis-cache', s:'healthy' },
                      { n:'stripe-api', s:'healthy', ext:true },
                      { n:'sendgrid', s:'degraded', ext:true },
                    ].map((d,i,arr)=>(
                      <div key={i} style={{
                        display:'flex', alignItems:'center', gap:10,
                        padding:'8px 14px', borderBottom: i===arr.length-1?'none':`1px solid ${t.border}`,
                        fontSize:12.5,
                      }}>
                        <span style={{ width:6, height:6, borderRadius:99, background: d.s==='healthy' ? t.success : t.warn }}/>
                        <span style={{ color:t.text0, flex:1, fontFamily: d.ext ? monoVar : 'inherit' }}>{d.n}</span>
                        {d.ext && <span style={{ fontSize:10, color:t.text3, fontFamily:monoVar, padding:'1px 5px', border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius-xs)' }}>ext</span>}
                      </div>
                    ))}
                  </div>
                </Panel>

                <Panel t={t}>
                  <PanelHead t={t} title="SLO" meta={<span style={{ fontFamily:monoVar, fontSize:11, color:t.text2 }}>30d window</span>}/>
                  <div style={{ padding:'14px 16px' }}>
                    <div style={{ display:'flex', justifyContent:'space-between', fontSize:11.5, color:t.text2, marginBottom:6 }}>
                      <span>Availability</span>
                      <span style={{ fontFamily:monoVar, color:t.text0 }}>99.842% <span style={{ color:t.text3 }}>/ 99.9</span></span>
                    </div>
                    <div style={{ height:6, background:t.bg2, borderRadius:99, overflow:'hidden' }}>
                      <div style={{ width:'78%', height:'100%', background:t.warn }}/>
                    </div>
                    <div style={{ fontSize:11, color:t.text3, fontFamily:monoVar, marginTop:6 }}>error budget: 22% remaining</div>
                  </div>
                </Panel>
              </aside>
            </div>
          </main>
        </div>
      )}
    </Frame>
  );
}

// ─────────────────────────────────────────────────────────
// 3. CMD+K OVERLAY
// ─────────────────────────────────────────────────────────
function CmdKView({ theme, tokens }) {
  const groups = paletteGroups;

  const iconFor = (k, t) => ({
    service: <span style={{ width:14, height:14, borderRadius:'var(--cp-radius-xs)', background:`${t.accent}33`, color:t.accent, display:'grid', placeItems:'center', fontFamily:monoVar, fontSize:9, fontWeight:700 }}>S</span>,
    invoice: <span style={{ width:14, height:14, borderRadius:'var(--cp-radius-xs)', background:`${t.chart2}33`, color:t.chart2, display:'grid', placeItems:'center', fontFamily:monoVar, fontSize:9, fontWeight:700 }}>$</span>,
    page:    <span style={{ width:14, height:14, borderRadius:'var(--cp-radius-xs)', background:t.bg2, color:t.text2, display:'grid', placeItems:'center', fontFamily:monoVar, fontSize:9, fontWeight:700 }}>P</span>,
    action:  <span style={{ width:14, height:14, color:t.text2, display:'grid', placeItems:'center' }}>{I.zap}</span>,
  })[k];

  let idx = 0;
  return (
    <Frame theme={theme} tokens={tokens}>
      {(t) => (
        <>
          {/* dimmed dashboard layer */}
          <div style={{ position:'absolute', inset:0, opacity: 0.4, pointerEvents:'none', filter:'blur(0.5px)' }}>
            <CockpitDashboard theme={theme} tokens={tokens}/>
          </div>
          {/* scrim */}
          <div style={{
            position:'absolute', inset:0,
            background: theme === 'dark'
              ? 'radial-gradient(ellipse at top, rgba(0,0,0,0.55), rgba(0,0,0,0.75))'
              : 'rgba(0,0,0,0.18)',
          }}/>
          {/* palette */}
          <div style={{
            position:'absolute', top:80, left:'50%', transform:'translateX(-50%)',
            width:640, background:t.bg1, border:`1px solid ${t.border}`,
            borderRadius:'var(--cp-radius)',
            boxShadow: theme==='dark' ? '0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04)' : '0 30px 80px rgba(0,0,0,0.18)',
            overflow:'hidden',
          }}>
            {/* input row */}
            <div style={{
              display:'flex', alignItems:'center', gap:10,
              padding:'14px 16px', borderBottom:`1px solid ${t.border}`,
            }}>
              <span style={{ color:t.text2, transform:'scale(1.2)' }}>{I.search}</span>
              <span style={{ flex:1, fontSize:15, color:t.text0 }}>billi<span style={{ background:t.accent, color:t.accentInk, padding:'0 1px', borderRadius:1 }}>|</span></span>
              <span style={{ fontFamily:monoVar, fontSize:11, color:t.text3, padding:'2px 7px', background:t.bg2, border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius-xs)' }}>esc</span>
            </div>

            {/* result groups */}
            <div style={{ maxHeight:420, overflow:'auto' }}>
              {groups.map(g => (
                <div key={g.label}>
                  <div style={{
                    padding:'8px 16px 4px', fontSize:10.5, color:t.text3,
                    textTransform:'uppercase', letterSpacing:0.6, fontWeight:500,
                  }}>{g.label}</div>
                  {g.items.map((it,i) => {
                    const active = idx++ === 0;
                    return (
                      <div key={i} style={{
                        display:'grid', gridTemplateColumns:'auto 1fr auto auto', gap:12, alignItems:'center',
                        padding:'8px 16px', cursor:'pointer',
                        background: active ? t.selectionBg : 'transparent',
                        position:'relative',
                      }}>
                        {active && <span style={{ position:'absolute', left:0, top:6, bottom:6, width:2, background:t.accent }}/>}
                        {iconFor(it.i, t)}
                        <div style={{ minWidth:0 }}>
                          <div style={{ fontSize:13, color:t.text0, fontWeight: active?500:400, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>
                            {it.dot && <span style={{ display:'inline-block', width:6, height:6, borderRadius:99, background:it.dot==='success'?t.success:t.error, marginRight:8, verticalAlign:'middle' }}/>}
                            {it.label}
                          </div>
                          <div style={{ fontSize:11, color:t.text3, fontFamily:monoVar, marginTop:1, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{it.meta}</div>
                        </div>
                        <span/>
                        {it.kbd
                          ? <span style={{ display:'flex', gap:3 }}>{it.kbd.split(' ').map((k,j)=><Kbd t={t} key={j}>{k}</Kbd>)}</span>
                          : <span style={{ color:t.text3 }}>{I.arrowRight}</span>
                        }
                      </div>
                    );
                  })}
                </div>
              ))}
            </div>

            {/* footer */}
            <div style={{
              borderTop:`1px solid ${t.border}`, padding:'8px 16px',
              display:'flex', alignItems:'center', gap:14, fontSize:11, color:t.text2, background:t.bg0,
            }}>
              <span style={{ display:'inline-flex', alignItems:'center', gap:6 }}><Kbd t={t}>↑</Kbd><Kbd t={t}>↓</Kbd> Navigate</span>
              <span style={{ display:'inline-flex', alignItems:'center', gap:6 }}><Kbd t={t}>↵</Kbd> Open</span>
              <span style={{ display:'inline-flex', alignItems:'center', gap:6 }}><Kbd t={t}>⌘</Kbd><Kbd t={t}>↵</Kbd> Open in tab</span>
              <span style={{ flex:1 }}/>
              <span style={{ fontFamily:monoVar }}>14 results · 8ms</span>
            </div>
          </div>
        </>
      )}
    </Frame>
  );
}

// ─────────────────────────────────────────────────────────
// 4. MARKETING LANDING
// ─────────────────────────────────────────────────────────
function MarketingView({ theme, tokens }) {
  return (
    <Frame theme={theme} tokens={tokens} height={1400}>
      {(t) => (
        <div style={{ height:'100%', overflow:'auto' }}>
          {/* nav */}
          <header style={{
            position:'sticky', top:0, zIndex:5, background: theme==='dark' ? 'rgba(20,20,22,0.7)' : 'rgba(255,255,255,0.7)',
            backdropFilter:'blur(12px)', borderBottom:`1px solid ${t.border}`,
            padding:'14px 48px', display:'flex', alignItems:'center', gap:32,
          }}>
            <div style={{ display:'flex', alignItems:'center', gap:8, fontWeight:600, fontSize:15 }}>
              <span style={{ width:22, height:22, borderRadius:'var(--cp-radius-sm)', background:t.accent, color:t.accentInk, display:'grid', placeItems:'center', fontFamily:monoVar, fontSize:12, fontWeight:700 }}>NX</span>
              Nexus
            </div>
            <nav style={{ display:'flex', gap:20, fontSize:13, color:t.text1 }}>
              {['Product','Solutions','Pricing','Changelog','Docs','Customers'].map(n => <span key={n} style={{ cursor:'pointer' }}>{n}</span>)}
            </nav>
            <span style={{ flex:1 }}/>
            <span style={{ fontSize:13, color:t.text1, cursor:'pointer' }}>Sign in</span>
            <button style={{
              background:t.accent, color:t.accentInk, border:'none', borderRadius:'var(--cp-radius-sm)',
              padding:'7px 14px', fontSize:13, fontWeight:500, cursor:'pointer',
            }}>Start free →</button>
          </header>

          {/* hero */}
          <section style={{ padding:'80px 48px 48px', textAlign:'center' }}>
            <div style={{
              display:'inline-flex', alignItems:'center', gap:8,
              padding:'4px 12px 4px 4px', border:`1px solid ${t.border}`, borderRadius:99,
              fontSize:12, color:t.text2, marginBottom:24, background:t.bg1,
            }}>
              <span style={{ background:t.accent, color:t.accentInk, padding:'2px 8px', borderRadius:99, fontWeight:600, fontFamily:monoVar, fontSize:10.5 }}>NEW</span>
              Passkeys & SAML are GA → <span style={{ color:t.text1 }}>Read post</span>
            </div>
            <h1 style={{
              margin:'0 auto', maxWidth:840,
              fontSize:64, fontWeight:600, letterSpacing:-2.4, lineHeight:1.05,
              color:t.text0,
            }}>The control plane for shipping production software.</h1>
            <p style={{
              margin:'20px auto 0', maxWidth:600,
              fontSize:17, color:t.text2, lineHeight:1.55,
            }}>One dense, fast surface for services, deploys, alerts, and audit. Built for engineers who live in the dashboard.</p>
            <div style={{ display:'flex', gap:10, justifyContent:'center', marginTop:32 }}>
              <button style={{
                background:t.accent, color:t.accentInk, border:'none', borderRadius:'var(--cp-radius-sm)',
                padding:'12px 22px', fontSize:14, fontWeight:500, cursor:'pointer',
              }}>Start free — no card</button>
              <button style={{
                background:'transparent', color:t.text0, border:`1px solid ${t.borderStrong}`, borderRadius:'var(--cp-radius-sm)',
                padding:'12px 22px', fontSize:14, fontWeight:500, cursor:'pointer',
                display:'inline-flex', alignItems:'center', gap:8,
              }}>Book a demo {I.arrowRight}</button>
            </div>

            {/* product shot */}
            <div style={{
              marginTop:56, borderRadius:'var(--cp-radius)', border:`1px solid ${t.border}`,
              overflow:'hidden', background:t.bg1, position:'relative',
              transform:'scale(0.92) translateY(-10px)', boxShadow: theme==='dark' ? `0 40px 80px ${t.accentMuted}33` : `0 30px 60px rgba(0,0,0,0.12)`,
            }}>
              <div style={{ pointerEvents:'none' }}>
                <CockpitDashboard theme={theme} tokens={tokens}/>
              </div>
              <div style={{
                position:'absolute', inset:0, pointerEvents:'none',
                background: theme==='dark'
                  ? `linear-gradient(180deg, transparent 60%, ${t.bg0})`
                  : `linear-gradient(180deg, transparent 70%, ${t.bg0})`,
              }}/>
            </div>
          </section>

          {/* logos strip */}
          <section style={{ padding:'24px 48px 32px', borderTop:`1px solid ${t.border}`, borderBottom:`1px solid ${t.border}` }}>
            <div style={{ textAlign:'center', fontSize:11, color:t.text3, textTransform:'uppercase', letterSpacing:1.2, marginBottom:18 }}>
              Trusted by 4,200+ engineering teams
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', maxWidth:1100, margin:'0 auto', opacity:0.65 }}>
              {['ATLAS','NORTHWIND','HELIO','GRANITE','LATTICE','MIRA','OTTER','CINDER'].map(name => (
                <span key={name} style={{ fontFamily:monoVar, fontSize:13, color:t.text1, letterSpacing:1.5, fontWeight:600 }}>{name}</span>
              ))}
            </div>
          </section>

          {/* stats */}
          <section style={{ padding:'56px 48px', display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:0, borderBottom:`1px solid ${t.border}` }}>
            {[
              { k:'p99 dashboard load', v:'89', u:'ms' },
              { k:'rows virtualised', v:'50k+', u:'in tables' },
              { k:'time to rebrand', v:'~1', u:'hour' },
              { k:'WCAG conformance', v:'AA', u:'minimum' },
            ].map((s,i) => (
              <div key={i} style={{ borderRight: i<3 ? `1px solid ${t.border}` : 'none', paddingRight:24, paddingLeft: i===0?0:24 }}>
                <div style={{ fontFamily:monoVar, fontSize:48, fontWeight:500, color:t.text0, letterSpacing:-1.5 }}>
                  {s.v}<span style={{ color:t.accent }}>.</span>
                </div>
                <div style={{ fontSize:13, color:t.text2, marginTop:4 }}>{s.u} <span style={{ color:t.text3 }}>· {s.k}</span></div>
              </div>
            ))}
          </section>

          {/* feature grid */}
          <section style={{ padding:'72px 48px' }}>
            <div style={{ maxWidth:520, marginBottom:40 }}>
              <div style={{ fontSize:12, color:t.accent, fontFamily:monoVar, marginBottom:8, textTransform:'uppercase', letterSpacing:1 }}>Built for density</div>
              <h2 style={{ margin:0, fontSize:36, fontWeight:600, letterSpacing:-1.2, color:t.text0 }}>Power tools without the bloat.</h2>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14 }}>
              {marketingFeatures.map((f0,i)=>{
                const f = { ...f0, ic: I[f0.icon] };
                return (
                <div key={i} style={{
                  border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius)', padding:'20px',
                  background:t.bg1,
                }}>
                  <span style={{ display:'inline-grid', placeItems:'center', width:30, height:30, borderRadius:'var(--cp-radius-sm)', background:`${t.accent}22`, color:t.accent, marginBottom:14 }}>{f.ic}</span>
                  <h3 style={{ margin:'0 0 6px', fontSize:15, fontWeight:600, color:t.text0 }}>{f.t}</h3>
                  <p style={{ margin:0, fontSize:13, color:t.text2, lineHeight:1.55 }}>{f.d}</p>
                </div>
              );})}
            </div>
          </section>

          {/* footer */}
          <footer style={{ padding:'40px 48px', borderTop:`1px solid ${t.border}`, display:'flex', alignItems:'center', gap:24, fontSize:12, color:t.text3, fontFamily:monoVar }}>
            <span>© 2026 Nexus Labs</span>
            <span>·</span>
            <span>v2.41.0</span>
            <span style={{ flex:1 }}/>
            <span style={{ display:'inline-flex', alignItems:'center', gap:6 }}>
              <span style={{ width:6, height:6, borderRadius:99, background:t.success }}/>
              All systems normal
            </span>
          </footer>
        </div>
      )}
    </Frame>
  );
}

// ─────────────────────────────────────────────────────────
// 5. MOBILE PAIR
// ─────────────────────────────────────────────────────────
function MobilePair({ theme, tokens }) {
  return (
    <Frame theme={theme} tokens={tokens} width={920} height={920}>
      {(t) => (
        <div style={{ display:'flex', justifyContent:'center', alignItems:'center', gap:36, height:'100%', padding:24, background: theme==='dark' ? 'oklch(0.13 0.005 250)' : 'oklch(0.965 0.003 90)' }}>
          <PhoneFrame t={t} label="Home"><MobileHome t={t}/></PhoneFrame>
          <PhoneFrame t={t} label="Service detail"><MobileDetail t={t}/></PhoneFrame>
        </div>
      )}
    </Frame>
  );
}

function PhoneFrame({ t, label, children }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:10 }}>
      <div style={{
        width:380, height:780, borderRadius:46,
        background: 'oklch(0.08 0 0)',
        padding:8, boxShadow:'0 30px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04)',
        position:'relative',
      }}>
        <div style={{
          width:'100%', height:'100%', borderRadius:38, overflow:'hidden',
          background: t.bg0, position:'relative',
          display:'flex', flexDirection:'column',
        }}>
          {/* status bar */}
          <div style={{
            display:'flex', alignItems:'center', justifyContent:'space-between',
            padding:'12px 22px 6px', fontSize:13, fontWeight:600, fontFamily:monoVar, color:t.text0,
          }}>
            <span>9:41</span>
            <span style={{
              position:'absolute', left:'50%', top:8, transform:'translateX(-50%)',
              width:108, height:30, background:'oklch(0.06 0 0)', borderRadius:18,
            }}/>
            <span style={{ display:'flex', gap:5, alignItems:'center' }}>
              <span style={{ display:'flex', gap:1.5 }}>
                <span style={{ width:3, height:5, background:t.text0, borderRadius:1 }}/>
                <span style={{ width:3, height:7, background:t.text0, borderRadius:1 }}/>
                <span style={{ width:3, height:9, background:t.text0, borderRadius:1 }}/>
                <span style={{ width:3, height:11, background:t.text0, borderRadius:1 }}/>
              </span>
              <span style={{ width:14, height:10, border:`1px solid ${t.text0}`, borderRadius:2, position:'relative' }}>
                <span style={{ position:'absolute', inset:1.5, right:3, background:t.text0, borderRadius:1 }}/>
              </span>
            </span>
          </div>
          <div style={{ flex:1, overflow:'hidden', position:'relative' }}>{children}</div>
        </div>
      </div>
      <span style={{ fontSize:11, color:t.text3, fontFamily:monoVar, textTransform:'uppercase', letterSpacing:1 }}>{label}</span>
    </div>
  );
}

function MobileHome({ t }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
      {/* large title header */}
      <div style={{ padding:'10px 20px 14px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <div style={{ width:30, height:30, borderRadius:'var(--cp-radius-sm)', background:t.accent, color:t.accentInk, display:'grid', placeItems:'center', fontFamily:monoVar, fontWeight:700, fontSize:11 }}>NX</div>
        <div style={{ display:'flex', gap:8 }}>
          <span style={{ width:34, height:34, borderRadius:99, border:`1px solid ${t.border}`, display:'grid', placeItems:'center', color:t.text1, position:'relative' }}>
            {I.bell}
            <span style={{ position:'absolute', top:7, right:9, width:6, height:6, borderRadius:99, background:t.error }}/>
          </span>
          <span style={{ width:34, height:34, borderRadius:99, background:`linear-gradient(135deg,${t.chart2},${t.chart4})`, color:'#fff', display:'grid', placeItems:'center', fontSize:11, fontWeight:600, fontFamily:monoVar }}>AK</span>
        </div>
      </div>
      <div style={{ padding:'2px 20px 12px' }}>
        <h1 style={{ margin:0, fontSize:28, fontWeight:600, letterSpacing:-0.6 }}>Overview</h1>
        <div style={{ fontSize:12, color:t.text2, fontFamily:monoVar, marginTop:3 }}>
          <span style={{ color:t.warn }}>● 1 incident</span> · 23 healthy
        </div>
      </div>

      {/* search */}
      <div style={{ padding:'0 20px 14px' }}>
        <div style={{
          display:'flex', alignItems:'center', gap:8, padding:'8px 12px',
          background:t.bg2, borderRadius:'var(--cp-radius-sm)', color:t.text2, fontSize:13,
        }}>{I.search} Search…</div>
      </div>

      {/* KPI carousel */}
      <div style={{ padding:'0 20px 14px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
        {[
          { l:'rps',       v:'54.7', u:'k', d:'+12%', dir:'up',   c:t.accent },
          { l:'p99',       v:'218',  u:'ms',d:'−8%',  dir:'up',   c:t.chart2 },
          { l:'errors',    v:'0.07', u:'%', d:'+0.02',dir:'down', c:t.warn },
          { l:'sessions',  v:'48.2', u:'k', d:'+3.7%',dir:'up',   c:t.chart4 },
        ].map((s,i)=>(
          <div key={i} style={{ background:t.bg1, border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius-sm)', padding:'10px 12px' }}>
            <div style={{ fontSize:10, color:t.text2, textTransform:'uppercase', letterSpacing:0.5, fontWeight:500 }}>{s.l}</div>
            <div style={{ display:'flex', alignItems:'baseline', gap:4, marginTop:2 }}>
              <span style={{ fontFamily:monoVar, fontSize:20, fontWeight:500, letterSpacing:-0.3 }}>{s.v}</span>
              <span style={{ fontFamily:monoVar, fontSize:11, color:t.text2 }}>{s.u}</span>
            </div>
            <div style={{ marginTop:4 }}>
              <Sparkline data={buildSeries(20,30,7,i+1)} color={s.c} fill={s.c} w={150} h={18}/>
            </div>
          </div>
        ))}
      </div>

      {/* incident card */}
      <div style={{ padding:'0 20px 14px' }}>
        <div style={{ background:t.bg1, border:`1px solid ${t.border}`, borderLeft:`3px solid ${t.error}`, borderRadius:'var(--cp-radius-sm)', padding:'12px 14px' }}>
          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
            <Pill tone="incident" t={t}>incident</Pill>
            <span style={{ fontFamily:monoVar, fontSize:11, color:t.text3, marginLeft:'auto' }}>2m ago</span>
          </div>
          <div style={{ fontSize:13, fontWeight:500, color:t.text0 }}>notification-svc · p99 latency 612ms</div>
          <div style={{ fontSize:12, color:t.text2, marginTop:4 }}>SLO breach (500ms). PagerDuty notified.</div>
        </div>
      </div>

      {/* services list header */}
      <div style={{ padding:'0 20px 8px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div style={{ fontSize:11, color:t.text2, textTransform:'uppercase', letterSpacing:0.6, fontWeight:500 }}>Services</div>
        <span style={{ fontSize:12, color:t.accent, display:'inline-flex', alignItems:'center', gap:4 }}>All {I.arrowRight}</span>
      </div>
      <div style={{ flex:1, overflow:'hidden', borderTop:`1px solid ${t.border}` }}>
        {services.slice(0,5).map((s,i)=>(
          <div key={s.id} style={{
            display:'grid', gridTemplateColumns:'auto 1fr auto', gap:10, alignItems:'center',
            padding:'10px 20px', borderBottom: i===4 ? 'none' : `1px solid ${t.border}`,
          }}>
            <span style={{ width:7, height:7, borderRadius:99, background: s.status==='healthy'?t.success: s.status==='degraded'?t.warn:t.error }}/>
            <div style={{ minWidth:0 }}>
              <div style={{ fontSize:13.5, color:t.text0, fontWeight:500 }}>{s.name}</div>
              <div style={{ fontSize:10.5, color:t.text3, fontFamily:monoVar }}>{s.region} · {s.rps} rps</div>
            </div>
            <span style={{ fontFamily:monoVar, fontSize:12, color: s.p99>500?t.error: s.p99>250?t.warn:t.text1 }}>{s.p99}ms</span>
          </div>
        ))}
      </div>

      {/* tab bar */}
      <div style={{ borderTop:`1px solid ${t.border}`, padding:'8px 20px 22px', display:'flex', justifyContent:'space-around', background:t.bg1 }}>
        {[
          { i:I.home, l:'Home', a:true },
          { i:I.layers, l:'Services' },
          { i:I.pulse, l:'Metrics' },
          { i:I.inbox, l:'Inbox', n:12 },
        ].map((tab,i)=>(
          <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:3, color: tab.a ? t.accent : t.text2, position:'relative' }}>
            {tab.i}
            <span style={{ fontSize:10 }}>{tab.l}</span>
            {tab.n && <span style={{ position:'absolute', top:-4, right:8, background:t.error, color:'#fff', fontSize:9, fontFamily:monoVar, padding:'1px 4px', borderRadius:99 }}>{tab.n}</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

function MobileDetail({ t }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
      {/* header */}
      <div style={{ padding:'10px 16px 14px', display:'flex', alignItems:'center', gap:10, borderBottom:`1px solid ${t.border}` }}>
        <span style={{ width:30, height:30, borderRadius:99, border:`1px solid ${t.border}`, display:'grid', placeItems:'center', color:t.text1 }}>‹</span>
        <span style={{ fontSize:13, color:t.text2, flex:1 }}>Services</span>
        <span style={{ width:30, height:30, borderRadius:99, border:`1px solid ${t.border}`, display:'grid', placeItems:'center', color:t.text1 }}>{I.more}</span>
      </div>

      {/* hero */}
      <div style={{ padding:'16px 20px 14px' }}>
        <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8 }}>
          <div style={{ width:30, height:30, borderRadius:'var(--cp-radius-sm)', background:`linear-gradient(135deg,${t.warn},${t.error})`, color:'#fff', display:'grid', placeItems:'center', fontFamily:monoVar, fontWeight:600, fontSize:11 }}>BW</div>
          <h1 style={{ margin:0, fontSize:20, fontWeight:600, letterSpacing:-0.4 }}>billing-worker</h1>
        </div>
        <div style={{ display:'flex', gap:6, alignItems:'center', flexWrap:'wrap' }}>
          <Pill tone="degraded" t={t}>Degraded</Pill>
          <span style={{ fontFamily:monoVar, fontSize:10.5, color:t.text3, padding:'2px 6px', border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius-xs)' }}>svc_7c4d</span>
          <span style={{ fontFamily:monoVar, fontSize:10.5, color:t.text2 }}>· eu-west-1 · v2.41.0</span>
        </div>
      </div>

      {/* tabs */}
      <div style={{ display:'flex', gap:0, padding:'0 14px', borderBottom:`1px solid ${t.border}` }}>
        {['Overview','Activity','Logs','Settings'].map((tab,i)=>(
          <span key={tab} style={{
            padding:'9px 12px', fontSize:12.5,
            color: i===0?t.text0:t.text2, fontWeight: i===0?500:400,
            borderBottom: i===0 ? `1.5px solid ${t.accent}` : '1.5px solid transparent', marginBottom:-1,
          }}>{tab}</span>
        ))}
      </div>

      {/* metrics */}
      <div style={{ padding:'14px 20px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8 }}>
        {[
          { l:'rps', v:'2.1k', c:t.chart2 },
          { l:'p99', v:'318ms', c:t.warn },
          { l:'errors', v:'0.42%', c:t.error },
        ].map((m,i)=>(
          <div key={i} style={{ background:t.bg1, border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius-sm)', padding:'8px 10px' }}>
            <div style={{ fontSize:10, color:t.text2, textTransform:'uppercase', letterSpacing:0.4 }}>{m.l}</div>
            <div style={{ fontFamily:monoVar, fontSize:14, color:m.c, marginTop:2, fontWeight:500 }}>{m.v}</div>
          </div>
        ))}
      </div>

      {/* alert */}
      <div style={{ padding:'0 20px 12px' }}>
        <div style={{ background:t.bg1, border:`1px solid ${t.border}`, borderLeft:`3px solid ${t.warn}`, borderRadius:'var(--cp-radius-sm)', padding:'10px 12px', fontSize:12.5 }}>
          <div style={{ color:t.text0, fontWeight:500, marginBottom:2 }}>Error rate climbing</div>
          <div style={{ color:t.text2 }}>0.42% over 5m · fix in queue</div>
        </div>
      </div>

      {/* activity */}
      <div style={{ padding:'4px 20px 6px', fontSize:11, color:t.text2, textTransform:'uppercase', letterSpacing:0.6, fontWeight:500 }}>Recent activity</div>
      <div style={{ flex:1, overflow:'auto' }}>
        {events.slice(0,5).map((e,i,arr)=>(
          <div key={i} style={{
            padding:'10px 20px', borderTop: i===0 ? `1px solid ${t.border}` : 'none',
            borderBottom: i===arr.length-1 ? `1px solid ${t.border}` : `1px dashed ${t.border}`,
            display:'grid', gridTemplateColumns:'auto 1fr', gap:10,
          }}>
            <span style={{ width:6, height:6, borderRadius:99, marginTop:6,
              background: e.tag==='success' ? t.success : e.tag==='error' ? t.error : e.tag==='warn' ? t.warn : t.info }}/>
            <div>
              <div style={{ fontSize:12.5, color:t.text0, lineHeight:1.4 }}>{e.msg}</div>
              <div style={{ fontSize:10.5, color:t.text3, fontFamily:monoVar, marginTop:2 }}>{e.t} · {e.actor}</div>
            </div>
          </div>
        ))}
      </div>

      {/* sticky cta */}
      <div style={{ padding:'10px 20px 22px', background:t.bg1, borderTop:`1px solid ${t.border}`, display:'flex', gap:8 }}>
        <button style={{ flex:1, padding:'12px', background:t.bg2, border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius-sm)', color:t.text0, fontSize:13, fontWeight:500 }}>Logs</button>
        <button style={{ flex:1, padding:'12px', background:t.accent, border:'none', borderRadius:'var(--cp-radius-sm)', color:t.accentInk, fontSize:13, fontWeight:500 }}>Deploy</button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// 6. SETTINGS
// ─────────────────────────────────────────────────────────
function SettingsView({ theme, tokens }) {
  return (
    <Frame theme={theme} tokens={tokens}>
      {(t) => (
        <div style={{ display:'grid', gridTemplateColumns:'232px 1fr', height:'100%' }}>
          <Sidebar t={t} active="Settings"/>
          <main style={{ display:'flex', flexDirection:'column', minHeight:0 }}>
            <Topbar t={t} crumbs={['Nexus Labs','production','Settings','Team']}/>

            <div style={{ display:'grid', gridTemplateColumns:'200px 1fr', flex:1, minHeight:0 }}>
              {/* sub-nav */}
              <nav style={{ borderRight:`1px solid ${t.border}`, padding:'18px 12px', overflow:'auto' }}>
                <div style={{ fontSize:10.5, color:t.text3, padding:'4px 10px 6px', textTransform:'uppercase', letterSpacing:0.6, fontWeight:500 }}>Account</div>
                {['Profile','Security','Notifications'].map(n => <SubNav key={n} t={t} label={n} active={n==='Profile'? false:false}/>)}
                <div style={{ fontSize:10.5, color:t.text3, padding:'12px 10px 6px', textTransform:'uppercase', letterSpacing:0.6, fontWeight:500 }}>Workspace</div>
                <SubNav t={t} label="General"/>
                <SubNav t={t} label="Team" active count={14}/>
                <SubNav t={t} label="Billing"/>
                <SubNav t={t} label="Integrations" count={8}/>
                <SubNav t={t} label="API keys" count={3}/>
                <SubNav t={t} label="Audit log"/>
              </nav>

              {/* content */}
              <div style={{ overflow:'auto', padding:'28px 32px' }}>
                <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:20 }}>
                  <div>
                    <h1 style={{ margin:0, fontSize:22, fontWeight:600, letterSpacing:-0.4 }}>Team</h1>
                    <div style={{ fontSize:13, color:t.text2, marginTop:4 }}>Members of <span style={{ color:t.text1 }}>Nexus Labs</span> and their roles.</div>
                  </div>
                  <button style={{
                    background:t.accent, color:t.accentInk, border:'none', borderRadius:'var(--cp-radius-sm)',
                    padding:'7px 12px', fontSize:12.5, fontWeight:500, cursor:'pointer',
                    display:'inline-flex', alignItems:'center', gap:6,
                  }}>{I.plus} Invite</button>
                </div>

                {/* SSO callout */}
                <div style={{
                  border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius)', padding:'14px 16px',
                  background:t.bg1, display:'flex', alignItems:'center', gap:14, marginBottom:18,
                }}>
                  <span style={{ width:32, height:32, borderRadius:'var(--cp-radius-sm)', background:`${t.info}22`, color:t.info, display:'grid', placeItems:'center' }}>{I.users}</span>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:13, fontWeight:500, color:t.text0 }}>SAML SSO is configured for nexus.dev</div>
                    <div style={{ fontSize:12, color:t.text2, marginTop:1 }}>Members joining via SSO are auto-assigned the <span style={{ fontFamily:monoVar, color:t.text1 }}>Member</span> role.</div>
                  </div>
                  <button style={ghostBtn(t,'sm')}>Configure</button>
                </div>

                {/* search + filters */}
                <div style={{ display:'flex', gap:8, marginBottom:14 }}>
                  <div style={{
                    flex:1, display:'flex', alignItems:'center', gap:8, padding:'5px 10px',
                    border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius-sm)', background:t.bg1, color:t.text2, fontSize:12.5,
                  }}>{I.search}<span>Search members…</span></div>
                  <button style={ghostBtn(t)}>{I.filter} Role: any</button>
                  <SegGroup t={t} value="All" onChange={()=>{}} options={['All','Active','Invited','Suspended']}/>
                </div>

                {/* member list */}
                <div style={{ border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius)', overflow:'hidden', background:t.bg1 }}>
                  {teamMembers.map((m0,i,arr)=>{
                    const m = { ...m0, from:[t[m0.from[0]], t[m0.from[1]]] };
                    return (
                    <div key={i} style={{
                      display:'grid', gridTemplateColumns:'auto 1fr 120px 100px 100px auto', gap:12, alignItems:'center',
                      padding:'12px 16px', borderBottom: i===arr.length-1?'none':`1px solid ${t.border}`, fontSize:13,
                    }}>
                      <div style={{ width:30, height:30, borderRadius:99, background:`linear-gradient(135deg, ${m.from[0]}, ${m.from[1]})`, color:'#fff', display:'grid', placeItems:'center', fontSize:11, fontWeight:600, fontFamily:monoVar }}>{m.init}</div>
                      <div style={{ minWidth:0 }}>
                        <div style={{ color:t.text0, fontWeight:500 }}>{m.n}</div>
                        <div style={{ fontSize:11.5, color:t.text3, fontFamily:monoVar }}>{m.e}</div>
                      </div>
                      <span style={{ fontFamily:monoVar, fontSize:11.5, color:t.text2 }}>{m.r}</span>
                      <Pill tone={m.a==='Active'?'healthy': m.a==='Invited'?'info':'warn'} t={t}>{m.a.toLowerCase()}</Pill>
                      <span style={{ fontFamily:monoVar, fontSize:11, color:t.text3 }}>{m.l}</span>
                      <span style={{ color:t.text3 }}>{I.more}</span>
                    </div>
                  );})}
                </div>

                {/* danger zone */}
                <div style={{
                  marginTop:24, border:`1px solid ${t.border}`, borderLeft:`3px solid ${t.error}`,
                  borderRadius:'var(--cp-radius)', background:t.bg1,
                  padding:'16px 18px',
                }}>
                  <div style={{ fontSize:11, color:t.error, fontFamily:monoVar, textTransform:'uppercase', letterSpacing:0.6, fontWeight:500, marginBottom:10 }}>Danger zone</div>
                  <div style={{ display:'flex', alignItems:'center', gap:14 }}>
                    <div style={{ flex:1 }}>
                      <div style={{ fontSize:13, fontWeight:500, color:t.text0 }}>Transfer ownership</div>
                      <div style={{ fontSize:12, color:t.text2, marginTop:2 }}>Move workspace ownership to another admin. This action cannot be undone.</div>
                    </div>
                    <button style={{...ghostBtn(t), color:t.error, borderColor:t.border}}>Transfer</button>
                  </div>
                  <div style={{ height:1, background:t.border, margin:'14px 0' }}/>
                  <div style={{ display:'flex', alignItems:'center', gap:14 }}>
                    <div style={{ flex:1 }}>
                      <div style={{ fontSize:13, fontWeight:500, color:t.text0 }}>Delete workspace</div>
                      <div style={{ fontSize:12, color:t.text2, marginTop:2 }}>Permanently delete <span style={{ fontFamily:monoVar, color:t.text1 }}>Nexus Labs</span> and all 14 members' access.</div>
                    </div>
                    <button style={{
                      background:t.error, color:'#fff', border:'none', borderRadius:'var(--cp-radius-sm)',
                      padding:'7px 12px', fontSize:12.5, fontWeight:500, cursor:'pointer',
                    }}>Delete workspace</button>
                  </div>
                </div>
              </div>
            </div>
          </main>
        </div>
      )}
    </Frame>
  );
}

function SubNav({ t, label, active, count }) {
  return (
    <div style={{
      display:'flex', alignItems:'center', gap:8,
      padding:'6px 10px', borderRadius:'var(--cp-radius-sm)', cursor:'pointer',
      background: active ? t.bg3 : 'transparent',
      color: active ? t.text0 : t.text1, fontSize:12.5,
      fontWeight: active ? 500 : 400,
      border: active ? `1px solid ${t.border}` : '1px solid transparent',
      position:'relative', marginBottom:1,
    }}>
      {active && <span style={{ position:'absolute', left:-1, top:6, bottom:6, width:2, background:t.accent, borderRadius:2 }}/>}
      <span style={{ flex:1 }}>{label}</span>
      {count != null && <span style={{ fontFamily:monoVar, fontSize:10.5, color:t.text2, padding:'1px 5px', background:t.bg2, borderRadius:99, border:`1px solid ${t.border}` }}>{count}</span>}
    </div>
  );
}

// ── shared sidebar/topbar ──
function Sidebar({ t, active }) {
  return (
    <aside style={{ background:t.bg1, borderRight:`1px solid ${t.border}`, display:'flex', flexDirection:'column', minHeight:0 }}>
      <div style={{ padding:'12px 12px 10px', borderBottom:`1px solid ${t.border}` }}>
        <div style={{
          display:'flex', alignItems:'center', gap:9, padding:'6px 8px',
          borderRadius:'var(--cp-radius-sm)', border:`1px solid ${t.border}`, background:t.bg2,
        }}>
          <div style={{ width:22, height:22, borderRadius:'var(--cp-radius-xs)', background:t.accent, color:t.accentInk, display:'grid', placeItems:'center', fontFamily:monoVar, fontWeight:600, fontSize:11 }}>NX</div>
          <div style={{ flex:1, lineHeight:1.2, minWidth:0 }}>
            <div style={{ fontSize:12.5, fontWeight:500, color:t.text0 }}>Nexus Labs</div>
            <div style={{ fontSize:10.5, color:t.text2, fontFamily:monoVar }}>production</div>
          </div>
          <span style={{ color:t.text2 }}>{I.arrowDown}</span>
        </div>
      </div>
      <div style={{ flex:1, overflow:'auto', padding:'10px 8px' }}>
        <div style={{ fontSize:10.5, color:t.text3, padding:'6px 10px 4px', textTransform:'uppercase', letterSpacing:0.6, fontWeight:500 }}>Workspace</div>
        <NavItem icon={I.home}     label="Overview"  active={active==='Overview'} t={t}/>
        <NavItem icon={I.layers}   label="Services"  count="24" active={active==='Services'} t={t}/>
        <NavItem icon={I.pulse}    label="Metrics"   t={t}/>
        <NavItem icon={I.database} label="Logs"      t={t}/>
        <NavItem icon={I.branch}   label="Deploys"   count="3" t={t}/>
        <NavItem icon={I.inbox}    label="Inbox"     count="12" t={t}/>
        <NavItem icon={I.zap}      label="Invoices"  active={active==='Invoices'} t={t}/>

        <div style={{ fontSize:10.5, color:t.text3, padding:'14px 10px 4px', textTransform:'uppercase', letterSpacing:0.6, fontWeight:500 }}>Account</div>
        <NavItem icon={I.users} label="Team" t={t}/>
        <NavItem icon={I.gear}  label="Settings" active={active==='Settings'} t={t}/>
      </div>
      <div style={{ padding:'10px 12px', borderTop:`1px solid ${t.border}`, display:'flex', alignItems:'center', gap:9 }}>
        <div style={{ width:26, height:26, borderRadius:99, background:`linear-gradient(135deg, ${t.chart2}, ${t.chart4})`, color:'#fff', display:'grid', placeItems:'center', fontSize:11, fontWeight:600, fontFamily:monoVar }}>AK</div>
        <div style={{ flex:1, lineHeight:1.2 }}>
          <div style={{ fontSize:12, color:t.text0, fontWeight:500 }}>Aria Kessler</div>
          <div style={{ fontSize:10.5, color:t.text2, fontFamily:monoVar }}>aria@nexus.dev</div>
        </div>
        <span style={{ color:t.text2 }}>{I.more}</span>
      </div>
    </aside>
  );
}

function Topbar({ t, crumbs, cta }) {
  return (
    <header style={{
      height:48, padding:'0 16px', borderBottom:`1px solid ${t.border}`,
      display:'flex', alignItems:'center', gap:12, background:t.bg0,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:8, fontSize:12.5, color:t.text2 }}>
        {crumbs.map((c,i,a) => (
          <React.Fragment key={i}>
            <span style={{ color: i===a.length-1 ? t.text0 : t.text2, fontWeight: i===a.length-1?500:400 }}>{c}</span>
            {i<a.length-1 && <span style={{ color:t.text3 }}>/</span>}
          </React.Fragment>
        ))}
      </div>
      <span style={{ flex:1 }}/>
      <div style={{ display:'flex', alignItems:'center', gap:8, padding:'4px 8px 4px 10px', minWidth:280, border:`1px solid ${t.border}`, borderRadius:'var(--cp-radius-sm)', background:t.bg1, color:t.text2, fontSize:12.5 }}>
        {I.search}<span style={{ flex:1 }}>Search…</span><Kbd t={t}>⌘</Kbd><Kbd t={t}>K</Kbd>
      </div>
      <button style={iconBtn(t)}>{I.bell}</button>
      {cta && (
        <button style={{ background:t.accent, color:t.accentInk, border:'none', borderRadius:'var(--cp-radius-sm)', padding:'6px 12px', fontSize:12.5, fontWeight:500, cursor:'pointer', display:'inline-flex', alignItems:'center', gap:6 }}>{I.plus} {cta}</button>
      )}
    </header>
  );
}

Object.assign(window, {
  TableView, DetailView, CmdKView, MarketingView, MobilePair, SettingsView,
  MobileHome, MobileDetail, PhoneFrame, Sidebar, Topbar, SubNav, FilterChip, Frame,
  tableRows, teamMembers, paletteGroups, marketingFeatures, marketingStats,
});