// Screen 2: Participant List — 4 variations
function ListScreen() {
  const data = [
    ['AP','Aguilar, Phillip','M·47','T2021','2880','2712','168','crit', 102, 'Honolulu'],
    ['KM','Kahale, Mei','F·32','H2021 U4','2200','2156','44','warn', 98, 'Kailua'],
    ['NJ','Nakagawa, Joel','M·28','T2021','2880','2534','346','warn', 88, 'Pearl City'],
    ['LK','Liu, Karina','F·54','H2021 U4','1800','1368','432','soon', 76, 'Honolulu'],
    ['TR','Tavares, Roy','M·39','T2021','2880','1843','1037','ok', 64, 'Hilo'],
    ['MS','Makoa, Sela','F·22','CLS 1:1','1500','780','720','ok', 52, 'Kahului'],
    ['HD','Haku, Daniel','M·61','H2021','2200','902','1298','ok', 41, 'Kailua'],
    ['OR','Ono, Rae','F·45','T2021','2880','806','2074','ok', 28, 'Honolulu'],
  ];
  return (
    <>
      <div className="screen-intro">
        <h2>② Participants list</h2>
        <p>Searchable roster. Four density/layout takes — same data, different reading speed.</p>
      </div>
      <div className="var-grid">

        {/* V1 — Classic table */}
        <Variation num="1" title="Classic table" desc="closest to the spreadsheet they know">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="part" compact />
            <div style={{flex:1}}>
              <SketchTopBar title="Participants" right={<>
                <span className="sk-pill">filter ▾</span>
                <span className="sk-pill">columns ▾</span>
                <span className="sk-btn primary">+ add</span>
              </>}/>
              <div className="sk-box" style={{padding:0,overflow:'hidden'}}>
                <table className="sk">
                  <thead><tr>
                    <th></th><th>Name</th><th>Service</th><th>Auth</th><th>Used</th><th>Remain</th><th>%</th><th>Status</th>
                  </tr></thead>
                  <tbody>
                  {data.map(([i,n,a,svc,au,u,r,s,p])=>(
                    <tr key={n}>
                      <td><Avatar name={i} tone={s==='crit'?'warn':'sage'}/></td>
                      <td className="hand-2">{n}<div className="sk-cap">{a}</div></td>
                      <td className="mono" style={{fontSize:11}}>{svc}</td>
                      <td className="mono" style={{fontSize:11}}>{au}</td>
                      <td className="mono" style={{fontSize:11}}>{u}</td>
                      <td className="mono" style={{fontSize:11}}>{r}</td>
                      <td style={{width:90}}><UsageBar used={p} remain={100-p} warn={s==='crit'||s==='warn'} height={8}/></td>
                      <td><span className={`dot-st bg-${s}`}/></td>
                    </tr>
                  ))}
                  </tbody>
                </table>
              </div>
              <Note style={{marginTop:10}}>familiar. low-risk. same mental model as Excel</Note>
            </div>
          </div>
        </Variation>

        {/* V2 — Cards with photo + meters */}
        <Variation num="2" title="Card grid" desc="visual, friendlier, less data per row">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="part" compact />
            <div style={{flex:1}}>
              <SketchTopBar title="Participants · 142 active" />
              <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10}}>
                {data.slice(0,6).map(([i,n,a,svc,au,u,r,s,p])=>(
                  <div key={n} className="sk-box" style={{padding:10}}>
                    <div className="sk-row" style={{marginBottom:6}}>
                      <Avatar name={i} tone={s==='crit'?'warn':'sage'}/>
                      <div>
                        <div className="hand-2" style={{fontSize:13}}>{n}</div>
                        <div className="sk-cap">{a} · {svc}</div>
                      </div>
                      <span className={`dot-st bg-${s}`} style={{marginLeft:'auto'}}/>
                    </div>
                    <Gauge pct={p} status={s} label={`${p}%`}/>
                    <div className="sk-row mono" style={{fontSize:10,justifyContent:'space-between',color:'var(--ink-mute)'}}>
                      <span>{u}u used</span><span>{r}u left</span>
                    </div>
                  </div>
                ))}
              </div>
              <Note style={{marginTop:10}}>warmer · gauges read instantly</Note>
            </div>
          </div>
        </Variation>

        {/* V3 — Split list/detail */}
        <Variation num="3" title="Split list/detail" desc="email-client style — pick one, see all">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="part" compact />
            <div style={{flex:1,display:'grid',gridTemplateColumns:'180px 1fr',gap:8}}>
              <div className="sk-box" style={{padding:6}}>
                <div className="sk-input mono" style={{fontSize:10,marginBottom:6}}>⌕ search…</div>
                {data.map(([i,n,a,svc,au,u,r,s,p],idx)=>(
                  <div key={n} className="sk-row" style={{
                    padding:'5px 6px',borderRadius:5,
                    background:idx===0?'var(--sage-tint)':'transparent',
                    borderBottom:'1px dashed var(--rule)'
                  }}>
                    <span className={`dot-st bg-${s}`}/>
                    <div>
                      <div className="hand-2" style={{fontSize:12,lineHeight:1.1}}>{n}</div>
                      <div className="sk-cap">{svc}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div className="sk-box" style={{padding:12}}>
                <div className="sk-row" style={{marginBottom:8}}>
                  <Avatar name="AP" tone="warn"/>
                  <div>
                    <div className="hand-2" style={{fontSize:16}}>Aguilar, Phillip</div>
                    <div className="sk-cap">M · 47 · Honolulu · ID 47298473</div>
                  </div>
                  <span className="sk-pill" style={{marginLeft:'auto'}}><span className="dot-st bg-crit"/>over cap</span>
                </div>
                <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8}}>
                  <div className="sk-box sage" style={{padding:8}}>
                    <div className="sk-cap">authorized</div>
                    <div className="hand-2" style={{fontSize:18}}>2,880u</div>
                  </div>
                  <div className="sk-box" style={{padding:8}}>
                    <div className="sk-cap">used YTD</div>
                    <div className="hand-2" style={{fontSize:18}}>2,712u</div>
                  </div>
                  <div className="sk-box" style={{padding:8,borderColor:'var(--r-crit)'}}>
                    <div className="sk-cap st-crit">remain</div>
                    <div className="hand-2 st-crit" style={{fontSize:18}}>168u</div>
                  </div>
                </div>
                <div style={{height:10}}/>
                <UsageBar used={94} remain={6} warn height={11}/>
                <div className="sk-sub" style={{marginTop:8}}>3 services · 1 staff assigned · last visit 2 days ago</div>
              </div>
            </div>
          </div>
        </Variation>

        {/* V4 — Kanban by status */}
        <Variation num="4" title="Kanban by status" desc="triage view — drag between columns">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="part" compact />
            <div style={{flex:1}}>
              <SketchTopBar title="Participants · by status" />
              <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:8}}>
                {[
                  ['crit','Critical',1,[data[0]]],
                  ['warn','At-risk',2,[data[1],data[2]]],
                  ['soon','Running low',1,[data[3]]],
                  ['ok','Healthy',4,[data[4],data[5],data[6],data[7]]],
                ].map(([s,title,n,items])=>(
                  <div key={s} className="sk-box" style={{padding:6,minHeight:240,background:'var(--paper-2)'}}>
                    <div className="sk-row" style={{marginBottom:6}}>
                      <span className={`dot-st bg-${s}`}/>
                      <span className="hand-2" style={{fontSize:13}}>{title}</span>
                      <span className="mono" style={{marginLeft:'auto',fontSize:10}}>{n}</span>
                    </div>
                    <div className="sk-col" style={{gap:5}}>
                    {items.map(it=>(
                      <div key={it[1]} className="sk-box" style={{padding:6,background:'#fff'}}>
                        <div className="hand-2" style={{fontSize:12,lineHeight:1.1}}>{it[1]}</div>
                        <div className="sk-cap">{it[3]}</div>
                        <UsageBar used={it[8]} remain={100-it[8]} warn={s==='crit'||s==='warn'} height={6}/>
                      </div>
                    ))}
                    </div>
                  </div>
                ))}
              </div>
              <Note style={{marginTop:10}}>great for daily triage stand-ups</Note>
            </div>
          </div>
        </Variation>

      </div>
    </>
  );
}
window.ListScreen = ListScreen;