// onboarding.jsx — first-impression flows for both roles
// Splash → Role pick → role-specific 5-step flow → done

function OnboardingSplash({ dark, onStart }) {
  const T = tokens(dark);
  return (
    <div style={{ minHeight:'100%', background: dark?'#0E1110':'#0E1110', color:'#F4F7F4', position:'relative', overflow:'hidden', display:'flex', flexDirection:'column' }}>
      <PhoneStatus dark={true}/>

      {/* big organic gradient blob */}
      <div style={{ position:'absolute', top:-80, right:-100, width:380, height:380, borderRadius:'50%', background:'radial-gradient(circle at 30% 30%, #C9F76F 0%, rgba(201,247,111,0.4) 35%, rgba(201,247,111,0) 70%)', filter:'blur(8px)', pointerEvents:'none' }}/>
      <div style={{ position:'absolute', bottom:120, left:-80, width:280, height:280, borderRadius:'50%', background:'radial-gradient(circle, rgba(255,179,107,0.35) 0%, rgba(255,179,107,0) 70%)', filter:'blur(8px)', pointerEvents:'none' }}/>

      {/* logo */}
      <div style={{ position:'relative', padding:'24px 24px 0', display:'flex', alignItems:'center', gap:8 }}>
        <div style={{ width:32, height:32, borderRadius:10, background:'#C9F76F', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:800, color:'#0E1110', fontFamily:'"Plus Jakarta Sans"', fontSize:18 }}>F</div>
        <div style={{ fontSize:13, fontWeight:700, letterSpacing:0.6, textTransform:'uppercase' }}>FitKit</div>
      </div>

      {/* hero copy — pinned bottom */}
      <div style={{ flex:1 }}/>
      <div style={{ position:'relative', padding:'0 24px 28px' }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:1.4, textTransform:'uppercase', color:'#C9F76F', marginBottom:14 }}>● ออกกำลังพร้อมโค้ชตัวจริง</div>
        <div style={{ fontSize:42, lineHeight:1.05, fontWeight:800, letterSpacing:-1.5, fontFamily:'"Plus Jakarta Sans"' }}>
          Train smarter,<br/>
          <span style={{ background:'#C9F76F', color:'#0E1110', padding:'0 10px', borderRadius:8, display:'inline-block', marginTop:4 }}>together.</span>
        </div>
        <div style={{ fontSize:14, color:'rgba(244,247,244,0.65)', marginTop:14, lineHeight:1.5, maxWidth:300 }}>
          แผนออกกำลัง โภชนาการ และโค้ชส่วนตัว — ในแอพเดียว ไม่ต้องสลับไปมาอีกต่อไป
        </div>

        <button onClick={onStart} style={{
          marginTop:24, width:'100%', height:56, borderRadius:18, border:0, background:'#C9F76F', color:'#0E1110',
          fontSize:15, fontWeight:700, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:8,
          fontFamily:'"Plus Jakarta Sans"', letterSpacing:-0.2,
        }}>
          เริ่มต้นใช้งาน <span style={{ fontSize:18 }}>→</span>
        </button>

        <div style={{ marginTop:14, textAlign:'center', fontSize:12, color:'rgba(244,247,244,0.55)' }}>
          มีบัญชีแล้ว? <span style={{ color:'#C9F76F', fontWeight:700, textDecoration:'underline' }}>เข้าสู่ระบบ</span>
        </div>
      </div>

    </div>
  );
}

