// Super Admin screens — Platform overview, Feature Control Center, Stores, Plans & roles

const SAstyles = { fontFamily: 'Inter, -apple-system, system-ui, sans-serif' };

// ═════════════════════════════════════════════════════════════
// SA-1) PLATFORM OVERVIEW
// ═════════════════════════════════════════════════════════════
function SuperOverview() {
  const kpis = [
    { l: 'Network GMV (MTD)', v: '₹18.4 Cr', d: '+22%', up: true, Icon: IconStar },
    { l: 'Active stores', v: '142', d: '+6 this month', up: true, Icon: IconLoc },
    { l: 'Orders (today)', v: '48,210', d: '+11%', up: true, Icon: IconBox },
    { l: 'Platform uptime', v: '99.98%', d: '30-day', up: true, Icon: IconShield },
  ];
  const stores = [
    { name: 'Indiranagar', city: 'Bengaluru', gmv: '₹52.4L', orders: 9840, status: 'Live', tone: 'mint' },
    { name: 'Bandra West', city: 'Mumbai', gmv: '₹61.2L', orders: 11200, status: 'Live', tone: 'mint' },
    { name: 'Connaught Place', city: 'Delhi', gmv: '₹48.9L', orders: 8900, status: 'Live', tone: 'mint' },
    { name: 'Banjara Hills', city: 'Hyderabad', gmv: '₹38.1L', orders: 7100, status: 'Degraded', tone: 'amber' },
    { name: 'Salt Lake', city: 'Kolkata', gmv: '₹0', orders: 0, status: 'Onboarding', tone: 'blue' },
  ];
  return (
    <SuperShell active="overview" title="Platform overview" sub="Network-wide · May 2026"
      actions={<button style={{ ...SAstyles, background: SA.accent, color: 'white', border: 'none', borderRadius: 10, padding: '10px 16px', fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 8 }}><IconPlus size={16}/> Add store</button>}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {kpis.map((k, i) => (
          <div key={i} style={{ background: 'white', borderRadius: 16, padding: 18, border: `1px solid ${C.ink100}` }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ width: 38, height: 38, borderRadius: 11, background: SA.accentSoft, color: SA.accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><k.Icon size={20}/></div>
              <span style={{ fontSize: 11, fontWeight: 700, color: C.mint500 }}>▲ {k.d}</span>
            </div>
            <div className="mono" style={{ fontSize: 24, fontWeight: 700, marginTop: 14, letterSpacing: -0.02 }}>{k.v}</div>
            <div style={{ fontSize: 12, color: C.ink500, marginTop: 2 }}>{k.l}</div>
          </div>
        ))}
      </div>

      {/* GMV by region bars + feature adoption */}
      <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1.7fr 1fr', gap: 16 }}>
        <div style={{ background: 'white', borderRadius: 16, padding: 20, border: `1px solid ${C.ink100}` }}>
          <div style={{ fontSize: 15, fontWeight: 700 }}>GMV by city · last 7 days</div>
          <div style={{ marginTop: 24 }}>
            <MiniBars color={SA.accent} data={[
              { l: 'BLR', v: 184, hot: true }, { l: 'MUM', v: 212, hot: true }, { l: 'DEL', v: 168 }, { l: 'HYD', v: 121 },
              { l: 'KOL', v: 88 }, { l: 'PUN', v: 96 }, { l: 'CHN', v: 142 },
            ]}/>
          </div>
        </div>
        <div style={{ background: 'white', borderRadius: 16, padding: 20, border: `1px solid ${C.ink100}` }}>
          <div style={{ fontSize: 15, fontWeight: 700 }}>Feature adoption</div>
          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 13 }}>
            {[
              { l: 'Express delivery', p: 92, c: C.mint500 },
              { l: 'Doctor consults', p: 68, c: SA.accent },
              { l: 'Lab tests', p: 54, c: C.blue600 },
              { l: 'Subscriptions', p: 31, c: C.amber500 },
            ].map((r, i) => (
              <div key={i}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 5 }}>
                  <span style={{ color: C.ink700, fontWeight: 600 }}>{r.l}</span>
                  <span className="mono" style={{ fontWeight: 700 }}>{r.p}%</span>
                </div>
                <div style={{ height: 7, background: C.ink100, borderRadius: 4, overflow: 'hidden' }}>
                  <div style={{ width: r.p + '%', height: '100%', background: r.c }}/>
                </div>
                <div style={{ fontSize: 10, color: C.ink400, marginTop: 3 }}>of {142} stores enabled</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Stores table */}
      <div style={{ marginTop: 16, background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden' }}>
        <div style={{ padding: '16px 20px', borderBottom: `1px solid ${C.ink100}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 15, fontWeight: 700 }}>Top stores</div>
          <span style={{ fontSize: 13, color: SA.accent, fontWeight: 600 }}>All 142 stores →</span>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: C.ink50, color: C.ink500, fontSize: 11, fontWeight: 700 }}>
              {['STORE', 'CITY', 'GMV (MTD)', 'ORDERS', 'STATUS', ''].map((h, i) => (
                <th key={i} style={{ padding: '12px 20px', textAlign: 'left', fontWeight: 700, letterSpacing: 0.3 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {stores.map((s, i) => (
              <tr key={i} style={{ borderTop: `1px solid ${C.ink100}` }}>
                <td style={{ padding: '12px 20px', fontWeight: 700 }}>{s.name}</td>
                <td style={{ padding: '12px 20px', color: C.ink700 }}>{s.city}</td>
                <td style={{ padding: '12px 20px' }}><span className="mono" style={{ fontWeight: 700 }}>{s.gmv}</span></td>
                <td style={{ padding: '12px 20px' }}><span className="mono" style={{ color: C.ink600 || C.ink700 }}>{s.orders.toLocaleString()}</span></td>
                <td style={{ padding: '12px 20px' }}><AdminStatus label={s.status} tone={s.tone}/></td>
                <td style={{ padding: '12px 20px', textAlign: 'right' }}><IconChevR size={16} style={{ color: C.ink300 }}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </SuperShell>
  );
}

// ═════════════════════════════════════════════════════════════
// SA-2) FEATURE CONTROL CENTER  ★ the main ask
// ═════════════════════════════════════════════════════════════
function SuperFeatures() {
  const groups = [
    { h: 'Storefront', Icon: IconHome, feats: [
      { l: 'Mobile apps (iOS / Android)', d: 'Customer-facing native apps', on: true, status: 'Live', tone: 'mint', rollout: 100 },
      { l: 'Web storefront', d: 'Desktop & responsive web shop', on: true, status: 'Live', tone: 'mint', rollout: 100 },
      { l: 'Voice & barcode search', d: 'Mic input and scan-to-search', on: true, status: 'Live', tone: 'mint', rollout: 88 },
      { l: 'AI symptom checker', d: 'Suggests OTC products from symptoms', on: false, status: 'Off', tone: 'gray', rollout: 0 },
    ]},
    { h: 'Commerce', Icon: IconCart, feats: [
      { l: 'Express delivery (28 min)', d: 'Hyperlocal rider dispatch', on: true, status: 'Live', tone: 'mint', rollout: 92 },
      { l: 'Subscriptions & auto-refill', d: 'Recurring medicine orders', on: true, status: 'Beta', tone: 'amber', rollout: 31 },
      { l: 'Generic substitution', d: 'Suggest cheaper equivalents', on: true, status: 'Live', tone: 'mint', rollout: 76 },
      { l: 'Buy-now-pay-later', d: 'Health EMI on orders > ₹2,000', on: false, status: 'Off', tone: 'gray', rollout: 0 },
    ]},
    { h: 'Health services', Icon: IconRx, feats: [
      { l: 'Prescription upload & verify', d: 'Pharmacist review workflow', on: true, status: 'Live', tone: 'mint', rollout: 100 },
      { l: 'Doctor consultations', d: 'Video / chat / audio consults', on: true, status: 'Live', tone: 'mint', rollout: 68 },
      { l: 'Lab tests at home', d: 'Sample collection & reports', on: true, status: 'Live', tone: 'mint', rollout: 54 },
      { l: 'Medicine reminders', d: 'Dose schedule & adherence', on: true, status: 'Live', tone: 'mint', rollout: 82 },
    ]},
    { h: 'Payments', Icon: IconCard, feats: [
      { l: 'UPI', d: 'GPay, PhonePe, Paytm, BHIM', on: true, status: 'Live', tone: 'mint', rollout: 100 },
      { l: 'Cards & netbanking', d: 'Credit / debit / NB', on: true, status: 'Live', tone: 'mint', rollout: 100 },
      { l: 'Cash on delivery', d: 'For orders under ₹2,000', on: true, status: 'Live', tone: 'mint', rollout: 96 },
      { l: 'Health wallet & cashback', d: 'Store credit & refunds', on: false, status: 'Paused', tone: 'rose', rollout: 0 },
    ]},
    { h: 'Engagement', Icon: IconStar, feats: [
      { l: 'JANA+ loyalty program', d: 'Points, tiers & cashback', on: true, status: 'Live', tone: 'mint', rollout: 100 },
      { l: 'Coupons & promotions', d: 'Discount codes & campaigns', on: true, status: 'Live', tone: 'mint', rollout: 100 },
      { l: 'Push & WhatsApp notifications', d: 'Order & reminder alerts', on: true, status: 'Live', tone: 'mint', rollout: 94 },
      { l: 'Referral program', d: 'Refer & earn credits', on: false, status: 'Off', tone: 'gray', rollout: 0 },
    ]},
  ];
  return (
    <SuperShell active="features" title="Feature control center" sub="22 capabilities · 16 live · 6 disabled across the network"
      actions={
        <div style={{ ...SAstyles, display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', borderRadius: 10, background: C.rose100, border: `1px solid ${C.rose500}33` }}>
            <IconShield size={16} style={{ color: C.rose500 }}/>
            <span style={{ fontSize: 12, fontWeight: 700, color: '#7A1C1F' }}>Kill switch</span>
            <BigToggle on={false} accent={C.rose500}/>
          </div>
        </div>
      }>
      {/* Scope selector */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18, padding: 14, borderRadius: 14, background: 'white', border: `1px solid ${C.ink100}` }}>
        <span style={{ fontSize: 12, fontWeight: 700, color: C.ink500 }}>APPLY TO</span>
        <div style={{ display: 'flex', gap: 6 }}>
          {[{ l: 'All stores (142)', on: true }, { l: 'By region', on: false }, { l: 'Single store', on: false }].map((s, i) => (
            <div key={i} style={{ padding: '7px 14px', borderRadius: 9, fontSize: 12, fontWeight: 600, background: s.on ? SA.accent : C.ink50, color: s.on ? 'white' : C.ink700 }}>{s.l}</div>
          ))}
        </div>
        <div style={{ flex: 1 }}/>
        <span style={{ fontSize: 12, color: C.ink500 }}>Changes apply instantly &amp; are logged to the audit trail</span>
      </div>

      {/* Feature groups */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {groups.map((g, gi) => (
          <div key={gi} style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden' }}>
            <div style={{ padding: '14px 20px', borderBottom: `1px solid ${C.ink100}`, display: 'flex', alignItems: 'center', gap: 10, background: C.ink50 }}>
              <div style={{ width: 30, height: 30, borderRadius: 8, background: SA.accentSoft, color: SA.accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><g.Icon size={17}/></div>
              <div style={{ fontSize: 14, fontWeight: 700 }}>{g.h}</div>
              <div className="mono" style={{ fontSize: 11, color: C.ink400 }}>{g.feats.filter(f => f.on).length}/{g.feats.length} on</div>
            </div>
            {g.feats.map((f, fi) => (
              <div key={fi} style={{ padding: '14px 20px', borderBottom: fi < g.feats.length - 1 ? `1px solid ${C.ink100}` : 'none', display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ fontSize: 14, fontWeight: 600, color: f.on ? C.ink900 : C.ink500 }}>{f.l}</span>
                    <AdminStatus label={f.status} tone={f.tone}/>
                  </div>
                  <div style={{ fontSize: 12, color: C.ink500, marginTop: 3 }}>{f.d}</div>
                </div>
                {/* rollout */}
                <div style={{ width: 160 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: C.ink400, marginBottom: 4, fontWeight: 600 }}>
                    <span>ROLLOUT</span><span className="mono">{f.rollout}%</span>
                  </div>
                  <div style={{ height: 6, background: C.ink100, borderRadius: 3, overflow: 'hidden' }}>
                    <div style={{ width: f.rollout + '%', height: '100%', background: f.on ? SA.accent : C.ink200 }}/>
                  </div>
                </div>
                <span style={{ fontSize: 12, fontWeight: 600, color: SA.accent, width: 56, textAlign: 'right' }}>Config</span>
                <BigToggle on={f.on}/>
              </div>
            ))}
          </div>
        ))}
      </div>
    </SuperShell>
  );
}

// ═════════════════════════════════════════════════════════════
// SA-3) STORES & TENANTS
// ═════════════════════════════════════════════════════════════
function SuperStores() {
  const stores = [
    { name: 'Indiranagar', city: 'Bengaluru', plan: 'Enterprise', tone: 'blue', gmv: '₹52.4L', feats: 20, status: 'Live', sTone: 'mint' },
    { name: 'Bandra West', city: 'Mumbai', plan: 'Enterprise', tone: 'blue', gmv: '₹61.2L', feats: 22, status: 'Live', sTone: 'mint' },
    { name: 'Connaught Place', city: 'Delhi', plan: 'Growth', tone: 'amber', gmv: '₹48.9L', feats: 16, status: 'Live', sTone: 'mint' },
    { name: 'Banjara Hills', city: 'Hyderabad', plan: 'Growth', tone: 'amber', gmv: '₹38.1L', feats: 16, status: 'Degraded', sTone: 'amber' },
    { name: 'Koregaon Park', city: 'Pune', plan: 'Starter', tone: 'gray', gmv: '₹22.4L', feats: 11, status: 'Live', sTone: 'mint' },
    { name: 'Salt Lake', city: 'Kolkata', plan: 'Starter', tone: 'gray', gmv: '₹0', feats: 8, status: 'Onboarding', sTone: 'blue' },
    { name: 'Anna Nagar', city: 'Chennai', plan: 'Growth', tone: 'amber', gmv: '₹41.8L', feats: 17, status: 'Live', sTone: 'mint' },
  ];
  return (
    <SuperShell active="stores" title="Stores & tenants" sub="142 stores · 38 cities · 3 plan tiers"
      actions={<button style={{ ...SAstyles, background: SA.accent, color: 'white', border: 'none', borderRadius: 10, padding: '10px 16px', fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 8 }}><IconPlus size={16}/> Onboard store</button>}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
        {['All (142)', 'Enterprise (28)', 'Growth (64)', 'Starter (50)', 'Onboarding (4)'].map((f, i) => (
          <div key={f} style={{ padding: '8px 14px', borderRadius: 10, fontSize: 12, fontWeight: 600, background: i === 0 ? SA.ink : 'white', color: i === 0 ? 'white' : C.ink700, border: i === 0 ? 'none' : `1px solid ${C.ink200}` }}>{f}</div>
        ))}
      </div>
      <div style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: C.ink50, color: C.ink500, fontSize: 11, fontWeight: 700 }}>
              {['STORE', 'CITY', 'PLAN', 'GMV (MTD)', 'FEATURES ON', 'STATUS', ''].map((h, i) => (
                <th key={i} style={{ padding: '12px 18px', textAlign: 'left', fontWeight: 700, letterSpacing: 0.3 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {stores.map((s, i) => (
              <tr key={i} style={{ borderTop: `1px solid ${C.ink100}` }}>
                <td style={{ padding: '13px 18px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <div style={{ width: 34, height: 34, borderRadius: 9, background: SA.accentSoft, color: SA.accent, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><IconLoc size={17}/></div>
                    <div style={{ fontWeight: 700 }}>{s.name}</div>
                  </div>
                </td>
                <td style={{ padding: '13px 18px', color: C.ink700 }}>{s.city}</td>
                <td style={{ padding: '13px 18px' }}><AdminStatus label={s.plan} tone={s.tone}/></td>
                <td style={{ padding: '13px 18px' }}><span className="mono" style={{ fontWeight: 700 }}>{s.gmv}</span></td>
                <td style={{ padding: '13px 18px' }}><span className="mono" style={{ fontWeight: 700 }}>{s.feats}</span><span className="mono" style={{ color: C.ink400 }}> / 22</span></td>
                <td style={{ padding: '13px 18px' }}><AdminStatus label={s.status} tone={s.sTone}/></td>
                <td style={{ padding: '13px 18px', textAlign: 'right' }}><span style={{ fontSize: 12, fontWeight: 600, color: SA.accent }}>Manage →</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </SuperShell>
  );
}

// ═════════════════════════════════════════════════════════════
// SA-4) PLANS & ROLES (access control)
// ═════════════════════════════════════════════════════════════
function SuperPlans() {
  const plans = [
    { name: 'Starter', price: '₹4,999', period: '/mo', stores: 50, tone: 'gray', feats: ['Web + mobile storefront', 'UPI & COD payments', 'Up to 1,000 SKUs', 'Basic analytics', 'Email support'] },
    { name: 'Growth', price: '₹14,999', period: '/mo', stores: 64, tone: 'amber', popular: true, feats: ['Everything in Starter', 'Express delivery + dispatch', 'Doctor consults & lab tests', 'Loyalty & promotions', 'Priority support'] },
    { name: 'Enterprise', price: 'Custom', period: '', stores: 28, tone: 'blue', feats: ['Everything in Growth', 'Subscriptions & BNPL', 'Multi-store management', 'API & integrations', 'Dedicated success manager'] },
  ];
  const roles = [
    { role: 'Platform owner', users: 2, perms: 'Full access · all stores & billing', tone: 'rose' },
    { role: 'Regional manager', users: 8, perms: 'Manage assigned stores & staff', tone: 'amber' },
    { role: 'Store admin', users: 142, perms: 'Single-store operations & catalog', tone: 'blue' },
    { role: 'Pharmacist', users: 420, perms: 'Rx verification & dispensing', tone: 'mint' },
    { role: 'Support agent', users: 64, perms: 'Read-only orders & customer chat', tone: 'gray' },
  ];
  return (
    <SuperShell active="plans" title="Plans & access" sub="Subscription tiers and platform roles">
      {/* Plans */}
      <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 12 }}>Subscription plans</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 24 }}>
        {plans.map((p, i) => (
          <div key={i} style={{ background: p.popular ? SA.ink : 'white', color: p.popular ? 'white' : C.ink900, borderRadius: 18, padding: 22, border: p.popular ? 'none' : `1px solid ${C.ink100}`, position: 'relative', overflow: 'hidden' }}>
            {p.popular && <div style={{ position: 'absolute', top: 16, right: 16, fontSize: 9, fontWeight: 700, letterSpacing: 0.5, padding: '3px 8px', borderRadius: 6, background: SA.accent, color: 'white' }}>MOST POPULAR</div>}
            <div style={{ fontSize: 16, fontWeight: 700 }}>{p.name}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 10 }}>
              <span className="mono" style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.02 }}>{p.price}</span>
              <span style={{ fontSize: 13, color: p.popular ? 'rgba(255,255,255,0.6)' : C.ink500 }}>{p.period}</span>
            </div>
            <div style={{ fontSize: 11, color: p.popular ? 'rgba(255,255,255,0.6)' : C.ink500, marginTop: 4 }}>{p.stores} stores on this plan</div>
            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 9 }}>
              {p.feats.map((f, fi) => (
                <div key={fi} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: p.popular ? 'rgba(255,255,255,0.85)' : C.ink700 }}>
                  <div style={{ width: 16, height: 16, borderRadius: 8, background: p.popular ? 'rgba(109,91,255,0.4)' : C.mint100, color: p.popular ? 'white' : C.mint500, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><IconCheck size={10}/></div>
                  {f}
                </div>
              ))}
            </div>
            <button style={{ marginTop: 18, width: '100%', background: p.popular ? SA.accent : C.ink50, color: p.popular ? 'white' : C.ink700, border: 'none', borderRadius: 10, padding: '11px 0', fontSize: 13, fontWeight: 700 }}>Edit plan</button>
          </div>
        ))}
      </div>

      {/* Roles */}
      <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 12 }}>Roles &amp; permissions</div>
      <div style={{ background: 'white', borderRadius: 16, border: `1px solid ${C.ink100}`, overflow: 'hidden' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
          <thead>
            <tr style={{ background: C.ink50, color: C.ink500, fontSize: 11, fontWeight: 700 }}>
              {['ROLE', 'USERS', 'PERMISSIONS', ''].map((h, i) => (
                <th key={i} style={{ padding: '12px 20px', textAlign: 'left', fontWeight: 700, letterSpacing: 0.3 }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {roles.map((r, i) => (
              <tr key={i} style={{ borderTop: `1px solid ${C.ink100}` }}>
                <td style={{ padding: '13px 20px' }}><div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><span style={{ width: 8, height: 8, borderRadius: 4, background: { rose: C.rose500, amber: C.amber500, blue: C.blue600, mint: C.mint500, gray: C.ink300 }[r.tone] }}/><span style={{ fontWeight: 700 }}>{r.role}</span></div></td>
                <td style={{ padding: '13px 20px' }}><span className="mono" style={{ fontWeight: 700 }}>{r.users}</span></td>
                <td style={{ padding: '13px 20px', color: C.ink600 || C.ink700 }}>{r.perms}</td>
                <td style={{ padding: '13px 20px', textAlign: 'right' }}><span style={{ fontSize: 12, fontWeight: 600, color: SA.accent }}>Edit access →</span></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </SuperShell>
  );
}

Object.assign(window, { SuperOverview, SuperFeatures, SuperStores, SuperPlans });