// screens-teams.jsx — Multi-team identity persona screens
// Demonstrates: User vs Membership model, team switcher, dual-role, transport teams, driver app, alumni state

const { useState: useStateT } = React;

// ─────────────────────────────────────────────────────────────
// TEAM SWITCHER SHEET — opened from any home header
// ─────────────────────────────────────────────────────────────
function TeamSwitcherSheet({ open, onClose, current, teams, onPick }) {
  if (!open) return null;
  return (
    <>
      <div className="sheet-backdrop" onClick={onClose}></div>
      <div className="sheet sheet-up" style={{ maxHeight: '78%' }}>
        <div className="sheet-handle"></div>
        <div style={{ padding: '12px 20px 4px' }}>
          <div className="spread">
            <div>
              <div style={{ fontSize: 17, fontWeight: 800, color: 'var(--n900)' }}>Switch team</div>
              <div style={{ fontSize: 11, color: 'var(--n500)' }}>{teams.filter(t => t.state === 'active').length} active · {teams.filter(t => t.state !== 'active').length} archived</div>
            </div>
            <button onClick={onClose} style={{ width: 32, height: 32, borderRadius: 10, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="x" size={16}/></button>
          </div>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: '12px 20px 8px' }}>
          <div style={{ fontSize: 10, color: 'var(--n500)', fontFamily: 'var(--mono)', letterSpacing: '.08em', fontWeight: 700, padding: '4px 4px 8px' }}>ACTIVE</div>
          <div className="col" style={{ gap: 8 }}>
            {teams.filter(t => t.state === 'active').map((tm, i) => (
              <button key={i} onClick={() => onPick(tm)} className="row" style={{
                width: '100%', padding: 14, gap: 12, borderRadius: 14,
                background: tm.id === current ? 'var(--p50)' : '#fff',
                border: tm.id === current ? '1.5px solid var(--p300)' : '1.5px solid var(--n100)',
                textAlign: 'left',
              }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: tm.bg, color: tm.clr, display: 'grid', placeItems: 'center', flexShrink: 0, fontSize: 14, fontWeight: 800 }}>{tm.glyph}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="spread">
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{tm.name}</div>
                    {tm.id === current && <span className="pill pill-p" style={{ fontSize: 9 }}>CURRENT</span>}
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 1 }}>{tm.kind} · {tm.location}</div>
                  <div className="row" style={{ gap: 4, marginTop: 6, flexWrap: 'wrap' }}>
                    {tm.roles.map((r, ri) => (
                      <span key={ri} className="pill" style={{ fontSize: 9, padding: '2px 8px', background: 'var(--n50)', border: '1px solid var(--n100)' }}>{r}</span>
                    ))}
                  </div>
                </div>
              </button>
            ))}
          </div>
          {teams.some(t => t.state !== 'active') && (
            <>
              <div style={{ fontSize: 10, color: 'var(--n500)', fontFamily: 'var(--mono)', letterSpacing: '.08em', fontWeight: 700, padding: '16px 4px 8px' }}>FORMER · ALUMNI</div>
              <div className="col" style={{ gap: 8 }}>
                {teams.filter(t => t.state !== 'active').map((tm, i) => (
                  <button key={i} className="row" style={{
                    width: '100%', padding: 14, gap: 12, borderRadius: 14,
                    background: 'var(--n50)', border: '1.5px solid var(--n100)', textAlign: 'left',
                    opacity: .85,
                  }}>
                    <div style={{ width: 44, height: 44, borderRadius: 12, background: '#fff', color: 'var(--n400)', display: 'grid', placeItems: 'center', flexShrink: 0, fontSize: 14, fontWeight: 800, border: '1px dashed var(--n200)' }}>{tm.glyph}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="spread">
                        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n700)' }}>{tm.name}</div>
                        <span className="pill" style={{ fontSize: 9, background: '#fff', color: 'var(--n500)', border: '1px solid var(--n200)' }}>{tm.state.toUpperCase()}</span>
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 1 }}>{tm.endNote}</div>
                      <div className="row" style={{ gap: 6, marginTop: 6 }}>
                        <button className="btn-sm btn-ghost" style={{ height: 24, padding: '0 8px', fontSize: 10 }}><Icon name="down" size={10}/> Records</button>
                        <button className="btn-sm btn-ghost" style={{ height: 24, padding: '0 8px', fontSize: 10 }}><Icon name="clipboard" size={10}/> Certificates</button>
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            </>
          )}
          <button className="card-flat row" style={{ width: '100%', padding: 14, gap: 12, marginTop: 16, textAlign: 'left', borderStyle: 'dashed' }}>
            <div style={{ width: 40, height: 40, borderRadius: 11, background: '#fff', color: 'var(--p600)', display: 'grid', placeItems: 'center', border: '1px dashed var(--p300)' }}><Icon name="plus" size={20}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>Join another team</div>
              <div style={{ fontSize: 11, color: 'var(--n500)' }}>Enter invitation code or accept pending invite</div>
            </div>
            <Icon name="chev-r" size={16} style={{ color: 'var(--n400)' }}/>
          </button>
        </div>
      </div>
    </>
  );
}

