// Screen 3: Participant Detail — 4 variations
function DetailScreen() {
  return (
    <>
      <div className="screen-intro">
        <h2>③ Participant detail</h2>
        <p>Everything for one person — services, units, monthly use, claims. Where the spreadsheet's complexity lives. Four ways to organize.</p>
      </div>
      <div className="var-grid">

        {/* V1 — Tabbed: Overview / Services / Visits / Claims */}
        <Variation num="1" title="Tabbed sections" desc="hide complexity behind clear tabs">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="part" compact/>
            <div style={{flex:1}}>
              <div className="sk-row" style={{marginBottom:8,gap:8}}>
                <span className="sk-pill">← back</span>
                <Avatar name="AP" tone="warn"/>
                <div>
                  <div className="hand-2" style={{fontSize:18,lineHeight:1.1}}>Aguilar, Phillip</div>
                  <div className="sk-cap">ID 47298473 · M · 47 · Honolulu</div>
                </div>
                <span className="sk-pill" style={{marginLeft:'auto'}}><span className="dot-st bg-crit"/>OVER CAP</span>
                <span className="sk-btn">+ log visit</span>
              </div>
              <div className="sk-row" style={{gap:4,borderBottom:'1.4px solid var(--ink)',marginBottom:10}}>
                {['Overview','Services','Visits','Claims','Notes'].map((t,i)=>(
                  <span key={t} className="hand-2" style={{
                    padding:'5px 10px',borderRadius:'6px 8px 0 0',fontSize:13,
                    border:'1.4px solid var(--ink)',borderBottom:'none',
                    background:i===0?'#fff':'var(--paper-2)',
                    transform: i===0?'translateY(2px)':'none'
                  }}>{t}</span>
                ))}
              </div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
                <div className="sk-box" style={{padding:10}}>
                  <SkH kicker="auth · t2021">CLS 1:1 · plan year 2026</SkH>
                  <div className="hand-2" style={{fontSize:30,lineHeight:1}}>168<span className="sk-sub" style={{fontSize:14}}> u remain of 2,880</span></div>
                  <UsageBar used={94} remain={6} warn height={12}/>
                  <div className="sk-row mono" style={{fontSize:10,justifyContent:'space-between',marginTop:4,color:'var(--ink-mute)'}}>
                    <span>FEB 26 → FEB 27</span><span>94% used</span>
                  </div>
                </div>
                <div className="sk-box" style={{padding:10}}>
                  <SkH kicker="2026 monthly use">Trend</SkH>
                  <Spark data={[88,92,104,98]} height={48}/>
                  <div className="sk-sub">Apr +12u over cap (240/228)</div>
                </div>
              </div>
              <div style={{height:10}}/>
              <div className="sk-box" style={{padding:10}}>
                <SkH kicker="recent visits" right={<span className="sk-pill">view all</span>}>Last 4 visits</SkH>
                <table className="sk">
                  <thead><tr><th>Date</th><th>Code</th><th>Units</th><th>Billed</th><th>Status</th></tr></thead>
                  <tbody>
                    {[['4/15','T2021',30,'$363.40','paid'],['4/8','T2021',32,'$385.48','paid'],['4/4','T2021',34,'$408.96','submitted'],['4/1','T2021',30,'$357.84','paid']].map(r=>(
                      <tr key={r[0]}><td className="mono" style={{fontSize:11}}>{r[0]}</td><td className="mono" style={{fontSize:11}}>{r[1]}</td><td>{r[2]}</td><td className="mono" style={{fontSize:11}}>{r[3]}</td><td><span className={`dot-st bg-${r[4]==='paid'?'ok':'info'}`}/> {r[4]}</td></tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </Variation>

        {/* V2 — One long scroll, dense, like a chart */}
        <Variation num="2" title="Single scroll · dense" desc="all on one page, like a medical chart">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="part" compact/>
            <div style={{flex:1}}>
              <div className="sk-box sage" style={{padding:10,marginBottom:8}}>
                <div className="sk-row">
                  <Avatar name="AP" tone="warn"/>
                  <div>
                    <div className="hand-2" style={{fontSize:16}}>Aguilar, Phillip · M·47</div>
                    <div className="sk-cap">Medicaid 47298473 · DOB 4/12/1979 · Honolulu</div>
                  </div>
                  <span className="sk-pill" style={{marginLeft:'auto'}}><span className="dot-st bg-crit"/>flagged</span>
                </div>
              </div>
              <SkH kicker="01">Active authorizations</SkH>
              <div className="sk-col" style={{gap:6,marginBottom:10}}>
                {[['H2021 U4','CLS 1:1','Feb 25 → Feb 26','2880','2712','168','crit'],['T2021','CLS 1:1','Feb 26 → Feb 27','2880','414','2466','ok']].map(r=>(
                  <div key={r[0]} className="sk-box" style={{padding:8}}>
                    <div className="sk-row mono" style={{fontSize:11,gap:10}}>
                      <span className="hand-2" style={{fontSize:13}}>{r[0]}</span>
                      <span>{r[1]}</span>
                      <span style={{color:'var(--ink-mute)'}}>{r[2]}</span>
                      <span style={{marginLeft:'auto'}}>auth {r[3]} · used {r[4]} · remain {r[5]}</span>
                      <span className={`dot-st bg-${r[6]}`}/>
                    </div>
                    <div style={{height:6}}/>
                    <UsageBar used={parseInt(r[4])} remain={parseInt(r[5])} warn={r[6]==='crit'} height={8}/>
                  </div>
                ))}
              </div>
              <SkH kicker="02">2026 monthly summary</SkH>
              <MonthGrid data={[88,92,104,98,null,null,null,null,null,null,null,null]} current={3}/>
              <div style={{height:10}}/>
              <SkH kicker="03">Visit log · last 30 days</SkH>
              <table className="sk">
                <thead><tr><th>Date</th><th>Code</th><th>Units/day</th><th>Begin</th><th>End</th><th>Billed</th><th>Status</th></tr></thead>
                <tbody>
                  {[['4/15','T2021',28,2486,2458,'$363.40','paid'],['4/8','T2021',30,2516,2486,'$385.48','paid'],['4/4','T2021',32,2548,2516,'$408.96','submitted'],['4/1','T2021',30,2578,2548,'$357.84','paid']].map(r=>(
                    <tr key={r[0]}>{r.map((c,i)=><td key={i} className={i===0||i===1?'mono':''} style={{fontSize:11}}>{c}</td>)}<td><span className={`dot-st bg-${r[6]==='paid'?'ok':'info'}`}/></td></tr>
                  ))}
                </tbody>
              </table>
              <Note style={{marginTop:10}}>fastest for billing review · everything in one page</Note>
            </div>
          </div>
        </Variation>

        {/* V3 — Visual-first: big gauge + timeline */}
        <Variation num="3" title="Visual hero" desc="gauge + timeline up top, data below">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="part" compact/>
            <div style={{flex:1}}>
              <div className="sk-row" style={{marginBottom:10,gap:8}}>
                <Avatar name="AP" tone="warn"/>
                <div className="hand-2" style={{fontSize:20}}>Phillip Aguilar</div>
                <span className="sk-cap">ID 47298473 · CLS 1:1</span>
                <span className="sk-btn primary" style={{marginLeft:'auto'}}>+ log visit</span>
              </div>
              <div className="sk-box" style={{padding:14,marginBottom:10}}>
                <div className="sk-row" style={{gap:24,alignItems:'center'}}>
                  <div style={{textAlign:'center'}}>
                    <Gauge pct={94} status="crit" label="94%"/>
                    <div className="sk-cap">YTD AUTH USED</div>
                  </div>
                  <div style={{flex:1}}>
                    <div className="sk-cap">plan year timeline</div>
                    <div style={{position:'relative',height:34,border:'1.4px solid var(--ink)',borderRadius:6,background:'var(--paper-2)',marginTop:4}}>
                      <div style={{position:'absolute',left:0,top:0,bottom:0,width:'94%',
                        background:'repeating-linear-gradient(45deg,var(--sage) 0 6px, var(--sage-deep) 6px 12px)',borderRight:'1.6px dashed var(--ink)'}}/>
                      <div style={{position:'absolute',left:'72%',top:-6,bottom:-6,width:0,borderLeft:'1.4px solid var(--r-orange)'}}/>
                      <div style={{position:'absolute',left:'72%',top:-22,fontSize:10,fontFamily:'JetBrains Mono'}}>NOW</div>
                      <div style={{position:'absolute',right:4,top:8,fontSize:10,fontFamily:'JetBrains Mono'}}>FEB 27</div>
                      <div style={{position:'absolute',left:4,top:8,fontSize:10,fontFamily:'JetBrains Mono'}}>FEB 26</div>
                    </div>
                    <div className="sk-sub" style={{marginTop:4}}>burning 22% faster than plan — projected to exhaust May 14</div>
                  </div>
                </div>
              </div>
              <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:8}}>
                {[['authorized','2,880u','sage'],['used','2,712u','warn'],['remain','168u','crit'],['this month','+12 over','crit']].map(([k,v,t])=>(
                  <div key={k} className="sk-box" style={{padding:8,background:t==='crit'?'#fbe9e3':t==='warn'?'#faf2e0':'#fff'}}>
                    <div className="sk-cap">{k}</div>
                    <div className="hand-2" style={{fontSize:18}}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Variation>

        {/* V4 — Two-pane: timeline left, details right */}
        <Variation num="4" title="Two-pane chronological" desc="timeline / activity feed left, info right">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="part" compact/>
            <div style={{flex:1,display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:10}}>
              <div className="sk-box" style={{padding:10}}>
                <SkH kicker="activity">Phillip's timeline</SkH>
                <div style={{position:'relative',paddingLeft:18}}>
                  <div style={{position:'absolute',left:6,top:6,bottom:6,borderLeft:'1.4px dashed var(--ink)'}}/>
                  {[
                    ['crit','Apr 28','Auth alert','Over monthly cap by 12u'],
                    ['ok','Apr 15','Visit logged','28 units · $363.40 billed'],
                    ['ok','Apr 8','Visit logged','30 units · $385.48 billed'],
                    ['info','Apr 4','Claim submitted','000884734… · pending'],
                    ['ok','Apr 1','Visit logged','30 units'],
                    ['aux','Feb 26','New auth','T2021 issued · 2,880u'],
                  ].map(([s,d,t,desc])=>(
                    <div key={d+t} style={{position:'relative',padding:'6px 0 6px 14px',borderBottom:'1px dashed var(--rule)'}}>
                      <span className={`dot-st bg-${s}`} style={{position:'absolute',left:-15,top:10}}/>
                      <div className="sk-row">
                        <span className="mono" style={{fontSize:10,width:50,color:'var(--ink-mute)'}}>{d}</span>
                        <span className="hand-2" style={{fontSize:13}}>{t}</span>
                      </div>
                      <div className="sk-sub" style={{fontSize:14,marginLeft:50}}>{desc}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="sk-col" style={{gap:8}}>
                <div className="sk-box sage" style={{padding:10}}>
                  <Avatar name="AP"/>
                  <div className="hand-2" style={{fontSize:16,marginTop:4}}>Phillip Aguilar</div>
                  <div className="sk-cap">M · 47 · Honolulu · ID 47298473</div>
                  <div style={{height:6}}/>
                  <Strokes lines={3}/>
                </div>
                <div className="sk-box" style={{padding:10}}>
                  <SkH kicker="auth at a glance">T2021 · CLS 1:1</SkH>
                  <UsageBar used={94} remain={6} warn height={11}/>
                  <div className="sk-row mono" style={{fontSize:10,justifyContent:'space-between',marginTop:4,color:'var(--ink-mute)'}}>
                    <span>2,712 used</span><span>168 left</span>
                  </div>
                </div>
                <div className="sk-box" style={{padding:10}}>
                  <SkH kicker="staff">Assigned</SkH>
                  <div className="sk-row" style={{gap:4,flexWrap:'wrap'}}>
                    {['LM','KP','TR'].map(n=><Avatar key={n} name={n}/>)}
                    <span className="sk-pill">+ assign</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Variation>

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