/* trainer-screens.jsx — all 6 screens + App */

/* ── DASHBOARD ── */
function TDashboard({ go }) {
  const hour = new Date().getHours();
  const greeting = hour<12?'Good morning':hour<17?'Good afternoon':'Good evening';
  return (
    <div>
      {/* Hero */}
      <div style={{ background:'var(--tr-hero)', borderRadius:16, padding:'28px 32px', marginBottom:22, position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', inset:0, backgroundImage:'radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.1px)', backgroundSize:'20px 20px' }}/>
        <div style={{ position:'relative' }}>
          <div style={{ fontSize:12, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'rgba(255,255,255,.6)', marginBottom:6 }}>{greeting}</div>
          <h1 style={{ fontFamily:'var(--display)', fontSize:34, fontWeight:800, color:'#fff', letterSpacing:'-.02em', marginBottom:4 }}>{TRAINER.name}</h1>
          <div style={{ fontSize:14, color:'rgba(255,255,255,.75)' }}>{TRAINER.title} · {TRAINER.location}</div>
          <div style={{ display:'flex', gap:16, marginTop:22, flexWrap:'wrap' }}>
            {[['4.8 / 5.0','OVERALL EVAL'],['72','NPS SCORE'],['28','TOTAL COHORTS'],['486','LEARNERS TRAINED']].map(([v,l])=>(
              <div key={l} style={{ background:'rgba(0,0,0,.18)', borderRadius:12, padding:'14px 20px', minWidth:110 }}>
                <div style={{ fontFamily:'var(--display)', fontWeight:800, fontSize:24, color:'#fff', lineHeight:1 }}>{v}</div>
                <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:'.12em', color:'rgba(255,255,255,.6)', marginTop:5, textTransform:'uppercase' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Live now */}
      <div style={{ display:'flex', alignItems:'center', gap:14, padding:'14px 20px', borderRadius:14, border:'1.5px solid var(--tr-accent)', background:'rgba(92,184,122,.06)', marginBottom:22 }}>
        <span style={{ width:10, height:10, borderRadius:'50%', background:'var(--tr-accent)', boxShadow:'0 0 0 4px rgba(92,184,122,.25)', display:'block', flex:'none' }}/>
        <div style={{ flex:1 }}>
          <span style={{ fontWeight:700, fontSize:14, color:'var(--ink)' }}>Live now: </span>
          <span style={{ color:'var(--tr-ink-2)', fontSize:14 }}>{LIVE_SESSION.course} | Jun — Shell</span>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:7, background:'#f99d25', borderRadius:999, padding:'5px 14px', fontSize:12.5, fontWeight:700, color:'#fff' }}>
          <span style={{ width:7, height:7, borderRadius:'50%', background:'#fff', display:'block' }}/>
          Conducting · Day {LIVE_SESSION.day}
        </div>
        <button className="tbtn tbtn-acc" onClick={()=>go('live')}><TIcon name="play" size={14}/>Open live session</button>
      </div>

      {/* Today stats */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:22 }}>
        {[
          { val:'4.8', label:'Eval score (overall)', icon:'target', col:'var(--tr-accent)' },
          { val:'15',  label:'Participants today',   icon:'users',  col:'var(--tr-green)' },
          { val:'2',   label:'Questions pending',    icon:'note',   col:'#e6a817' },
          { val:'1',   label:'Follow-along: No',     icon:'bolt',   col:'#e05a5a' },
        ].map(s=>(
          <div key={s.label} className="tcard" style={{ padding:'18px 20px' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:10 }}>
              <div style={{ width:34, height:34, borderRadius:9, background:s.col+'18', display:'grid', placeItems:'center' }}>
                <TIcon name={s.icon} size={16} style={{ color:s.col }}/>
              </div>
            </div>
            <div style={{ fontFamily:'var(--display)', fontWeight:800, fontSize:30, color:s.col, lineHeight:1 }}>{s.val}</div>
            <div style={{ fontSize:12.5, color:'var(--tr-ink-2)', marginTop:5 }}>{s.label}</div>
          </div>
        ))}
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:18 }}>
        {/* Open questions */}
        <div className="tcard" style={{ padding:22 }}>
          <div style={{ display:'flex', justifyContent:'space-between', marginBottom:16 }}>
            <div style={{ fontFamily:'var(--display)', fontSize:14, fontWeight:700, textTransform:'uppercase', letterSpacing:'.08em', color:'var(--tr-ink-2)' }}>Open Questions</div>
            <span style={{ background:'rgba(230,168,23,.15)', color:'#b07d00', borderRadius:999, padding:'3px 10px', fontSize:12, fontWeight:700 }}>{QA.filter(q=>!q.answered).length} unanswered</span>
          </div>
          {QA.map(q=>(
            <div key={q.id} style={{ display:'flex', gap:12, padding:'11px 0', borderBottom:'1px solid var(--tr-border)' }}>
              <TAv initials={q.initials} size={30}/>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:13.5, color:'var(--ink)', lineHeight:1.4 }}>{q.q}</div>
                <div style={{ fontSize:11.5, color:'var(--tr-ink-3)', marginTop:4 }}>{q.name} · {q.time}</div>
              </div>
              {q.answered
                ? <TIcon name="checkCircle" size={16} style={{ color:'var(--tr-accent)', flex:'none', marginTop:2 }}/>
                : <button className="tbtn tbtn-sm" disabled title="Binnenkort" style={{ flex:'none', alignSelf:'flex-start', opacity:.5, cursor:'not-allowed' }}>Answer</button>}
            </div>
          ))}
        </div>

        {/* Upcoming cohorts */}
        <div className="tcard" style={{ padding:22 }}>
          <div style={{ fontFamily:'var(--display)', fontSize:14, fontWeight:700, textTransform:'uppercase', letterSpacing:'.08em', color:'var(--tr-ink-2)', marginBottom:16 }}>My Cohorts</div>
          {MY_COHORTS.map(c=>(
            <div key={c.id} style={{ padding:'13px 0', borderBottom:'1px solid var(--tr-border)' }}>
              <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:6 }}>
                <div style={{ width:32, height:32, borderRadius:9, background:c.live?'var(--tr-accent)':'var(--tr-pale)', display:'grid', placeItems:'center' }}>
                  <TIcon name={c.icon} size={15} style={{ color:c.live?'#fff':'var(--tr-green)' }}/>
                </div>
                <div style={{ flex:1 }}>
                  <div style={{ fontWeight:700, fontSize:13.5 }}>{c.course.replace(' Certification','')}</div>
                  <div style={{ fontSize:12, color:'var(--tr-ink-2)' }}>{c.client} · {c.pp} pp</div>
                </div>
                <span style={{ fontSize:11.5, fontWeight:700, padding:'3px 9px', borderRadius:999,
                  background:c.status==='Conducting'?'rgba(92,184,122,.15)':c.status==='Completed'?'rgba(92,122,184,.12)':'rgba(200,200,200,.2)',
                  color:c.status==='Conducting'?'var(--tr-accent)':c.status==='Completed'?'#4a6aaa':'var(--tr-ink-3)' }}>{c.status}</span>
              </div>
              <div style={{ fontSize:11.5, color:'var(--tr-ink-3)' }}>{c.start} – {c.end}</div>
            </div>
          ))}
          <button className="tbtn tbtn-outline" style={{ width:'100%', marginTop:12, justifyContent:'center' }} onClick={()=>go('cohorts')}>View all cohorts <TIcon name="arrowR" size={13}/></button>
        </div>
      </div>
    </div>
  );
}