// Reusable team header chip for any persona home
function TeamHeader({ team, onSwitch, onSearch, onNotif, badge = 0 }) {
  return (
    <div className="row" style={{ padding: '8px 16px 10px', gap: 8 }}>
      <button onClick={onSwitch} className="row" style={{
        flex: 1, gap: 10, padding: '8px 12px', background: '#fff', border: '1px solid var(--n100)', borderRadius: 14, minWidth: 0,
      }}>
        <div style={{ width: 32, height: 32, borderRadius: 9, background: team.bg, color: team.clr, display: 'grid', placeItems: 'center', flexShrink: 0, fontSize: 12, fontWeight: 800 }}>{team.glyph}</div>
        <div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--n900)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{team.name}</div>
          <div style={{ fontSize: 10, color: 'var(--n500)' }}>{team.kind}</div>
        </div>
        <Icon name="down" size={14} style={{ color: 'var(--n500)' }}/>
      </button>
      <button onClick={onSearch} style={{ width: 38, height: 38, borderRadius: 11, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="search" size={18}/></button>
      <button onClick={onNotif} style={{ width: 38, height: 38, borderRadius: 11, background: 'var(--n50)', display: 'grid', placeItems: 'center', position: 'relative' }}>
        <Icon name="bell" size={18}/>
        {badge > 0 && <span style={{ position: 'absolute', top: 4, right: 4, minWidth: 14, height: 14, padding: '0 3px', borderRadius: 99, background: 'var(--c500)', color: '#fff', fontSize: 9, fontWeight: 800, display: 'grid', placeItems: 'center' }}>{badge}</span>}
      </button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ONBOARDING — Welcome / Login / Register with OTP verification
// ─────────────────────────────────────────────────────────────
//   welcome → choose login or register
//   login: 'login-email' OR 'login-phone' (password) → empty
//   register: 'reg-method' → 'reg-email' / 'reg-phone' → 'reg-password' →
//             'reg-otp' (verification gate) → 'reg-name' → empty
//   plus: google one-tap (skips OTP, uses Google's verified email)
// ─────────────────────────────────────────────────────────────
function GoogleGlyph({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ flexShrink: 0 }}>
      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.56c2.08-1.92 3.28-4.74 3.28-8.09z"/>
      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.99.66-2.25 1.06-3.72 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/>
      <path fill="#FBBC05" d="M5.84 14.11A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.34-2.11V7.05H2.18A11 11 0 0 0 1 12c0 1.78.43 3.46 1.18 4.95l3.66-2.84z"/>
      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.05l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"/>
    </svg>
  );
}

function OnboardingScreen({ nav }) {
  const [step, setStep] = useStateT('welcome');
  const [mode, setMode] = useStateT('register'); // 'register' | 'login'
  const [identifier, setIdentifier] = useStateT(''); // email or phone
  const [idType, setIdType] = useStateT('email');   // 'email' | 'phone'
  const [password, setPassword] = useStateT('');
  const [showPwd, setShowPwd] = useStateT(false);
  const [name, setName] = useStateT('');
  const [otp, setOtp] = useStateT(['', '', '', '', '', '']);
  const [agreed, setAgreed] = useStateT(true);
  const [resend, setResend] = useStateT(24);

  React.useEffect(() => {
    if (step !== 'reg-otp') return;
    setResend(24);
    const t = setInterval(() => setResend(r => (r > 0 ? r - 1 : 0)), 1000);
    return () => clearInterval(t);
  }, [step]);

  const idLabel = idType === 'email' ? 'Email address' : 'Phone number';
  const idValid = idType === 'email'
    ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(identifier)
    : identifier.replace(/\D/g, '').length === 10;
  const pwdStrength = (() => {
    let s = 0;
    if (password.length >= 8) s++;
    if (/[A-Z]/.test(password)) s++;
    if (/[0-9]/.test(password)) s++;
    if (/[^A-Za-z0-9]/.test(password)) s++;
    return s;
  })();

  const goBack = () => {
    if (step === 'login-email' || step === 'login-phone') setStep('welcome');
    else if (step === 'reg-method') setStep('welcome');
    else if (step === 'reg-email' || step === 'reg-phone') setStep('reg-method');
    else if (step === 'reg-password') setStep(idType === 'email' ? 'reg-email' : 'reg-phone');
    else if (step === 'reg-otp') setStep('reg-password');
    else if (step === 'reg-name') setStep('reg-otp');
    else setStep('welcome');
  };

  // Reusable bits
  const BackChip = () => (
    <button onClick={goBack} style={{ width: 38, height: 38, borderRadius: 12, background: '#fff', display: 'grid', placeItems: 'center', border: '1px solid var(--n100)', alignSelf: 'flex-start' }}><Icon name="chev-l" size={18}/></button>
  );

  const Stepper = ({ n, total = 4 }) => (
    <div className="row" style={{ gap: 4, marginTop: 14 }}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} style={{ flex: 1, height: 3, borderRadius: 99, background: i < n ? 'var(--p600)' : 'var(--n100)' }}></div>
      ))}
      <span style={{ fontSize: 10, color: 'var(--n500)', fontFamily: 'var(--mono)', fontWeight: 700, letterSpacing: '.06em', marginLeft: 8 }}>{n}/{total}</span>
    </div>
  );

  return (
    <div className="app screen-in" style={{ background: 'linear-gradient(180deg,#fff 0%,var(--p50) 100%)' }}>
      <StatusBar/>
      <div className="app-body no-pad" style={{ padding: '12px 24px 28px', display: 'flex', flexDirection: 'column' }}>
        {step !== 'welcome' && step !== 'empty' && <BackChip/>}

        {/* ───── WELCOME ───── */}
        {step === 'welcome' && (
          <>
            <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--p600)', display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 800, fontSize: 20, letterSpacing: '-.02em' }}>S</div>
              <div style={{ fontSize: 12, color: 'var(--n500)', fontFamily: 'var(--mono)', fontWeight: 700, letterSpacing: '.1em' }}>SCHOLIQ</div>
            </div>
            <div style={{ marginTop: 28, fontSize: 32, fontWeight: 800, color: 'var(--n900)', letterSpacing: '-.025em', lineHeight: 1.05 }}>School life,<br/>simplified.</div>
            <div style={{ fontSize: 14, color: 'var(--n600)', marginTop: 14, lineHeight: 1.55 }}>One identity for school, transport, and tuition. Track fees, attendance, homework — all in one place.</div>

            <div style={{ flex: 1 }}></div>

            {/* Primary CTA — Google */}
            <button onClick={() => setStep('empty')} className="row" style={{ width: '100%', height: 52, padding: '0 18px', background: '#fff', border: '1.5px solid var(--n100)', borderRadius: 14, fontWeight: 700, color: 'var(--n900)', fontSize: 14, justifyContent: 'center', gap: 12, boxShadow: 'var(--el-1)' }}>
              <GoogleGlyph size={20}/> Continue with Google
            </button>

            {/* Divider */}
            <div className="row" style={{ gap: 10, margin: '16px 0 16px' }}>
              <div style={{ flex: 1, height: 1, background: 'var(--n100)' }}></div>
              <span style={{ fontSize: 10, fontWeight: 700, color: 'var(--n400)', letterSpacing: '.1em', fontFamily: 'var(--mono)' }}>OR</span>
              <div style={{ flex: 1, height: 1, background: 'var(--n100)' }}></div>
            </div>

            <button onClick={() => { setMode('register'); setStep('reg-method'); }} className="btn" style={{ marginBottom: 10 }}>Create account <Icon name="arrow-right" size={16}/></button>
            <button onClick={() => { setMode('login'); setStep('login-email'); }} className="btn btn-outline">I already have an account</button>

            <div style={{ fontSize: 10.5, color: 'var(--n500)', textAlign: 'center', marginTop: 16, lineHeight: 1.5 }}>By continuing you agree to Scholiq's <b style={{ color: 'var(--n800)' }}>Terms</b> and <b style={{ color: 'var(--n800)' }}>Privacy Policy</b>.</div>
          </>
        )}

        {/* ───── LOGIN — email or phone with password ───── */}
        {(step === 'login-email' || step === 'login-phone') && (() => {
          const usingEmail = step === 'login-email';
          return (
            <>
              <div style={{ marginTop: 28, fontSize: 26, fontWeight: 800, color: 'var(--n900)', letterSpacing: '-.02em' }}>Welcome back</div>
              <div style={{ fontSize: 13, color: 'var(--n500)', marginTop: 6 }}>Sign in to continue with your schools and teams</div>

              {/* Method tabs */}
              <div style={{ marginTop: 22, padding: 4, background: 'var(--n100)', borderRadius: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
                {[
                  { id: 'login-email', lab: 'Email' },
                  { id: 'login-phone', lab: 'Phone' },
                ].map(o => (
                  <button key={o.id} onClick={() => { setStep(o.id); setIdentifier(''); setIdType(o.id === 'login-email' ? 'email' : 'phone'); }} style={{
                    padding: '10px 6px', borderRadius: 9, fontSize: 12, fontWeight: 700,
                    background: step === o.id ? '#fff' : 'transparent',
                    color: step === o.id ? 'var(--n900)' : 'var(--n600)',
                    boxShadow: step === o.id ? '0 1px 3px rgba(0,0,0,.08)' : 'none',
                  }}>{o.lab}</button>
                ))}
              </div>

              {/* Identifier */}
              <div style={{ marginTop: 22 }}>
                <div style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', marginBottom: 8, fontFamily: 'var(--mono)' }}>{usingEmail ? 'Email' : 'Phone'}</div>
                {usingEmail ? (
                  <div className="row" style={{ gap: 8, padding: '14px 16px', background: '#fff', borderRadius: 14, border: '1.5px solid var(--n100)' }}>
                    <Icon name="mail" size={18} style={{ color: 'var(--n400)' }}/>
                    <input type="email" autoComplete="email" value={identifier} onChange={e => setIdentifier(e.target.value)} placeholder="you@school.in" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, fontWeight: 600, fontFamily: 'inherit' }}/>
                  </div>
                ) : (
                  <div className="row" style={{ gap: 8, padding: '14px 16px', background: '#fff', borderRadius: 14, border: '1.5px solid var(--n100)' }}>
                    <span style={{ fontSize: 15, fontWeight: 700, color: 'var(--n700)' }}>+91</span>
                    <input inputMode="numeric" autoComplete="tel" value={identifier} onChange={e => setIdentifier(e.target.value.replace(/\D/g, '').slice(0, 10))} placeholder="98765 43210" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, fontWeight: 600, fontFamily: 'inherit', letterSpacing: '.05em' }}/>
                  </div>
                )}
              </div>

              {/* Password */}
              <div style={{ marginTop: 14 }}>
                <div className="spread" style={{ marginBottom: 8 }}>
                  <span style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', fontFamily: 'var(--mono)' }}>Password</span>
                  <button style={{ fontSize: 11, fontWeight: 700, color: 'var(--p600)' }}>Forgot?</button>
                </div>
                <div className="row" style={{ gap: 8, padding: '14px 16px', background: '#fff', borderRadius: 14, border: '1.5px solid var(--n100)' }}>
                  <Icon name="lock" size={18} style={{ color: 'var(--n400)' }}/>
                  <input type={showPwd ? 'text' : 'password'} autoComplete="current-password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Enter your password" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, fontWeight: 600, fontFamily: 'inherit' }}/>
                  <button onClick={() => setShowPwd(!showPwd)} style={{ color: 'var(--n500)' }}><Icon name={showPwd ? 'eye-off' : 'eye'} size={18}/></button>
                </div>
              </div>

              <div style={{ flex: 1 }}></div>

              <button disabled={!idValid || password.length < 6} onClick={() => setStep('empty')} className="btn" style={{ opacity: idValid && password.length >= 6 ? 1 : .5 }}>Sign in <Icon name="arrow-right" size={16}/></button>

              {/* Divider + Google */}
              <div className="row" style={{ gap: 10, margin: '16px 0' }}>
                <div style={{ flex: 1, height: 1, background: 'var(--n100)' }}></div>
                <span style={{ fontSize: 10, fontWeight: 700, color: 'var(--n400)', letterSpacing: '.1em', fontFamily: 'var(--mono)' }}>OR</span>
                <div style={{ flex: 1, height: 1, background: 'var(--n100)' }}></div>
              </div>
              <button onClick={() => setStep('empty')} className="row" style={{ width: '100%', height: 48, padding: '0 18px', background: '#fff', border: '1.5px solid var(--n100)', borderRadius: 12, fontWeight: 700, color: 'var(--n900)', fontSize: 13, justifyContent: 'center', gap: 12 }}>
                <GoogleGlyph size={18}/> Continue with Google
              </button>

              <div style={{ fontSize: 12, color: 'var(--n500)', textAlign: 'center', marginTop: 16 }}>New here? <button onClick={() => { setMode('register'); setStep('reg-method'); }} style={{ color: 'var(--p600)', fontWeight: 700 }}>Create an account</button></div>
            </>
          );
        })()}

        {/* ───── REGISTER · choose method ───── */}
        {step === 'reg-method' && (
          <>
            <div style={{ marginTop: 28, fontSize: 26, fontWeight: 800, color: 'var(--n900)', letterSpacing: '-.02em' }}>Create your account</div>
            <div style={{ fontSize: 13, color: 'var(--n500)', marginTop: 6 }}>Pick how you'd like to sign up. We'll verify with a one-time code.</div>
            <Stepper n={1}/>

            <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <button onClick={() => setStep('empty')} className="row" style={{ padding: 16, background: '#fff', border: '1.5px solid var(--n100)', borderRadius: 14, gap: 14, textAlign: 'left' }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--n50)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><GoogleGlyph size={22}/></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>Sign up with Google</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>Fastest · email already verified · no OTP needed</div>
                </div>
                <span className="pill pill-s" style={{ fontSize: 9 }}>RECOMMENDED</span>
              </button>

              <button onClick={() => { setIdType('email'); setIdentifier(''); setStep('reg-email'); }} className="row" style={{ padding: 16, background: '#fff', border: '1.5px solid var(--n100)', borderRadius: 14, gap: 14, textAlign: 'left' }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--p50)', color: 'var(--p600)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name="mail" size={20}/></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>Sign up with email</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>Use email + password · 6-digit OTP to verify</div>
                </div>
                <Icon name="chev-r" size={16} style={{ color: 'var(--n400)' }}/>
              </button>

              <button onClick={() => { setIdType('phone'); setIdentifier(''); setStep('reg-phone'); }} className="row" style={{ padding: 16, background: '#fff', border: '1.5px solid var(--n100)', borderRadius: 14, gap: 14, textAlign: 'left' }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--c50)', color: 'var(--c600)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name="phone" size={20}/></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>Sign up with phone</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>Use phone + password · SMS OTP to verify</div>
                </div>
                <Icon name="chev-r" size={16} style={{ color: 'var(--n400)' }}/>
              </button>
            </div>

            <div style={{ flex: 1 }}></div>
            <div style={{ fontSize: 12, color: 'var(--n500)', textAlign: 'center' }}>Already have an account? <button onClick={() => { setMode('login'); setStep('login-email'); }} style={{ color: 'var(--p600)', fontWeight: 700 }}>Sign in</button></div>
          </>
        )}

        {/* ───── REGISTER · enter email/phone ───── */}
        {(step === 'reg-email' || step === 'reg-phone') && (() => {
          const usingEmail = step === 'reg-email';
          return (
            <>
              <div style={{ marginTop: 24, fontSize: 24, fontWeight: 800, color: 'var(--n900)', letterSpacing: '-.02em' }}>What's your {usingEmail ? 'email' : 'mobile number'}?</div>
              <div style={{ fontSize: 13, color: 'var(--n500)', marginTop: 6 }}>We'll send a 6-digit verification code {usingEmail ? 'to your inbox' : 'by SMS'}.</div>
              <Stepper n={2}/>

              <div style={{ marginTop: 28 }}>
                <div style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', marginBottom: 8, fontFamily: 'var(--mono)' }}>{idLabel}</div>
                {usingEmail ? (
                  <div className="row" style={{ gap: 8, padding: '14px 16px', background: '#fff', borderRadius: 14, border: '1.5px solid var(--n100)' }}>
                    <Icon name="mail" size={18} style={{ color: 'var(--n400)' }}/>
                    <input type="email" autoComplete="email" value={identifier} onChange={e => setIdentifier(e.target.value)} placeholder="you@school.in" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, fontWeight: 600, fontFamily: 'inherit' }}/>
                    {idValid && <Icon name="check" size={18} style={{ color: 'var(--success)' }}/>}
                  </div>
                ) : (
                  <div className="row" style={{ gap: 8, padding: '14px 16px', background: '#fff', borderRadius: 14, border: '1.5px solid var(--n100)' }}>
                    <span style={{ fontSize: 15, fontWeight: 700, color: 'var(--n700)' }}>+91</span>
                    <input inputMode="numeric" autoComplete="tel" value={identifier} onChange={e => setIdentifier(e.target.value.replace(/\D/g, '').slice(0, 10))} placeholder="98765 43210" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, fontWeight: 600, fontFamily: 'inherit', letterSpacing: '.05em' }}/>
                    {idValid && <Icon name="check" size={18} style={{ color: 'var(--success)' }}/>}
                  </div>
                )}
              </div>

              <div style={{ flex: 1 }}></div>
              <button disabled={!idValid} onClick={() => setStep('reg-password')} className="btn" style={{ opacity: idValid ? 1 : .5 }}>Continue <Icon name="arrow-right" size={16}/></button>
              <div style={{ fontSize: 11, color: 'var(--n500)', textAlign: 'center', marginTop: 12 }}>Want to use {usingEmail ? 'phone' : 'email'} instead? <button onClick={() => { const v = usingEmail ? 'reg-phone' : 'reg-email'; setIdType(usingEmail ? 'phone' : 'email'); setIdentifier(''); setStep(v); }} style={{ color: 'var(--p600)', fontWeight: 700 }}>Switch</button></div>
            </>
          );
        })()}

        {/* ───── REGISTER · password ───── */}
        {step === 'reg-password' && (
          <>
            <div style={{ marginTop: 24, fontSize: 24, fontWeight: 800, color: 'var(--n900)', letterSpacing: '-.02em' }}>Create a password</div>
            <div style={{ fontSize: 13, color: 'var(--n500)', marginTop: 6 }}>You'll use this with your {idType} to sign in next time.</div>
            <Stepper n={3}/>

            <div style={{ marginTop: 28 }}>
              <div style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', marginBottom: 8, fontFamily: 'var(--mono)' }}>Password</div>
              <div className="row" style={{ gap: 8, padding: '14px 16px', background: '#fff', borderRadius: 14, border: '1.5px solid var(--n100)' }}>
                <Icon name="lock" size={18} style={{ color: 'var(--n400)' }}/>
                <input type={showPwd ? 'text' : 'password'} autoComplete="new-password" value={password} onChange={e => setPassword(e.target.value)} placeholder="At least 8 characters" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, fontWeight: 600, fontFamily: 'inherit' }}/>
                <button onClick={() => setShowPwd(!showPwd)} style={{ color: 'var(--n500)' }}><Icon name={showPwd ? 'eye-off' : 'eye'} size={18}/></button>
              </div>

              {/* Strength meter */}
              <div style={{ marginTop: 12 }}>
                <div className="row" style={{ gap: 4 }}>
                  {[0, 1, 2, 3].map(i => (
                    <div key={i} style={{
                      flex: 1, height: 4, borderRadius: 99,
                      background: pwdStrength > i ? (
                        pwdStrength <= 1 ? 'var(--c500)' :
                        pwdStrength === 2 ? 'var(--warning)' :
                        pwdStrength === 3 ? 'var(--p500)' : 'var(--success)'
                      ) : 'var(--n100)',
                    }}></div>
                  ))}
                </div>
                <div style={{ fontSize: 10.5, color: 'var(--n500)', marginTop: 8, lineHeight: 1.6 }}>
                  {[
                    { ok: password.length >= 8, lab: '8+ characters' },
                    { ok: /[A-Z]/.test(password), lab: 'One uppercase' },
                    { ok: /[0-9]/.test(password), lab: 'One number' },
                    { ok: /[^A-Za-z0-9]/.test(password), lab: 'One symbol' },
                  ].map((r, i) => (
                    <div key={i} className="row" style={{ gap: 6 }}>
                      <Icon name={r.ok ? 'check' : 'circle'} size={12} style={{ color: r.ok ? 'var(--success)' : 'var(--n300)' }}/>
                      <span style={{ color: r.ok ? 'var(--n700)' : 'var(--n500)', textDecoration: r.ok ? 'none' : 'none' }}>{r.lab}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div style={{ flex: 1 }}></div>
            <label className="row" style={{ gap: 10, marginBottom: 14, padding: '10px 12px', background: '#fff', borderRadius: 12, border: '1px solid var(--n100)', cursor: 'pointer' }}>
              <input type="checkbox" checked={agreed} onChange={e => setAgreed(e.target.checked)} style={{ width: 18, height: 18, accentColor: 'var(--p600)' }}/>
              <span style={{ fontSize: 11, color: 'var(--n600)', lineHeight: 1.5, flex: 1 }}>I agree to Scholiq's <b style={{ color: 'var(--n800)' }}>Terms</b> and <b style={{ color: 'var(--n800)' }}>Privacy Policy</b>, and DPDPA-compliant data handling.</span>
            </label>
            <button disabled={pwdStrength < 2 || !agreed} onClick={() => setStep('reg-otp')} className="btn" style={{ opacity: pwdStrength >= 2 && agreed ? 1 : .5 }}>Send verification code <Icon name="arrow-right" size={16}/></button>
          </>
        )}

        {/* ───── REGISTER · OTP gate (verification) ───── */}
        {step === 'reg-otp' && (
          <>
            <div style={{ marginTop: 24, fontSize: 24, fontWeight: 800, color: 'var(--n900)', letterSpacing: '-.02em' }}>Verify your {idType}</div>
            <div style={{ fontSize: 13, color: 'var(--n500)', marginTop: 6 }}>
              We sent a 6-digit code to{' '}
              <b style={{ color: 'var(--n800)' }}>
                {idType === 'phone' ? `+91 ${identifier.replace(/(\d{5})(\d{5})/, '$1 $2')}` : identifier}
              </b>
              {' · '}
              <button onClick={() => setStep(idType === 'email' ? 'reg-email' : 'reg-phone')} style={{ color: 'var(--p600)', fontWeight: 700 }}>Change</button>
            </div>
            <Stepper n={4}/>

            <div className="row" style={{ gap: 8, marginTop: 28, justifyContent: 'space-between' }}>
              {otp.map((d, i) => (
                <input
                  key={i} value={d} maxLength={1} inputMode="numeric"
                  onChange={e => {
                    const v = e.target.value.replace(/\D/g, '');
                    const newOtp = [...otp]; newOtp[i] = v; setOtp(newOtp);
                    if (v && i < 5) document.getElementById(`otp-${i + 1}`)?.focus();
                  }}
                  id={`otp-${i}`}
                  style={{ flex: 1, height: 60, fontSize: 24, fontWeight: 800, textAlign: 'center', fontFamily: 'var(--mono)', background: '#fff', border: `1.5px solid ${d ? 'var(--p400)' : 'var(--n100)'}`, borderRadius: 12, color: 'var(--n900)' }}
                />
              ))}
            </div>

            <div className="card-flat" style={{ marginTop: 18, padding: 12 }}>
              <div className="row" style={{ gap: 10 }}>
                <Icon name="shield" size={16} style={{ color: 'var(--success)', flexShrink: 0 }}/>
                <div style={{ fontSize: 11, color: 'var(--n600)', lineHeight: 1.5, flex: 1 }}>This one-time verification confirms it's really you. We won't ask again unless you sign in from a new device.</div>
              </div>
            </div>

            <div style={{ fontSize: 12, color: 'var(--n500)', marginTop: 16, textAlign: 'center' }}>
              {resend > 0
                ? <>Didn't get it? <b style={{ color: 'var(--n400)' }}>Resend in 0:{String(resend).padStart(2, '0')}</b></>
                : <button onClick={() => setResend(24)} style={{ color: 'var(--p600)', fontWeight: 700 }}>Resend code</button>}
              {idType === 'phone' && <> · <button style={{ color: 'var(--p600)', fontWeight: 700 }}>Call instead</button></>}
            </div>

            <div style={{ flex: 1 }}></div>
            <button disabled={otp.some(d => !d)} onClick={() => setStep('reg-name')} className="btn" style={{ opacity: otp.every(d => d) ? 1 : .5 }}>Verify & continue <Icon name="check" size={16}/></button>
          </>
        )}

        {/* ───── REGISTER · name ───── */}
        {step === 'reg-name' && (
          <>
            <div style={{ marginTop: 24, fontSize: 24, fontWeight: 800, color: 'var(--n900)', letterSpacing: '-.02em' }}>Welcome aboard 👋</div>
            <div style={{ fontSize: 13, color: 'var(--n500)', marginTop: 6 }}>Tell us your name so schools can recognise you on invites.</div>

            <div style={{ marginTop: 28 }}>
              <div style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', marginBottom: 8, fontFamily: 'var(--mono)' }}>Full name</div>
              <div className="row" style={{ gap: 8, padding: '14px 16px', background: '#fff', borderRadius: 14, border: '1.5px solid var(--n100)' }}>
                <Icon name="user" size={18} style={{ color: 'var(--n400)' }}/>
                <input value={name} onChange={e => setName(e.target.value)} placeholder="e.g. Priya Reddy" style={{ flex: 1, border: 'none', outline: 'none', fontSize: 15, fontWeight: 600, fontFamily: 'inherit' }}/>
              </div>
            </div>

            <div className="card-flat" style={{ marginTop: 16, padding: 14 }}>
              <div style={{ fontSize: 10, color: 'var(--n500)', fontWeight: 700, letterSpacing: '.08em', fontFamily: 'var(--mono)' }}>VERIFIED</div>
              <div className="row" style={{ marginTop: 6, gap: 6 }}>
                <Icon name="check" size={14} style={{ color: 'var(--success)' }}/>
                <span style={{ fontSize: 12, color: 'var(--n800)', fontWeight: 600 }}>{idType === 'phone' ? `+91 ${identifier.replace(/(\d{5})(\d{5})/, '$1 $2')}` : identifier}</span>
              </div>
            </div>

            <div style={{ flex: 1 }}></div>
            <button disabled={name.trim().length < 2} onClick={() => setStep('empty')} className="btn" style={{ opacity: name.trim().length >= 2 ? 1 : .5 }}>Get started <Icon name="arrow-right" size={16}/></button>
          </>
        )}

        {/* ───── EMPTY · pending invitation ───── */}
        {step === 'empty' && (
          <>
            <div style={{ marginTop: 36, textAlign: 'center' }}>
              <div style={{ width: 88, height: 88, borderRadius: 26, background: 'var(--p100)', color: 'var(--p700)', display: 'inline-grid', placeItems: 'center', marginBottom: 20 }}><Icon name="users" size={40}/></div>
              <div style={{ fontSize: 24, fontWeight: 800, color: 'var(--n900)', letterSpacing: '-.02em' }}>Add your first team</div>
              <div style={{ fontSize: 13, color: 'var(--n500)', marginTop: 8, lineHeight: 1.55, padding: '0 12px' }}>Schools, tuition centres, and transport operators invite you. Accept an invitation or enter the code your school shared.</div>
            </div>
            <div style={{ flex: 1 }}></div>
            <div className="card" style={{ padding: 0, marginBottom: 12 }}>
              <div className="row" style={{ padding: 16, gap: 12, borderBottom: '1px solid var(--n100)' }}>
                <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--p50)', color: 'var(--p600)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>🏫</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="spread">
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>Delhi Public School, Hyderabad</div>
                    <span className="pill pill-w" style={{ fontSize: 9 }}>PENDING</span>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>Invited as <b style={{ color: 'var(--n800)' }}>Parent</b> · for Aarav Reddy, Class 8-B</div>
                  <div className="row" style={{ gap: 8, marginTop: 10 }}>
                    <button className="btn-sm" style={{ flex: 1, height: 32, background: 'var(--p600)', color: '#fff', fontSize: 11, fontWeight: 700, borderRadius: 8 }}>Accept</button>
                    <button className="btn-sm btn-ghost" style={{ height: 32, padding: '0 12px', fontSize: 11 }}>Decline</button>
                  </div>
                </div>
              </div>
            </div>
            <button className="btn btn-outline"><Icon name="key" size={16}/> Enter invitation code</button>
            <div style={{ fontSize: 11, color: 'var(--n500)', textAlign: 'center', marginTop: 14, lineHeight: 1.5 }}>Want to register your school?<br/><b style={{ color: 'var(--p600)' }}>Contact Scholiq onboarding →</b></div>
          </>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ANITHA — Teacher-Parent Dual Home
// ─────────────────────────────────────────────────────────────
function TeacherParentHome({ nav, onSwitch }) {
  const [view, setView] = useStateT('teacher'); // 'teacher' | 'parent' | 'merged'
  const team = { name: 'DPS Hyderabad', kind: 'School', glyph: '🏫', bg: 'var(--p50)', clr: 'var(--p600)' };
  return (
    <div className="app screen-in">
      <StatusBar/>
      <div className="app-body no-pad">
        <TeamHeader team={team} onSwitch={onSwitch} onSearch={() => nav.push('search')} onNotif={() => nav.push('notifications')} badge={5}/>

        {/* Dual-role hero */}
        <div style={{ padding: '4px 20px 16px' }}>
          <div className="row" style={{ gap: 10 }}>
            <div className="av av-44" style={{ background: 'var(--p100)', color: 'var(--p700)' }}>A</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 600 }}>Good morning, Anitha</div>
              <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--n900)', letterSpacing: '-.01em' }}>Teacher · Parent</div>
            </div>
          </div>

          {/* Role toggle */}
          <div style={{ marginTop: 14, padding: 4, background: 'var(--n100)', borderRadius: 12, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 4 }}>
            {[
              { id: 'teacher', lab: '👩‍🏫 Teacher' },
              { id: 'parent', lab: '👨‍👩‍👧 Parent' },
              { id: 'merged', lab: '✨ Merged' },
            ].map(o => (
              <button key={o.id} onClick={() => setView(o.id)} style={{
                padding: '8px 6px', borderRadius: 9, fontSize: 12, fontWeight: 700,
                background: view === o.id ? '#fff' : 'transparent',
                color: view === o.id ? 'var(--n900)' : 'var(--n600)',
                boxShadow: view === o.id ? '0 1px 3px rgba(0,0,0,.08)' : 'none',
              }}>{o.lab}</button>
            ))}
          </div>
          <div style={{ fontSize: 10.5, color: 'var(--n500)', marginTop: 8, textAlign: 'center', lineHeight: 1.4 }}>
            {view === 'teacher' && 'Showing your Class 5-A teaching dashboard'}
            {view === 'parent' && "Showing what's happening with Maya (Class 2-B)"}
            {view === 'merged' && 'Combined feed · roles labeled per item'}
          </div>
        </div>

        {/* TEACHER VIEW */}
        {view === 'teacher' && (
          <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="card-grad" style={{ padding: 16 }}>
              <div style={{ fontSize: 10, opacity: .85, fontFamily: 'var(--mono)', letterSpacing: '.08em', fontWeight: 700 }}>NEXT CLASS · 9:15 AM</div>
              <div style={{ fontSize: 22, fontWeight: 800, marginTop: 4, letterSpacing: '-.02em' }}>5-A Mathematics</div>
              <div style={{ fontSize: 12, opacity: .9, marginTop: 2 }}>32 students · Room 204 · in 18 min</div>
              <button className="row" style={{ marginTop: 14, padding: '10px 14px', background: 'rgba(255,255,255,.2)', borderRadius: 10, gap: 10, color: '#fff' }}>
                <Icon name="check" size={16}/> Take attendance <Icon name="arrow-right" size={14} style={{ marginLeft: 'auto' }}/>
              </button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10 }}>
              {[
                { v: '12', l: 'To grade', clr: 'var(--c600)', bg: 'var(--c50)' },
                { v: '4', l: 'Classes today', clr: 'var(--p600)', bg: 'var(--p50)' },
                { v: '32', l: 'Students · 5-A', clr: '#1E40AF', bg: 'var(--info-50)' },
                { v: '94%', l: 'Avg attendance', clr: 'var(--success)', bg: 'var(--success-50)' },
              ].map((s, i) => (
                <div key={i} className="card" style={{ padding: 14 }}>
                  <div style={{ width: 28, height: 28, borderRadius: 8, background: s.bg, color: s.clr, display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 800 }}>{s.v.replace('%', '')}</div>
                  <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--n900)', marginTop: 12, letterSpacing: '-.02em' }}>{s.v}</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 1 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* PARENT VIEW */}
        {view === 'parent' && (
          <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="card-grad-coral" style={{ padding: 16 }}>
              <div style={{ fontSize: 10, opacity: .85, fontFamily: 'var(--mono)', letterSpacing: '.08em', fontWeight: 700 }}>YOUR DAUGHTER · MAYA</div>
              <div style={{ fontSize: 22, fontWeight: 800, marginTop: 4 }}>Class 2-B · ✓ In school</div>
              <div style={{ fontSize: 12, opacity: .9, marginTop: 2 }}>Marked present at 8:42 AM by Mrs. Iyer</div>
              <div className="row" style={{ gap: 8, marginTop: 14 }}>
                <span className="pill" style={{ background: 'rgba(255,255,255,.22)', color: '#fff', border: 'none' }}>📚 2 homework</span>
                <span className="pill" style={{ background: 'rgba(255,255,255,.22)', color: '#fff', border: 'none' }}>🎨 Art at 11</span>
              </div>
            </div>
            <div className="card" style={{ padding: 14 }}>
              <div className="spread"><b style={{ fontSize: 13, color: 'var(--n900)' }}>Note from Mrs. Iyer (English)</b><span style={{ fontSize: 10, color: 'var(--n400)' }}>2h</span></div>
              <div style={{ fontSize: 12, color: 'var(--n600)', marginTop: 6, lineHeight: 1.5 }}>"Maya read a paragraph aloud beautifully today. Please encourage daily reading at home."</div>
              <div className="row" style={{ gap: 6, marginTop: 10 }}>
                <span className="pill pill-w" style={{ fontSize: 9 }}>⚠ Permission scope</span>
                <span style={{ fontSize: 10, color: 'var(--n500)' }}>You see this as Maya's parent only</span>
              </div>
            </div>
          </div>
        )}

        {/* MERGED VIEW */}
        {view === 'merged' && (
          <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { tag: 'TEACHER', clr: 'var(--p600)', bg: 'var(--p50)', t: 'Next class · 5-A Math', s: '9:15 AM · Room 204', time: '18m' },
              { tag: 'PARENT', clr: 'var(--c600)', bg: 'var(--c50)', t: 'Maya marked present', s: 'Mrs. Iyer · 8:42 AM', time: '1h' },
              { tag: 'TEACHER', clr: 'var(--p600)', bg: 'var(--p50)', t: '12 papers awaiting grading', s: '5-A Algebra UT-2', time: '2h' },
              { tag: 'PARENT', clr: 'var(--c600)', bg: 'var(--c50)', t: '2 homework due tomorrow', s: 'Maya · English & Math', time: '3h' },
              { tag: 'TEACHER', clr: 'var(--p600)', bg: 'var(--p50)', t: 'Aarav R. submitted Ex. 7.3', s: '5-A · 4h ago', time: '4h' },
            ].map((it, i) => (
              <div key={i} className="card row" style={{ padding: 12, gap: 12 }}>
                <span style={{ width: 64, fontSize: 9, fontWeight: 800, padding: '4px 8px', background: it.bg, color: it.clr, borderRadius: 99, letterSpacing: '.08em', textAlign: 'center', alignSelf: 'flex-start', flexShrink: 0 }}>{it.tag}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="spread"><div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{it.t}</div><span style={{ fontSize: 10, color: 'var(--n400)' }}>{it.time}</span></div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>{it.s}</div>
                </div>
              </div>
            ))}
          </div>
        )}

        <div className="card-flat" style={{ margin: '20px 20px 0', padding: 14 }}>
          <div className="row" style={{ gap: 10 }}>
            <Icon name="shield" size={16} style={{ color: 'var(--success)' }}/>
            <div style={{ fontSize: 11, color: 'var(--n600)', flex: 1, lineHeight: 1.5 }}>Permissions stay separate. As a teacher you see 5-A only; as Maya's parent you see only Maya.</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PRIYA — Transport Operator Owner Home (Sai Travels)
// ─────────────────────────────────────────────────────────────
function TransportOpHome({ nav, onSwitch, membership }) {
  const team = { name: 'Sai Travels', kind: 'Transport provider', glyph: '🚌', bg: '#FFF7ED', clr: '#9A3412' };
  return (
    <div className="app screen-in">
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 60 }}><StatusBar dark/></div>
      <div className="app-body no-pad" style={{ paddingBottom: 84 }}>
        {/* Operator hero — matches parent/student/teacher hero pattern */}
        <div className="head-grad" style={{ background: 'linear-gradient(135deg,#0F172A 0%,#1E293B 60%,#9A3412 100%)', paddingTop: 56 }}>
          {membership && onSwitch && (
            <div className="row" style={{ marginBottom: 14 }}>
              <MembershipChip membership={membership} onTap={onSwitch} variant="dark"/>
            </div>
          )}
          <div className="spread" style={{ marginBottom: 16 }}>
            <div>
              <div style={{ fontSize: 12, opacity: .85, fontWeight: 500 }}>Tuesday · 14 March</div>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.02em', marginTop: 2 }}>Fleet operations</div>
              <div style={{ fontSize: 11, opacity: .85, marginTop: 2 }}>4 contracts · 18 buses · 22 drivers</div>
            </div>
            <div className="row" style={{ gap: 8 }}>
              <button onClick={() => nav.push('search')} style={{ width: 38, height: 38, borderRadius: 12, background: 'rgba(255,255,255,.18)', display: 'grid', placeItems: 'center', color: '#fff' }}><Icon name="search" size={18}/></button>
              <button onClick={() => nav.push('notifications')} style={{ width: 38, height: 38, borderRadius: 12, background: 'rgba(255,255,255,.18)', display: 'grid', placeItems: 'center', color: '#fff', position: 'relative' }}>
                <Icon name="bell" size={18}/>
                <span style={{ position: 'absolute', top: 8, right: 8, width: 8, height: 8, borderRadius: 99, background: 'var(--c500)' }}></span>
              </button>
            </div>
          </div>
          {/* Live ops glass card */}
          <div style={{ background: 'rgba(255,255,255,.14)', backdropFilter: 'blur(12px)', border: '1px solid rgba(255,255,255,.2)', borderRadius: 18, padding: '14px 16px' }}>
            <div className="row" style={{ gap: 6 }}>
              <span className="dot" style={{ background: '#10B981', boxShadow: '0 0 0 4px rgba(16,185,129,.2)' }}></span>
              <div style={{ fontSize: 10, fontFamily: 'var(--mono)', letterSpacing: '.08em', fontWeight: 700 }}>LIVE · MORNING ROUTE</div>
            </div>
            <div style={{ fontSize: 26, fontWeight: 800, marginTop: 6, letterSpacing: '-.02em' }}>14 / 18 buses running</div>
            <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid rgba(255,255,255,.18)', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
              {[
                { v: '562', l: 'Boarded' },
                { v: '38', l: 'Awaiting' },
                { v: '0', l: 'Incidents' },
              ].map((s, i) => (
                <div key={i} style={{ borderRight: i < 2 ? '1px solid rgba(255,255,255,.18)' : 'none', paddingRight: 10 }}>
                  <div style={{ fontSize: 22, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{s.v}</div>
                  <div style={{ fontSize: 10, opacity: .8, marginTop: 2, fontWeight: 600 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Schools served */}
        <div style={{ padding: '20px 20px 0' }}>
          <SH title="Schools you serve" right={<button onClick={() => nav.push('opSchools')} className="btn-ghost" style={{ fontSize: 11 }}>4 contracts</button>}/>
          <div style={{ display: 'flex', gap: 10, overflowX: 'auto', margin: '0 -20px', padding: '0 20px 4px' }}>
            {[
              { name: 'DPS Hyderabad', students: 142, buses: 5, clr: '#1E40AF', bg: 'var(--info-50)' },
              { name: 'Vidyaranya', students: 188, buses: 6, clr: 'var(--success)', bg: 'var(--success-50)' },
              { name: 'Oakridge Intl.', students: 124, buses: 4, clr: 'var(--c600)', bg: 'var(--c50)' },
              { name: 'Chirec Public', students: 146, buses: 3, clr: '#8B5CF6', bg: '#FAF5FF' },
            ].map((s, i) => (
              <button key={i} onClick={() => nav.push('opSchools')} style={{ flexShrink: 0, width: 152, padding: 14, background: '#fff', border: '1px solid var(--n100)', borderRadius: 14, textAlign: 'left' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: s.bg, color: s.clr, display: 'grid', placeItems: 'center', fontSize: 14, fontWeight: 800 }}>{s.name.charAt(0)}</div>
                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--n900)', marginTop: 10, lineHeight: 1.3 }}>{s.name}</div>
                <div className="spread" style={{ marginTop: 8 }}>
                  <div><div style={{ fontSize: 14, fontWeight: 800, color: 'var(--n900)', fontVariantNumeric: 'tabular-nums' }}>{s.students}</div><div style={{ fontSize: 9, color: 'var(--n500)', fontWeight: 600 }}>RIDERS</div></div>
                  <div><div style={{ fontSize: 14, fontWeight: 800, color: 'var(--n900)', fontVariantNumeric: 'tabular-nums' }}>{s.buses}</div><div style={{ fontSize: 9, color: 'var(--n500)', fontWeight: 600 }}>BUSES</div></div>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* Quick modules */}
        <div style={{ padding: '20px 20px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
            {[
              { ic: 'bus', lab: 'Vehicles', sub: '18', clr: '#9A3412', bg: '#FFF7ED', dest: 'opFleet' },
              { ic: 'users', lab: 'Drivers', sub: '22', clr: 'var(--p600)', bg: 'var(--p50)', dest: 'opDrivers' },
              { ic: 'pin', lab: 'Routes', sub: '24', clr: 'var(--success)', bg: 'var(--success-50)', dest: 'opRoutes' },
              { ic: 'alert', lab: 'Incidents', sub: '4', clr: 'var(--c600)', bg: 'var(--c50)', dest: 'opIncidents' },
            ].map((q, i) => (
              <button key={i} onClick={() => nav.push(q.dest)} className="card" style={{ padding: 12, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: q.bg, color: q.clr, display: 'grid', placeItems: 'center' }}><Icon name={q.ic} size={18}/></div>
                <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--n900)', fontVariantNumeric: 'tabular-nums', letterSpacing: '-.02em' }}>{q.sub}</div>
                <div style={{ fontSize: 10, color: 'var(--n500)', fontWeight: 600 }}>{q.lab}</div>
              </button>
            ))}
          </div>
        </div>

        {/* Vehicle health */}
        <div style={{ padding: '20px 20px 0' }}>
          <SH title="Vehicle health" right={<button onClick={() => nav.push('opFleet')} className="btn-ghost" style={{ fontSize: 11 }}>All 18</button>}/>
          <div className="card" style={{ padding: 0 }}>
            {[
              { id: 'TS09 EQ 4421', sch: 'DPS Hyderabad', driver: 'Ramesh K.', state: 'On route', stateBg: 'var(--success-50)', stateClr: 'var(--success)', dot: '#10B981' },
              { id: 'TS09 GH 8821', sch: 'Vidyaranya', driver: 'Suresh M.', state: 'Boarding', stateBg: 'var(--p50)', stateClr: 'var(--p600)', dot: 'var(--p600)' },
              { id: 'TS09 BC 1102', sch: 'Oakridge', driver: 'Anand P.', state: 'Service due', stateBg: 'var(--warning-50)', stateClr: 'var(--warning)', dot: 'var(--warning)' },
              { id: 'TS09 KL 6655', sch: 'Chirec', driver: 'Mohan R.', state: 'Garage', stateBg: 'var(--n100)', stateClr: 'var(--n600)', dot: 'var(--n400)' },
            ].map((b, i, arr) => (
              <button key={i} onClick={() => nav.push('opFleet')} className="row" style={{ padding: 14, gap: 12, borderBottom: i < arr.length - 1 ? '1px solid var(--n100)' : 'none', width: '100%', textAlign: 'left', background: 'transparent', border: 'none' }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--n50)', color: 'var(--n700)', display: 'grid', placeItems: 'center', fontSize: 18 }}>🚌</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="spread">
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)', fontFamily: 'var(--mono)' }}>{b.id}</div>
                    <span style={{ fontSize: 10, padding: '3px 8px', background: b.stateBg, color: b.stateClr, borderRadius: 99, fontWeight: 700 }}><span className="dot" style={{ background: b.dot, marginRight: 4 }}></span>{b.state}</span>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>{b.sch} · driver {b.driver}</div>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* Revenue snapshot */}
        <div style={{ padding: '20px 20px 0' }}>
          <button onClick={() => nav.push('opRevenue')} className="card" style={{ padding: 16, width: '100%', textAlign: 'left', background: 'linear-gradient(135deg, #fff 0%, #FFF7ED 100%)' }}>
            <div className="row">
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 10, color: 'var(--n500)', fontFamily: 'var(--mono)', fontWeight: 700, letterSpacing: '.06em' }}>MAR REVENUE · ALL CONTRACTS</div>
                <div style={{ fontSize: 24, fontWeight: 800, color: 'var(--n900)', marginTop: 4, fontVariantNumeric: 'tabular-nums', letterSpacing: '-.02em' }}>₹23.5L</div>
                <div className="row" style={{ gap: 8, marginTop: 4, fontSize: 11, color: 'var(--n600)' }}>
                  <span style={{ color: 'var(--success)', fontWeight: 700 }}>↑ 7%</span><span>vs Feb</span><span>·</span><span>1 unpaid · ₹62k</span>
                </div>
              </div>
              <Icon name="chev-r" size={16} style={{ color: 'var(--n400)' }}/>
            </div>
          </button>
        </div>

        <div style={{ padding: '20px 20px 0' }}>
          <div className="card-flat" style={{ padding: 14 }}>
            <div className="row" style={{ gap: 10 }}>
              <Icon name="shield" size={16} style={{ color: 'var(--p600)' }}/>
              <div style={{ fontSize: 11, color: 'var(--n600)', flex: 1, lineHeight: 1.5 }}>You see riders from each school's transport opt-ins only — never academic data.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ARJUN — Driver Day View
// ─────────────────────────────────────────────────────────────
function DriverHome({ nav, onSwitch, membership }) {
  const [tripState, setTripState] = useStateT('idle'); // idle | running
  const stops = [
    { name: 'School (depot)', time: '07:30', kids: 0, school: '', state: 'depot' },
    { name: 'Madhapur Junction', time: '07:42', kids: 4, school: 'DPS', state: tripState === 'running' ? 'done' : 'next' },
    { name: 'Hi-Tech City', time: '07:54', kids: 6, school: 'DPS · Vidyaranya', state: tripState === 'running' ? 'now' : 'next' },
    { name: 'Kondapur', time: '08:02', kids: 5, school: 'Vidyaranya', state: 'next' },
    { name: 'Botanical Gardens', time: '08:12', kids: 3, school: 'Oakridge', state: 'next' },
    { name: 'Gachibowli (last)', time: '08:20', kids: 4, school: 'Chirec', state: 'next' },
  ];
  return (
    <div className="app screen-in">
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 60 }}><StatusBar dark/></div>
      <div className="app-body no-pad">
        <div className="head-grad" style={{ background: 'linear-gradient(135deg,#1E40AF 0%,#0F172A 100%)', paddingTop: 56 }}>
          {membership && onSwitch && (
            <div className="row" style={{ marginBottom: 14 }}>
              <MembershipChip membership={membership} onTap={onSwitch} variant="dark"/>
            </div>
          )}
          <div className="spread" style={{ marginBottom: 16 }}>
            <div>
              <div style={{ fontSize: 12, opacity: .85, fontWeight: 500 }}>Tuesday · 14 March</div>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.02em', marginTop: 2 }}>Good morning, Arjun</div>
              <div style={{ fontSize: 11, opacity: .85, marginTop: 2 }}>Bus TS09 EQ 4421 · 22 students · 4 schools</div>
            </div>
            <button onClick={() => nav.push('notifications')} style={{ width: 38, height: 38, borderRadius: 12, background: 'rgba(255,255,255,.18)', display: 'grid', placeItems: 'center', color: '#fff', position: 'relative' }}>
              <Icon name="bell" size={18}/>
              <span style={{ position: 'absolute', top: 8, right: 8, width: 8, height: 8, borderRadius: 99, background: 'var(--c500)' }}></span>
            </button>
          </div>
          <div style={{ background: 'rgba(255,255,255,.14)', backdropFilter: 'blur(12px)', border: '1px solid rgba(255,255,255,.2)', borderRadius: 18, padding: '14px 16px' }}>
            <div className="row" style={{ gap: 6 }}>
              <span className="dot" style={{ background: tripState === 'running' ? '#10B981' : '#fff', boxShadow: tripState === 'running' ? '0 0 0 4px rgba(16,185,129,.2)' : 'none' }}></span>
              <div style={{ fontSize: 10, fontFamily: 'var(--mono)', letterSpacing: '.08em', fontWeight: 700, opacity: .9 }}>{tripState === 'running' ? 'TRIP IN PROGRESS' : 'ROUTE 14 · MORNING'}</div>
            </div>
            <div style={{ fontSize: 22, fontWeight: 800, marginTop: 4, letterSpacing: '-.02em' }}>22 students · 5 stops</div>
            <div style={{ fontSize: 12, opacity: .9, marginTop: 2 }}>Next: Madhapur Junction · 07:42</div>
            {tripState === 'idle' ? (
              <button onClick={() => setTripState('running')} className="row" style={{ marginTop: 16, padding: '14px 16px', background: '#fff', color: 'var(--p700)', borderRadius: 12, gap: 10, fontWeight: 800, fontSize: 14, justifyContent: 'center', width: '100%' }}>
                <Icon name="play" size={18}/> Start trip
              </button>
            ) : (
              <div className="row" style={{ marginTop: 16, gap: 8 }}>
                <button style={{ flex: 1, padding: '12px', background: 'rgba(255,255,255,.2)', color: '#fff', borderRadius: 12, fontWeight: 700, fontSize: 12 }}><Icon name="alert" size={14}/> Report issue</button>
                <button onClick={() => setTripState('idle')} style={{ flex: 1, padding: '12px', background: '#fff', color: 'var(--p700)', borderRadius: 12, fontWeight: 700, fontSize: 12 }}><Icon name="check" size={14}/> End trip</button>
              </div>
            )}
          </div>
        </div>

        {/* Stops */}
        <div style={{ padding: '20px' }}>
          <SH title="Today's stops"/>
          <div className="card" style={{ padding: 16, position: 'relative' }}>
            <div style={{ position: 'absolute', left: 27, top: 24, bottom: 24, width: 2, background: 'var(--n100)' }}></div>
            {stops.map((s, i) => (
              <div key={i} className="row" style={{ gap: 14, padding: '10px 0', position: 'relative', zIndex: 1 }}>
                <div style={{
                  width: 16, height: 16, borderRadius: 99, flexShrink: 0,
                  background: s.state === 'now' ? 'var(--p600)' : s.state === 'done' ? 'var(--success)' : s.state === 'depot' ? 'var(--n400)' : '#fff',
                  border: s.state === 'next' ? '2px solid var(--n200)' : '0',
                  boxShadow: s.state === 'now' ? '0 0 0 4px var(--p100)' : 'none',
                  display: 'grid', placeItems: 'center', color: '#fff', fontSize: 9,
                }}>{s.state === 'done' && '✓'}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="spread">
                    <div style={{ fontSize: 13, fontWeight: 700, color: s.state === 'done' ? 'var(--n400)' : 'var(--n900)', textDecoration: s.state === 'done' ? 'line-through' : 'none' }}>{s.name}</div>
                    <div style={{ fontSize: 11, fontFamily: 'var(--mono)', fontWeight: 700, color: 'var(--n500)' }}>{s.time}</div>
                  </div>
                  {s.kids > 0 && (
                    <div className="row" style={{ gap: 6, marginTop: 4 }}>
                      <span style={{ fontSize: 10, color: 'var(--n500)' }}>{s.kids} kids · {s.school}</span>
                      {s.state === 'now' && <span className="pill pill-p" style={{ fontSize: 9 }}>BOARDING</span>}
                    </div>
                  )}
                </div>
                {s.state === 'now' && (
                  <button className="btn-sm" style={{ background: 'var(--p600)', color: '#fff', height: 30, padding: '0 12px', fontSize: 11, fontWeight: 700, borderRadius: 8 }}>Mark <Icon name="check" size={11}/></button>
                )}
              </div>
            ))}
          </div>
        </div>

        <div style={{ padding: '0 20px 20px', display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10 }}>
          <button className="card row" style={{ padding: 14, gap: 10 }}>
            <Icon name="phone" size={20} style={{ color: 'var(--success)' }}/>
            <div style={{ textAlign: 'left', flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--n900)' }}>Call dispatch</div>
              <div style={{ fontSize: 10, color: 'var(--n500)' }}>Sai Travels ops</div>
            </div>
          </button>
          <button className="card row" style={{ padding: 14, gap: 10 }}>
            <Icon name="bus" size={20} style={{ color: 'var(--p600)' }}/>
            <div style={{ textAlign: 'left', flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--n900)' }}>Vehicle log</div>
              <div style={{ fontSize: 10, color: 'var(--n500)' }}>Pre-trip checks</div>
            </div>
          </button>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SURESH — Multi-school parent dashboard
// ─────────────────────────────────────────────────────────────
function MultiSchoolHome({ nav, onSwitch }) {
  const team = { name: 'Combined view', kind: '2 schools · 2 children', glyph: '👨‍👩‍👧', bg: 'var(--p50)', clr: 'var(--p600)' };
  return (
    <div className="app screen-in">
      <StatusBar/>
      <div className="app-body no-pad">
        <TeamHeader team={team} onSwitch={onSwitch} onSearch={() => nav.push('search')} onNotif={() => nav.push('notifications')} badge={4}/>

        <div style={{ padding: '4px 20px 16px' }}>
          <div style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 600 }}>Good morning, Suresh</div>
          <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--n900)', letterSpacing: '-.02em', marginTop: 2 }}>Both schools · today</div>
        </div>

        {/* Per-school cards */}
        <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            { sch: 'Vidyaranya High', kid: 'Aarav · Class 9', cls: 'TS state board', dueAmt: '₹14,200', dueLab: 'Term 2 · in 8 days', clr: 'var(--p600)', bg: 'var(--p50)', glyph: '🏫', items: ['Math test today', 'Bus on route'] },
            { sch: 'DPS Hyderabad', kid: 'Maya · Class 5', cls: 'CBSE', dueAmt: '₹0', dueLab: 'Up to date', clr: 'var(--c600)', bg: 'var(--c50)', glyph: '🏫', items: ['PTM slot Sat', 'Art exhibit selected'] },
          ].map((s, i) => (
            <div key={i} className="card" style={{ padding: 16 }}>
              <div className="row" style={{ gap: 10 }}>
                <div style={{ width: 40, height: 40, borderRadius: 11, background: s.bg, color: s.clr, display: 'grid', placeItems: 'center', fontSize: 18 }}>{s.glyph}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{s.sch}</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)' }}>{s.kid} · {s.cls}</div>
                </div>
                <span style={{ fontSize: 10, padding: '3px 8px', background: s.bg, color: s.clr, borderRadius: 99, fontWeight: 700 }}>{s.dueAmt}</span>
              </div>
              <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 8 }}>{s.dueLab}</div>
              <div className="row" style={{ gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
                {s.items.map((it, ii) => <span key={ii} className="pill">{it}</span>)}
              </div>
              <div className="row" style={{ gap: 8, marginTop: 12, paddingTop: 12, borderTop: '1px dashed var(--n100)' }}>
                <button className="btn-sm btn-soft" style={{ flex: 1, height: 32, fontSize: 11 }}>Open {s.sch.split(' ')[0]}</button>
                <button className="btn-sm btn-ghost" style={{ height: 32, padding: '0 12px', fontSize: 11 }}>Pay</button>
              </div>
            </div>
          ))}
        </div>

        {/* Combined payments */}
        <div style={{ padding: '20px 20px 0' }}>
          <SH title="Combined payments" right={<button className="btn-ghost" style={{ fontSize: 11 }}>History</button>}/>
          <div className="card-grad" style={{ padding: 16 }}>
            <div style={{ fontSize: 10, opacity: .85, fontFamily: 'var(--mono)', letterSpacing: '.08em', fontWeight: 700 }}>OUTSTANDING ACROSS SCHOOLS</div>
            <div style={{ fontSize: 30, fontWeight: 800, marginTop: 4, fontVariantNumeric: 'tabular-nums', letterSpacing: '-.02em' }}>₹14,200</div>
            <div style={{ fontSize: 11, opacity: .9, marginTop: 2 }}>Vidyaranya · Aarav · due 22 Mar</div>
            <button onClick={() => nav.push('pay')} style={{ marginTop: 14, padding: '10px 14px', background: '#fff', color: 'var(--p700)', borderRadius: 10, fontWeight: 800, fontSize: 13, width: '100%' }}>Pay now <Icon name="arrow-right" size={14}/></button>
          </div>
        </div>

        <div style={{ padding: '20px' }}>
          <div className="card-flat" style={{ padding: 14 }}>
            <div className="row" style={{ gap: 10 }}>
              <Icon name="info" size={16} style={{ color: 'var(--p600)' }}/>
              <div style={{ fontSize: 11, color: 'var(--n600)', flex: 1, lineHeight: 1.5 }}>Each school's data stays separate. Notifications are tagged so you always know which school they're from.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Export
Object.assign(window, {
  TeamSwitcherSheet, TeamHeader,
  OnboardingScreen, TeacherParentHome, TransportOpHome, DriverHome, MultiSchoolHome,
});