// Screen 6: Staff schedule / My day — 4 variations
function MyScreen() {
  return (
    <>
      <div className="screen-intro">
        <h2>⑥ Staff schedule / My day</h2>
        <p>What a caregiver or coordinator sees when they open the app — today's visits, who they're seeing, what's logged. Four ways to organize the day.</p>
      </div>
      <div className="var-grid">

        {/* V1 — Vertical timeline list */}
        <Variation num="1" title="Vertical timeline" desc="time-of-day list, simple">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="staff" compact/>
            <div style={{flex:1}}>
              <SketchTopBar title="My day · Tue Apr 28" right={<><span className="sk-pill">‹ ›</span><span className="sk-btn">+ visit</span></>}/>
              <div className="sk-row" style={{gap:8,marginBottom:10}}>
                {[['Visits',5,'ok'],['Hours',6.5,'ok'],['Logged',3,'soon'],['Pending',2,'warn']].map(([k,v,s])=>(
                  <div key={k} className="sk-box" style={{padding:8,flex:1}}>
                    <div className="sk-cap">{k}</div>
                    <div className="hand-2" style={{fontSize:20}}>{v}</div>
                    <span className={`dot-st bg-${s}`}/>
                  </div>
                ))}
              </div>
              <div style={{position:'relative',paddingLeft:50}}>
                <div style={{position:'absolute',left:38,top:8,bottom:8,borderLeft:'1.5px dashed var(--ink)'}}/>
                {[
                  ['9:00','Aguilar, P.','T2021 · 4h','done','ok'],
                  ['11:30','Kahale, M.','H2021 · 2h','done','ok'],
                  ['1:00','LUNCH','—','','aux'],
                  ['2:00','Liu, K.','H2021 · 2h','upcoming','info'],
                  ['4:30','Tavares, R.','T2021 · 1.5h','upcoming','info'],
                ].map(([t,n,svc,st,s])=>(
                  <div key={t+n} className="sk-row" style={{padding:'8px 0',borderBottom:'1px dashed var(--rule-strong)',position:'relative'}}>
                    <span className="mono" style={{position:'absolute',left:-50,top:11,width:42,fontSize:11,color:'var(--ink-mute)'}}>{t}</span>
                    <span className={`dot-st bg-${s}`} style={{position:'absolute',left:-15,top:13}}/>
                    <div className="hand-2" style={{fontSize:14}}>{n}</div>
                    <span className="sk-cap" style={{marginLeft:8}}>{svc}</span>
                    <span className="sk-pill" style={{marginLeft:'auto',fontSize:13}}>{st || ''}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Variation>

        {/* V2 — Day calendar (hour grid) */}
        <Variation num="2" title="Day grid" desc="hour blocks like Google Calendar">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="staff" compact/>
            <div style={{flex:1}}>
              <SketchTopBar title="Schedule · Apr 28"/>
              <div style={{display:'grid',gridTemplateColumns:'40px 1fr',border:'1.4px solid var(--ink)',borderRadius:8,overflow:'hidden'}}>
                <div style={{borderRight:'1.4px solid var(--ink)',background:'var(--paper-2)'}}>
                  {['8','9','10','11','12','1','2','3','4','5'].map(h=>(
                    <div key={h} style={{height:30,padding:'2px 4px',borderBottom:'1px dashed var(--rule)',fontFamily:'JetBrains Mono',fontSize:9,color:'var(--ink-mute)'}}>{h}</div>
                  ))}
                </div>
                <div style={{position:'relative',height:300}}>
                  {Array.from({length:10}).map((_,i)=>(
                    <div key={i} style={{position:'absolute',left:0,right:0,top:i*30,height:30,borderBottom:'1px dashed var(--rule)'}}/>
                  ))}
                  {/* events */}
                  {[
                    ['Aguilar, P.','T2021', 30, 120, 'sage-tint','ok'],
                    ['Kahale, M.','H2021', 105, 60, 'sage-tint','ok'],
                    ['Liu, K.','H2021', 180, 60, '#fcefcf','info'],
                    ['Tavares, R.','T2021', 255, 45, '#fcefcf','info'],
                  ].map(([n,svc,top,h,bg,s])=>(
                    <div key={n} style={{
                      position:'absolute',left:6,right:6,top,height:h,
                      background: bg.startsWith('#')?bg:'var(--sage-tint)',
                      border:'1.4px solid var(--ink)',borderRadius:6,padding:'4px 6px'
                    }}>
                      <div className="hand-2" style={{fontSize:12,lineHeight:1.1}}><span className={`dot-st bg-${s}`} style={{marginRight:4}}/>{n}</div>
                      <div className="sk-cap">{svc}</div>
                    </div>
                  ))}
                </div>
              </div>
              <Note style={{marginTop:10}}>schedulers love this</Note>
            </div>
          </div>
        </Variation>

        {/* V3 — Card stack with map */}
        <Variation num="3" title="Visits + map" desc="route view for field caregivers">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="staff" compact/>
            <div style={{flex:1,display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
              <div className="sk-col" style={{gap:8}}>
                <SkH kicker="route">5 stops today</SkH>
                {[
                  ['1','Aguilar, P.','9:00 · Honolulu','done','ok'],
                  ['2','Kahale, M.','11:30 · Kailua','done','ok'],
                  ['3','Liu, K.','2:00 · Honolulu','next','info'],
                  ['4','Tavares, R.','4:30 · Hilo','later','info'],
                ].map(([n,name,t,st,s])=>(
                  <div key={n} className={`sk-box ${st==='next'?'sage':''}`} style={{padding:8}}>
                    <div className="sk-row">
                      <span className="hand" style={{
                        width:24,height:24,border:'1.4px solid var(--ink)',borderRadius:'50%',
                        display:'inline-flex',alignItems:'center',justifyContent:'center',fontSize:14,
                        background:st==='done'?'var(--sage)':'#fff',color:st==='done'?'#fff':'var(--ink)'
                      }}>{n}</span>
                      <div>
                        <div className="hand-2" style={{fontSize:13,lineHeight:1.1}}>{name}</div>
                        <div className="sk-cap">{t}</div>
                      </div>
                      <span className={`dot-st bg-${s}`} style={{marginLeft:'auto'}}/>
                    </div>
                  </div>
                ))}
              </div>
              <div className="sk-box shade" style={{padding:0,minHeight:240,position:'relative',overflow:'hidden'}}>
                <div className="sk-cap" style={{position:'absolute',top:8,left:8,background:'#fff',padding:'2px 6px',borderRadius:4,border:'1px solid var(--ink)'}}>MAP · OAHU</div>
                <svg viewBox="0 0 200 200" width="100%" height="100%">
                  <path d="M 20 110 Q 40 70 80 80 T 160 70 Q 180 90 170 130 T 100 160 Q 50 160 30 140 Z"
                        fill="var(--sage-tint)" stroke="var(--ink)" strokeWidth="1.5"/>
                  {[[60,90,'1','sage'],[110,75,'2','sage'],[80,120,'3','info'],[140,140,'4','info']].map(([x,y,n,c],i)=>(
                    <g key={i}>
                      <circle cx={x} cy={y} r="9" fill={c==='sage'?'var(--sage)':'#fff'} stroke="var(--ink)" strokeWidth="1.5"/>
                      <text x={x} y={y+3} textAnchor="middle" fontFamily="Architects Daughter" fontSize="10" fill={c==='sage'?'#fff':'var(--ink)'}>{n}</text>
                    </g>
                  ))}
                  <path d="M 60 90 L 110 75 L 80 120 L 140 140" fill="none" stroke="var(--ink)" strokeWidth="1.4" strokeDasharray="3 3"/>
                </svg>
              </div>
            </div>
          </div>
        </Variation>

        {/* V4 — Week strip */}
        <Variation num="4" title="Week strip" desc="7-day overview, click to drill in">
          <div className="sk-row" style={{alignItems:'flex-start',gap:14}}>
            <Sidebar active="staff" compact/>
            <div style={{flex:1}}>
              <SketchTopBar title="My week · Apr 27 – May 3"/>
              <div style={{display:'grid',gridTemplateColumns:'repeat(7,1fr)',gap:6}}>
                {[['Mon','27',4,'ok'],['Tue','28',5,'ok'],['Wed','29',3,'soon'],['Thu','30',6,'warn'],['Fri','1',4,'ok'],['Sat','2',0,'aux'],['Sun','3',0,'aux']].map(([d,date,n,s],i)=>(
                  <div key={d} className={`sk-box ${i===1?'sage':''}`} style={{padding:8,minHeight:160}}>
                    <div className="sk-cap">{d}</div>
                    <div className="hand-2" style={{fontSize:22,lineHeight:1}}>{date}</div>
                    <div className="sk-row" style={{marginTop:4}}>
                      <span className={`dot-st bg-${s}`}/>
                      <span className="sk-sub" style={{fontSize:13}}>{n} visits</span>
                    </div>
                    <div style={{height:6}}/>
                    {Array.from({length:n}).map((_,j)=>(
                      <div key={j} className="sk-box" style={{padding:'2px 4px',marginBottom:3,fontSize:10,fontFamily:'Architects Daughter'}}>{['Aguilar','Kahale','Liu','Tavares','Makoa','Haku'][j]}</div>
                    ))}
                  </div>
                ))}
              </div>
              <div className="sk-row" style={{marginTop:10,gap:14}}>
                <span className="sk-sub">22 visits · 32 hrs scheduled</span>
                <span className="sk-pill" style={{marginLeft:'auto'}}>‹ prev week</span>
                <span className="sk-pill">next week ›</span>
              </div>
            </div>
          </div>
        </Variation>

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