function OnboardingRolePick({ dark, onPick, onBack }) {
  const T = tokens(dark);
  const [hover, setHover] = React.useState(null);
  return (
    <div style={{ minHeight:'100%', background:T.bg, paddingBottom:120 }}>
      <PhoneStatus dark={dark}/>
      <div style={{ padding:'4px 16px 0' }}>
        <button onClick={onBack} style={{ width:36, height:36, borderRadius:18, background:T.card, border:`0.5px solid ${T.line}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name="back" size={18} color={T.ink}/>
        </button>
      </div>
      <div style={{ padding:'18px 24px 0' }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:1.2, textTransform:'uppercase', color:T.ink2 }}>ขั้นที่ 1 / 2</div>
        <div style={{ fontSize:30, lineHeight:1.1, fontWeight:800, letterSpacing:-1, fontFamily:'"Plus Jakarta Sans"', color:T.ink, marginTop:6 }}>คุณเป็น<br/>ใครในวันนี้?</div>
        <div style={{ fontSize:13, color:T.ink2, marginTop:8, lineHeight:1.5 }}>เราจะปรับแอพให้เหมาะกับการใช้งานของคุณ</div>
      </div>

      <div style={{ padding:'24px 16px 0', display:'flex', flexDirection:'column', gap:12 }}>
        {/* Trainee card */}
        <button
          onClick={()=>onPick('trainee')}
          onMouseEnter={()=>setHover('trainee')} onMouseLeave={()=>setHover(null)}
          style={{
            textAlign:'left', cursor:'pointer', border:0, padding:18,
            background: dark?'linear-gradient(135deg,#1A2210,#0E1110)':'linear-gradient(135deg,#DDF1A8,#C9F76F)',
            borderRadius:22, position:'relative', overflow:'hidden',
            transform: hover==='trainee' ? 'scale(1.01)' : 'scale(1)', transition:'transform 0.18s',
          }}
        >
          <div style={{ display:'flex', alignItems:'center', gap:14, marginBottom:14 }}>
            <div style={{ width:54, height:54, borderRadius:16, background: dark?'rgba(255,255,255,0.08)':'rgba(255,255,255,0.7)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:30 }}>👤</div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:11, fontWeight:700, letterSpacing:1, textTransform:'uppercase', color: dark?'#C9F76F':'#3D5C0E' }}>I'm here to train</div>
              <div style={{ fontSize:22, fontWeight:800, color: dark?'#F4F7F4':'#1B2710', letterSpacing:-0.5, fontFamily:'"Plus Jakarta Sans"', marginTop:2 }}>ฉันเป็น<span style={{ background: dark?'#C9F76F':'#0E1110', color: dark?'#0E1110':'#C9F76F', padding:'0 6px', borderRadius:5 }}>ลูกเทรน</span></div>
            </div>
            <div style={{ width:32, height:32, borderRadius:16, background: dark?'rgba(201,247,111,0.2)':'rgba(14,17,16,0.1)', display:'flex', alignItems:'center', justifyContent:'center' }}>
              <Icon name="arrow" size={16} color={dark?'#C9F76F':'#0E1110'}/>
            </div>
          </div>
          <div style={{ fontSize:13, color: dark?'rgba(244,247,244,0.7)':'#3D5C0E', lineHeight:1.55 }}>
            หาเทรนเนอร์ส่วนตัว · รับแผนออกกำลังและอาหาร · ติดตาม goal และ streak
          </div>
          <div style={{ display:'flex', gap:6, marginTop:12, flexWrap:'wrap' }}>
            {['🏋️ Workout plan','🥗 Meal AI','💬 Chat โค้ช'].map(s=>(
              <span key={s} style={{ fontSize:11, fontWeight:600, color: dark?'rgba(244,247,244,0.85)':'#1B2710', background: dark?'rgba(255,255,255,0.06)':'rgba(255,255,255,0.5)', padding:'4px 9px', borderRadius:99 }}>{s}</span>
            ))}
          </div>
        </button>

        {/* Trainer card */}
        <button
          onClick={()=>onPick('trainer')}
          onMouseEnter={()=>setHover('trainer')} onMouseLeave={()=>setHover(null)}
          style={{
            textAlign:'left', cursor:'pointer', border:`0.5px solid ${T.line}`,
            background: T.card, borderRadius:22, padding:18, position:'relative', overflow:'hidden',
            transform: hover==='trainer' ? 'scale(1.01)' : 'scale(1)', transition:'transform 0.18s',
          }}
        >
          <div style={{ display:'flex', alignItems:'center', gap:14, marginBottom:14 }}>
            <div style={{ width:54, height:54, borderRadius:16, background:'#FFD66B', display:'flex', alignItems:'center', justifyContent:'center', fontSize:28 }}>🌿</div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:11, fontWeight:700, letterSpacing:1, textTransform:'uppercase', color:T.ink3 }}>I'm here to coach</div>
              <div style={{ fontSize:22, fontWeight:800, color:T.ink, letterSpacing:-0.5, fontFamily:'"Plus Jakarta Sans"', marginTop:2 }}>ฉันเป็น<span style={{ background:'#FFD66B', color:'#3D2200', padding:'0 6px', borderRadius:5 }}>เทรนเนอร์</span></div>
            </div>
            <div style={{ width:32, height:32, borderRadius:16, background:T.chip, display:'flex', alignItems:'center', justifyContent:'center' }}>
              <Icon name="arrow" size={16} color={T.ink}/>
            </div>
          </div>
          <div style={{ fontSize:13, color:T.ink2, lineHeight:1.55 }}>
            จัดการลูกเทรน · สั่งการบ้านและรีวิวอาหาร · ติดตามและคุยทุกคนในที่เดียว
          </div>
          <div style={{ display:'flex', gap:6, marginTop:12, flexWrap:'wrap' }}>
            {['👥 Roster','📋 Assign tasks','📊 Live biometrics'].map(s=>(
              <span key={s} style={{ fontSize:11, fontWeight:600, color:T.ink2, background:T.chip, padding:'4px 9px', borderRadius:99 }}>{s}</span>
            ))}
          </div>
        </button>
      </div>

      <div style={{ padding:'18px 24px 0', textAlign:'center', fontSize:11, color:T.ink3, lineHeight:1.5 }}>
        เปลี่ยนทีหลังได้ในการตั้งค่า
      </div>
    </div>
  );
}

// ── Trainee onboarding flow (5 steps)
function TraineeOnboarding({ dark, step, setStep, data, setData, onDone, onBack }) {
  const T = tokens(dark);
  const STEPS = [
    { k:'name', label:'ทักทาย' },
    { k:'goal', label:'เป้าหมาย' },
    { k:'body', label:'ข้อมูลร่างกาย' },
    { k:'sched', label:'ตารางว่าง' },
    { k:'pair', label:'เชื่อมต่อ' },
  ];
  const cur = STEPS[step];

  const update = (patch) => setData({...data, ...patch});
  const goNext = () => step < STEPS.length-1 ? setStep(step+1) : onDone();
  const goBack = () => step === 0 ? onBack() : setStep(step-1);

  const canNext = (() => {
    if (cur.k==='name') return !!data.name?.trim();
    if (cur.k==='goal') return !!data.goal;
    if (cur.k==='body') return !!data.height && !!data.weight;
    if (cur.k==='sched') return data.days?.length > 0;
    if (cur.k==='pair') return true;
    return true;
  })();

  return (
    <div style={{ minHeight:'100%', background:T.bg, paddingBottom:120, display:'flex', flexDirection:'column' }}>
      <PhoneStatus dark={dark}/>

      {/* progress */}
      <div style={{ padding:'4px 16px 0', display:'flex', alignItems:'center', gap:12 }}>
        <button onClick={goBack} style={{ width:36, height:36, borderRadius:18, background:T.card, border:`0.5px solid ${T.line}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name="back" size={18} color={T.ink}/>
        </button>
        <div style={{ flex:1, display:'flex', gap:4 }}>
          {STEPS.map((s,i)=>(
            <div key={s.k} style={{ flex:1, height:4, borderRadius:2, background: i<=step ? T.brand : T.line, transition:'background 0.25s' }}/>
          ))}
        </div>
        <div style={{ fontSize:11, fontWeight:700, color:T.ink2, fontFamily:'"JetBrains Mono", monospace', minWidth:30, textAlign:'right' }}>{step+1}/{STEPS.length}</div>
      </div>

      <div style={{ padding:'24px 24px 0', flex:1 }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:1.2, textTransform:'uppercase', color:T.ink3 }}>● {cur.label}</div>

        {cur.k==='name' && (
          <div>
            <div style={{ fontSize:30, lineHeight:1.1, fontWeight:800, letterSpacing:-1, fontFamily:'"Plus Jakarta Sans"', color:T.ink, marginTop:6 }}>เรียกคุณ<br/>ว่าอะไรดี?</div>
            <div style={{ fontSize:13, color:T.ink2, marginTop:8, lineHeight:1.5 }}>โค้ชของคุณจะเห็นชื่อนี้</div>

            <div style={{ marginTop:28 }}>
              <input
                value={data.name||''}
                onChange={e=>update({name:e.target.value})}
                placeholder="ชื่อเล่นของคุณ"
                style={{
                  width:'100%', height:56, borderRadius:16, border:`0.5px solid ${T.line}`, background:T.card, color:T.ink,
                  fontSize:18, padding:'0 18px', outline:'none', fontFamily:'"Plus Jakarta Sans"', fontWeight:600,
                }}
              />
            </div>

            <div style={{ marginTop:16, fontSize:12, color:T.ink3 }}>เพศที่ใช้สำหรับคำนวณ kcal:</div>
            <div style={{ display:'flex', gap:8, marginTop:8 }}>
              {[{k:'f',l:'หญิง'},{k:'m',l:'ชาย'},{k:'o',l:'อื่นๆ / ไม่ระบุ'}].map(g=>(
                <button key={g.k} onClick={()=>update({sex:g.k})} style={{
                  flex:g.k==='o'?2:1, height:44, borderRadius:12, cursor:'pointer',
                  border: data.sex===g.k ? `1.5px solid ${T.ink}` : `0.5px solid ${T.line}`,
                  background: data.sex===g.k ? T.ink : T.card, color: data.sex===g.k ? T.bg : T.ink,
                  fontSize:13, fontWeight:600,
                }}>{g.l}</button>
              ))}
            </div>
          </div>
        )}

        {cur.k==='goal' && (
          <div>
            <div style={{ fontSize:30, lineHeight:1.1, fontWeight:800, letterSpacing:-1, fontFamily:'"Plus Jakarta Sans"', color:T.ink, marginTop:6 }}>เป้าหมายหลัก<br/>คืออะไร?</div>
            <div style={{ fontSize:13, color:T.ink2, marginTop:8, lineHeight:1.5 }}>เลือกได้ 1 ข้อ — เปลี่ยนได้เสมอ</div>

            <div style={{ marginTop:24, display:'flex', flexDirection:'column', gap:10 }}>
              {[
                {k:'lose', icon:'🔥', l:'ลดน้ำหนัก / ลดไขมัน', sub:'ขาดดุลพลังงาน + เน้น cardio'},
                {k:'gain', icon:'💪', l:'เพิ่มกล้ามเนื้อ', sub:'ได้ดุลพลังงาน + strength'},
                {k:'tone', icon:'✨', l:'รูปร่าง toned ฟิตเปรี๊ยะ', sub:'recomp · mobility · core'},
                {k:'health', icon:'🌿', l:'สุขภาพดีและพลังงาน', sub:'general fitness · นอนดี'},
              ].map(g=>(
                <button key={g.k} onClick={()=>update({goal:g.k})} style={{
                  display:'flex', alignItems:'center', gap:14, padding:'14px 16px', borderRadius:16, cursor:'pointer',
                  border: data.goal===g.k ? `1.5px solid ${T.ink}` : `0.5px solid ${T.line}`,
                  background: data.goal===g.k ? (dark?'rgba(201,247,111,0.08)':'rgba(201,247,111,0.3)') : T.card,
                  textAlign:'left',
                }}>
                  <div style={{ width:44, height:44, borderRadius:12, background:T.chip, display:'flex', alignItems:'center', justifyContent:'center', fontSize:22 }}>{g.icon}</div>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:14, fontWeight:700, color:T.ink }}>{g.l}</div>
                    <div style={{ fontSize:11, color:T.ink2, marginTop:2 }}>{g.sub}</div>
                  </div>
                  <div style={{ width:22, height:22, borderRadius:11, border: data.goal===g.k ? `0` : `1.5px solid ${T.line}`, background: data.goal===g.k ? T.brand : 'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}>
                    {data.goal===g.k && <Icon name="check" size={14} color={T.brandInk}/>}
                  </div>
                </button>
              ))}
            </div>
          </div>
        )}

        {cur.k==='body' && (
          <div>
            <div style={{ fontSize:30, lineHeight:1.1, fontWeight:800, letterSpacing:-1, fontFamily:'"Plus Jakarta Sans"', color:T.ink, marginTop:6 }}>วัดร่างกาย<br/>กันหน่อย</div>
            <div style={{ fontSize:13, color:T.ink2, marginTop:8, lineHeight:1.5 }}>ใช้คำนวณ kcal และโหลดออกกำลัง</div>

            <div style={{ marginTop:24, display:'flex', gap:10 }}>
              <NumField dark={dark} label="ส่วนสูง" unit="cm" value={data.height||''} onChange={v=>update({height:v})}/>
              <NumField dark={dark} label="น้ำหนัก" unit="kg" value={data.weight||''} onChange={v=>update({weight:v})}/>
            </div>

            <div style={{ marginTop:18, padding:14, background:T.chip, borderRadius:14 }}>
              <div style={{ fontSize:11, fontWeight:700, color:T.ink3, letterSpacing:0.5, textTransform:'uppercase' }}>ระดับการออกกำลัง</div>
              <div style={{ display:'flex', gap:6, marginTop:10 }}>
                {[{k:'low',l:'น้อย',sub:'นั่งทำงาน'},{k:'med',l:'ปานกลาง',sub:'2-3x/wk'},{k:'high',l:'สูง',sub:'4x+/wk'}].map(a=>(
                  <button key={a.k} onClick={()=>update({activity:a.k})} style={{
                    flex:1, padding:'10px 6px', borderRadius:10, cursor:'pointer',
                    border: data.activity===a.k ? `1.5px solid ${T.ink}` : `0.5px solid ${T.line}`,
                    background: data.activity===a.k ? T.card : 'transparent',
                  }}>
                    <div style={{ fontSize:13, fontWeight:700, color:T.ink }}>{a.l}</div>
                    <div style={{ fontSize:10, color:T.ink2, marginTop:1 }}>{a.sub}</div>
                  </button>
                ))}
              </div>
            </div>

            <div style={{ marginTop:14, fontSize:11, color:T.ink3, lineHeight:1.5, padding:'10px 12px', background: dark?'rgba(201,247,111,0.06)':'rgba(201,247,111,0.18)', borderRadius:10 }}>
              💡 ข้อมูลนี้ใช้คำนวณ baseline พลังงาน เห็นเฉพาะคุณและโค้ช
            </div>
          </div>
        )}

        {cur.k==='sched' && (
          <div>
            <div style={{ fontSize:30, lineHeight:1.1, fontWeight:800, letterSpacing:-1, fontFamily:'"Plus Jakarta Sans"', color:T.ink, marginTop:6 }}>วันไหนสะดวก<br/>ออกกำลัง?</div>
            <div style={{ fontSize:13, color:T.ink2, marginTop:8, lineHeight:1.5 }}>เลือกได้หลายวัน — โค้ชจะใช้วางแผน</div>

            <div style={{ marginTop:24, display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap:6 }}>
              {['จ','อ','พ','พฤ','ศ','ส','อา'].map((d,i)=>{
                const on = data.days?.includes(i);
                return (
                  <button key={i} onClick={()=>{
                    const days = data.days || [];
                    update({days: on ? days.filter(x=>x!==i) : [...days, i]});
                  }} style={{
                    aspectRatio:'1', borderRadius:12, cursor:'pointer',
                    border: on ? 0 : `0.5px solid ${T.line}`,
                    background: on ? T.brand : T.card, color: on ? T.brandInk : T.ink,
                    fontSize:14, fontWeight:700, fontFamily:'"Plus Jakarta Sans"',
                  }}>{d}</button>
                );
              })}
            </div>

            <div style={{ marginTop:24, padding:14, background:T.chip, borderRadius:14 }}>
              <div style={{ fontSize:11, fontWeight:700, color:T.ink3, letterSpacing:0.5, textTransform:'uppercase' }}>ช่วงเวลาที่ชอบ</div>
              <div style={{ display:'flex', gap:6, marginTop:10 }}>
                {[{k:'am',l:'เช้า',sub:'06–10'},{k:'noon',l:'กลางวัน',sub:'10–16'},{k:'pm',l:'เย็น',sub:'16–22'}].map(t=>(
                  <button key={t.k} onClick={()=>update({timeOfDay:t.k})} style={{
                    flex:1, padding:'10px 6px', borderRadius:10, cursor:'pointer',
                    border: data.timeOfDay===t.k ? `1.5px solid ${T.ink}` : `0.5px solid ${T.line}`,
                    background: data.timeOfDay===t.k ? T.card : 'transparent',
                  }}>
                    <div style={{ fontSize:13, fontWeight:700, color:T.ink }}>{t.l}</div>
                    <div style={{ fontSize:10, color:T.ink2, marginTop:1, fontFamily:'"JetBrains Mono", monospace' }}>{t.sub}</div>
                  </button>
                ))}
              </div>
            </div>

            <div style={{ marginTop:14, fontSize:12, color:T.ink2, display:'flex', gap:6, alignItems:'center' }}>
              <span style={{ width:8, height:8, borderRadius:4, background:T.brand }}/>
              ตั้งเป้า {data.days?.length || 0}x/สัปดาห์
            </div>
          </div>
        )}

        {cur.k==='pair' && (
          <div>
            <div style={{ fontSize:30, lineHeight:1.1, fontWeight:800, letterSpacing:-1, fontFamily:'"Plus Jakarta Sans"', color:T.ink, marginTop:6 }}>ขั้นสุดท้าย ✨</div>
            <div style={{ fontSize:13, color:T.ink2, marginTop:8, lineHeight:1.5 }}>เลือกการเชื่อมต่อ — ข้ามได้ทำทีหลังได้</div>

            <div style={{ marginTop:24, display:'flex', flexDirection:'column', gap:10 }}>
              {/* Watch */}
              <button onClick={()=>update({connectWatch: !data.connectWatch})} style={{
                display:'flex', alignItems:'center', gap:14, padding:14, borderRadius:16, cursor:'pointer', textAlign:'left',
                border: data.connectWatch ? `1.5px solid ${T.ink}` : `0.5px solid ${T.line}`,
                background: data.connectWatch ? (dark?'rgba(201,247,111,0.08)':'rgba(201,247,111,0.3)') : T.card,
              }}>
                <div style={{ width:44, height:44, borderRadius:12, background:T.chip, display:'flex', alignItems:'center', justifyContent:'center', fontSize:22 }}>⌚</div>
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:14, fontWeight:700, color:T.ink }}>Apple Health / Google Fit</div>
                  <div style={{ fontSize:11, color:T.ink2, marginTop:2 }}>ก้าว · workout · HR · sleep</div>
                </div>
                <div style={{ width:22, height:22, borderRadius:11, border: data.connectWatch ? 0 : `1.5px solid ${T.line}`, background: data.connectWatch ? T.brand : 'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}>
                  {data.connectWatch && <Icon name="check" size={14} color={T.brandInk}/>}
                </div>
              </button>

              {/* Coach */}
              <div style={{ padding:14, borderRadius:16, border:`0.5px solid ${T.line}`, background:T.card }}>
                <div style={{ display:'flex', alignItems:'center', gap:14 }}>
                  <div style={{ width:44, height:44, borderRadius:12, background:'#FFD66B', display:'flex', alignItems:'center', justifyContent:'center', fontSize:22 }}>🌿</div>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:14, fontWeight:700, color:T.ink }}>มีโค้ชแล้ว?</div>
                    <div style={{ fontSize:11, color:T.ink2, marginTop:2 }}>ใส่รหัสจากเทรนเนอร์</div>
                  </div>
                </div>
                <input
                  value={data.coachCode||''}
                  onChange={e=>update({coachCode:e.target.value.toUpperCase()})}
                  placeholder="เช่น  JIN-7K2X"
                  style={{
                    width:'100%', height:42, marginTop:10, borderRadius:10, border:`0.5px solid ${T.line}`,
                    background: T.bg, color:T.ink, fontSize:14, padding:'0 14px', outline:'none',
                    fontFamily:'"JetBrains Mono", monospace', letterSpacing:1,
                  }}
                />
                <div style={{ marginTop:8, fontSize:11, color:T.ink3 }}>หรือเลือกจากรายการเทรนเนอร์ในแอพ →</div>
              </div>

              {/* Notif */}
              <button onClick={()=>update({notif: !data.notif})} style={{
                display:'flex', alignItems:'center', gap:14, padding:14, borderRadius:16, cursor:'pointer', textAlign:'left',
                border: data.notif ? `1.5px solid ${T.ink}` : `0.5px solid ${T.line}`,
                background: data.notif ? (dark?'rgba(201,247,111,0.08)':'rgba(201,247,111,0.3)') : T.card,
              }}>
                <div style={{ width:44, height:44, borderRadius:12, background:T.chip, display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <Icon name="bell" size={20} color={T.ink}/>
                </div>
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:14, fontWeight:700, color:T.ink }}>การแจ้งเตือน</div>
                  <div style={{ fontSize:11, color:T.ink2, marginTop:2 }}>เตือนเวลาออกกำลัง · โค้ชส่งข้อความ</div>
                </div>
                <div style={{ width:22, height:22, borderRadius:11, border: data.notif ? 0 : `1.5px solid ${T.line}`, background: data.notif ? T.brand : 'transparent', display:'flex', alignItems:'center', justifyContent:'center' }}>
                  {data.notif && <Icon name="check" size={14} color={T.brandInk}/>}
                </div>
              </button>
            </div>
          </div>
        )}
      </div>

      {/* footer CTA */}
      <div style={{ padding:'18px 16px 0', position:'sticky', bottom:0, background: `linear-gradient(to top, ${T.bg} 70%, transparent)` }}>
        <button onClick={goNext} disabled={!canNext} style={{
          width:'100%', height:54, borderRadius:16, border:0, cursor: canNext?'pointer':'not-allowed',
          background: canNext ? T.brand : T.line, color: canNext ? T.brandInk : T.ink3,
          fontSize:15, fontWeight:700, fontFamily:'"Plus Jakarta Sans"', letterSpacing:-0.2,
          display:'flex', alignItems:'center', justifyContent:'center', gap:8,
        }}>
          {step === STEPS.length-1 ? 'เริ่มเลย!' : 'ถัดไป'} <span style={{ fontSize:18 }}>→</span>
        </button>
      </div>
    </div>
  );
}