/* ── LIVE SESSION ── */
function LiveSession() {
  const [slide, setSlide] = useState(LIVE_SESSION.slide);
  const [tab, setTab] = useState('roster');
  const total = IPMA_SL.length;
  const [qaList, setQaList] = useState(QA);

  return (
    <div style={{ display:'flex', height:'100%', background:'var(--live-bg)', color:'#fff', overflow:'hidden' }}>
      {/* Slide thumbnails strip */}
      <div style={{ width:130, flex:'none', borderRight:'1px solid rgba(255,255,255,.08)', display:'flex', flexDirection:'column', gap:0, overflowY:'auto', padding:'12px 8px' }}>
        {IPMA_SL.map((sl,i)=>(
          <button key={i} onClick={()=>setSlide(i+1)} title={'Slide '+(i+1)}
            style={{ width:'100%', aspectRatio:'16/9', borderRadius:6, marginBottom:6, padding:0, border:slide===i+1?'2px solid var(--tr-accent)':'2px solid rgba(255,255,255,.08)',
              background:'#0b1626', cursor:'pointer', position:'relative', overflow:'hidden', opacity:slide===i+1?1:.62, transition:'opacity .14s,border-color .14s' }}>
            <div style={{ position:'absolute', inset:0, width:'952%', height:'952%', transform:'scale(0.105)', transformOrigin:'top left', pointerEvents:'none' }}>
              <IPMASlideCard s={sl}/>
            </div>
            <span style={{ position:'absolute', bottom:2, left:3, fontSize:8, fontWeight:800, color:'#fff', background:'rgba(0,0,0,.5)', borderRadius:3, padding:'0 4px', lineHeight:'12px' }}>{i+1}</span>
          </button>
        ))}
      </div>

      {/* Main slide area */}
      <div style={{ flex:1, display:'flex', flexDirection:'column', minWidth:0 }}>
        {/* Sub-topbar */}
        <div style={{ height:52, flex:'none', borderBottom:'1px solid rgba(255,255,255,.08)', display:'flex', alignItems:'center', padding:'0 20px', gap:14 }}>
          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
            <span style={{ width:8, height:8, borderRadius:'50%', background:'var(--tr-accent)', animation:'pulse 2s infinite', display:'block' }}/>
            <span style={{ fontSize:13, fontWeight:700 }}>Live · {LIVE_SESSION.course} | Jun — Shell</span>
            <span style={{ fontSize:12, color:'rgba(255,255,255,.5)' }}>Shell · 15 participants</span>
          </div>
          <div style={{ flex:1 }}/>
          <div style={{ display:'flex', alignItems:'center', gap:6, background:'rgba(255,255,255,.08)', borderRadius:8, padding:'6px 12px', fontSize:13, fontWeight:700 }}>
            <TIcon name="clock" size={14}/>{LIVE_SESSION.timer}
          </div>
          <button className="tbtn tbtn-acc" disabled title="Binnenkort" style={{ fontSize:12.5, opacity:.5, cursor:'not-allowed' }}><TIcon name="broadcast" size={13}/>Broadcast</button>
        </div>

        {/* Slide viewer */}
        <div style={{ flex:1, display:'flex', flexDirection:'column', padding:'20px 24px', minHeight:0 }}>
          <div style={{ flex:1, background:'#06101e', borderRadius:14, position:'relative', minHeight:0, padding:18, overflow:'hidden' }}>
            <ScaledSlide s={IPMA_SL[slide-1]}/>
            <div style={{ position:'absolute', bottom:14, right:16, fontSize:11, fontWeight:600, color:'rgba(255,255,255,.4)', background:'rgba(0,0,0,.35)', padding:'3px 9px', borderRadius:6 }}>IPMA-D® Certification · Slide {slide} / {total}</div>
          </div>

          {/* Trainer notes */}
          <div style={{ marginTop:14, padding:'14px 18px', borderRadius:12, background:'rgba(255,255,255,.05)', border:'1px solid rgba(255,255,255,.08)' }}>
            <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--tr-accent)', marginBottom:6 }}>Trainer Notes</div>
            <div style={{ fontSize:13.5, color:'rgba(255,255,255,.8)', lineHeight:1.55 }}>{(window.IPMA_NOTES&&window.IPMA_NOTES[slide-1])||LIVE_SESSION.notes}</div>
          </div>

          {/* Navigation */}
          <div style={{ display:'flex', alignItems:'center', gap:14, marginTop:14 }}>
            <button className="tbtn tbtn-outline-dark" onClick={()=>setSlide(Math.max(1,slide-1))} disabled={slide<=1}><TIcon name="chevL" size={14}/>Prev</button>
            <div style={{ flex:1, height:6, borderRadius:999, background:'rgba(255,255,255,.1)' }}>
              <div style={{ height:'100%', borderRadius:999, background:'var(--tr-accent)', width:`${(slide/total)*100}%`, transition:'width .3s' }}/>
            </div>
            <button className="tbtn tbtn-acc" onClick={()=>setSlide(Math.min(total,slide+1))}>Next <TIcon name="chevR" size={14}/></button>
          </div>

          {/* Following bar */}
          <div style={{ display:'flex', alignItems:'center', gap:12, marginTop:12, fontSize:13 }}>
            <span style={{ color:'rgba(255,255,255,.5)', fontWeight:600 }}>Following:</span>
            <div style={{ flex:1, height:10, borderRadius:999, background:'rgba(255,255,255,.08)', overflow:'hidden', display:'flex' }}>
              <div style={{ width:`${(LIVE_SESSION.following.yes/15)*100}%`, background:'var(--tr-accent)' }}/>
              <div style={{ width:`${(LIVE_SESSION.following.maybe/15)*100}%`, background:'#e6a817' }}/>
              <div style={{ width:`${(LIVE_SESSION.following.no/15)*100}%`, background:'#e05a5a' }}/>
            </div>
            <span style={{ color:'var(--tr-accent)', fontWeight:700 }}>✓ {LIVE_SESSION.following.yes}</span>
            <span style={{ color:'#e6a817', fontWeight:700 }}>~ {LIVE_SESSION.following.maybe}</span>
            <span style={{ color:'#e05a5a', fontWeight:700 }}>✗ {LIVE_SESSION.following.no}</span>
          </div>
        </div>
      </div>

      {/* Right panel */}
      <div style={{ width:280, flex:'none', borderLeft:'1px solid rgba(255,255,255,.08)', display:'flex', flexDirection:'column' }}>
        {/* Tabs */}
        <div style={{ display:'flex', borderBottom:'1px solid rgba(255,255,255,.08)' }}>
          {[['roster','Roster'],['qa','Q&A'],['notes','Notes']].map(([id,label])=>(
            <button key={id} onClick={()=>setTab(id)}
              style={{ flex:1, padding:'14px 0', fontSize:13, fontWeight:700, border:'none', cursor:'pointer', background:'transparent',
                color:tab===id?'var(--tr-accent)':'rgba(255,255,255,.4)',
                borderBottom:tab===id?'2px solid var(--tr-accent)':'2px solid transparent', transition:'color .14s' }}>
              {label}{id==='qa'&&qaList.filter(q=>!q.answered).length>0&&<span style={{ marginLeft:5, background:'#e6a817', color:'#1a1a00', borderRadius:999, padding:'1px 7px', fontSize:11, fontWeight:800 }}>{qaList.filter(q=>!q.answered).length}</span>}
            </button>
          ))}
        </div>

        {/* Tab content */}
        <div style={{ flex:1, overflowY:'auto', padding:'14px 14px' }}>
          {tab==='roster' && (
            <>
              <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'rgba(255,255,255,.4)', marginBottom:12 }}>{PARTICIPANTS.length} Participants</div>
              {PARTICIPANTS.map(p=>(
                <div key={p.initials} style={{ display:'flex', alignItems:'center', gap:10, padding:'9px 0', borderBottom:'1px solid rgba(255,255,255,.06)' }}>
                  <TAv initials={p.initials} size={30} bg={p.status==='red'?'rgba(224,90,90,.3)':'rgba(92,184,122,.2)'}/>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:13, fontWeight:700, color:'#fff', lineHeight:1.2 }}>{p.name}</div>
                    <div style={{ fontSize:11, color:'rgba(255,255,255,.4)' }}>{p.org}</div>
                  </div>
                  <div style={{ display:'flex', gap:2 }}>
                    {p.engage.map((v,i)=><div key={i} style={{ width:10, height:10, borderRadius:2, background:v?'var(--tr-accent)':'rgba(255,255,255,.12)' }}/>)}
                  </div>
                  <div style={{ width:10, height:10, borderRadius:'50%', background:p.status==='green'?'var(--tr-accent)':p.status==='orange'?'#e6a817':'#e05a5a', flex:'none' }}/>
                </div>
              ))}
            </>
          )}
          {tab==='qa' && (
            <>
              <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'rgba(255,255,255,.4)', marginBottom:12 }}>Questions</div>
              {qaList.map(q=>(
                <div key={q.id} style={{ padding:'11px 0', borderBottom:'1px solid rgba(255,255,255,.06)' }}>
                  <div style={{ fontSize:12.5, color:q.answered?'rgba(255,255,255,.4)':'#fff', lineHeight:1.45, marginBottom:6, fontStyle:q.answered?'italic':'normal' }}>{q.q}</div>
                  <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                    <span style={{ fontSize:11, color:'rgba(255,255,255,.35)' }}>{q.name} · {q.time}</span>
                    {!q.answered&&<button onClick={()=>setQaList(l=>l.map(x=>x.id===q.id?{...x,answered:true}:x))}
                      style={{ fontSize:11.5, fontWeight:700, color:'var(--tr-accent)', background:'none', border:'none', cursor:'pointer' }}>Mark answered</button>}
                  </div>
                </div>
              ))}
            </>
          )}
          {tab==='notes' && (
            <div>
              <div style={{ fontSize:10.5, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'rgba(255,255,255,.4)', marginBottom:12 }}>Session Notes</div>
              <textarea defaultValue="Key points from today&#10;- Competence levels discussed&#10;- Group exercise on E=Q×A" rows={10}
                style={{ width:'100%', background:'rgba(255,255,255,.06)', border:'1px solid rgba(255,255,255,.1)', borderRadius:10, padding:'10px 13px', color:'#fff', fontSize:13, fontFamily:'var(--body)', resize:'vertical', outline:'none' }}/>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ── MY COHORTS ── */
function TCohorts({ go }) {
  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:24 }}>
        <div className="tpage-head"><h1>My Cohorts</h1><p>{MY_COHORTS.length} cohorts assigned to you</p></div>
        <button className="tbtn tbtn-acc" disabled title="Binnenkort" style={{ opacity:.5, cursor:'not-allowed' }}><TIcon name="play" size={14}/>Open session</button>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        {MY_COHORTS.map(c=>(
          <div key={c.id} className="tcard" style={{ padding:22 }}>
            <div style={{ display:'flex', alignItems:'center', gap:16 }}>
              <div style={{ width:48, height:48, borderRadius:13, background:c.live?'var(--tr-accent)':'var(--tr-pale)', display:'grid', placeItems:'center', flex:'none' }}>
                <TIcon name={c.icon} size={22} style={{ color:c.live?'#fff':'var(--tr-green)' }}/>
              </div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:4 }}>
                  <div style={{ fontFamily:'var(--display)', fontWeight:800, fontSize:17 }}>{c.course.replace(' Certification','')}</div>
                  {c.live&&<div style={{ display:'flex', alignItems:'center', gap:5 }}>
                    <span style={{ width:7, height:7, borderRadius:'50%', background:'var(--tr-accent)', animation:'pulse 2s infinite', display:'block' }}/>
                    <span style={{ fontSize:11.5, fontWeight:700, color:'var(--tr-accent)' }}>Live</span>
                  </div>}
                  <span style={{ fontSize:12.5, fontWeight:700, padding:'3px 10px', borderRadius:999, marginLeft:'auto',
                    background:c.status==='Conducting'?'rgba(92,184,122,.15)':c.status==='Completed'?'rgba(92,122,184,.12)':'rgba(200,200,200,.15)',
                    color:c.status==='Conducting'?'var(--tr-accent)':c.status==='Completed'?'#4a6aaa':'var(--tr-ink-3)' }}>{c.status}</span>
                </div>
                <div style={{ fontSize:13.5, color:'var(--tr-ink-2)' }}>{c.client} · {c.type} · {c.pp} participants</div>
              </div>
              <div style={{ textAlign:'right', flex:'none' }}>
                <div style={{ fontSize:11.5, color:'var(--tr-ink-3)', marginBottom:2 }}>Start</div>
                <div style={{ fontWeight:700, fontSize:13 }}>{c.start}</div>
              </div>
              <div style={{ textAlign:'right', flex:'none' }}>
                <div style={{ fontSize:11.5, color:'var(--tr-ink-3)', marginBottom:2 }}>End</div>
                <div style={{ fontWeight:700, fontSize:13 }}>{c.end}</div>
              </div>
              <div style={{ flex:'none' }}>
                {c.live
                  ? <button className="tbtn tbtn-acc" onClick={()=>go('live')}><TIcon name="play" size={13}/>Open session</button>
                  : <button className="tbtn tbtn-outline" disabled title="Binnenkort" style={{ opacity:.5, cursor:'not-allowed' }}>View details</button>}
              </div>
            </div>
            {/* Avatar strip */}
            <div style={{ marginTop:14, paddingTop:14, borderTop:'1px solid var(--tr-border)', display:'flex', alignItems:'center', gap:10 }}>
              <div style={{ display:'flex', gap:-6 }}>
                {c.avatars.slice(0,6).map((a,i)=>(
                  <div key={i} style={{ width:28, height:28, borderRadius:8, background:'var(--tr-green)', border:'2px solid var(--surface)', display:'grid', placeItems:'center', marginLeft:i>0?-8:0, color:'#fff', fontFamily:'var(--display)', fontWeight:700, fontSize:10, zIndex:c.avatars.length-i }}>{a}</div>
                ))}
              </div>
              <span style={{ fontSize:12.5, color:'var(--tr-ink-2)' }}>{c.pp} participants enrolled</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── MY MATERIALS ── */
function TMaterials() {
  const mico = { 'Course Content':'graduation', 'Slideware':'slides', 'Memo Cards':'note', 'Assessment':'target', 'Book':'book' };
  const micons = { graduation:'graduation', slides:'book', note:'note', target:'target', book:'book' };
  return (
    <div>
      <div className="tpage-head" style={{ marginBottom:24 }}><h1>My Materials</h1><p>Authorised training materials for {MATERIALS.length} products</p></div>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        {MATERIALS.map(m=>(
          <div key={m.course} className="tcard" style={{ overflow:'hidden' }}>
            <div style={{ padding:'16px 22px', background:m.color, display:'flex', alignItems:'center', gap:14 }}>
              <div style={{ width:40, height:40, borderRadius:11, background:'rgba(255,255,255,.15)', display:'grid', placeItems:'center' }}>
                <TIcon name={m.icon} size={20} style={{ color:'#fff' }}/>
              </div>
              <div>
                <div style={{ fontFamily:'var(--display)', fontWeight:800, fontSize:17, color:'#fff' }}>{m.course}</div>
                <div style={{ fontSize:13, color:'rgba(255,255,255,.7)' }}>Project Management</div>
              </div>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:0 }}>
              {m.items.map((item,i)=>(
                <div key={item.name} style={{ padding:'18px 14px', textAlign:'center', borderRight:i<4?'1px solid var(--tr-border)':'none' }}>
                  <TIcon name={micons[mico[item.name]]||'book'} size={22} style={{ color:item.avail?'var(--tr-green)':'var(--tr-ink-3)', marginBottom:10 }}/>
                  <div style={{ fontSize:12.5, fontWeight:600, color:item.avail?'var(--ink)':'var(--tr-ink-3)', marginBottom:10 }}>{item.name}</div>
                  {item.avail
                    ? <button className="tbtn tbtn-outline tbtn-sm" disabled title="Binnenkort" style={{ width:'100%', justifyContent:'center', opacity:.5, cursor:'not-allowed' }}>Open →</button>
                    : <div style={{ fontSize:12, color:'var(--tr-ink-3)', fontStyle:'italic' }}>Unavailable</div>}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── EVALUATIONS ── */
function TEvals() {
  const maxT = Math.max(...EVAL_TREND);
  const months = ['Jan','Feb','Mar','Apr','May','Jun'];
  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:24 }}>
        <div className="tpage-head" style={{ marginBottom:0 }}><h1>My Evaluations</h1><p>312 evaluations received · 28 cohorts rated <span style={{ fontSize:11, fontWeight:700, color:'var(--tr-ink-3)', border:'1px solid var(--tr-border)', borderRadius:6, padding:'1px 7px', marginLeft:6 }}>demo data</span></p></div>
        <div style={{ display:'flex', gap:16 }}>
          <div className="tcard" style={{ padding:'14px 22px', textAlign:'center' }}>
            <div style={{ fontFamily:'var(--display)', fontWeight:800, fontSize:28, color:'var(--tr-accent)' }}>4.8</div>
            <div style={{ fontSize:11.5, color:'var(--tr-ink-2)', marginTop:3 }}>Overall score</div>
          </div>
          <div className="tcard" style={{ padding:'14px 22px', textAlign:'center' }}>
            <div style={{ fontFamily:'var(--display)', fontWeight:800, fontSize:28, color:'var(--tr-green)' }}>72</div>
            <div style={{ fontSize:11.5, color:'var(--tr-ink-2)', marginTop:3 }}>NPS</div>
          </div>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'260px 1fr', gap:20, marginBottom:20 }}>
        {/* Radar */}
        <div className="tcard" style={{ padding:22, display:'flex', flexDirection:'column', alignItems:'center' }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--tr-ink-2)', marginBottom:14 }}>Competence Radar</div>
          <RadarChart dims={EVAL_DIMS} size={210}/>
          <div style={{ display:'flex', gap:16, marginTop:10, fontSize:12 }}>
            <div style={{ display:'flex', alignItems:'center', gap:5 }}><div style={{ width:20, height:2, background:'var(--tr-accent)', borderRadius:1 }}/><span style={{ color:'var(--tr-ink-2)' }}>Subject 4.9</span></div>
            <div style={{ display:'flex', alignItems:'center', gap:5 }}><div style={{ width:20, height:2, background:'var(--tr-accent)', borderRadius:1 }}/><span style={{ color:'var(--tr-ink-2)' }}>Explanation 4.7</span></div>
          </div>
        </div>

        {/* Dimension scores */}
        <div className="tcard" style={{ padding:22 }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--tr-ink-2)', marginBottom:18 }}>Dimension Scores</div>
          <div style={{ display:'flex', flexDirection:'column', gap:13 }}>
            {EVAL_DIMS.map(d=>(
              <div key={d.label} style={{ display:'flex', alignItems:'center', gap:14 }}>
                <div style={{ width:160, fontSize:13.5, color:'var(--ink)', flex:'none' }}>{d.label}</div>
                <div style={{ flex:1, height:8, borderRadius:999, background:'var(--tr-pale)', overflow:'hidden' }}>
                  <div style={{ height:'100%', width:`${(d.score/5)*100}%`, background:'var(--tr-accent)', borderRadius:999, transition:'width .6s' }}/>
                </div>
                <div style={{ fontFamily:'var(--display)', fontWeight:800, fontSize:16, color:'var(--tr-accent)', minWidth:32, textAlign:'right' }}>{d.score}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Trend */}
      <div className="tcard" style={{ padding:22 }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--tr-ink-2)', marginBottom:18 }}>Trend — Last 6 Cohorts</div>
        <div style={{ position:'relative', height:90 }}>
          <svg width="100%" height="90" viewBox="0 0 600 90" preserveAspectRatio="none">
            <defs>
              <linearGradient id="trendGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="var(--tr-accent)" stopOpacity=".2"/>
                <stop offset="100%" stopColor="var(--tr-accent)" stopOpacity="0"/>
              </linearGradient>
            </defs>
            {(()=>{
              const pts = EVAL_TREND.map((v,i)=>({ x:i*(600/5), y:90-(((v-4)/(maxT-3.9))*80) }));
              const area=`M${pts.map(p=>`${p.x},${p.y}`).join(' L')} L${pts[pts.length-1].x},90 L0,90 Z`;
              const line=`M${pts.map(p=>`${p.x},${p.y}`).join(' L')}`;
              return <>
                <path d={area} fill="url(#trendGrad)"/>
                <path d={line} fill="none" stroke="var(--tr-accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
                {pts.map((p,i)=><g key={i}><circle cx={p.x} cy={p.y} r={5} fill="var(--tr-accent)" stroke="#fff" strokeWidth={2}/><text x={p.x} y={p.y-10} textAnchor="middle" fontSize={11} fill="var(--tr-accent)" fontFamily="var(--body)" fontWeight={700}>{EVAL_TREND[i]}</text></g>)}
              </>;
            })()}
          </svg>
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', marginTop:6 }}>
          {months.map(m=><span key={m} style={{ fontSize:11, color:'var(--tr-ink-3)', fontWeight:600 }}>{m}</span>)}
        </div>
      </div>
    </div>
  );
}

/* ── MY PROFILE ── */
function TProfile() {
  const days = ['Mon','Tue','Wed','Thu','Fri'];
  return (
    <div>
      <div className="tpage-head" style={{ marginBottom:24 }}><h1>My Profile</h1></div>
      {/* Hero */}
      <div style={{ background:'var(--tr-hero)', borderRadius:16, padding:'24px 28px', marginBottom:20, position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', inset:0, backgroundImage:'radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.1px)', backgroundSize:'18px 18px' }}/>
        <div style={{ position:'relative', display:'flex', alignItems:'center', gap:20 }}>
          <div style={{ width:72, height:72, borderRadius:18, background:'rgba(255,255,255,.2)', display:'grid', placeItems:'center', fontFamily:'var(--display)', fontWeight:800, fontSize:26, color:'#fff' }}>JB</div>
          <div>
            <div style={{ fontFamily:'var(--display)', fontWeight:800, fontSize:26, color:'#fff', letterSpacing:'-.02em' }}>{TRAINER.name}</div>
            <div style={{ fontSize:14, color:'rgba(255,255,255,.75)', marginTop:3 }}>{TRAINER.title}</div>
            <div style={{ fontSize:13, color:'rgba(255,255,255,.55)', marginTop:2 }}>{TRAINER.email} · {TRAINER.location}</div>
          </div>
          <button className="tbtn tbtn-sm" disabled title="Binnenkort" style={{ marginLeft:'auto', background:'rgba(255,255,255,.15)', color:'#fff', border:'none', backdropFilter:'blur(4px)', opacity:.5, cursor:'not-allowed' }}><TIcon name="edit" size={13}/>Edit</button>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:18 }}>
        {/* Bio */}
        <div className="tcard" style={{ padding:22, gridColumn:'1/-1' }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--tr-ink-2)', marginBottom:12 }}>Bio</div>
          <div style={{ fontSize:14, color:'var(--ink)', lineHeight:1.6 }}>{TRAINER.bio}</div>
        </div>

        {/* Contact */}
        <div className="tcard" style={{ padding:22 }}>
          <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--tr-ink-2)', marginBottom:16 }}>Contact Details</div>
          {[['Email',TRAINER.email],['Phone',TRAINER.phone],['Location',TRAINER.location]].map(([k,v])=>(
            <div key={k} style={{ display:'flex', padding:'10px 0', borderBottom:'1px solid var(--tr-border)' }}>
              <span style={{ width:80, fontSize:13, color:'var(--tr-ink-2)', flex:'none' }}>{k}</span>
              <span style={{ fontSize:13, fontWeight:600, color:'var(--ink)' }}>{v}</span>
            </div>
          ))}
        </div>

        {/* Availability + products */}
        <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          <div className="tcard" style={{ padding:22 }}>
            <div style={{ display:'flex', justifyContent:'space-between', marginBottom:16 }}>
              <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--tr-ink-2)' }}>Availability</div>
              <button className="tbtn tbtn-sm tbtn-outline" disabled title="Binnenkort" style={{ opacity:.5, cursor:'not-allowed' }}>Edit</button>
            </div>
            <div style={{ display:'flex', gap:8 }}>
              {days.map(d=>(
                <div key={d} style={{ width:44, height:44, borderRadius:10, display:'grid', placeItems:'center', fontSize:12.5, fontWeight:700,
                  background:TRAINER.availability.includes(d)?'var(--tr-accent)':'var(--tr-pale)',
                  color:TRAINER.availability.includes(d)?'#fff':'var(--tr-ink-3)' }}>{d}</div>
              ))}
            </div>
          </div>
          <div className="tcard" style={{ padding:22 }}>
            <div style={{ fontSize:11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--tr-ink-2)', marginBottom:14 }}>Authorised Products</div>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              {TRAINER.products.map((p,i)=>{
                const cols = ['#3d6b4f','#6b3d8a','#3d5a8a'];
                return (
                  <div key={p} style={{ display:'flex', alignItems:'center', gap:11, padding:'10px 13px', borderRadius:11, background:cols[i]+'15', border:`1px solid ${cols[i]}30` }}>
                    <div style={{ width:28, height:28, borderRadius:7, background:cols[i], display:'grid', placeItems:'center' }}>
                      <TIcon name="graduation" size={14} style={{ color:'#fff' }}/>
                    </div>
                    <span style={{ fontSize:13.5, fontWeight:600, color:'var(--ink)' }}>{p}</span>
                    <TIcon name="checkCircle" size={15} style={{ marginLeft:'auto', color:cols[i] }}/>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── App ── */
const TTITLES = { dashboard:'Dashboard', live:'Live Session', cohorts:'My Cohorts', materials:'My Materials', evals:'Evaluations', profile:'My Profile' };

function TApp() {
  const [route, setRoute] = useState('dashboard');
  const go = r => { setRoute(r); };
  const isLive = route === 'live';
  return (
    <div style={{ display:'flex', height:'100vh', overflow:'hidden', fontFamily:'var(--body)' }}>
      <TSidebar route={route} go={go}/>
      <div style={{ flex:1, display:'flex', flexDirection:'column', minWidth:0, background: isLive?'var(--live-bg)':'var(--app-bg)' }}>
        <TTopbar title={TTITLES[route]} live={isLive}/>
        <div style={{ flex:1, minHeight:0, overflowY: isLive?'hidden':'auto', padding: isLive?0:'26px 32px 60px' }} className="scroll">
          {route==='dashboard'  && <TDashboard go={go}/>}
          {route==='live'       && <LiveSession/>}
          {route==='cohorts'    && <TCohorts go={go}/>}
          {route==='materials'  && <TMaterials/>}
          {route==='evals'      && <TEvals/>}
          {route==='profile'    && <TProfile/>}
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<TApp/>);