// Screen 5: Log a service visit (mobile-friendly form) — 4 variations
function LogScreen() {
  const Phone = ({children, label}) => (
    <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:8}}>
      <div className="phone">
        <div className="notch"/>
        <div className="screen" style={{minHeight:520}}>{children}</div>
        <div className="home"/>
      </div>
      <div className="sk-cap">{label}</div>
    </div>
  );
  const PhStatus = () => (
    <div className="sk-row mono" style={{fontSize:9,padding:'4px 10px',justifyContent:'space-between',color:'var(--ink-mute)',borderBottom:'1px dashed var(--rule)'}}>
      <span>9:41</span><span>● ● ●</span>
    </div>
  );
  return (
    <>
      <div className="screen-intro">
        <h2>⑤ Log a service visit (mobile)</h2>
        <p>Field-friendly form caregivers fill on phones after a visit. Four flows — pick what feels lowest-friction.</p>
      </div>

      <div className="var-grid" style={{gridTemplateColumns:'repeat(4,1fr)',gap:18}}>

        {/* V1 — Step wizard */}
        <Variation num="1" title="Step wizard" desc="one decision per screen">
          <div style={{display:'flex',justifyContent:'center'}}>
          <Phone label="step 2 of 4 · UNITS">
            <PhStatus/>
            <div style={{padding:12}}>
              <div className="sk-row mono" style={{fontSize:9,gap:4,marginBottom:8}}>
                <span style={{flex:1,height:4,background:'var(--sage)',borderRadius:2}}/>
                <span style={{flex:1,height:4,background:'var(--sage)',borderRadius:2}}/>
                <span style={{flex:1,height:4,background:'var(--paper-2)',border:'1px solid var(--ink)',borderRadius:2}}/>
                <span style={{flex:1,height:4,background:'var(--paper-2)',border:'1px solid var(--ink)',borderRadius:2}}/>
              </div>
              <div className="hand-2" style={{fontSize:18}}>How many units?</div>
              <div className="sk-sub" style={{marginBottom:8}}>Phillip · T2021 · today</div>
              <div className="sk-row" style={{justifyContent:'center',gap:10,margin:'18px 0'}}>
                <div className="sk-btn" style={{fontSize:18,padding:'8px 14px'}}>−</div>
                <div className="hand-2" style={{fontSize:48,minWidth:60,textAlign:'center'}}>28</div>
                <div className="sk-btn" style={{fontSize:18,padding:'8px 14px'}}>+</div>
              </div>
              <div className="sk-row" style={{gap:6,justifyContent:'center',flexWrap:'wrap'}}>
                {[24,28,30,32,'custom'].map(p=><span key={p} className="sk-pill" style={{fontSize:14}}>{p}{typeof p==='number'?'u':''}</span>)}
              </div>
              <div className="sk-box sage" style={{padding:8,marginTop:14}}>
                <div className="sk-cap">cap check</div>
                <div className="hand-2" style={{fontSize:13}}>168u remain · ✓ within auth</div>
              </div>
              <div style={{height:14}}/>
              <div className="sk-btn primary" style={{display:'block',textAlign:'center',padding:'10px'}}>continue →</div>
            </div>
          </Phone>
          </div>
        </Variation>

        {/* V2 — Single long form */}
        <Variation num="2" title="Single form" desc="one screen, all fields">
          <div style={{display:'flex',justifyContent:'center'}}>
          <Phone label="all fields visible">
            <PhStatus/>
            <div style={{padding:12}}>
              <div className="sk-row" style={{marginBottom:8}}>
                <span className="sk-pill">← back</span>
                <span className="hand-2" style={{fontSize:16,marginLeft:8}}>New visit</span>
              </div>
              <div className="sk-cap">PARTICIPANT</div>
              <div className="sk-input" style={{marginBottom:8}}>Aguilar, Phillip ▾</div>
              <div className="sk-cap">SERVICE</div>
              <div className="sk-input" style={{marginBottom:8}}>T2021 — CLS 1:1 ▾</div>
              <div className="sk-row" style={{gap:6,marginBottom:8}}>
                <div style={{flex:1}}>
                  <div className="sk-cap">DATE</div>
                  <div className="sk-input">Apr 28, 2026</div>
                </div>
                <div style={{flex:1}}>
                  <div className="sk-cap">UNITS</div>
                  <div className="sk-input">28</div>
                </div>
              </div>
              <div className="sk-row" style={{gap:6,marginBottom:8}}>
                <div style={{flex:1}}>
                  <div className="sk-cap">START</div>
                  <div className="sk-input">9:00 AM</div>
                </div>
                <div style={{flex:1}}>
                  <div className="sk-cap">END</div>
                  <div className="sk-input">2:00 PM</div>
                </div>
              </div>
              <div className="sk-cap">NOTES (optional)</div>
              <div className="sk-input" style={{minHeight:50,alignItems:'flex-start',padding:8}}><Strokes lines={2} widths={['100%','60%']}/></div>
              <div style={{height:10}}/>
              <div className="sk-btn primary" style={{display:'block',textAlign:'center',padding:'10px'}}>save visit</div>
            </div>
          </Phone>
          </div>
        </Variation>

        {/* V3 — Big tap targets / accessibility-first */}
        <Variation num="3" title="Big targets" desc="thumb-friendly · accessibility-first">
          <div style={{display:'flex',justifyContent:'center'}}>
          <Phone label="large taps">
            <PhStatus/>
            <div style={{padding:12}}>
              <div className="hand-2" style={{fontSize:18,marginBottom:6}}>Log visit</div>
              <div className="sk-box" style={{padding:14,marginBottom:10,minHeight:60}}>
                <div className="sk-cap">WHO</div>
                <div className="hand-2" style={{fontSize:18}}>Phillip Aguilar ▾</div>
              </div>
              <div className="sk-box" style={{padding:14,marginBottom:10}}>
                <div className="sk-cap">SERVICE</div>
                <div className="hand-2" style={{fontSize:18}}>T2021 ▾</div>
              </div>
              <div className="sk-box" style={{padding:14,marginBottom:10}}>
                <div className="sk-cap">UNITS</div>
                <div className="sk-row" style={{gap:8,alignItems:'center'}}>
                  <div className="sk-btn" style={{fontSize:24,padding:'8px 16px'}}>−</div>
                  <div className="hand-2" style={{fontSize:36,flex:1,textAlign:'center'}}>28</div>
                  <div className="sk-btn" style={{fontSize:24,padding:'8px 16px'}}>+</div>
                </div>
              </div>
              <div className="sk-btn primary" style={{display:'block',textAlign:'center',padding:'14px',fontSize:16}}>save ✓</div>
            </div>
          </Phone>
          </div>
        </Variation>

        {/* V4 — Smart prefill / "tap to confirm" */}
        <Variation num="4" title="Smart prefill" desc="based on schedule, just confirm">
          <div style={{display:'flex',justifyContent:'center'}}>
          <Phone label="quick confirm">
            <PhStatus/>
            <div style={{padding:12}}>
              <div className="hand-2" style={{fontSize:16}}>Did this visit happen?</div>
              <div className="sk-box sage" style={{padding:12,marginTop:8}}>
                <div className="sk-cap">SCHEDULED · 9:00–2:00</div>
                <div className="hand-2" style={{fontSize:18,lineHeight:1.1}}>Phillip Aguilar</div>
                <div className="sk-sub">T2021 · 28 units</div>
              </div>
              <div className="sk-row" style={{gap:8,marginTop:10}}>
                <div className="sk-btn primary" style={{flex:1,padding:'12px',textAlign:'center',fontSize:15}}>✓ confirm</div>
                <div className="sk-btn" style={{flex:1,padding:'12px',textAlign:'center',fontSize:15}}>✎ edit</div>
              </div>
              <div style={{height:14}}/>
              <div className="sk-cap">UPCOMING TODAY</div>
              {[['11:30','Kahale, Mei','H2021'],['2:00','Liu, Karina','H2021']].map(r=>(
                <div key={r[0]} className="sk-box" style={{padding:8,marginTop:6}}>
                  <div className="sk-row">
                    <span className="mono" style={{fontSize:11,width:46}}>{r[0]}</span>
                    <span className="hand-2" style={{fontSize:13}}>{r[1]}</span>
                    <span className="sk-cap" style={{marginLeft:'auto'}}>{r[2]}</span>
                  </div>
                </div>
              ))}
              <Note style={{marginTop:14,fontSize:14}}>fastest in the field — 2 taps to log</Note>
            </div>
          </Phone>
          </div>
        </Variation>

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