// CMS Admin — internal tool for managing content
// Dense, functional, Linear/Notion-esque admin UI

const CMS = ({ setPage }) => {
  const [view, setView] = React.useState('dashboard');
  const [collection, setCollection] = React.useState('projects');
  const [selected, setSelected] = React.useState(null);

  return (
    <div style={{
      display:'grid',
      gridTemplateColumns:'240px 1fr',
      minHeight:'100vh',
      background:'#070708',
      color:'var(--ink)',
      fontSize:14
    }}>
      <CMSSidebar view={view} setView={setView} setPage={setPage}
                  collection={collection} setCollection={setCollection}
                  setSelected={setSelected}/>
      <div style={{display:'flex',flexDirection:'column',minWidth:0}}>
        <CMSTopbar view={view} collection={collection} selected={selected}/>
        <div style={{flex:1, overflow:'auto'}}>
          {view === 'dashboard' && <CMSDashboard setView={setView} setCollection={setCollection} setSelected={setSelected} setPage={setPage}/>}
          {view === 'collection' && !selected && <CMSCollection collection={collection} onOpen={setSelected}/>}
          {view === 'collection' && selected && <CMSEditor item={selected} onBack={()=>setSelected(null)} collection={collection}/>}
          {view === 'media' && <CMSMedia/>}
          {view === 'users' && <CMSUsers/>}
          {view === 'settings' && <CMSSettings/>}
          {view === 'activity' && <CMSActivity/>}
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// SIDEBAR

const CMSSidebar = ({ view, setView, setPage, collection, setCollection, setSelected }) => {
  const collections = [
    { id:'projects', label:'Projects', count: PORTFOLIO.length, hot: 1 },
    { id:'posts', label:'Journal', count: POSTS.length, hot: 0 },
    { id:'tools', label:'Tools', count: TOOLS.length, hot: 0 },
    { id:'team', label:'Team', count: TEAM.length, hot: 0 },
    { id:'services', label:'Services', count: SERVICES.length, hot: 0 },
  ];
  const controllers = [
    { page:'analytics',  icon:'↗', label:'Analytics studio',  badge:'NEW', tone:'accent' },
    { page:'email',      icon:'✉', label:'Email studio',      badge:null },
    { page:'onboarding', icon:'◐', label:'Onboarding',         badge:null },
    { page:'portal',     icon:'◉', label:'Client portal',      badge:null },
    { page:'plan',       icon:'▢', label:'Project plan',       badge:null },
    { page:'pricing',    icon:'$', label:'Pricing & billing',  badge:null },
  ];
  return (
    <aside style={{
      borderRight:'1px solid var(--line)',
      background:'#0a0a0b',
      display:'flex',
      flexDirection:'column',
      position:'sticky',
      top:0,
      height:'100vh'
    }}>
      <div style={{padding:'16px 18px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center', gap:10}}>
        <span style={{display:'inline-flex',alignItems:'center',justifyContent:'center',width:28,height:28,border:'1px solid var(--line-2)',borderRadius:8,color:'var(--accent)'}}>{Icon.atom()}</span>
        <div style={{flex:1, minWidth:0}}>
          <div style={{fontWeight:600,fontSize:13,letterSpacing:'-0.005em',lineHeight:1.1}}>SolidAtoms</div>
          <div className="mono" style={{fontSize:9,color:'var(--accent)',letterSpacing:'0.06em',marginTop:2}}>SUPER-ADMIN · v0.4</div>
        </div>
        <button onClick={()=>setPage('home')} title="Back to site" style={{padding:5,borderRadius:6,color:'var(--ink-3)'}}>↗</button>
      </div>

      <div style={{padding:'14px 12px', display:'flex', flexDirection:'column', gap:2, flex:1, overflow:'auto'}}>
        <SidebarSection label="Workspace"/>
        <SidebarItem icon="◐" label="Dashboard" active={view==='dashboard'} onClick={()=>{setView('dashboard');setSelected(null)}}/>
        <SidebarItem icon="◌" label="Activity" active={view==='activity'} onClick={()=>{setView('activity');setSelected(null)}}/>

        <SidebarSection label="Collections" right={<span className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em'}}>+</span>}/>
        {collections.map(c => (
          <SidebarItem
            key={c.id}
            icon="▤"
            label={c.label}
            count={c.count}
            hot={c.hot}
            active={view==='collection' && collection===c.id}
            onClick={()=>{setView('collection'); setCollection(c.id); setSelected(null)}}
          />
        ))}

        <SidebarSection label="Library"/>
        <SidebarItem icon="◇" label="Media" count={284} active={view==='media'} onClick={()=>{setView('media');setSelected(null)}}/>

        <SidebarSection label="Admin"/>
        <SidebarItem icon="◍" label="Team & roles" count={5} active={view==='users'} onClick={()=>{setView('users');setSelected(null)}}/>
        <SidebarItem icon="◯" label="Settings" active={view==='settings'} onClick={()=>{setView('settings');setSelected(null)}}/>

        <SidebarSection label="Controllers" right={<span className="mono" style={{fontSize:9,color:'var(--accent)',letterSpacing:'0.06em'}}>{controllers.length}</span>}/>
        {controllers.map(c => (
          <button key={c.page} onClick={()=>setPage(c.page)} style={{
            display:'flex',alignItems:'center',gap:10,padding:'7px 10px',borderRadius:7,
            background:'transparent',color:'var(--ink-2)',fontSize:13,width:'100%',textAlign:'left',
            transition:'all .12s ease'
          }}
          onMouseEnter={e=>{e.currentTarget.style.background='rgba(255,255,255,0.03)';e.currentTarget.style.color='var(--ink)'}}
          onMouseLeave={e=>{e.currentTarget.style.background='transparent';e.currentTarget.style.color='var(--ink-2)'}}>
            <span style={{width:14,fontSize:11,color:'var(--ink-3)'}}>{c.icon}</span>
            <span style={{flex:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{c.label}</span>
            {c.badge && <span className="mono" style={{fontSize:8,padding:'2px 5px',borderRadius:3,background:'var(--accent)',color:'#0a0a0a',fontWeight:600,letterSpacing:'0.06em'}}>{c.badge}</span>}
            <span style={{color:'var(--ink-4)',fontSize:11}}>↗</span>
          </button>
        ))}
      </div>

      <div style={{padding:'12px 12px', borderTop:'1px solid var(--line)'}}>
        <div style={{display:'flex',alignItems:'center',gap:10,padding:'8px 10px',borderRadius:8,background:'rgba(255,255,255,0.02)',border:'1px solid var(--line)'}}>
          <span style={{width:28,height:28,borderRadius:'50%',background:'linear-gradient(135deg, rgba(212,255,58,0.4), rgba(212,255,58,0.15))',border:'1px solid rgba(212,255,58,0.4)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:11,fontWeight:600,color:'var(--accent)'}}>HA</span>
          <div style={{flex:1,minWidth:0}}>
            <div style={{fontSize:12,fontWeight:500,lineHeight:1.2}}>Hassan A.</div>
            <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.04em',marginTop:1}}>OWNER</div>
          </div>
          <span style={{color:'var(--ink-3)',fontSize:14}}>⋯</span>
        </div>
      </div>
    </aside>
  );
};

const SidebarSection = ({ label, right }) => (
  <div style={{padding:'14px 10px 6px',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
    <span className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',textTransform:'uppercase'}}>{label}</span>
    {right}
  </div>
);

const SidebarItem = ({ icon, label, count, active, hot, onClick }) => (
  <button onClick={onClick} style={{
    display:'flex',alignItems:'center',gap:10,padding:'7px 10px',borderRadius:7,
    background: active ? 'rgba(212,255,58,0.08)' : 'transparent',
    color: active ? 'var(--accent)' : 'var(--ink-2)',
    fontSize:13,fontWeight: active ? 500 : 400,
    transition:'all .12s ease',width:'100%',textAlign:'left'
  }}
  onMouseEnter={(e)=>{if(!active) e.currentTarget.style.background='rgba(255,255,255,0.03)'}}
  onMouseLeave={(e)=>{if(!active) e.currentTarget.style.background='transparent'}}>
    <span style={{width:14,fontSize:11,color: active ? 'var(--accent)' : 'var(--ink-3)'}}>{icon}</span>
    <span style={{flex:1,minWidth:0,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{label}</span>
    {hot > 0 && <span className="mono" style={{fontSize:9,padding:'2px 5px',borderRadius:4,background:'var(--accent)',color:'#0a0a0a',fontWeight:600}}>{hot}</span>}
    {count != null && <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{count}</span>}
  </button>
);

// ─────────────────────────────────────────────────────────────────
// TOPBAR

const CMSTopbar = ({ view, collection, selected }) => {
  const labels = {
    dashboard:['Workspace','Dashboard'],
    collection:['Collections', collection],
    media:['Library','Media'],
    users:['Admin','Team & roles'],
    settings:['Admin','Settings'],
    activity:['Workspace','Activity']
  };
  const [section, page] = labels[view] || ['—','—'];
  return (
    <header style={{
      display:'flex',alignItems:'center',justifyContent:'space-between',
      padding:'12px 24px',borderBottom:'1px solid var(--line)',
      background:'rgba(10,10,11,0.7)',backdropFilter:'blur(12px)',
      position:'sticky',top:0,zIndex:20
    }}>
      <div style={{display:'flex',alignItems:'center',gap:10,fontSize:13,color:'var(--ink-3)'}}>
        <span>{section}</span>
        <span style={{color:'var(--ink-4)'}}>/</span>
        <span style={{color:'var(--ink-2)',textTransform:'capitalize'}}>{page}</span>
        {selected && <>
          <span style={{color:'var(--ink-4)'}}>/</span>
          <span style={{color:'var(--ink)',fontWeight:500}}>{selected.name || selected.title}</span>
        </>}
      </div>

      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <div style={{display:'flex',alignItems:'center',gap:8,padding:'7px 12px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)',width:260}}>
          <span style={{color:'var(--ink-3)',fontSize:12}}>⌕</span>
          <input placeholder="Search everything…" style={{flex:1,background:'transparent',border:0,color:'var(--ink)',outline:'none',fontSize:12,fontFamily:'var(--sans)'}}/>
          <span className="mono" style={{fontSize:10,color:'var(--ink-3)',padding:'2px 5px',background:'rgba(255,255,255,0.04)',border:'1px solid var(--line)',borderRadius:4}}>⌘K</span>
        </div>
        <button style={{padding:'7px 9px',borderRadius:8,border:'1px solid var(--line)',color:'var(--ink-2)',fontSize:13}}>○</button>
        <button style={{padding:'7px 9px',borderRadius:8,border:'1px solid var(--line)',color:'var(--ink-2)',fontSize:13,position:'relative'}}>
          ◔
          <span style={{position:'absolute',top:5,right:5,width:6,height:6,borderRadius:'50%',background:'var(--accent)'}}/>
        </button>
        <button className="btn btn-primary" style={{padding:'7px 12px',fontSize:12}}>
          + New
        </button>
      </div>
    </header>
  );
};

// ─────────────────────────────────────────────────────────────────
// DASHBOARD

const CMSDashboard = ({ setView, setCollection, setSelected, setPage }) => (
  <div style={{padding:'28px 32px'}}>
    <div style={{marginBottom:24,display:'flex',justifyContent:'space-between',alignItems:'flex-end'}}>
      <div>
        <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:8}}>
          <span className="mono" style={{fontSize:9,color:'var(--accent)',letterSpacing:'0.08em',padding:'3px 8px',borderRadius:4,background:'rgba(212,255,58,0.08)',border:'1px solid rgba(212,255,58,0.3)'}}>● SUPER-ADMIN</span>
          <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>SP12 · W44 · ANALYTICS STUDIO</span>
        </div>
        <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:6}}>Good morning, Hassan.</h1>
        <div style={{fontSize:13,color:'var(--ink-3)'}}>Tuesday, May 14 · every controller, in one place.</div>
      </div>
      <div style={{display:'flex',gap:8}}>
        <button className="btn btn-ghost" style={{padding:'8px 12px',fontSize:12}}>Filter</button>
        <button className="btn btn-ghost" style={{padding:'8px 12px',fontSize:12}}>Export</button>
      </div>
    </div>

    {/* SUPER-ADMIN COMMAND CENTER */}
    <SuperAdminCommandCenter setPage={setPage}/>

    {/* Stat cards */}
    <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:24}}>
      <StatCard label="Published" value="38" delta="+3 this week" trend="up"/>
      <StatCard label="In review" value="4" delta="2 waiting > 24h" trend="warn"/>
      <StatCard label="Drafts" value="12" delta="−2 vs last wk" trend="down"/>
      <StatCard label="Storage" value="2.4 GB" delta="of 50 GB" trend="neutral"/>
    </div>

    {/* Two-col layout */}
    <div style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:14}}>
      {/* Review queue */}
      <CMSCard title="Awaiting review" action="See all →" onAction={()=>setView('activity')}>
        {[
          {t:'Ledgerline case study v2', who:'Sana R.', when:'2h ago', col:'Project', tag:'review'},
          {t:'RAG is dead. Long live retrieval…', who:'Bilal K.', when:'4h ago', col:'Journal', tag:'review'},
          {t:'Schema Composer v3.1 release notes', who:'Hassan A.', when:'yesterday', col:'Tool', tag:'review'},
          {t:'Verge Commerce — final polish', who:'Sana R.', when:'2 days ago', col:'Project', tag:'changes'},
        ].map((r,i) => (
          <div key={i} style={{display:'grid',gridTemplateColumns:'1fr 110px 90px 24px',gap:14,alignItems:'center',padding:'12px 4px',borderBottom: i<3 ? '1px solid var(--line)' : 'none'}}>
            <div style={{display:'flex',flexDirection:'column',gap:4,minWidth:0}}>
              <div style={{fontSize:13,fontWeight:500,letterSpacing:'-0.005em',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{r.t}</div>
              <div style={{fontSize:11,color:'var(--ink-3)'}}>{r.col} · {r.who}</div>
            </div>
            <span className="mono" style={{fontSize:10,color: r.tag==='changes' ? 'var(--warn)' : 'var(--accent)',padding:'3px 7px',borderRadius:5,letterSpacing:'0.04em',background: r.tag==='changes' ? 'rgba(255,180,58,0.1)' : 'rgba(212,255,58,0.08)',border: r.tag==='changes' ? '1px solid rgba(255,180,58,0.3)' : '1px solid rgba(212,255,58,0.2)',width:'fit-content'}}>
              {r.tag.toUpperCase()}
            </span>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em',textAlign:'right'}}>{r.when}</span>
            <span style={{color:'var(--ink-3)',justifySelf:'end'}}>{Icon.arrow()}</span>
          </div>
        ))}
      </CMSCard>

      {/* Quick actions */}
      <CMSCard title="Quick actions" pad>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
          {[
            ['+ New project','Project'],
            ['+ Write post','Journal'],
            ['+ Add tool','Tool'],
            ['+ Invite member','Team'],
          ].map(([t,sub]) => (
            <button key={t} style={{padding:'14px 14px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)',textAlign:'left',transition:'all .15s ease'}}
              onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--line-2)';e.currentTarget.style.background='#16161a'}}
              onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--line)';e.currentTarget.style.background='var(--bg-3)'}}>
              <div style={{fontSize:13,fontWeight:500,marginBottom:4}}>{t}</div>
              <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{sub.toUpperCase()}</div>
            </button>
          ))}
        </div>
      </CMSCard>

      {/* Recent edits */}
      <CMSCard title="Recently edited" action="History →">
        {[
          {t:'Northbound', col:'Project', when:'25m', who:'NM'},
          {t:'Stripe checkout, custom-built…', col:'Journal', when:'1h', who:'AQ'},
          {t:'Lighthouse Diff', col:'Tool', when:'3h', who:'HA'},
          {t:'Sana R.', col:'Team', when:'yesterday', who:'SR'},
          {t:'Web build', col:'Service', when:'2d', who:'HA'},
        ].map((r,i) => (
          <div key={i} style={{display:'grid',gridTemplateColumns:'24px 1fr 80px',gap:12,alignItems:'center',padding:'10px 4px',borderBottom: i<4 ? '1px solid var(--line)' : 'none'}}>
            <span style={{width:22,height:22,borderRadius:'50%',background:'rgba(255,255,255,0.04)',border:'1px solid var(--line-2)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:9,color:'var(--ink-2)'}}>{r.who}</span>
            <div style={{minWidth:0}}>
              <div style={{fontSize:13,fontWeight:500,letterSpacing:'-0.005em',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{r.t}</div>
              <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginTop:2}}>{r.col.toUpperCase()}</div>
            </div>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em',textAlign:'right'}}>{r.when} ago</span>
          </div>
        ))}
      </CMSCard>

      {/* Publish schedule */}
      <CMSCard title="Publish schedule" pad>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          {[
            ['Thu 16:00','Lighthouse Diff v1.1','Tool','#d4ff3a'],
            ['Fri 09:00','Atoms newsletter #18','Email','#7c9bff'],
            ['Mon 10:00','Atlas Docs case study','Project','#a78bfa'],
            ['Tue 11:30','Designing for LLM-native UI','Journal','#ff8a3a'],
          ].map(([t,name,col,c],i) => (
            <div key={i} style={{display:'grid',gridTemplateColumns:'70px 1fr 60px',gap:12,alignItems:'center',padding:'8px 10px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)'}}>
              <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{t}</span>
              <div style={{display:'flex',alignItems:'center',gap:8,minWidth:0}}>
                <span style={{width:6,height:6,borderRadius:'50%',background:c,flexShrink:0}}/>
                <span style={{fontSize:12,fontWeight:500,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{name}</span>
              </div>
              <span className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',textAlign:'right'}}>{col.toUpperCase()}</span>
            </div>
          ))}
        </div>
      </CMSCard>
    </div>
  </div>
);

const StatCard = ({ label, value, delta, trend }) => {
  const c = trend === 'up' ? 'var(--ok)' : trend === 'warn' ? 'var(--warn)' : trend === 'down' ? 'var(--accent-2)' : 'var(--ink-3)';
  return (
    <div style={{padding:'18px 20px',borderRadius:12,border:'1px solid var(--line)',background:'var(--bg-2)'}}>
      <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:10,textTransform:'uppercase'}}>{label}</div>
      <div style={{fontSize:28,letterSpacing:'-0.02em',fontWeight:500,marginBottom:6}}>{value}</div>
      <div className="mono" style={{fontSize:10,color:c,letterSpacing:'0.04em'}}>{delta}</div>
    </div>
  );
};

const CMSCard = ({ title, action, onAction, pad, children }) => (
  <div style={{borderRadius:12,border:'1px solid var(--line)',background:'var(--bg-2)',overflow:'hidden'}}>
    <div style={{padding:'14px 18px',display:'flex',justifyContent:'space-between',alignItems:'center',borderBottom:'1px solid var(--line)'}}>
      <div style={{fontSize:13,fontWeight:500,letterSpacing:'-0.005em'}}>{title}</div>
      {action && <button onClick={onAction} className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{action}</button>}
    </div>
    <div style={{padding: pad ? 18 : '6px 18px 14px'}}>
      {children}
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────────
// COLLECTION VIEW

const CMSCollection = ({ collection, onOpen }) => {
  const sources = {
    projects: { items: PORTFOLIO, label:'Projects', subtitle:'Case studies & client work', fields:['name','tag','year','status'] },
    posts: { items: POSTS, label:'Journal', subtitle:'Essays, post-mortems, half-baked ideas', fields:['title','category','date','status'] },
    tools: { items: TOOLS, label:'Tools', subtitle:'Weekly utility drops', fields:['name','tag','price','status'] },
    team: { items: TEAM, label:'Team', subtitle:'Engineers under SolidAtoms', fields:['name','role','location','status'] },
    services: { items: SERVICES, label:'Services', subtitle:'What we offer', fields:['title','code','starts','status'] },
  };
  const s = sources[collection] || sources.projects;
  const [filter, setFilter] = React.useState('all');

  return (
    <div style={{padding:'28px 32px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:24}}>
        <div>
          <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:4}}>{s.label}</h1>
          <div style={{fontSize:13,color:'var(--ink-3)'}}>{s.subtitle} · {s.items.length} entries</div>
        </div>
        <div style={{display:'flex',gap:8}}>
          <button className="btn btn-ghost" style={{padding:'8px 12px',fontSize:12}}>Import</button>
          <button className="btn btn-primary" style={{padding:'8px 14px',fontSize:12}}>+ New entry</button>
        </div>
      </div>

      {/* Filter bar */}
      <div style={{display:'flex',gap:6,marginBottom:16,paddingBottom:14,borderBottom:'1px solid var(--line)'}}>
        {[['all','All',s.items.length],['published','Published',Math.floor(s.items.length*0.7)],['draft','Drafts',2],['review','In review',1],['archived','Archived',0]].map(([id,label,n]) => (
          <button key={id} onClick={()=>setFilter(id)} style={{
            padding:'5px 10px',borderRadius:6,fontSize:12,
            background: filter===id ? 'rgba(255,255,255,0.06)' : 'transparent',
            color: filter===id ? 'var(--ink)' : 'var(--ink-3)',
            border:'1px solid', borderColor: filter===id ? 'var(--line-2)' : 'transparent'
          }}>{label} <span className="mono" style={{fontSize:10,opacity:0.5,marginLeft:4}}>{n}</span></button>
        ))}
        <div style={{flex:1}}/>
        <button style={{padding:'5px 10px',borderRadius:6,fontSize:12,color:'var(--ink-3)',border:'1px solid var(--line)'}}>⇅ Sort: Updated</button>
        <button style={{padding:'5px 10px',borderRadius:6,fontSize:12,color:'var(--ink-3)',border:'1px solid var(--line)'}}>⊞ Table</button>
      </div>

      {/* Table */}
      <div style={{border:'1px solid var(--line)',borderRadius:10,overflow:'hidden'}}>
        <div style={{display:'grid',gridTemplateColumns:'30px 2fr 1fr 1fr 110px 110px 36px',gap:14,padding:'12px 18px',background:'rgba(255,255,255,0.02)',borderBottom:'1px solid var(--line)'}}>
          <input type="checkbox" style={{accentColor:'var(--accent)'}}/>
          {['Name','Type','Updated','Status','Author',''].map(h => (
            <div key={h} className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',textTransform:'uppercase'}}>{h}</div>
          ))}
        </div>
        {s.items.map((item, i) => {
          const status = ['published','published','review','draft','published'][i % 5];
          const sc = status==='published' ? 'var(--ok)' : status==='review' ? 'var(--accent)' : 'var(--ink-3)';
          const sBg = status==='published' ? 'rgba(126,231,135,0.1)' : status==='review' ? 'rgba(212,255,58,0.1)' : 'rgba(255,255,255,0.04)';
          const sBd = status==='published' ? 'rgba(126,231,135,0.3)' : status==='review' ? 'rgba(212,255,58,0.3)' : 'var(--line-2)';
          const name = item.name || item.title;
          const type = item.tag || item.category || item.role || item.code;
          const author = ['Hassan A.','Sana R.','Bilal K.','Amir Q.','Noor M.'][i % 5];
          return (
            <div key={item.id} onClick={()=>onOpen(item)} className="clickable" style={{
              display:'grid',gridTemplateColumns:'30px 2fr 1fr 1fr 110px 110px 36px',gap:14,
              padding:'14px 18px',alignItems:'center',
              borderTop: i>0 ? '1px solid var(--line)' : 'none',
              transition:'background .15s ease'
            }}
            onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,0.02)'}
            onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
              <input type="checkbox" onClick={e=>e.stopPropagation()} style={{accentColor:'var(--accent)'}}/>
              <div style={{display:'flex',alignItems:'center',gap:10,minWidth:0}}>
                <span style={{width:28,height:28,borderRadius:6,background:`linear-gradient(135deg, ${item.color || item.cover || item.role_color || '#7c9bff'}55, ${item.color || item.cover || item.role_color || '#7c9bff'}11)`,border:`1px solid ${item.color || item.cover || item.role_color || '#7c9bff'}44`,flexShrink:0,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:9,color:item.color || item.cover || item.role_color || '#7c9bff'}}>{(name||'').slice(0,2)}</span>
                <span style={{fontSize:13,fontWeight:500,letterSpacing:'-0.005em',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{name}</span>
              </div>
              <span style={{fontSize:12,color:'var(--ink-2)'}}>{type}</span>
              <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{['2h ago','yesterday','3 days','1 week','2 weeks','1 month'][i % 6]}</span>
              <span className="mono" style={{fontSize:9,color:sc,padding:'3px 8px',borderRadius:5,background:sBg,border:`1px solid ${sBd}`,letterSpacing:'0.06em',textTransform:'uppercase',width:'fit-content'}}>{status}</span>
              <span style={{fontSize:12,color:'var(--ink-2)'}}>{author}</span>
              <span style={{color:'var(--ink-3)',justifySelf:'end'}}>⋯</span>
            </div>
          );
        })}
      </div>

      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:14,fontSize:12,color:'var(--ink-3)'}}>
        <span>Showing {s.items.length} of {s.items.length}</span>
        <div style={{display:'flex',gap:6}}>
          <button style={{padding:'5px 9px',borderRadius:6,border:'1px solid var(--line)',color:'var(--ink-3)'}}>‹</button>
          <button style={{padding:'5px 9px',borderRadius:6,border:'1px solid var(--line)',color:'var(--ink-3)'}}>›</button>
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// EDITOR

const CMSEditor = ({ item, onBack, collection }) => {
  const [tab, setTab] = React.useState('content');
  const name = item.name || item.title;
  return (
    <div>
      {/* Editor topbar */}
      <div style={{padding:'14px 32px',borderBottom:'1px solid var(--line)',display:'flex',justifyContent:'space-between',alignItems:'center',position:'sticky',top:53,zIndex:10,background:'rgba(10,10,11,0.85)',backdropFilter:'blur(12px)'}}>
        <div style={{display:'flex',alignItems:'center',gap:14}}>
          <button onClick={onBack} style={{padding:'5px 10px',borderRadius:6,color:'var(--ink-2)',fontSize:12,border:'1px solid var(--line)'}}>← Back</button>
          <div style={{display:'flex',alignItems:'center',gap:10}}>
            <span style={{width:8,height:8,borderRadius:'50%',background:'var(--warn)'}}/>
            <span style={{fontSize:13,fontWeight:500}}>{name}</span>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>· Unsaved changes</span>
          </div>
        </div>
        <div style={{display:'flex',gap:8,alignItems:'center'}}>
          <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em',marginRight:4}}>v3 · auto-saved 2m ago</span>
          <button className="btn btn-ghost" style={{padding:'7px 11px',fontSize:12}}>Preview ↗</button>
          <button className="btn btn-ghost" style={{padding:'7px 11px',fontSize:12}}>Request review</button>
          <button className="btn btn-primary" style={{padding:'7px 13px',fontSize:12}}>Publish</button>
        </div>
      </div>

      {/* Editor body */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 320px',gap:0,minHeight:'calc(100vh - 120px)'}}>
        {/* Main editor */}
        <div style={{padding:'28px 32px 80px',borderRight:'1px solid var(--line)'}}>
          {/* Tabs */}
          <div style={{display:'flex',gap:2,marginBottom:24,borderBottom:'1px solid var(--line)'}}>
            {[['content','Content'],['media','Media'],['seo','SEO'],['settings','Settings'],['revisions','Revisions']].map(([id,l]) => (
              <button key={id} onClick={()=>setTab(id)} style={{
                padding:'10px 14px',fontSize:13,
                color: tab===id ? 'var(--ink)' : 'var(--ink-3)',
                borderBottom:'2px solid', borderColor: tab===id ? 'var(--accent)' : 'transparent',
                marginBottom:-1
              }}>{l}</button>
            ))}
          </div>

          {tab === 'content' && (
            <div style={{display:'flex',flexDirection:'column',gap:22,maxWidth:760}}>
              <EditField label="Title" value={name} hint="Shown as H1 and in browser tab"/>
              <EditField label="Slug" value={item.id} hint={`https://solidatoms.com/${collection}/${item.id}`} mono/>
              <EditField label="Summary" value={item.summary || item.excerpt || item.desc || ''} textarea/>

              <div>
                <FieldLabel>Body</FieldLabel>
                <div style={{border:'1px solid var(--line)',borderRadius:8,background:'var(--bg-2)'}}>
                  <div style={{padding:'8px 12px',borderBottom:'1px solid var(--line)',display:'flex',gap:2}}>
                    {['B','I','U','¶','H1','H2','— —','「」','{ }','◇','◯','⊞'].map(b => (
                      <button key={b} style={{padding:'4px 8px',borderRadius:5,fontSize:11,color:'var(--ink-2)',fontFamily:'var(--mono)'}}
                        onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,0.04)'}
                        onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                        {b}
                      </button>
                    ))}
                    <div style={{flex:1}}/>
                    <span className="mono" style={{fontSize:10,color:'var(--ink-3)',padding:'4px 8px',letterSpacing:'0.04em'}}>MDX</span>
                  </div>
                  <div style={{padding:'18px 18px',minHeight:340,fontSize:14,lineHeight:1.65,color:'var(--ink-2)'}}>
                    <div style={{fontSize:22,fontWeight:500,letterSpacing:'-0.02em',color:'var(--ink)',marginBottom:14}}>The problem</div>
                    <p style={{marginBottom:14}}>{name} came to us with a product that was working — and falling apart. Eight years of organic feature growth, a stack from 2017, and a team that had grown faster than the codebase could absorb.</p>
                    <p style={{marginBottom:14}}>Page loads were trending the wrong direction. Onboarding completion was eroding. The team was burning out trying to patch the dam.</p>
                    <div style={{fontSize:22,fontWeight:500,letterSpacing:'-0.02em',color:'var(--ink)',margin:'24px 0 14px'}}>What we did</div>
                    <p>We started with a two-week discovery: code audit, performance trace, user-session review, and conversations with the people who actually use the product every day...</p>
                  </div>
                </div>
                <div style={{display:'flex',justifyContent:'space-between',marginTop:8,fontSize:11,color:'var(--ink-3)'}}>
                  <span>2,847 words · 11 min read</span>
                  <span className="mono">⌘+S to save</span>
                </div>
              </div>

              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
                <EditField label="Metric label" value={item.metric ? item.metric[0] : ''}/>
                <EditField label="Metric value" value={item.metric ? item.metric[1] : ''}/>
              </div>

              <div>
                <FieldLabel>Tags</FieldLabel>
                <div style={{display:'flex',flexWrap:'wrap',gap:6,padding:'10px 12px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)',minHeight:42,alignItems:'center'}}>
                  {(item.stack || item.skills || item.bullets || []).map(t => (
                    <span key={t} style={{padding:'4px 9px',borderRadius:5,fontFamily:'var(--mono)',fontSize:10,letterSpacing:'0.04em',color:'var(--ink)',background:'rgba(255,255,255,0.05)',border:'1px solid var(--line-2)',display:'inline-flex',alignItems:'center',gap:6}}>
                      {t} <span style={{color:'var(--ink-3)',cursor:'pointer'}}>×</span>
                    </span>
                  ))}
                  <input placeholder="Add tag…" style={{flex:1,minWidth:80,background:'transparent',border:0,outline:'none',color:'var(--ink)',fontSize:12,fontFamily:'var(--sans)'}}/>
                </div>
              </div>
            </div>
          )}

          {tab === 'seo' && <SEOTab name={name}/>}
          {tab === 'media' && <MediaTab/>}
          {tab === 'settings' && <SettingsTab item={item}/>}
          {tab === 'revisions' && <RevisionsTab/>}
        </div>

        {/* Right rail */}
        <aside style={{padding:'24px 22px',background:'#0a0a0b',display:'flex',flexDirection:'column',gap:18}}>
          <Panel title="Status">
            <Row label="Visibility" value="Public"/>
            <Row label="Status" value={<span style={{color:'var(--warn)'}}>● Draft</span>}/>
            <Row label="Published" value="—"/>
            <Row label="Scheduled" value="Mon, May 20 · 10:00"/>
          </Panel>

          <Panel title="Authorship">
            <div style={{display:'flex',alignItems:'center',gap:10,padding:'8px 10px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)'}}>
              <span style={{width:24,height:24,borderRadius:'50%',background:'linear-gradient(135deg, rgba(212,255,58,0.4), rgba(212,255,58,0.15))',border:'1px solid rgba(212,255,58,0.4)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:9,fontWeight:600,color:'var(--accent)'}}>HA</span>
              <div style={{flex:1,fontSize:12}}>
                <div>Hassan A.</div>
                <div style={{color:'var(--ink-3)',fontSize:10}}>Owner</div>
              </div>
              <button style={{fontSize:11,color:'var(--ink-3)'}}>Change</button>
            </div>
            <div style={{marginTop:8}}>
              <button style={{fontSize:12,color:'var(--accent)',padding:'6px 0'}}>+ Add collaborator</button>
            </div>
          </Panel>

          <Panel title="Categories">
            <Row label="Collection" value="Projects"/>
            <Row label="Type" value="Case study"/>
            <Row label="Year" value={item.year || '2026'}/>
          </Panel>

          <Panel title="Activity" small>
            {[
              ['HA','edited body','12m ago'],
              ['SR','left a comment','2h ago'],
              ['SR','requested review','2h ago'],
              ['HA','created','3 days ago'],
            ].map(([w,a,t],i) => (
              <div key={i} style={{display:'grid',gridTemplateColumns:'22px 1fr auto',gap:8,alignItems:'center',padding:'6px 0',fontSize:11}}>
                <span style={{width:20,height:20,borderRadius:'50%',background:'rgba(255,255,255,0.04)',border:'1px solid var(--line-2)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:8,color:'var(--ink-2)'}}>{w}</span>
                <span style={{color:'var(--ink-2)'}}>{a}</span>
                <span className="mono" style={{color:'var(--ink-3)',fontSize:9,letterSpacing:'0.04em'}}>{t}</span>
              </div>
            ))}
          </Panel>
        </aside>
      </div>
    </div>
  );
};

const FieldLabel = ({ children, hint }) => (
  <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:6}}>
    <span className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',textTransform:'uppercase'}}>{children}</span>
    {hint && <span style={{fontSize:11,color:'var(--ink-3)'}}>{hint}</span>}
  </div>
);

const EditField = ({ label, value, hint, mono, textarea }) => {
  const [v, setV] = React.useState(value);
  React.useEffect(()=>setV(value), [value]);
  const common = {
    width:'100%',padding:'10px 14px',borderRadius:8,
    background:'var(--bg-3)',border:'1px solid var(--line)',color:'var(--ink)',
    fontSize: 13,
    fontFamily: mono ? 'var(--mono)' : 'var(--sans)',
    outline:'none'
  };
  return (
    <div>
      <FieldLabel hint={hint}>{label}</FieldLabel>
      {textarea
        ? <textarea value={v} onChange={e=>setV(e.target.value)} rows="3" style={{...common, resize:'vertical', minHeight:80, lineHeight:1.5}}/>
        : <input value={v} onChange={e=>setV(e.target.value)} style={common}/>
      }
    </div>
  );
};

const Panel = ({ title, children, small }) => (
  <div>
    <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',textTransform:'uppercase',marginBottom:10,paddingBottom:8,borderBottom:'1px solid var(--line)'}}>{title}</div>
    <div style={{display:'flex',flexDirection:'column',gap: small ? 0 : 8}}>
      {children}
    </div>
  </div>
);

const Row = ({ label, value }) => (
  <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',fontSize:12,padding:'4px 0'}}>
    <span style={{color:'var(--ink-3)'}}>{label}</span>
    <span style={{color:'var(--ink-2)'}}>{value}</span>
  </div>
);

const SEOTab = ({ name }) => (
  <div style={{display:'flex',flexDirection:'column',gap:22,maxWidth:760}}>
    <EditField label="Meta title" value={`${name} — SolidAtoms Case Study`}/>
    <EditField label="Meta description" value={`How we rebuilt ${name} in 9 weeks. Real numbers, real trade-offs.`} textarea/>
    <EditField label="Canonical URL" value={`https://solidatoms.com/work/${name.toLowerCase()}`} mono/>

    <div>
      <FieldLabel>Search preview</FieldLabel>
      <div style={{padding:'18px 20px',borderRadius:8,background:'var(--bg-3)',border:'1px solid var(--line)'}}>
        <div style={{fontSize:11,color:'var(--ink-3)',marginBottom:6}}>solidatoms.com › work › {name.toLowerCase()}</div>
        <div style={{fontSize:18,color:'#8ab4f8',marginBottom:4,letterSpacing:'-0.005em'}}>{name} — SolidAtoms Case Study</div>
        <div style={{fontSize:12,color:'var(--ink-2)',lineHeight:1.5}}>How we rebuilt {name} in 9 weeks. Real numbers, real trade-offs.</div>
      </div>
    </div>

    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
      <ScoreCard label="SEO score" value="92" sub="Looks great."/>
      <ScoreCard label="Readability" value="87" sub="Grade 8 reading level."/>
    </div>

    <div>
      <FieldLabel>Social card</FieldLabel>
      <div style={{aspectRatio:'1200/630',borderRadius:8,border:'1px solid var(--line)',background:'linear-gradient(135deg, rgba(212,255,58,0.1), transparent), #0a0a0a',position:'relative',overflow:'hidden',display:'flex',alignItems:'flex-end',padding:32}}>
        <div>
          <div className="mono" style={{fontSize:11,color:'var(--accent)',letterSpacing:'0.08em',marginBottom:12}}>● SOLIDATOMS · CASE STUDY</div>
          <div style={{fontSize:42,fontWeight:500,letterSpacing:'-0.025em',marginBottom:8}}>{name}</div>
          <div style={{fontSize:16,color:'var(--ink-2)'}}>How we rebuilt it in 9 weeks.</div>
        </div>
      </div>
    </div>
  </div>
);

const ScoreCard = ({ label, value, sub }) => (
  <div style={{padding:'16px 18px',borderRadius:8,border:'1px solid var(--line)',background:'var(--bg-3)'}}>
    <div className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em',marginBottom:8,textTransform:'uppercase'}}>{label}</div>
    <div style={{display:'flex',alignItems:'baseline',gap:6,marginBottom:8}}>
      <div style={{fontSize:28,fontWeight:500,letterSpacing:'-0.02em',color:'var(--accent)'}}>{value}</div>
      <div className="mono" style={{fontSize:11,color:'var(--ink-3)'}}>/ 100</div>
    </div>
    <div style={{height:4,background:'var(--bg-2)',borderRadius:2,marginBottom:8}}>
      <div style={{width:`${value}%`,height:'100%',background:'var(--accent)',borderRadius:2}}/>
    </div>
    <div style={{fontSize:11,color:'var(--ink-3)'}}>{sub}</div>
  </div>
);

const MediaTab = () => (
  <div>
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:18}}>
      <FieldLabel>Cover image</FieldLabel>
      <button className="btn btn-ghost" style={{padding:'6px 11px',fontSize:11}}>+ Upload</button>
    </div>
    <Placeholder label="cover.jpg · 2400×1350" code="CV.01" color="#7c9bff22" ratio="16/9"/>
    <div style={{marginTop:24}}>
      <FieldLabel>Gallery</FieldLabel>
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12}}>
        {Array.from({length:8}).map((_,i) => (
          <Placeholder key={i} label={`shot-${i+1}.jpg`} color="#1a1a1c" ratio="1/1"/>
        ))}
      </div>
    </div>
  </div>
);

const SettingsTab = ({ item }) => (
  <div style={{display:'flex',flexDirection:'column',gap:22,maxWidth:760}}>
    <Toggle label="Allow comments" hint="Show a comment thread on this page" on/>
    <Toggle label="Index by search engines" hint="Show in Google + sitemap.xml" on/>
    <Toggle label="Featured" hint="Pin to top of collection listings"/>
    <Toggle label="Members only" hint="Require an active subscription to view"/>
    <div style={{padding:'18px 20px',borderRadius:8,border:'1px solid rgba(255,90,58,0.3)',background:'rgba(255,90,58,0.05)'}}>
      <div style={{fontSize:13,fontWeight:500,color:'var(--accent-2)',marginBottom:6}}>Danger zone</div>
      <div style={{fontSize:12,color:'var(--ink-3)',marginBottom:14}}>Archive removes this from public view. Delete is permanent after 30 days.</div>
      <div style={{display:'flex',gap:8}}>
        <button className="btn btn-ghost" style={{padding:'7px 12px',fontSize:12}}>Archive</button>
        <button style={{padding:'7px 12px',fontSize:12,borderRadius:8,background:'transparent',border:'1px solid rgba(255,90,58,0.4)',color:'var(--accent-2)'}}>Delete</button>
      </div>
    </div>
  </div>
);

const Toggle = ({ label, hint, on }) => {
  const [v, setV] = React.useState(!!on);
  return (
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'12px 16px',borderRadius:8,border:'1px solid var(--line)',background:'var(--bg-3)'}}>
      <div>
        <div style={{fontSize:13,fontWeight:500,marginBottom:3}}>{label}</div>
        <div style={{fontSize:11,color:'var(--ink-3)'}}>{hint}</div>
      </div>
      <button onClick={()=>setV(!v)} style={{
        width:36,height:20,borderRadius:10,padding:2,
        background: v ? 'var(--accent)' : 'var(--bg-2)',
        border:'1px solid', borderColor: v ? 'var(--accent)' : 'var(--line-2)',
        position:'relative',transition:'all .15s ease'
      }}>
        <span style={{
          display:'block',width:14,height:14,borderRadius:'50%',
          background: v ? '#0a0a0a' : 'var(--ink-3)',
          transform: v ? 'translateX(16px)' : 'translateX(0)',transition:'all .15s ease'
        }}/>
      </button>
    </div>
  );
};

const RevisionsTab = () => (
  <div>
    <FieldLabel>Revision history</FieldLabel>
    <div style={{border:'1px solid var(--line)',borderRadius:8,overflow:'hidden'}}>
      {[
        ['v3','Current','HA','12 minutes ago','Refined opening paragraph.'],
        ['v2','Auto-saved','HA','2 hours ago','Added "What we\'d do differently" section.'],
        ['v1','Initial','HA','3 days ago','Created from template.'],
      ].map(([v,s,w,t,m],i) => (
        <div key={v} style={{display:'grid',gridTemplateColumns:'60px 100px 50px 1fr 130px 100px',gap:14,padding:'14px 18px',alignItems:'center',borderTop: i>0 ? '1px solid var(--line)' : 'none',background: i===0 ? 'rgba(212,255,58,0.04)' : 'transparent'}}>
          <span className="mono" style={{fontSize:11,color: i===0 ? 'var(--accent)' : 'var(--ink-2)',letterSpacing:'0.04em'}}>{v}</span>
          <span className="mono" style={{fontSize:9,color: i===0 ? '#0a0a0a' : 'var(--ink-3)',background: i===0 ? 'var(--accent)' : 'rgba(255,255,255,0.04)',padding:'3px 7px',borderRadius:4,letterSpacing:'0.06em',textTransform:'uppercase',width:'fit-content'}}>{s}</span>
          <span style={{width:22,height:22,borderRadius:'50%',background:'rgba(255,255,255,0.04)',border:'1px solid var(--line-2)',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:9,color:'var(--ink-2)'}}>{w}</span>
          <span style={{fontSize:12,color:'var(--ink-2)'}}>{m}</span>
          <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{t}</span>
          <button style={{fontSize:11,color:'var(--ink-2)',padding:'5px 9px',borderRadius:6,border:'1px solid var(--line)',width:'fit-content',justifySelf:'end'}}>Restore</button>
        </div>
      ))}
    </div>
  </div>
);

// ─────────────────────────────────────────────────────────────────
// MEDIA LIBRARY

const CMSMedia = () => {
  const [view, setView] = React.useState('grid');
  const types = [
    { n: 'cover.jpg', size:'2.4 MB', dim:'2400×1350', c:'#7c9bff' },
    { n: 'hero-shot.png', size:'4.1 MB', dim:'3200×2000', c:'#a78bfa' },
    { n: 'team-photo-01.jpg', size:'1.8 MB', dim:'2000×1333', c:'#ff8a3a' },
    { n: 'wordmark.svg', size:'12 KB', dim:'vector', c:'#d4ff3a' },
    { n: 'screenshot-dashboard.png', size:'1.2 MB', dim:'1920×1080', c:'#7ee787' },
    { n: 'process-diagram.svg', size:'24 KB', dim:'vector', c:'#fde047' },
    { n: 'og-default.jpg', size:'380 KB', dim:'1200×630', c:'#34d399' },
    { n: 'avatar-hassan.jpg', size:'120 KB', dim:'400×400', c:'#22d3ee' },
    { n: 'icon-set.svg', size:'8 KB', dim:'vector', c:'#f472b6' },
    { n: 'video-cover.jpg', size:'2.1 MB', dim:'1920×1080', c:'#7c9bff' },
    { n: 'pattern-grid.svg', size:'4 KB', dim:'vector', c:'#a78bfa' },
    { n: 'product-mock.png', size:'3.4 MB', dim:'2400×1600', c:'#d4ff3a' },
  ];

  return (
    <div style={{padding:'28px 32px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:24}}>
        <div>
          <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:4}}>Media library</h1>
          <div style={{fontSize:13,color:'var(--ink-3)'}}>284 files · 2.4 GB used of 50 GB</div>
        </div>
        <div style={{display:'flex',gap:8}}>
          <button className="btn btn-ghost" style={{padding:'8px 12px',fontSize:12}}>+ New folder</button>
          <button className="btn btn-primary" style={{padding:'8px 14px',fontSize:12}}>↑ Upload</button>
        </div>
      </div>

      <div style={{display:'flex',gap:6,marginBottom:20,paddingBottom:14,borderBottom:'1px solid var(--line)'}}>
        {['All','Images','SVG','Video','Documents'].map((t,i) => (
          <button key={t} style={{
            padding:'5px 10px',borderRadius:6,fontSize:12,
            background: i===0 ? 'rgba(255,255,255,0.06)' : 'transparent',
            color: i===0 ? 'var(--ink)' : 'var(--ink-3)',
            border:'1px solid', borderColor: i===0 ? 'var(--line-2)' : 'transparent'
          }}>{t}</button>
        ))}
        <div style={{flex:1}}/>
        <div style={{display:'flex',gap:2,padding:2,borderRadius:7,border:'1px solid var(--line)'}}>
          <button onClick={()=>setView('grid')} style={{padding:'4px 9px',borderRadius:5,fontSize:12,background: view==='grid' ? 'var(--bg-3)' : 'transparent',color: view==='grid' ? 'var(--ink)' : 'var(--ink-3)'}}>⊞ Grid</button>
          <button onClick={()=>setView('list')} style={{padding:'4px 9px',borderRadius:5,fontSize:12,background: view==='list' ? 'var(--bg-3)' : 'transparent',color: view==='list' ? 'var(--ink)' : 'var(--ink-3)'}}>☰ List</button>
        </div>
      </div>

      {view === 'grid' && (
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(180px,1fr))',gap:14}}>
          {types.map((f,i) => (
            <div key={i} className="clickable">
              <div style={{aspectRatio:'4/3',borderRadius:8,position:'relative',overflow:'hidden',background:`linear-gradient(135deg, ${f.c}33, #0a0a0a)`,border:'1px solid var(--line)',marginBottom:8}}>
                <svg style={{position:'absolute',inset:0,width:'100%',height:'100%',opacity:0.3}} preserveAspectRatio="none">
                  <defs>
                    <pattern id={`mp-${i}`} width="14" height="14" patternUnits="userSpaceOnUse">
                      <circle cx="7" cy="7" r="0.5" fill={f.c}/>
                    </pattern>
                  </defs>
                  <rect width="100%" height="100%" fill={`url(#mp-${i})`}/>
                </svg>
                <span className="mono" style={{position:'absolute',top:8,left:8,fontSize:9,color:f.c,padding:'2px 6px',background:'rgba(0,0,0,0.5)',borderRadius:4,letterSpacing:'0.06em',textTransform:'uppercase'}}>{f.n.split('.').pop()}</span>
              </div>
              <div style={{fontSize:12,fontWeight:500,letterSpacing:'-0.005em',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{f.n}</div>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em',marginTop:2}}>{f.dim} · {f.size}</div>
            </div>
          ))}
        </div>
      )}

      {view === 'list' && (
        <div style={{border:'1px solid var(--line)',borderRadius:8,overflow:'hidden'}}>
          <div style={{display:'grid',gridTemplateColumns:'40px 2fr 80px 110px 100px 100px 36px',gap:14,padding:'10px 18px',background:'rgba(255,255,255,0.02)',borderBottom:'1px solid var(--line)'}}>
            <input type="checkbox" style={{accentColor:'var(--accent)'}}/>
            {['Name','Type','Dimensions','Size','Uploaded',''].map(h => (
              <div key={h} className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',textTransform:'uppercase'}}>{h}</div>
            ))}
          </div>
          {types.map((f,i) => (
            <div key={i} style={{display:'grid',gridTemplateColumns:'40px 2fr 80px 110px 100px 100px 36px',gap:14,padding:'10px 18px',alignItems:'center',borderTop: i>0 ? '1px solid var(--line)' : 'none'}}>
              <input type="checkbox" style={{accentColor:'var(--accent)'}}/>
              <div style={{display:'flex',alignItems:'center',gap:10}}>
                <span style={{width:28,height:28,borderRadius:6,background:`linear-gradient(135deg, ${f.c}55, ${f.c}22)`,border:`1px solid ${f.c}44`,flexShrink:0}}/>
                <span style={{fontSize:13,fontWeight:500}}>{f.n}</span>
              </div>
              <span className="mono" style={{fontSize:10,color:'var(--ink-3)',padding:'2px 6px',background:'rgba(255,255,255,0.04)',borderRadius:4,letterSpacing:'0.04em',textTransform:'uppercase',width:'fit-content'}}>{f.n.split('.').pop()}</span>
              <span className="mono" style={{fontSize:11,color:'var(--ink-2)',letterSpacing:'0.04em'}}>{f.dim}</span>
              <span className="mono" style={{fontSize:11,color:'var(--ink-2)',letterSpacing:'0.04em'}}>{f.size}</span>
              <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{i+1}d ago</span>
              <span style={{color:'var(--ink-3)',justifySelf:'end'}}>⋯</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// USERS & ROLES

const CMSUsers = () => {
  const users = [
    { name:'Hassan A.', email:'hassan@solidatoms.com', role:'Owner', last:'just now', avatar:'HA', color:'#d4ff3a', mfa:true, status:'active' },
    { name:'Amir Q.', email:'amir@solidatoms.com', role:'Admin', last:'8m ago', avatar:'AQ', color:'#7c9bff', mfa:true, status:'active' },
    { name:'Sana R.', email:'sana@solidatoms.com', role:'Editor', last:'2h ago', avatar:'SR', color:'#ff8a3a', mfa:true, status:'active' },
    { name:'Bilal K.', email:'bilal@solidatoms.com', role:'Editor', last:'yesterday', avatar:'BK', color:'#a78bfa', mfa:false, status:'active' },
    { name:'Noor M.', email:'noor@solidatoms.com', role:'Writer', last:'3 days ago', avatar:'NM', color:'#7ee787', mfa:false, status:'active' },
    { name:'pending@externalclient.com', email:'pending@externalclient.com', role:'Reviewer', last:'—', avatar:'?', color:'#ffffff44', mfa:false, status:'invited' },
  ];

  return (
    <div style={{padding:'28px 32px'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',marginBottom:24}}>
        <div>
          <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:4}}>Team & roles</h1>
          <div style={{fontSize:13,color:'var(--ink-3)'}}>5 members · 1 pending invite</div>
        </div>
        <button className="btn btn-primary" style={{padding:'8px 14px',fontSize:12}}>+ Invite member</button>
      </div>

      {/* Roles legend */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12,marginBottom:24}}>
        {[
          {r:'Owner',c:1,d:'Full access, billing, team'},
          {r:'Admin',c:1,d:'Manage content, no billing'},
          {r:'Editor',c:2,d:'Write, edit, publish'},
          {r:'Writer',c:1,d:'Write, edit drafts only'},
        ].map(x => (
          <div key={x.r} style={{padding:'14px 16px',borderRadius:10,border:'1px solid var(--line)',background:'var(--bg-2)'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:6}}>
              <div style={{fontSize:13,fontWeight:500}}>{x.r}</div>
              <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{x.c}</span>
            </div>
            <div style={{fontSize:11,color:'var(--ink-3)',lineHeight:1.4}}>{x.d}</div>
          </div>
        ))}
      </div>

      <div style={{border:'1px solid var(--line)',borderRadius:10,overflow:'hidden'}}>
        <div style={{display:'grid',gridTemplateColumns:'2fr 1.5fr 100px 80px 110px 36px',gap:14,padding:'12px 18px',background:'rgba(255,255,255,0.02)',borderBottom:'1px solid var(--line)'}}>
          {['Member','Email','Role','MFA','Last active',''].map(h => (
            <div key={h} className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',textTransform:'uppercase'}}>{h}</div>
          ))}
        </div>
        {users.map((u,i) => (
          <div key={u.email} style={{display:'grid',gridTemplateColumns:'2fr 1.5fr 100px 80px 110px 36px',gap:14,padding:'14px 18px',alignItems:'center',borderTop: i>0 ? '1px solid var(--line)' : 'none', opacity: u.status==='invited' ? 0.6 : 1}}>
            <div style={{display:'flex',alignItems:'center',gap:12}}>
              <span style={{width:32,height:32,borderRadius:'50%',background:`linear-gradient(135deg, ${u.color}55, ${u.color}22)`,border:`1px solid ${u.color}66`,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:11,fontWeight:600,color:u.color}}>{u.avatar}</span>
              <div>
                <div style={{fontSize:13,fontWeight:500}}>{u.name}</div>
                {u.status === 'invited' && <span className="mono" style={{fontSize:9,color:'var(--warn)',padding:'2px 5px',borderRadius:4,background:'rgba(255,180,58,0.12)',border:'1px solid rgba(255,180,58,0.3)',letterSpacing:'0.04em',textTransform:'uppercase',marginTop:3,display:'inline-block'}}>INVITE SENT</span>}
              </div>
            </div>
            <span style={{fontSize:12,color:'var(--ink-2)'}}>{u.email}</span>
            <span className="mono" style={{fontSize:10,color: u.role==='Owner' ? 'var(--accent)' : 'var(--ink-2)',padding:'3px 8px',borderRadius:5,background: u.role==='Owner' ? 'rgba(212,255,58,0.1)' : 'rgba(255,255,255,0.04)',border:'1px solid', borderColor: u.role==='Owner' ? 'rgba(212,255,58,0.3)' : 'var(--line-2)',letterSpacing:'0.04em',textTransform:'uppercase',width:'fit-content'}}>{u.role}</span>
            <span style={{fontSize:12,color: u.mfa ? 'var(--ok)' : 'var(--ink-3)'}}>{u.mfa ? '✓ On' : '— Off'}</span>
            <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{u.last}</span>
            <span style={{color:'var(--ink-3)',justifySelf:'end'}}>⋯</span>
          </div>
        ))}
      </div>

      {/* Permission matrix */}
      <div style={{marginTop:32}}>
        <h2 style={{fontSize:18,fontWeight:500,letterSpacing:'-0.015em',marginBottom:14}}>Permission matrix</h2>
        <div style={{border:'1px solid var(--line)',borderRadius:10,overflow:'hidden'}}>
          <div style={{display:'grid',gridTemplateColumns:'2fr 1fr 1fr 1fr 1fr',gap:0,padding:'10px 18px',background:'rgba(255,255,255,0.02)',borderBottom:'1px solid var(--line)'}}>
            {['Permission','Owner','Admin','Editor','Writer'].map(h => (
              <div key={h} className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.08em',textTransform:'uppercase'}}>{h}</div>
            ))}
          </div>
          {[
            ['Read all content', true, true, true, true],
            ['Create drafts', true, true, true, true],
            ['Publish content', true, true, true, false],
            ['Delete content', true, true, false, false],
            ['Manage media', true, true, true, false],
            ['Invite members', true, true, false, false],
            ['Manage roles', true, false, false, false],
            ['Manage billing', true, false, false, false],
            ['Delete workspace', true, false, false, false],
          ].map(([p, ...perms], i) => (
            <div key={p} style={{display:'grid',gridTemplateColumns:'2fr 1fr 1fr 1fr 1fr',gap:0,padding:'10px 18px',alignItems:'center',borderTop: i>0 ? '1px solid var(--line)' : 'none'}}>
              <span style={{fontSize:13,color:'var(--ink-2)'}}>{p}</span>
              {perms.map((ok, j) => (
                <span key={j} style={{fontSize:13,color: ok ? 'var(--ok)' : 'var(--ink-4)'}}>{ok ? '●' : '○'}</span>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// SETTINGS

const CMSSettings = () => {
  const [tab, setTab] = React.useState('general');
  return (
    <div style={{padding:'28px 32px',maxWidth:880}}>
      <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:24}}>Settings</h1>
      <div style={{display:'grid',gridTemplateColumns:'180px 1fr',gap:32}}>
        <div style={{display:'flex',flexDirection:'column',gap:2}}>
          {[
            ['general','General'],
            ['workflow','Workflow'],
            ['integrations','Integrations'],
            ['domains','Domains'],
            ['api','API & webhooks'],
            ['billing','Billing'],
          ].map(([id,l]) => (
            <button key={id} onClick={()=>setTab(id)} style={{
              padding:'8px 12px',borderRadius:7,fontSize:13,textAlign:'left',
              background: tab===id ? 'rgba(255,255,255,0.04)' : 'transparent',
              color: tab===id ? 'var(--ink)' : 'var(--ink-3)',
              border:'1px solid', borderColor: tab===id ? 'var(--line-2)' : 'transparent'
            }}>{l}</button>
          ))}
        </div>
        <div>
          {tab === 'general' && (
            <div style={{display:'flex',flexDirection:'column',gap:22}}>
              <EditField label="Workspace name" value="SolidAtoms Studio"/>
              <EditField label="Public URL" value="solidatoms.com" mono/>
              <EditField label="Timezone" value="UTC+05:00 (Karachi)"/>
              <EditField label="Default language" value="English (en-US)"/>
            </div>
          )}
          {tab === 'workflow' && (
            <div style={{display:'flex',flexDirection:'column',gap:14}}>
              <h2 style={{fontSize:16,fontWeight:500,marginBottom:6}}>Editorial workflow</h2>
              <p style={{fontSize:13,color:'var(--ink-3)',marginBottom:14}}>Drag stages to reorder. Required gates can't be skipped.</p>
              {[
                ['Draft','Editor','—','required'],
                ['Review','Editor + Admin','MFA','required'],
                ['Schedule','Editor','—','optional'],
                ['Publish','Admin','MFA','required'],
              ].map(([s,r,g,t],i) => (
                <div key={s} style={{display:'grid',gridTemplateColumns:'40px 1fr 1fr 1fr 80px 36px',gap:14,padding:'14px 16px',borderRadius:8,border:'1px solid var(--line)',background:'var(--bg-2)',alignItems:'center'}}>
                  <span className="mono" style={{fontSize:11,color:'var(--accent)',letterSpacing:'0.06em'}}>0{i+1}</span>
                  <span style={{fontSize:13,fontWeight:500}}>{s}</span>
                  <span style={{fontSize:12,color:'var(--ink-2)'}}>{r}</span>
                  <span style={{fontSize:12,color:'var(--ink-2)'}}>Gate: {g}</span>
                  <span className="mono" style={{fontSize:10,color: t==='required' ? 'var(--accent)' : 'var(--ink-3)',letterSpacing:'0.04em',textTransform:'uppercase'}}>{t}</span>
                  <span style={{color:'var(--ink-3)',justifySelf:'end'}}>⋮</span>
                </div>
              ))}
            </div>
          )}
          {tab === 'integrations' && (
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
              {[
                {n:'Stripe',d:'Payments + subscriptions',on:true,c:'#635bff'},
                {n:'Resend',d:'Transactional + newsletter',on:true,c:'#000'},
                {n:'PostHog',d:'Product analytics',on:true,c:'#1d4aff'},
                {n:'Sentry',d:'Error monitoring',on:true,c:'#362d59'},
                {n:'Slack',d:'Notifications',on:false,c:'#4a154b'},
                {n:'Linear',d:'Project mgmt sync',on:false,c:'#5e6ad2'},
                {n:'Algolia',d:'Search index',on:false,c:'#003dff'},
                {n:'Cloudinary',d:'Image CDN',on:true,c:'#3448c5'},
              ].map(i => (
                <div key={i.n} style={{padding:'14px 16px',borderRadius:10,border:'1px solid var(--line)',background:'var(--bg-2)',display:'flex',alignItems:'center',gap:12}}>
                  <span style={{width:34,height:34,borderRadius:8,background:`${i.c}33`,border:`1px solid ${i.c}66`,display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontWeight:600,fontSize:13}}>{i.n[0]}</span>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:13,fontWeight:500}}>{i.n}</div>
                    <div style={{fontSize:11,color:'var(--ink-3)'}}>{i.d}</div>
                  </div>
                  <span className="mono" style={{fontSize:9,padding:'3px 7px',borderRadius:5,letterSpacing:'0.06em',textTransform:'uppercase',color: i.on ? '#0a0a0a' : 'var(--ink-3)',background: i.on ? 'var(--accent)' : 'transparent', border: i.on ? '1px solid var(--accent)' : '1px solid var(--line-2)'}}>{i.on ? 'Connected' : 'Connect'}</span>
                </div>
              ))}
            </div>
          )}
          {tab === 'domains' && (
            <div style={{display:'flex',flexDirection:'column',gap:12}}>
              {[
                ['solidatoms.com','Primary','✓ Verified','Cloudflare'],
                ['www.solidatoms.com','Redirect','✓ Verified','Cloudflare'],
                ['atoms.tools','Tool subdomain','✓ Verified','Cloudflare'],
                ['client.solidatoms.com','Portal','⧗ Pending DNS','—'],
              ].map(([d,t,s,prov],i) => (
                <div key={d} style={{display:'grid',gridTemplateColumns:'1.6fr 110px 1fr 100px 36px',gap:14,padding:'14px 18px',borderRadius:8,border:'1px solid var(--line)',background:'var(--bg-2)',alignItems:'center'}}>
                  <span className="mono" style={{fontSize:13,color:'var(--ink)'}}>{d}</span>
                  <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em',textTransform:'uppercase'}}>{t}</span>
                  <span style={{fontSize:12,color: s.startsWith('✓') ? 'var(--ok)' : 'var(--warn)'}}>{s}</span>
                  <span style={{fontSize:12,color:'var(--ink-3)'}}>{prov}</span>
                  <span style={{color:'var(--ink-3)',justifySelf:'end'}}>⋯</span>
                </div>
              ))}
              <button className="btn btn-ghost" style={{padding:'8px 14px',fontSize:12,alignSelf:'flex-start',marginTop:4}}>+ Add domain</button>
            </div>
          )}
          {tab === 'api' && (
            <div style={{display:'flex',flexDirection:'column',gap:14}}>
              <h2 style={{fontSize:16,fontWeight:500,marginBottom:4}}>API keys</h2>
              {[
                ['Production','sk_live_••••8a9f','Created Apr 2 · Last used 12m ago'],
                ['Preview','sk_test_••••e1c2','Created May 1 · Last used 3h ago'],
              ].map(([n,k,t],i)=>(
                <div key={n} style={{display:'flex',alignItems:'center',gap:14,padding:'14px 18px',borderRadius:8,border:'1px solid var(--line)',background:'var(--bg-2)'}}>
                  <div style={{flex:1}}>
                    <div style={{fontSize:13,fontWeight:500,marginBottom:3}}>{n}</div>
                    <div className="mono" style={{fontSize:12,color:'var(--ink-2)'}}>{k}</div>
                    <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em',marginTop:4}}>{t}</div>
                  </div>
                  <button className="btn btn-ghost" style={{padding:'6px 10px',fontSize:11}}>Roll</button>
                  <button className="btn btn-ghost" style={{padding:'6px 10px',fontSize:11,color:'var(--accent-2)',borderColor:'rgba(255,90,58,0.3)'}}>Revoke</button>
                </div>
              ))}
              <h2 style={{fontSize:16,fontWeight:500,marginTop:18,marginBottom:4}}>Webhooks</h2>
              <p style={{fontSize:12,color:'var(--ink-3)'}}>3 active endpoints · 99.8% delivery rate</p>
            </div>
          )}
          {tab === 'billing' && (
            <div style={{display:'flex',flexDirection:'column',gap:14}}>
              <div style={{padding:'20px 22px',borderRadius:12,border:'1px solid var(--accent)',background:'linear-gradient(135deg, rgba(212,255,58,0.06), transparent)'}}>
                <div className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.08em',marginBottom:10}}>● STUDIO PLAN · ACTIVE</div>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:14}}>
                  <div style={{fontSize:30,fontWeight:500,letterSpacing:'-0.02em'}}>$49 <span style={{fontSize:14,color:'var(--ink-3)'}}>/ month</span></div>
                  <button className="btn btn-ghost" style={{padding:'7px 11px',fontSize:12}}>Change plan</button>
                </div>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14,paddingTop:14,borderTop:'1px solid var(--line)'}}>
                  <Row label="Renews" value="Jun 14, 2026"/>
                  <Row label="Seats" value="5 / 10"/>
                  <Row label="Storage" value="2.4 GB / 50 GB"/>
                </div>
              </div>
              <Row label="Card" value="Visa •••• 4242"/>
              <Row label="Billing email" value="billing@solidatoms.com"/>
              <button className="btn btn-ghost" style={{padding:'8px 12px',fontSize:12,alignSelf:'flex-start'}}>Download invoices</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────
// ACTIVITY

const CMSActivity = () => {
  const events = [
    {who:'HA',c:'#d4ff3a',action:'published',target:'Lighthouse Diff v1.0',col:'Tool',when:'12m ago'},
    {who:'SR',c:'#ff8a3a',action:'requested review on',target:'Ledgerline case study v2',col:'Project',when:'2h ago'},
    {who:'BK',c:'#a78bfa',action:'edited',target:'RAG is dead. Long live retrieval…',col:'Journal',when:'4h ago'},
    {who:'HA',c:'#d4ff3a',action:'invited',target:'pending@externalclient.com',col:'Team',when:'yesterday'},
    {who:'AQ',c:'#7c9bff',action:'archived',target:'Old pricing page',col:'Page',when:'2 days ago'},
    {who:'NM',c:'#7ee787',action:'commented on',target:'Northbound case study',col:'Project',when:'2 days ago'},
    {who:'SR',c:'#ff8a3a',action:'created',target:'Designing for LLM-native UI',col:'Journal',when:'3 days ago'},
    {who:'HA',c:'#d4ff3a',action:'rolled API key',target:'Production',col:'Settings',when:'1 week ago'},
    {who:'AQ',c:'#7c9bff',action:'connected',target:'PostHog integration',col:'Settings',when:'1 week ago'},
  ];
  return (
    <div style={{padding:'28px 32px',maxWidth:880}}>
      <h1 style={{fontSize:28,letterSpacing:'-0.025em',fontWeight:500,marginBottom:4}}>Activity</h1>
      <div style={{fontSize:13,color:'var(--ink-3)',marginBottom:24}}>Everything that happened in this workspace, in order.</div>

      <div style={{display:'flex',gap:6,marginBottom:18}}>
        {['All','Content','Team','Settings'].map((t,i)=>(
          <button key={t} style={{
            padding:'5px 10px',borderRadius:6,fontSize:12,
            background: i===0 ? 'rgba(255,255,255,0.06)' : 'transparent',
            color: i===0 ? 'var(--ink)' : 'var(--ink-3)',
            border:'1px solid', borderColor: i===0 ? 'var(--line-2)' : 'transparent'
          }}>{t}</button>
        ))}
      </div>

      <div style={{position:'relative',paddingLeft:32}}>
        <div style={{position:'absolute',left:14,top:8,bottom:8,width:1,background:'var(--line)'}}/>
        {events.map((e,i) => (
          <div key={i} style={{position:'relative',paddingBottom:18,display:'grid',gridTemplateColumns:'1fr 110px',gap:14,alignItems:'center'}}>
            <span style={{position:'absolute',left:-25,top:6,width:24,height:24,borderRadius:'50%',background:`linear-gradient(135deg, ${e.c}55, ${e.c}22)`,border:`1px solid ${e.c}66`,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:9,fontWeight:600,color:e.c}}>{e.who}</span>
            <div style={{padding:'12px 16px',borderRadius:8,border:'1px solid var(--line)',background:'var(--bg-2)'}}>
              <div style={{fontSize:13,color:'var(--ink-2)'}}>
                <span style={{color:'var(--ink)',fontWeight:500}}>{e.who}</span> {e.action} <span style={{color:'var(--accent)'}}>{e.target}</span>
              </div>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em',marginTop:4}}>{e.col.toUpperCase()}</div>
            </div>
            <span className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.04em',textAlign:'right'}}>{e.when}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// SUPER-ADMIN COMMAND CENTER — every controller in one place

const SuperAdminCommandCenter = ({ setPage }) => {
  const controllers = [
    { page:'analytics',  icon:'↗', label:'Analytics studio',  sub:'Traffic · cohorts · alerts',  metric:'2.4k/min',  status:'live',    badge:'NEW',  module:'M12 · SP12', tone:'var(--accent)' },
    { page:'email',      icon:'✉', label:'Email studio',      sub:'Transactional · drips',     metric:'18 templates', status:'live', badge:null,  module:'M13',       tone:'#7c9bff' },
    { page:'onboarding', icon:'◐', label:'Onboarding',         sub:'First-run wizard',          metric:'4 steps',  status:'live',    badge:null,  module:'M14',       tone:'#a78bfa' },
    { page:'portal',     icon:'◉', label:'Client portal',      sub:'Ledgerline · active',       metric:'3 clients', status:'live',   badge:null,  module:'M09',       tone:'#ff8a3a' },
    { page:'plan',       icon:'▢', label:'Project plan',       sub:'14 modules · 13 shipped',   metric:'93%',      status:'live',    badge:null,  module:'M01',       tone:'#7ee787' },
    { page:'pricing',    icon:'$', label:'Pricing & billing', sub:'4 plans · Stripe',          metric:'$84.2k MRR', status:'live',  badge:null,  module:'M08',       tone:'#22d3ee' },
    { page:'auth',       icon:'⊕', label:'Auth & identity',    sub:'Login · SSO · MFA',          metric:'8 screens', status:'live',   badge:null,  module:'M10',       tone:'#f472b6' },
    { page:'home',       icon:'◱', label:'Public site',        sub:'Marketing surfaces',        metric:'12 pages', status:'live',    badge:null,  module:'M02–11',     tone:'#fde047' },
  ];

  return (
    <div style={{
      borderRadius:14, border:'1px solid var(--line)', background:'linear-gradient(180deg, rgba(212,255,58,0.025), var(--bg-2))',
      overflow:'hidden', marginBottom:24
    }}>
      <div style={{padding:'14px 20px',borderBottom:'1px solid var(--line)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
        <div style={{display:'flex',alignItems:'center',gap:14}}>
          <span className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.08em'}}>◈ CONTROL DECK</span>
          <span style={{fontSize:13,fontWeight:500,letterSpacing:'-0.005em'}}>All modules</span>
          <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>{controllers.length} controllers · all healthy</span>
        </div>
        <div style={{display:'flex',gap:8,alignItems:'center'}}>
          <span style={{display:'inline-flex',alignItems:'center',gap:6,fontFamily:'var(--mono)',fontSize:10,color:'var(--ok)',letterSpacing:'0.06em'}}>
            <span style={{width:6,height:6,borderRadius:'50%',background:'var(--ok)',boxShadow:'0 0 0 3px rgba(126,231,135,0.18)'}}/>
            ALL SYSTEMS GO
          </span>
          <button onClick={()=>setPage('plan')} className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.06em',padding:'5px 10px',borderRadius:6,border:'1px solid var(--line)'}}>OPEN ROADMAP ↗</button>
        </div>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:1,background:'var(--line)'}}>
        {controllers.map(c => (
          <button key={c.page} onClick={()=>{setPage(c.page); window.scrollTo({top:0})}} style={{
            padding:'18px 20px',background:'var(--bg-2)',textAlign:'left',
            display:'flex',flexDirection:'column',gap:12,transition:'all .15s ease',position:'relative',minHeight:138
          }}
          onMouseEnter={e=>{e.currentTarget.style.background='#16161a'}}
          onMouseLeave={e=>{e.currentTarget.style.background='var(--bg-2)'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
              <span style={{
                width:32,height:32,borderRadius:8,
                background: c.tone.startsWith('var') ? 'rgba(212,255,58,0.1)' : c.tone+'22',
                border: `1px solid ${c.tone.startsWith('var') ? 'rgba(212,255,58,0.3)' : c.tone+'55'}`,
                display:'flex',alignItems:'center',justifyContent:'center',color:c.tone,fontSize:14
              }}>{c.icon}</span>
              <div style={{display:'flex',alignItems:'center',gap:6}}>
                {c.badge && <span className="mono" style={{fontSize:8,padding:'2px 5px',borderRadius:3,background:'var(--accent)',color:'#0a0a0a',fontWeight:600,letterSpacing:'0.06em'}}>{c.badge}</span>}
                <span className="mono" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'0.06em'}}>{c.module}</span>
              </div>
            </div>
            <div>
              <div style={{fontSize:14,fontWeight:500,letterSpacing:'-0.005em',marginBottom:4,display:'flex',alignItems:'center',gap:8}}>
                {c.label}
                <span style={{color:'var(--ink-4)',fontSize:11}}>↗</span>
              </div>
              <div style={{fontSize:11,color:'var(--ink-3)',lineHeight:1.4}}>{c.sub}</div>
            </div>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',paddingTop:8,borderTop:'1px solid var(--line)',marginTop:'auto'}}>
              <span className="mono" style={{fontSize:10,color:c.tone,letterSpacing:'0.04em'}}>{c.metric}</span>
              <span className="mono" style={{fontSize:9,color:'var(--ok)',letterSpacing:'0.06em',display:'flex',alignItems:'center',gap:5}}>
                <span style={{width:5,height:5,borderRadius:'50%',background:'var(--ok)'}}/>
                {c.status.toUpperCase()}
              </span>
            </div>
          </button>
        ))}
      </div>

      {/* Active sprint strip */}
      <div style={{padding:'14px 20px',borderTop:'1px solid var(--line)',background:'rgba(212,255,58,0.03)',display:'flex',justifyContent:'space-between',alignItems:'center',gap:18}}>
        <div style={{display:'flex',alignItems:'center',gap:14,flex:1,minWidth:0}}>
          <span className="mono" style={{fontSize:10,color:'var(--accent)',letterSpacing:'0.08em'}}>● ACTIVE SPRINT</span>
          <span style={{fontSize:13,fontWeight:500,letterSpacing:'-0.005em'}}>SP12 · Analytics studio</span>
          <span className="mono" style={{fontSize:10,color:'var(--ink-3)',letterSpacing:'0.04em'}}>W44–W45 · Day 2 of 10 · 4/26 pts shipped</span>
        </div>
        <div style={{flex:1.4,height:6,background:'var(--bg-3)',borderRadius:3,overflow:'hidden',maxWidth:280}}>
          <div style={{width:'15%',height:'100%',background:'var(--accent)'}}/>
        </div>
        <button onClick={()=>setPage('analytics')} className="btn btn-primary" style={{padding:'7px 14px',fontSize:11}}>Open Analytics ↗</button>
      </div>
    </div>
  );
};

window.CMS = CMS;