// ── Trainer invite-only gate (shown BEFORE onboarding)
function TrainerInviteGate({ dark, onApprove, onBack }) {
  const T = tokens(dark);
  const [code, setCode] = React.useState('');
  const [state, setState] = React.useState('idle'); // idle | checking | invalid | valid

  const VALID = ['FITKIT-2026','MENTOR-A1','PARTNER-X9'];

  const submit = () => {
    if (!code.trim()) return;
    setState('checking');
    setTimeout(()=>{
      if (VALID.includes(code.trim().toUpperCase())) setState('valid');
      else setState('invalid');
    }, 800);
  };

  React.useEffect(()=>{
    if (state==='valid') { const id = setTimeout(onApprove, 900); return ()=>clearTimeout(id); }
  }, [state]);

  return (
    <div style={{ minHeight:'100%', background:T.bg, paddingBottom:120, display:'flex', flexDirection:'column' }}>
      <PhoneStatus dark={dark}/>
      <div style={{ padding:'4px 16px 0' }}>
        <button onClick={onBack} style={{ width:36, height:36, borderRadius:18, background:T.card, border:`0.5px solid ${T.line}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name="back" size={18} color={T.ink}/>
        </button>
      </div>

      <div style={{ padding:'24px 24px 0' }}>
        {/* lock icon */}
        <div style={{ width:64, height:64, borderRadius:20, background:'#FFD66B', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16 }}>
          <Icon name="lock" size={32} color="#3D2200"/>
        </div>

        <div style={{ fontSize:11, fontWeight:700, letterSpacing:1.2, textTransform:'uppercase', color:T.ink3 }}>● Invite only</div>
        <div style={{ fontSize:30, lineHeight:1.1, fontWeight:800, letterSpacing:-1, fontFamily:'"Plus Jakarta Sans"', color:T.ink, marginTop:6 }}>เทรนเนอร์<br/>ต้องมีรหัสเชิญ</div>
        <div style={{ fontSize:13, color:T.ink2, marginTop:10, lineHeight:1.55, maxWidth:300 }}>
          เพื่อรักษามาตรฐานคุณภาพ — เราอนุญาตให้เฉพาะเทรนเนอร์ที่ได้รับเชิญหรือผ่านการตรวจสอบเข้ามาในแอพ
        </div>

        {/* code input */}
        <div style={{ marginTop:24 }}>
          <div style={{ fontSize:11, fontWeight:700, color:T.ink3, letterSpacing:0.5, textTransform:'uppercase', marginBottom:8 }}>รหัสเชิญ</div>
          <div style={{
            display:'flex', alignItems:'center', gap:10,
            background:T.card, borderRadius:16, padding:'4px 4px 4px 18px',
            border: state==='invalid' ? `1.5px solid #E1573B` : state==='valid' ? `1.5px solid #41A55E` : `0.5px solid ${T.line}`,
            transition:'border-color 0.2s',
          }}>
            <input
              value={code}
              onChange={e=>{ setCode(e.target.value.toUpperCase()); if (state!=='idle') setState('idle'); }}
              onKeyDown={e=>e.key==='Enter' && submit()}
              placeholder="FITKIT-XXXX"
              style={{
                flex:1, height:52, border:0, background:'transparent', color:T.ink,
                fontSize:18, fontWeight:700, outline:'none',
                fontFamily:'"JetBrains Mono", monospace', letterSpacing:2,
              }}
            />
            <button onClick={submit} disabled={state==='checking'||!code.trim()} style={{
              height:48, padding:'0 18px', borderRadius:12, border:0,
              background: state==='valid' ? '#41A55E' : '#FFD66B',
              color: state==='valid' ? '#fff' : '#3D2200',
              fontSize:13, fontWeight:700, cursor: state==='checking'||!code.trim() ? 'not-allowed' : 'pointer',
              opacity: !code.trim() ? 0.4 : 1, fontFamily:'"Plus Jakarta Sans"',
              display:'flex', alignItems:'center', gap:6,
            }}>
              {state==='checking' ? '...' : state==='valid' ? <><Icon name="check" size={14} color="#fff"/> ผ่าน</> : 'ตรวจสอบ'}
            </button>
          </div>

          {state==='invalid' && (
            <div style={{ fontSize:11, color:'#E1573B', marginTop:8, fontWeight:600, display:'flex', alignItems:'center', gap:6 }}>
              ✕ รหัสไม่ถูกต้อง · ลองใหม่หรือติดต่อทีม
            </div>
          )}
          {state==='valid' && (
            <div style={{ fontSize:11, color:'#41A55E', marginTop:8, fontWeight:600, display:'flex', alignItems:'center', gap:6 }}>
              ✓ ยืนยันแล้ว · กำลังเข้าสู่การลงทะเบียน...
            </div>
          )}
          {state==='idle' && (
            <div style={{ fontSize:11, color:T.ink3, marginTop:8, lineHeight:1.5 }}>
              ลองใช้: <span style={{ fontFamily:'"JetBrains Mono", monospace', background:T.chip, padding:'2px 6px', borderRadius:4, color:T.ink2 }}>FITKIT-2026</span>
            </div>
          )}
        </div>

        <div style={{ marginTop:18, fontSize:11, color:T.ink3, lineHeight:1.5 }}>
          ติดต่อทีม FitKit เพื่อขอรหัส
        </div>
      </div>
    </div>
  );
}

