/* ============================================================
   CRUIG — Dashboard shell (sidebar + topbar)
   ============================================================ */
function DashShell({nav, active, onNav, user, title, subtitle, topRight, children, accent="creator"}){
  const [mobileOpen,setMobileOpen] = useState(false);
  return (
    <div style={{display:'flex', minHeight:'100vh', background:'var(--beige)'}}>
      {/* Sidebar */}
      <aside className={`dash-side ${mobileOpen?'is-open':''}`} style={{width:252, flexShrink:0, background:'var(--green-dark)',
        display:'flex', flexDirection:'column', position:'sticky', top:0, height:'100vh'}}>
        <div style={{padding:'22px 22px 14px'}}>
          <Logo variant="white" height={28}/>
        </div>
        <nav style={{flex:1, padding:'10px 14px', display:'flex', flexDirection:'column', gap:3, overflowY:'auto'}}>
          {nav.map(item=> item.section
            ? <div key={item.section} style={{padding:'14px 12px 6px', fontSize:11, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'rgba(255,255,255,.4)'}}>{item.section}</div>
            : (
            <button key={item.id} onClick={()=>{onNav(item.id); setMobileOpen(false);}} style={{display:'flex', alignItems:'center', gap:12, padding:'11px 13px', borderRadius:12, textAlign:'left', width:'100%', position:'relative',
              background: active===item.id?'var(--lime)':'transparent', color: active===item.id?'var(--green-dark)':'rgba(255,255,255,.82)', fontWeight: active===item.id?700:600, fontSize:14.5, transition:'all .15s'}}
              onMouseEnter={e=>{if(active!==item.id)e.currentTarget.style.background='rgba(255,255,255,.08)';}}
              onMouseLeave={e=>{if(active!==item.id)e.currentTarget.style.background='transparent';}}>
              <Icon name={item.icon} size={19}/>{item.label}
              {item.badge && <span style={{marginLeft:'auto', background: active===item.id?'var(--green-dark)':'var(--lime)', color: active===item.id?'#fff':'var(--green-dark)', fontSize:11, fontWeight:700, borderRadius:99, padding:'2px 8px'}}>{item.badge}</span>}
              {item.lock && <span style={{marginLeft:'auto', opacity:.7}}><Icon name="lock" size={14}/></span>}
            </button>
          ))}
        </nav>
        {user && (
          <div style={{padding:14, borderTop:'1px solid rgba(255,255,255,.1)'}}>
            <div style={{background:'rgba(255,255,255,.06)', borderRadius:14, padding:13}}>
              <div style={{display:'flex', alignItems:'center', gap:11, marginBottom: user.planLabel?11:0}}>
                <Avatar name={user.name} size={38} colorIdx={user.color||0} verified={user.verified} src={user.src}/>
                <div style={{minWidth:0}}>
                  <div style={{color:'#fff', fontWeight:700, fontSize:13.5, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{user.name}</div>
                  <div style={{color:'rgba(255,255,255,.55)', fontSize:12}}>{user.role}</div>
                </div>
              </div>
              {user.planLabel && (
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:8}}>
                  <span className="badge" style={{background:user.pro?'var(--lime)':'rgba(255,167,50,.2)', color:user.pro?'var(--green-dark)':'var(--orange)'}}>{user.planLabel}</span>
                  {!user.pro && <button onClick={user.onUpgrade} style={{color:'var(--lime)', fontSize:12.5, fontWeight:700}}>Assinar →</button>}
                </div>
              )}
            </div>
          </div>
        )}
      </aside>
      {mobileOpen && <div onClick={()=>setMobileOpen(false)} style={{position:'fixed', inset:0, background:'rgba(0,40,0,.4)', zIndex:39}} className="dash-scrim"></div>}

      {/* Main */}
      <main style={{flex:1, minWidth:0, display:'flex', flexDirection:'column'}}>
        <header style={{position:'sticky', top:0, zIndex:30, background:'rgba(251,247,225,.86)', backdropFilter:'blur(12px)', borderBottom:'1px solid var(--line)',
          padding:'16px 30px', display:'flex', alignItems:'center', gap:18, justifyContent:'space-between'}}>
          <div style={{display:'flex', alignItems:'center', gap:14, minWidth:0}}>
            <button className="dash-burger" onClick={()=>setMobileOpen(true)} style={{display:'none', width:40,height:40,borderRadius:10,background:'#fff',border:'1px solid var(--line)',alignItems:'center',justifyContent:'center'}}><Icon name="grid" size={18}/></button>
            <div style={{minWidth:0}}>
              <h2 style={{fontSize:23, lineHeight:1.1}}>{title}</h2>
              {subtitle && <p className="faint" style={{fontSize:13.5, marginTop:2}}>{subtitle}</p>}
            </div>
          </div>
          <div style={{display:'flex', alignItems:'center', gap:12, flexShrink:0}}>{topRight}</div>
        </header>
        <div style={{padding:'26px 30px 60px', flex:1}}>{children}</div>
      </main>
    </div>
  );
}

window.DashShell = DashShell;