// ── Trainer onboarding flow (5 steps)
function TrainerOnboarding({ dark, step, setStep, data, setData, onDone, onBack }) {
  const T = tokens(dark);
  const STEPS = [
    { k:'profile', label:'โปรไฟล์' },
    { k:'expertise', label:'ความเชี่ยวชาญ' },
    { k:'cert', label:'การรับรอง' },
    { k:'avail', label:'ตารางว่าง' },
    { k:'invite', label:'เชิญลูกเทรน' },
  ];
  const cur = STEPS[step];
  const update = (patch) => setData({...data, ...patch});
  const goNext = () => step < STEPS.length-1 ? setStep(step+1) : onDone();
  const goBack = () => step === 0 ? onBack() : setStep(step-1);

  const canNext = (() => {
    if (cur.k==='profile') return !!data.name?.trim();
    if (cur.k==='expertise') return data.specialties?.length > 0;
    if (cur.k==='cert') return true;
    if (cur.k==='avail') return data.days?.length > 0;
    return true;
  })();

  return (
    <div style={{ minHeight:'100%', background:T.bg, paddingBottom:120, display:'flex', flexDirection:'column' }}>
      <PhoneStatus dark={dark}/>

      <div style={{ padding:'4px 16px 0', display:'flex', alignItems:'center', gap:12 }}>
        <button onClick={goBack} style={{ width:36, height:36, borderRadius:18, background:T.card, border:`0.5px solid ${T.line}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name="back" size={18} color={T.ink}/>
        </button>
        <div style={{ flex:1, display:'flex', gap:4 }}>
          {STEPS.map((s,i)=>(
            <div key={s.k} style={{ flex:1, height:4, borderRadius:2, background: i<=step ? '#FFD66B' : T.line, transition:'background 0.25s' }}/>
          ))}
        </div>
        <div style={{ fontSize:11, fontWeight:700, color:T.ink2, fontFamily:'"JetBrains Mono", monospace', minWidth:30, textAlign:'right' }}>{step+1}/{STEPS.length}</div>
      </div>

      <div style={{ padding:'24px 24px 0', flex:1 }}>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:1.2, textTransform:'uppercase', color:T.ink3 }}>● {cur.label}</div>

        {cur.k==='profile' && (
          <div>
            <div style={{ fontSize:30, lineHeight:1.1, fontWeight:800, letterSpacing:-1, fontFamily:'"Plus Jakarta Sans"', color:T.ink, marginTop:6 }}>โปรไฟล์<br/>เทรนเนอร์</div>
            <div style={{ fontSize:13, color:T.ink2, marginTop:8, lineHeight:1.5 }}>ลูกเทรนจะเห็นข้อมูลนี้ตอนหารือ</div>

            <div style={{ marginTop:24, display:'flex', alignItems:'center', gap:14 }}>
              <div style={{ width:80, height:80, borderRadius:24, background:'#FFD66B', display:'flex', alignItems:'center', justifyContent:'center', fontSize:36, position:'relative' }}>
                {data.name?.[0] || '🌿'}
                <div style={{ position:'absolute', bottom:-4, right:-4, width:28, height:28, borderRadius:14, background:T.ink, color:T.bg, display:'flex', alignItems:'center', justifyContent:'center', fontSize:14 }}>+</div>
              </div>
              <div style={{ flex:1 }}>
                <input
                  value={data.name||''}
                  onChange={e=>update({name:e.target.value})}
                  placeholder="ชื่อ-นามสกุล"
                  style={{ width:'100%', height:42, borderRadius:12, border:`0.5px solid ${T.line}`, background:T.card, color:T.ink, fontSize:14, padding:'0 14px', outline:'none', fontWeight:600 }}
                />
                <input
                  value={data.tagline||''}
                  onChange={e=>update({tagline:e.target.value})}
                  placeholder="เช่น  Wellness coach · ลด-เพิ่มน้ำหนัก"
                  style={{ width:'100%', height:38, marginTop:8, borderRadius:12, border:`0.5px solid ${T.line}`, background:T.card, color:T.ink, fontSize:12, padding:'0 14px', outline:'none' }}
                />
              </div>
            </div>

            <div style={{ marginTop:18 }}>
              <div style={{ fontSize:11, fontWeight:700, color:T.ink3, letterSpacing:0.5, textTransform:'uppercase' }}>เกี่ยวกับคุณ</div>
              <textarea
                value={data.bio||''}
                onChange={e=>update({bio:e.target.value})}
                placeholder="เล่าประสบการณ์และวิธีโค้ชของคุณ..."
                rows={4}
                style={{ width:'100%', marginTop:8, borderRadius:12, border:`0.5px solid ${T.line}`, background:T.card, color:T.ink, fontSize:13, padding:12, outline:'none', resize:'none', fontFamily:'inherit', lineHeight:1.5 }}
              />
            </div>
          </div>
        )}

        {cur.k==='expertise' && (
          <div>
            <div style={{ fontSize:30, lineHeight:1.1, fontWeight:800, letterSpacing:-1, fontFamily:'"Plus Jakarta Sans"', color:T.ink, marginTop:6 }}>เชี่ยวชาญ<br/>ด้านไหน?</div>
            <div style={{ fontSize:13, color:T.ink2, marginTop:8, lineHeight:1.5 }}>เลือกได้หลายข้อ — ใช้แสดงในโปรไฟล์</div>

            <div style={{ marginTop:24, display:'flex', flexWrap:'wrap', gap:8 }}>
              {[
                '🔥 Weight loss','💪 Strength','🏃 Endurance','🧘 Yoga / mobility',
                '🥗 โภชนาการ','✨ Body recomp','🤰 Pre/post-natal','🦴 Rehab',
                '🏋️ Powerlifting','🥊 Kickboxing','🌿 Wellness coaching','🧠 Mindset',
              ].map(s=>{
                const on = data.specialties?.includes(s);
                return (
                  <button key={s} onClick={()=>{
                    const cur = data.specialties || [];
                    update({specialties: on ? cur.filter(x=>x!==s) : [...cur, s]});
                  }} style={{
                    padding:'10px 14px', borderRadius:99, cursor:'pointer', fontSize:13, fontWeight:600,
                    border: on ? 0 : `0.5px solid ${T.line}`,
                    background: on ? T.ink : T.card, color: on ? T.bg : T.ink,
                  }}>{s}</button>
                );
              })}
            </div>

            <div style={{ marginTop:24, padding:14, background:T.chip, borderRadius:14 }}>
              <div style={{ fontSize:11, fontWeight:700, color:T.ink3, letterSpacing:0.5, textTransform:'uppercase' }}>ภาษาที่ใช้</div>
              <div style={{ display:'flex', gap:6, marginTop:10, flexWrap:'wrap' }}>
                {['ไทย','English','中文','日本語'].map(l=>{
                  const on = data.langs?.includes(l);
                  return (
                    <button key={l} onClick={()=>{
                      const cur = data.langs || [];
                      update({langs: on ? cur.filter(x=>x!==l) : [...cur, l]});
                    }} style={{
                      padding:'8px 14px', borderRadius:99, cursor:'pointer', fontSize:12, fontWeight:600,
                      border: on ? 0 : `0.5px solid ${T.line}`,
                      background: on ? T.ink : T.card, color: on ? T.bg : T.ink,
                    }}>{l}</button>
                  );
                })}
              </div>
            </div>
          </div>
        )}

        {cur.k==='cert' && (
          <div>
            <div style={{ fontSize:30, lineHeight:1.1, fontWeight:800, letterSpacing:-1, fontFamily:'"Plus Jakarta Sans"', color:T.ink, marginTop:6 }}>การรับรอง</div>
            <div style={{ fontSize:13, color:T.ink2, marginTop:8, lineHeight:1.5 }}>ช่วยให้ลูกเทรนเชื่อใจ — ตรวจสอบใน 1-2 วัน</div>

            <div style={{ marginTop:24, display:'flex', flexDirection:'column', gap:10 }}>
              {[
                {k:'nasm', l:'NASM-CPT', sub:'Personal Trainer'},
                {k:'acsm', l:'ACSM', sub:'Exercise Physiologist'},
                {k:'precision', l:'Precision Nutrition', sub:'Nutrition L1/L2'},
                {k:'yoga', l:'RYT-200', sub:'Yoga Alliance'},
              ].map(c=>{
                const on = data.certs?.includes(c.k);
                return (
                  <button key={c.k} onClick={()=>{
                    const cur = data.certs || [];
                    update({certs: on ? cur.filter(x=>x!==c.k) : [...cur, c.k]});
                  }} style={{
                    display:'flex', alignItems:'center', gap:14, padding:'12px 14px', borderRadius:14, cursor:'pointer', textAlign:'left',
                    border: on ? `1.5px solid ${T.ink}` : `0.5px solid ${T.line}`,
                    background: on ? T.card : T.card,
                  }}>
                    <div style={{ width:40, height:40, borderRadius:10, background: on?'#FFD66B':T.chip, display:'flex', alignItems:'center', justifyContent:'center' }}>
                      {on ? <Icon name="check" size={18} color="#3D2200"/> : <Icon name="check" size={18} color={T.ink3}/>}
                    </div>
                    <div style={{ flex:1 }}>
                      <div style={{ fontSize:14, fontWeight:700, color:T.ink }}>{c.l}</div>
                      <div style={{ fontSize:11, color:T.ink2, marginTop:2 }}>{c.sub}</div>
                    </div>
                    {on && <Pill kind="warn" dark={dark}>pending</Pill>}
                  </button>
                );
              })}
            </div>

            <button style={{
              marginTop:14, width:'100%', height:48, borderRadius:14, cursor:'pointer',
              border:`1.5px dashed ${T.line}`, background:'transparent', color:T.ink2,
              fontSize:13, fontWeight:600, display:'flex', alignItems:'center', justifyContent:'center', gap:8,
            }}>
              <span style={{ fontSize:16 }}>+</span> อัปโหลดใบรับรองอื่น
            </button>

            <div style={{ marginTop:14, fontSize:11, color:T.ink3, lineHeight:1.5 }}>
              ข้ามขั้นนี้ได้ — ทำการรับรองภายหลังได้ทุกเมื่อ
            </div>
          </div>
        )}

        {cur.k==='avail' && (
          <div>
            <div style={{ fontSize:30, lineHeight:1.1, fontWeight:800, letterSpacing:-1, fontFamily:'"Plus Jakarta Sans"', color:T.ink, marginTop:6 }}>ตารางทำงาน</div>
            <div style={{ fontSize:13, color:T.ink2, marginTop:8, lineHeight:1.5 }}>วันและเวลาที่รับ session — ตั้ง default</div>

            <div style={{ marginTop:24, display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap:6 }}>
              {['จ','อ','พ','พฤ','ศ','ส','อา'].map((d,i)=>{
                const on = data.days?.includes(i);
                return (
                  <button key={i} onClick={()=>{
                    const days = data.days || [];
                    update({days: on ? days.filter(x=>x!==i) : [...days, i]});
                  }} style={{
                    aspectRatio:'1', borderRadius:12, cursor:'pointer',
                    border: on ? 0 : `0.5px solid ${T.line}`,
                    background: on ? '#FFD66B' : T.card, color: on ? '#3D2200' : T.ink,
                    fontSize:14, fontWeight:700, fontFamily:'"Plus Jakarta Sans"',
                  }}>{d}</button>
                );
              })}
            </div>

            <div style={{ marginTop:18 }}>
              <div style={{ fontSize:11, fontWeight:700, color:T.ink3, letterSpacing:0.5, textTransform:'uppercase' }}>เวลาทำงาน</div>
              <div style={{ display:'flex', gap:10, marginTop:10, alignItems:'center' }}>
                <NumField dark={dark} label="เริ่ม" unit=":00" value={data.from||'08'} onChange={v=>update({from:v})}/>
                <span style={{ color:T.ink3, fontSize:18, fontWeight:700 }}>—</span>
                <NumField dark={dark} label="สิ้นสุด" unit=":00" value={data.to||'20'} onChange={v=>update({to:v})}/>
              </div>
            </div>

            <div style={{ marginTop:18, padding:14, background:T.chip, borderRadius:14, display:'flex', alignItems:'center', gap:12 }}>
              <div style={{ width:36, height:36, borderRadius:10, background:T.card, display:'flex', alignItems:'center', justifyContent:'center', fontSize:18 }}>📅</div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:13, fontWeight:700, color:T.ink }}>เชื่อม Google Calendar</div>
                <div style={{ fontSize:11, color:T.ink2, marginTop:2 }}>กันชนกับนัดอื่นอัตโนมัติ</div>
              </div>
              <button style={{ background:T.ink, color:T.bg, border:0, borderRadius:99, padding:'8px 14px', fontSize:12, fontWeight:700, cursor:'pointer' }}>เชื่อม</button>
            </div>
          </div>
        )}

        {cur.k==='invite' && (
          <div>
            <div style={{ fontSize:30, lineHeight:1.1, fontWeight:800, letterSpacing:-1, fontFamily:'"Plus Jakarta Sans"', color:T.ink, marginTop:6 }}>เชิญลูกเทรน<br/>คนแรก ✨</div>
            <div style={{ fontSize:13, color:T.ink2, marginTop:8, lineHeight:1.5 }}>แชร์รหัสเพื่อให้ลูกเทรนเชื่อมต่อ</div>

            <div style={{ marginTop:24, padding:24, background: dark?'linear-gradient(135deg,#2A1E08,#1A1408)':'linear-gradient(135deg,#FFE9A8,#FFD66B)', borderRadius:22, textAlign:'center', border:`0.5px solid ${T.line}` }}>
              <div style={{ fontSize:11, fontWeight:700, letterSpacing:1, textTransform:'uppercase', color: dark?'#FFD66B':'#3D2200' }}>รหัสเชิญของคุณ</div>
              <div style={{ fontSize:32, fontWeight:800, color: dark?'#FFE9A8':'#3D2200', fontFamily:'"JetBrains Mono", monospace', letterSpacing:4, marginTop:10 }}>
                {(data.name?.split(' ')[0]?.toUpperCase().slice(0,3) || 'COACH')}-{(Math.abs(((data.name||'')+'').split('').reduce((a,c)=>a+c.charCodeAt(0),0)*7).toString(36).toUpperCase().slice(0,4) || '7K2X')}
              </div>
              <div style={{ display:'flex', gap:8, marginTop:14, justifyContent:'center' }}>
                <button style={{ background:dark?'rgba(255,255,255,0.08)':'rgba(255,255,255,0.6)', color: dark?'#FFE9A8':'#3D2200', border:0, borderRadius:99, padding:'9px 16px', fontSize:12, fontWeight:700, cursor:'pointer' }}>📋 คัดลอก</button>
                <button style={{ background:dark?'rgba(255,255,255,0.08)':'rgba(255,255,255,0.6)', color: dark?'#FFE9A8':'#3D2200', border:0, borderRadius:99, padding:'9px 16px', fontSize:12, fontWeight:700, cursor:'pointer' }}>↗ แชร์</button>
                <button style={{ background:dark?'rgba(255,255,255,0.08)':'rgba(255,255,255,0.6)', color: dark?'#FFE9A8':'#3D2200', border:0, borderRadius:99, padding:'9px 16px', fontSize:12, fontWeight:700, cursor:'pointer' }}>QR</button>
              </div>
            </div>

            <div style={{ marginTop:18, padding:14, background:T.chip, borderRadius:14 }}>
              <div style={{ fontSize:13, fontWeight:700, color:T.ink, marginBottom:10 }}>หรือเชิญทางอีเมล</div>
              <input
                placeholder="trainee@email.com"
                style={{ width:'100%', height:40, borderRadius:10, border:`0.5px solid ${T.line}`, background:T.card, color:T.ink, fontSize:13, padding:'0 14px', outline:'none' }}
              />
            </div>

            <div style={{ marginTop:14, fontSize:11, color:T.ink3, lineHeight:1.5, textAlign:'center' }}>
              ข้ามขั้นนี้ได้ — เชิญลูกเทรนทีหลังได้
            </div>
          </div>
        )}
      </div>

      <div style={{ padding:'18px 16px 0', position:'sticky', bottom:0, background: `linear-gradient(to top, ${T.bg} 70%, transparent)` }}>
        <button onClick={goNext} disabled={!canNext} style={{
          width:'100%', height:54, borderRadius:16, border:0, cursor: canNext?'pointer':'not-allowed',
          background: canNext ? '#FFD66B' : T.line, color: canNext ? '#3D2200' : T.ink3,
          fontSize:15, fontWeight:700, fontFamily:'"Plus Jakarta Sans"', letterSpacing:-0.2,
          display:'flex', alignItems:'center', justifyContent:'center', gap:8,
        }}>
          {step === STEPS.length-1 ? 'พร้อมโค้ช!' : 'ถัดไป'} <span style={{ fontSize:18 }}>→</span>
        </button>
      </div>
    </div>
  );
}

// shared num field
function NumField({ dark, label, unit, value, onChange }) {
  const T = tokens(dark);
  return (
    <div style={{ flex:1, padding:14, background:T.card, borderRadius:14, border:`0.5px solid ${T.line}` }}>
      <div style={{ fontSize:11, fontWeight:700, color:T.ink3, letterSpacing:0.5, textTransform:'uppercase' }}>{label}</div>
      <div style={{ display:'flex', alignItems:'baseline', gap:6, marginTop:6 }}>
        <input
          value={value} onChange={e=>onChange(e.target.value.replace(/[^0-9.]/g,''))}
          inputMode="decimal"
          placeholder="0"
          style={{ flex:1, minWidth:0, border:0, background:'transparent', color:T.ink, fontSize:26, fontWeight:700, outline:'none', fontFamily:'"Plus Jakarta Sans"', padding:0 }}
        />
        <span style={{ fontSize:13, color:T.ink2, fontWeight:600 }}>{unit}</span>
      </div>
    </div>
  );
}

// ── Welcome / done screen
function OnboardingDone({ dark, role, name, onEnter }) {
  const T = tokens(dark);
  return (
    <div style={{ minHeight:'100%', background:T.bg, display:'flex', flexDirection:'column' }}>
      <PhoneStatus dark={dark}/>
      <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:24, textAlign:'center' }}>
        <div style={{ fontSize:64, marginBottom:18, animation:'fitkit-pop 0.6s ease' }}>{role==='trainee'?'🎉':'🌿'}</div>
        <div style={{ fontSize:11, fontWeight:700, letterSpacing:1.4, textTransform:'uppercase', color:T.ink3 }}>● พร้อมแล้ว</div>
        <div style={{ fontSize:32, fontWeight:800, lineHeight:1.1, letterSpacing:-1, fontFamily:'"Plus Jakarta Sans"', color:T.ink, marginTop:8, maxWidth:280 }}>
          ยินดีต้อนรับ<br/>
          <span style={{ background: role==='trainee' ? T.brand : '#FFD66B', color: role==='trainee' ? T.brandInk : '#3D2200', padding:'0 8px', borderRadius:6, display:'inline-block', marginTop:6 }}>{name || (role==='trainee'?'มิ้น':'โค้ช')}</span>
        </div>
        <div style={{ fontSize:14, color:T.ink2, marginTop:14, maxWidth:280, lineHeight:1.5 }}>
          {role==='trainee'
            ? 'แผนแรกของคุณพร้อมแล้ว — ไปเริ่มออกกำลังกันเลย'
            : 'พร้อมรับลูกเทรนคนแรก — มาดูแดชบอร์ดกัน'}
        </div>

        <button onClick={onEnter} style={{
          marginTop:32, width:'100%', maxWidth:300, height:54, borderRadius:16, border:0, cursor:'pointer',
          background: role==='trainee' ? T.brand : '#FFD66B', color: role==='trainee' ? T.brandInk : '#3D2200',
          fontSize:15, fontWeight:700, fontFamily:'"Plus Jakarta Sans"', letterSpacing:-0.2,
          display:'flex', alignItems:'center', justifyContent:'center', gap:8,
        }}>
          เข้าสู่แอพ <span style={{ fontSize:18 }}>→</span>
        </button>
      </div>
      <style>{`@keyframes fitkit-pop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}`}</style>
    </div>
  );
}

Object.assign(window, {
  OnboardingSplash, OnboardingRolePick, TrainerInviteGate,
  TraineeOnboarding, TrainerOnboarding, OnboardingDone,
});