// Mobile screen building blocks - parent and teacher flows

// ─── Status pill ──────────────────────────────────────────────
function StatusDot({ tone = 'success', size = 8 }) {
  const colors = { success: 'var(--gk-success)', warn: 'var(--gk-warn)', danger: 'var(--gk-danger)', neutral: 'var(--gk-stone-300)' };
  return <span style={{ width: size, height: size, borderRadius: '50%', background: colors[tone], display: 'inline-block', flexShrink: 0 }}/>;
}

// ─── Mobile tab bar ───────────────────────────────────────────
function MobileTabBar({ active, onTab, tabs }) {
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 20,
      background: 'color-mix(in oklch, var(--surface) 92%, transparent)',
      backdropFilter: 'blur(24px) saturate(180%)',
      WebkitBackdropFilter: 'blur(24px) saturate(180%)',
      borderTop: '0.5px solid var(--border)',
      padding: '10px 8px 30px',
      display: 'flex', justifyContent: 'space-around',
    }}>
      {tabs.map(t => (
        <button key={t.id} onClick={() => onTab(t.id)} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          padding: '6px 14px', borderRadius: 10,
          color: active === t.id ? 'var(--accent)' : 'var(--text-muted)',
          transition: 'color 150ms',
        }}>
          <Icon name={t.icon} size={22} strokeWidth={active === t.id ? 2.2 : 1.75}/>
          <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: 0.2 }}>{t.label}</span>
        </button>
      ))}
    </div>
  );
}

// ─── Parent: Login / OTP screen ───────────────────────────────
function ParentLoginScreen({ step = 'phone' }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: 'linear-gradient(180deg, var(--accent-soft) 0%, var(--bg) 45%)',
      padding: '80px 24px 40px', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ marginTop: 24, marginBottom: 32 }}>
        <GurukoolLogo size={40}/>
      </div>
      <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 600, letterSpacing: -0.5, margin: '0 0 8px', lineHeight: 1.1 }}>
        {step === 'phone' ? 'Welcome back' : step === 'otp' ? 'Check your SMS' : 'Set a password'}
      </h1>
      <p style={{ fontSize: 15, color: 'var(--text-soft)', margin: '0 0 32px', lineHeight: 1.5 }}>
        {step === 'phone' && 'Enter your school code and phone number to receive a one-time passcode.'}
        {step === 'otp' && 'We sent a 6-digit code to +91 98765 43210.'}
        {step === 'pwd' && 'Create a password you\'ll remember — 8+ characters with one symbol.'}
      </p>

      {step === 'phone' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Input label="School code" leftIcon="building" placeholder="6-digit code" defaultValue="482601"/>
          <Input label="Parent phone" leftIcon="user" placeholder="+91 ..." defaultValue="+91 98765 43210"/>
          <Button variant="primary" size="lg" block rightIcon="arrowRight" style={{ marginTop: 12 }}>Send OTP</Button>
        </div>
      )}
      {step === 'otp' && (
        <div>
          <div style={{ display: 'flex', gap: 10, marginBottom: 24 }}>
            {['4','8','2','6','0','1'].map((d,i)=>(
              <div key={i} style={{
                flex: 1, height: 56, borderRadius: 12,
                border: `2px solid ${i === 5 ? 'var(--accent)' : 'var(--border)'}`,
                background: 'var(--surface)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600,
                color: i < 5 ? 'var(--text)' : 'var(--text-muted)',
              }}>{i < 5 ? d : '|'}</div>
            ))}
          </div>
          <Button variant="primary" size="lg" block>Verify</Button>
          <div style={{ textAlign: 'center', marginTop: 20, fontSize: 13, color: 'var(--text-muted)' }}>
            Didn't receive? <span style={{ color: 'var(--accent)', fontWeight: 600 }}>Resend in 0:42</span>
          </div>
        </div>
      )}
      {step === 'pwd' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Input label="New password" leftIcon="lock" placeholder="Min 8 chars" type="password" defaultValue="••••••••"/>
          <Input label="Confirm" leftIcon="lock" placeholder="Re-enter" type="password" defaultValue="••••••••"/>
          <Button variant="primary" size="lg" block style={{ marginTop: 12 }}>Continue</Button>
        </div>
      )}

      <div style={{ flex: 1 }}/>
      <div style={{ textAlign: 'center', fontSize: 12, color: 'var(--text-muted)', marginTop: 24 }}>
        By continuing you agree to Gurukool's terms & privacy policy.
      </div>
    </div>
  );
}

// ─── Parent: Home dashboard ───────────────────────────────────
function ParentHomeScreen({ lang = 'en' }) {
  const t = (en, hi, gu) => lang === 'hi' ? hi : lang === 'gu' ? gu : en;
  return (
    <div style={{ width: '100%', minHeight: '100%', background: 'var(--bg)', paddingBottom: 100 }}>
      {/* Header */}
      <div style={{ background: 'linear-gradient(160deg, var(--accent-soft) 0%, var(--bg) 80%)', padding: '60px 20px 24px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
          <div>
            <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{t('Good morning', 'सुप्रभात', 'સુપ્રભાત')}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, letterSpacing: -0.4 }}>
              {t('Priya Patel', 'प्रिया पटेल', 'પ્રિયા પટેલ')}
            </div>
          </div>
          <div style={{ position: 'relative', padding: 10, background: 'var(--surface)', borderRadius: 14, border: '1px solid var(--border)' }}>
            <Icon name="bell" size={20}/>
            <div style={{ position: 'absolute', top: 6, right: 6, width: 8, height: 8, background: 'var(--gk-danger)', borderRadius: '50%' }}/>
          </div>
        </div>

        {/* Child switcher */}
        <div style={{ display: 'flex', gap: 10, overflow: 'auto', paddingBottom: 4 }}>
          {[
            { n: 'Aanya', g: 'Grade 5A', sel: true },
            { n: 'Arjun', g: 'Grade 2B', sel: false },
          ].map(c => (
            <div key={c.n} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '8px 14px 8px 8px', borderRadius: 999,
              background: c.sel ? 'var(--accent)' : 'var(--surface)',
              color: c.sel ? '#fff' : 'var(--text)',
              border: c.sel ? 'none' : '1px solid var(--border)',
              boxShadow: c.sel ? 'var(--sh-sm)' : 'none',
            }}>
              <Avatar name={c.n} size={28}/>
              <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.15 }}>
                <span style={{ fontSize: 13, fontWeight: 600 }}>{c.n}</span>
                <span style={{ fontSize: 10, opacity: 0.75 }}>{c.g}</span>
              </div>
            </div>
          ))}
          <button style={{
            width: 44, height: 44, borderRadius: 22, background: 'transparent',
            border: '1.5px dashed var(--border-strong)', color: 'var(--text-muted)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><Icon name="plus" size={18}/></button>
        </div>
      </div>

      <div style={{ padding: '0 20px', display: 'flex', flexDirection: 'column', gap: 16 }}>

        {/* Today card */}
        <Card padding={18}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: 'var(--text-muted)' }}>
              {t('Today · Wed 15 Apr', 'आज · बुध 15 अप्रैल', 'આજે · બુધ 15 એપ્રિલ')}
            </div>
            <Badge tone="success">{t('Present', 'उपस्थित', 'હાજર')}</Badge>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
            {[
              { i: 'book', v: '3', l: t('Homework', 'गृहकार्य', 'ગૃહકાર્ય') },
              { i: 'star', v: '5', l: t('Behaviour', 'व्यवहार', 'વર્તન') },
              { i: 'focus', v: '35m', l: t('Focus', 'फोकस', 'ફોકસ') },
            ].map(s => (
              <div key={s.l} style={{ padding: 12, background: 'var(--surface-2)', borderRadius: 12, textAlign: 'center' }}>
                <Icon name={s.i} size={18} style={{ color: 'var(--accent)', marginBottom: 4 }}/>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, lineHeight: 1 }}>{s.v}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </Card>

        {/* Credits card */}
        <Card padding={0} style={{ overflow: 'hidden', background: 'linear-gradient(135deg, var(--accent) 0%, oklch(58% 0.13 152) 50%, var(--gk-lime-600) 140%)', border: 'none', color: '#fff' }}>
          <div className="gk-jali" style={{ padding: 20, position: 'relative', backgroundBlendMode: 'overlay' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', opacity: 0.85 }}>
              <Icon name="trophy" size={13} color="#fff"/> {t('Level 3 · Achiever', 'स्तर 3 · प्रवीण', 'સ્તર 3 · અચીવર')}
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 600, lineHeight: 1, marginTop: 8 }}>482</div>
            <div style={{ fontSize: 13, opacity: 0.9, marginTop: 4 }}>{t('credits earned', 'अर्जित क्रेडिट', 'મેળવેલ ક્રેડિટ')}</div>
            <div style={{ marginTop: 14, height: 6, background: 'rgba(255,255,255,0.22)', borderRadius: 3, overflow: 'hidden' }}>
              <div style={{ width: '70%', height: '100%', background: '#fff', borderRadius: 3 }}/>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 11, opacity: 0.85 }}>
              <span>Achiever</span>
              <span>{t('118 to Champion', '118 चैंपियन तक', '118 ચૅમ્પિયન સુધી')}</span>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', padding: 2, gap: 2, background: 'rgba(0,0,0,0.15)' }}>
            {[
              { i: 'trophy', l: t('Attendance Master', 'उपस्थिति मास्टर', 'હાજરી માસ્ટર') },
              { i: 'flame', l: t('Homework Hero', 'गृहकार्य हीरो', 'ગૃહકાર્ય હિરો') },
              { i: 'sparkles', l: t('Focus Champion', 'फोकस चैंपियन', 'ફોકસ ચૅમ્પિયન') },
            ].map(b => (
              <div key={b.l} style={{ padding: 10, background: 'color-mix(in oklch, var(--accent) 85%, black)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                <Icon name={b.i} size={18} color="#fff"/>
                <span style={{ fontSize: 9, textAlign: 'center', lineHeight: 1.2, opacity: 0.9 }}>{b.l}</span>
              </div>
            ))}
          </div>
        </Card>

        {/* Pending homework */}
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, margin: 0 }}>
              {t('Pending homework', 'लंबित गृहकार्य', 'બાકી ગૃહકાર્ય')}
            </h3>
            <span style={{ fontSize: 13, color: 'var(--accent)', fontWeight: 600 }}>{t('See all', 'सभी देखें', 'બધું જુઓ')}</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { s: 'Math', t: 'Fractions — Ex 3.4 Q1-12', due: 'Tomorrow', urgent: true, color: 195 },
              { s: 'English', t: 'Read chapter 7 & summary', due: 'Fri 17', color: 25 },
              { s: 'Science', t: 'Leaf collection', due: 'Mon 20', color: 145 },
            ].map((h,i) => (
              <Card key={i} padding={14} interactive>
                <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 12,
                    background: `oklch(90% 0.08 ${h.color})`,
                    color: `oklch(32% 0.12 ${h.color})`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0, fontSize: 11, fontWeight: 700, letterSpacing: 0.3,
                  }}>{h.s.slice(0,3).toUpperCase()}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{h.t}</div>
                    <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>{h.s} · Ms. Rao</div>
                  </div>
                  <Badge tone={h.urgent ? 'warn' : 'neutral'} size="sm">{h.due}</Badge>
                </div>
              </Card>
            ))}
          </div>
        </div>

        {/* Recent notifications */}
        <div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, margin: '8px 0 10px' }}>
            {t('Recent activity', 'हाल की गतिविधि', 'તાજેતરની પ્રવૃત્તિ')}
          </h3>
          <Card padding={0}>
            {[
              { i: 'star', c: 'lime', t: t('Aanya was marked "Very Good" in Math', 'आन्या को गणित में "बहुत अच्छा" मिला', 'આન્યાને ગણિતમાં "ખૂબ સારું" મળ્યું'), when: '2h ago' },
              { i: 'check', c: 'green', t: t('Homework verified · Science', 'गृहकार्य सत्यापित', 'ગૃહકાર્ય ચકાસાયું'), when: '4h ago' },
              { i: 'megaphone', c: 'neutral', t: t('Annual sports day · Fri Apr 24', 'वार्षिक खेल दिवस', 'વાર્ષિક રમત દિવસ'), when: 'Yesterday' },
            ].map((n, i, arr) => (
              <div key={i} style={{
                display: 'flex', gap: 12, alignItems: 'center',
                padding: '14px 16px',
                borderBottom: i < arr.length - 1 ? '1px solid var(--border)' : 'none',
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10,
                  background: n.c === 'lime' ? 'color-mix(in oklch, var(--gk-lime-400) 30%, transparent)' :
                             n.c === 'green' ? 'var(--accent-soft)' : 'var(--gk-stone-100)',
                  color: n.c === 'lime' ? 'oklch(35% 0.12 128)' : n.c === 'green' ? 'var(--accent-ink)' : 'var(--text-soft)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={n.i} size={18}/>
                </div>
                <div style={{ flex: 1, fontSize: 13, lineHeight: 1.35 }}>{n.t}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{n.when}</div>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </div>
  );
}

// ─── Parent: Attendance calendar ──────────────────────────────
function ParentAttendanceScreen() {
  const days = Array.from({ length: 30 }, (_, i) => i + 1);
  // Stati: P=present, L=late, A=absent, H=holiday, E=excused, '':future
  const status = {
    1: 'P', 2: 'P', 3: 'P', 4: 'P', 5: 'H',
    6: 'P', 7: 'P', 8: 'L', 9: 'P', 10: 'P', 11: 'P', 12: 'H',
    13: 'P', 14: 'P', 15: 'P',
  };
  const dayLabels = ['M','T','W','T','F','S','S'];
  return (
    <div style={{ width: '100%', minHeight: '100%', background: 'var(--bg)', paddingBottom: 100 }}>
      <div style={{ background: 'var(--surface)', padding: '60px 20px 20px', borderBottom: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <Icon name="chevronLeft" size={22}/>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, margin: 0 }}>Attendance</h1>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Avatar name="Aanya Patel" size={28}/>
          <span style={{ fontSize: 13, color: 'var(--text-soft)' }}>Aanya · Grade 5A</span>
        </div>
      </div>

      <div style={{ padding: 20 }}>
        {/* Big percentage */}
        <Card padding={20} style={{ textAlign: 'center', marginBottom: 16 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 4 }}>This month · April</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 64, fontWeight: 600, color: 'var(--accent)', lineHeight: 1 }}>
            94<span style={{ fontSize: 28, color: 'var(--text-muted)' }}>%</span>
          </div>
          <div style={{ fontSize: 13, color: 'var(--text-soft)', marginTop: 8 }}>13 present · 1 late · 0 absent · 2 holidays</div>
          <div style={{ marginTop: 14 }}>
            <Progress value={94}/>
          </div>
        </Card>

        {/* Month selector */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <Icon name="chevronLeft" size={20} style={{ color: 'var(--text-muted)' }}/>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600 }}>April 2026</div>
          <Icon name="chevronRight" size={20} style={{ color: 'var(--text-muted)' }}/>
        </div>

        {/* Calendar grid */}
        <Card padding={14}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginBottom: 8 }}>
            {dayLabels.map((d,i) => (
              <div key={i} style={{ textAlign: 'center', fontSize: 10, fontWeight: 700, letterSpacing: 1, color: 'var(--text-muted)', padding: 4 }}>{d}</div>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
            {Array(2).fill(0).map((_,i) => <div key={'pad'+i}/>)}
            {days.map(d => {
              const s = status[d];
              const tone = s === 'P' ? { bg: 'var(--accent-soft)', fg: 'var(--accent-ink)' } :
                          s === 'L' ? { bg: 'color-mix(in oklch, var(--gk-warn) 20%, transparent)', fg: 'oklch(40% 0.12 75)' } :
                          s === 'A' ? { bg: 'color-mix(in oklch, var(--gk-danger) 18%, transparent)', fg: 'oklch(42% 0.15 25)' } :
                          s === 'H' ? { bg: 'var(--gk-stone-100)', fg: 'var(--text-muted)' } :
                          { bg: 'transparent', fg: 'var(--text-muted)' };
              return (
                <div key={d} style={{
                  aspectRatio: '1/1', borderRadius: 10,
                  background: tone.bg, color: tone.fg,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                  fontSize: 13, fontWeight: d === 15 ? 700 : 500, position: 'relative',
                  border: d === 15 ? '2px solid var(--accent)' : 'none',
                }}>
                  {d}
                  {s && s !== 'H' && <div style={{ position: 'absolute', bottom: 4, fontSize: 8, fontWeight: 700 }}>{s}</div>}
                </div>
              );
            })}
          </div>
        </Card>

        {/* Legend */}
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 14, padding: '0 4px' }}>
          {[['P','Present','var(--accent-soft)'],['L','Late','color-mix(in oklch, var(--gk-warn) 20%, transparent)'],['A','Absent','color-mix(in oklch, var(--gk-danger) 18%, transparent)'],['H','Holiday','var(--gk-stone-100)']].map(([c,l,bg]) => (
            <div key={c} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-soft)' }}>
              <div style={{ width: 14, height: 14, borderRadius: 4, background: bg }}/>
              {l}
            </div>
          ))}
        </div>

        <JaliDivider/>

        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, margin: '10px 0 12px' }}>Recent</h3>
        <Card padding={0}>
          {[
            { d: 'Wed, 15 Apr', s: 'Present', tone: 'success', n: '6 of 6 periods' },
            { d: 'Tue, 8 Apr', s: 'Late', tone: 'warn', n: 'Arrived at 9:18 AM' },
            { d: 'Fri, 5 Apr', s: 'Holiday', tone: 'neutral', n: 'Ram Navami' },
          ].map((r,i,a) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '14px 16px', borderBottom: i < a.length - 1 ? '1px solid var(--border)' : 'none', gap: 10 }}>
              <StatusDot tone={r.tone === 'neutral' ? 'neutral' : r.tone}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{r.d}</div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 1 }}>{r.n}</div>
              </div>
              <Badge tone={r.tone}>{r.s}</Badge>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

// ─── Parent: Homework list ────────────────────────────────────
function ParentHomeworkScreen() {
  return (
    <div style={{ width: '100%', minHeight: '100%', background: 'var(--bg)', paddingBottom: 100 }}>
      <div style={{ background: 'var(--surface)', padding: '60px 20px 16px', borderBottom: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <Icon name="chevronLeft" size={22}/>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, margin: 0, flex: 1 }}>Homework</h1>
          <Icon name="filter" size={20}/>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          {['All · 12', 'Pending · 3', 'Completed · 8', 'Late · 1'].map((l,i) => (
            <div key={i} style={{
              padding: '6px 12px', borderRadius: 999, fontSize: 12, fontWeight: 600,
              background: i === 1 ? 'var(--accent)' : 'var(--surface)',
              color: i === 1 ? '#fff' : 'var(--text-soft)',
              border: i === 1 ? 'none' : '1px solid var(--border)',
            }}>{l}</div>
          ))}
        </div>
      </div>

      <div style={{ padding: 16 }}>
        {[
          { s: 'Math', t: 'Fractions — Ex 3.4 Q1-12', teach: 'Ms. Kavita Rao', due: 'Tomorrow', urgent: true, color: 195, desc: 'Complete questions 1–12 from exercise 3.4. Show working.', atts: 2, status: 'pending' },
          { s: 'English', t: 'Read chapter 7 & write summary', teach: 'Mr. A. Mehta', due: 'Fri, 17 Apr', color: 25, desc: '5-sentence summary in your own words.', atts: 0, status: 'pending' },
          { s: 'Science', t: 'Leaf collection — 5 varieties', teach: 'Mrs. S. Desai', due: 'Mon, 20 Apr', color: 145, desc: 'Collect 5 different leaves, label each with name and family.', atts: 1, status: 'pending' },
          { s: 'Hindi', t: 'अध्याय 4 — प्रश्न उत्तर', teach: 'Mr. R. Sharma', due: 'Yesterday', color: 55, status: 'completed' },
          { s: 'Math', t: 'Worksheet 3.3 review', teach: 'Ms. Kavita Rao', due: '12 Apr', color: 195, status: 'verified', credits: 5 },
        ].map((h,i) => (
          <Card key={i} padding={16} style={{ marginBottom: 10 }} interactive>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: `oklch(90% 0.08 ${h.color})`,
                color: `oklch(32% 0.12 ${h.color})`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0, fontSize: 11, fontWeight: 700, letterSpacing: 0.3,
              }}>{h.s.slice(0,3).toUpperCase()}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, lineHeight: 1.3 }}>{h.t}</div>
                  {h.status === 'pending' && <Badge tone={h.urgent ? 'warn' : 'neutral'} size="sm">{h.due}</Badge>}
                  {h.status === 'completed' && <Badge tone="info" size="sm">Done</Badge>}
                  {h.status === 'verified' && <Badge tone="lime" size="sm">+{h.credits}</Badge>}
                </div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>{h.s} · {h.teach}</div>
                {h.desc && <div style={{ fontSize: 13, color: 'var(--text-soft)', marginTop: 8, lineHeight: 1.45 }}>{h.desc}</div>}
                {(h.atts || h.status === 'pending') && (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10 }}>
                    {h.atts > 0 && (
                      <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--text-muted)' }}>
                        <Icon name="clipboard" size={12}/> {h.atts} files
                      </div>
                    )}
                    {h.status === 'pending' && (
                      <Button variant="secondary" size="sm" style={{ marginLeft: 'auto' }}>Mark done</Button>
                    )}
                  </div>
                )}
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

// ─── Teacher: Timetable today ─────────────────────────────────
function TeacherTimetableScreen() {
  const periods = [
    { t: '9:00', end: '9:45', sub: 'Mathematics', sec: 'Grade 5A', room: 'Room 201', status: 'done', students: 28 },
    { t: '9:45', end: '10:30', sub: 'Mathematics', sec: 'Grade 5B', room: 'Room 202', status: 'done', students: 26 },
    { t: '10:30', end: '10:45', sub: '— Break —', break: true },
    { t: '10:45', end: '11:30', sub: 'Mathematics', sec: 'Grade 6A', room: 'Room 301', status: 'now', students: 30 },
    { t: '11:30', end: '12:15', sub: 'Mathematics', sec: 'Grade 6B', room: 'Room 302', status: 'upcoming', students: 29 },
    { t: '12:15', end: '1:00', sub: 'Substitute: Sci', sec: 'Grade 7A', room: 'Room 401', status: 'upcoming', students: 27, sub_note: 'Covering Ms. Desai' },
    { t: '1:00', end: '1:45', sub: '— Lunch —', break: true },
    { t: '1:45', end: '2:30', sub: 'Mathematics', sec: 'Grade 5A', room: 'Room 201', status: 'upcoming', students: 28 },
  ];
  return (
    <div style={{ width: '100%', minHeight: '100%', background: 'var(--bg)', paddingBottom: 100 }}>
      <div style={{ background: 'var(--surface)', padding: '60px 20px 20px', borderBottom: '1px solid var(--border)' }}>
        <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>Wednesday, 15 April</div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, margin: 0 }}>Today</h1>
          <div style={{ display: 'flex', gap: 8 }}>
            <div style={{ padding: '6px 12px', background: 'var(--accent-soft)', color: 'var(--accent-ink)', borderRadius: 999, fontSize: 12, fontWeight: 600 }}>6 periods</div>
            <div style={{ padding: '6px 12px', background: 'var(--surface-2)', color: 'var(--text-soft)', borderRadius: 999, fontSize: 12, fontWeight: 600 }}>2 done</div>
          </div>
        </div>
      </div>

      <div style={{ padding: 16 }}>
        <div style={{ position: 'relative' }}>
          {/* time rail */}
          <div style={{ position: 'absolute', left: 52, top: 8, bottom: 8, width: 2, background: 'var(--border)' }}/>
          {periods.map((p,i) => {
            if (p.break) {
              return (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '10px 0', marginLeft: 64 }}>
                  <div style={{ fontSize: 11, color: 'var(--text-muted)', fontStyle: 'italic', letterSpacing: 0.5 }}>{p.sub}  ·  {p.t}–{p.end}</div>
                </div>
              );
            }
            const tone = p.status === 'done' ? { bg: 'var(--surface)', br: 'var(--border)', dot: 'var(--gk-stone-300)', fg: 'var(--text-muted)' } :
                        p.status === 'now' ? { bg: 'var(--accent)', br: 'var(--accent)', dot: '#fff', fg: '#fff' } :
                        { bg: 'var(--surface)', br: 'var(--border)', dot: 'var(--accent)', fg: 'var(--text)' };
            return (
              <div key={i} style={{ display: 'flex', gap: 14, marginBottom: 10, alignItems: 'stretch' }}>
                <div style={{ width: 44, flexShrink: 0, paddingTop: 10 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: p.status === 'done' ? 'var(--text-muted)' : 'var(--text)' }}>{p.t}</div>
                  <div style={{ fontSize: 10, color: 'var(--text-muted)' }}>{p.end}</div>
                </div>
                <div style={{ width: 18, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: 12 }}>
                  <div style={{
                    width: p.status === 'now' ? 14 : 10, height: p.status === 'now' ? 14 : 10,
                    borderRadius: '50%', background: tone.dot,
                    boxShadow: p.status === 'now' ? '0 0 0 4px color-mix(in oklch, var(--accent) 20%, transparent)' : 'none',
                    border: p.status === 'now' ? '2px solid var(--accent)' : 'none',
                  }}/>
                </div>
                <div style={{
                  flex: 1, padding: '14px 16px', borderRadius: 14,
                  background: tone.bg,
                  border: `1px solid ${tone.br}`,
                  color: tone.fg,
                  opacity: p.status === 'done' ? 0.65 : 1,
                }}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
                    <div>
                      <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.1 }}>{p.sub}</div>
                      <div style={{ fontSize: 12, opacity: p.status === 'now' ? 0.9 : 0.7, marginTop: 2 }}>
                        {p.sec} · {p.room} · {p.students} students
                      </div>
                      {p.sub_note && (
                        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 10, marginTop: 6, padding: '2px 8px', background: 'color-mix(in oklch, var(--gk-warn) 25%, transparent)', color: 'oklch(38% 0.12 75)', borderRadius: 999, fontWeight: 600 }}>
                          <Icon name="users" size={11}/> {p.sub_note}
                        </div>
                      )}
                    </div>
                    {p.status === 'now' && (
                      <div style={{ padding: '4px 10px', background: 'rgba(255,255,255,0.22)', borderRadius: 999, fontSize: 10, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase' }}>Now</div>
                    )}
                    {p.status === 'done' && <Icon name="check" size={18} style={{ color: 'var(--gk-success)' }}/>}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ─── Teacher: Attendance marking ──────────────────────────────
function TeacherAttendanceScreen() {
  const students = [
    { n: 'Aanya Patel', gr: '142', s: 'P' },
    { n: 'Arnav Sharma', gr: '143', s: 'P' },
    { n: 'Diya Krishnan', gr: '144', s: 'P' },
    { n: 'Ishaan Mehta', gr: '145', s: 'L' },
    { n: 'Kavya Iyer', gr: '146', s: 'P' },
    { n: 'Manav Patel', gr: '147', s: 'A' },
    { n: 'Nisha Rao', gr: '148', s: 'P' },
    { n: 'Rahul Shah', gr: '149', s: 'P' },
    { n: 'Riya Desai', gr: '150', s: 'E' },
    { n: 'Samar Gupta', gr: '151', s: 'P' },
    { n: 'Tara Menon', gr: '152', s: 'P' },
    { n: 'Veer Kulkarni', gr: '153', s: null },
  ];
  const btn = (s, active, onClick) => {
    const tones = {
      P: { bg: 'var(--gk-success)', bg_soft: 'color-mix(in oklch, var(--gk-success) 15%, transparent)', fg: 'oklch(38% 0.13 145)' },
      L: { bg: 'var(--gk-warn)', bg_soft: 'color-mix(in oklch, var(--gk-warn) 22%, transparent)', fg: 'oklch(40% 0.12 75)' },
      A: { bg: 'var(--gk-danger)', bg_soft: 'color-mix(in oklch, var(--gk-danger) 15%, transparent)', fg: 'oklch(42% 0.15 25)' },
      E: { bg: 'var(--text-muted)', bg_soft: 'var(--gk-stone-100)', fg: 'var(--text-soft)' },
    }[s];
    return (
      <div style={{
        width: 32, height: 32, borderRadius: 10,
        background: active ? tones.bg : 'transparent',
        color: active ? '#fff' : tones.fg,
        border: active ? 'none' : `1.5px solid ${tones.bg_soft}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 13, fontWeight: 700, cursor: 'pointer',
        transition: 'all 120ms',
      }}>{s}</div>
    );
  };
  return (
    <div style={{ width: '100%', height: '100%', background: 'var(--bg)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ background: 'var(--surface)', padding: '60px 20px 16px', borderBottom: '1px solid var(--border)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <Icon name="chevronLeft" size={22}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>Mathematics · Period 3</div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, margin: 0 }}>Grade 6A · Attendance</h1>
          </div>
          <div style={{ fontSize: 12, color: 'var(--text-muted)', textAlign: 'right' }}>
            <div>Wed 15 Apr</div>
            <div style={{ fontWeight: 600, color: 'var(--text)' }}>10:45 AM</div>
          </div>
        </div>

        {/* Summary + bulk */}
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <Badge tone="success">P · 9</Badge>
          <Badge tone="warn">L · 1</Badge>
          <Badge tone="danger">A · 1</Badge>
          <Badge tone="neutral">E · 1</Badge>
          <div style={{ flex: 1 }}/>
          <Button variant="ghost" size="sm">Mark all P</Button>
        </div>
      </div>

      {/* Legend */}
      <div style={{ padding: '10px 20px 0', display: 'flex', gap: 10, fontSize: 11, color: 'var(--text-muted)' }}>
        <span>Tap to toggle</span>
        <span>·</span>
        <span><b style={{ color: 'var(--gk-success)' }}>P</b> Present</span>
        <span><b style={{ color: 'var(--gk-warn)' }}>L</b> Late</span>
        <span><b style={{ color: 'var(--gk-danger)' }}>A</b> Absent</span>
        <span><b style={{ color: 'var(--text-soft)' }}>E</b> Excused</span>
      </div>

      {/* List */}
      <div style={{ flex: 1, overflow: 'auto', padding: '10px 16px 120px' }}>
        <Card padding={0}>
          {students.map((st,i,a) => (
            <div key={st.gr} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px',
              borderBottom: i < a.length - 1 ? '1px solid var(--border)' : 'none',
              background: !st.s ? 'color-mix(in oklch, var(--gk-warn) 8%, transparent)' : 'transparent',
            }}>
              <Avatar name={st.n} size={36}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{st.n}</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>GR-{st.gr}</div>
              </div>
              <div style={{ display: 'flex', gap: 6 }}>
                {['P','L','A','E'].map(code => <React.Fragment key={code}>{btn(code, st.s === code)}</React.Fragment>)}
              </div>
            </div>
          ))}
        </Card>
      </div>

      {/* Fixed save bar */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '14px 20px 30px', background: 'color-mix(in oklch, var(--surface) 92%, transparent)',
        backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
        borderTop: '1px solid var(--border)',
        display: 'flex', gap: 10, alignItems: 'center',
      }}>
        <div style={{ flex: 1, fontSize: 12, color: 'var(--text-muted)' }}>1 student unmarked</div>
        <Button variant="outline" size="md">Save</Button>
        <Button variant="primary" size="md" rightIcon="check">Save & notify</Button>
      </div>
    </div>
  );
}

// ─── Teacher: Homework creation ───────────────────────────────
function TeacherHomeworkCreateScreen() {
  return (
    <div style={{ width: '100%', height: '100%', background: 'var(--bg)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ background: 'var(--surface)', padding: '60px 20px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <Icon name="x" size={22}/>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, margin: 0, flex: 1 }}>New homework</h1>
        <Button variant="ghost" size="sm">Save draft</Button>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: '16px 20px 120px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Scope */}
          <Card padding={16}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.2, textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 10 }}>Assign to</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {[
                { l: 'Grade 5A · Math', sel: true },
                { l: 'Grade 5B · Math', sel: true },
                { l: 'Grade 6A · Math', sel: false },
                { l: 'Grade 6B · Math', sel: false },
              ].map((c,i) => (
                <div key={i} style={{
                  padding: '8px 14px', borderRadius: 999, fontSize: 12, fontWeight: 600,
                  background: c.sel ? 'var(--accent)' : 'var(--surface-2)',
                  color: c.sel ? '#fff' : 'var(--text-soft)',
                  border: c.sel ? 'none' : '1px solid var(--border)',
                  display: 'flex', alignItems: 'center', gap: 6,
                }}>
                  {c.sel && <Icon name="check" size={12}/>} {c.l}
                </div>
              ))}
            </div>
          </Card>

          <Input label="Title" defaultValue="Fractions — Ex 3.4"/>

          {/* Description */}
          <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <span style={{ fontSize: 13, fontWeight: 600 }}>Description</span>
            <textarea rows={5} defaultValue="Complete questions 1–12 from exercise 3.4. Show all working steps. Convert improper fractions to mixed numbers in your final answers." style={{
              padding: 14, borderRadius: 12, border: '1px solid var(--border)',
              background: 'var(--surface)', fontSize: 14, fontFamily: 'var(--font-sans)',
              color: 'var(--text)', lineHeight: 1.5, resize: 'none',
            }}/>
            <span style={{ fontSize: 11, color: 'var(--text-muted)', marginLeft: 2 }}>Visible to parents as-is</span>
          </label>

          {/* Due + attachments */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Input label="Due date" leftIcon="calendar" defaultValue="Fri, 17 Apr"/>
            <Input label="Time" leftIcon="clock" defaultValue="11:59 PM"/>
          </div>

          <Card padding={14} style={{ border: '1.5px dashed var(--border-strong)', background: 'var(--surface-2)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name="upload" size={20}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600 }}>Add attachments</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>Images or PDF · max 3 files · 10 MB each</div>
              </div>
            </div>
            <div style={{ marginTop: 10, display: 'flex', gap: 8 }}>
              {[{ n: 'worksheet.pdf', sz: '2.1 MB' }, { n: 'example.png', sz: '450 KB' }].map(a => (
                <div key={a.n} style={{ flex: 1, padding: '8px 10px', borderRadius: 10, background: 'var(--surface)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon name="clipboard" size={16} style={{ color: 'var(--accent)' }}/>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.n}</div>
                    <div style={{ fontSize: 9, color: 'var(--text-muted)' }}>{a.sz}</div>
                  </div>
                  <Icon name="x" size={14} style={{ color: 'var(--text-muted)' }}/>
                </div>
              ))}
            </div>
          </Card>

          {/* Notify toggle */}
          <Card padding={14}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <Icon name="bell" size={20} style={{ color: 'var(--accent)' }}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>Notify parents now</div>
                <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>~54 parents across 2 sections</div>
              </div>
              <div style={{ width: 44, height: 26, borderRadius: 13, background: 'var(--accent)', padding: 3, cursor: 'pointer' }}>
                <div style={{ width: 20, height: 20, borderRadius: '50%', background: '#fff', marginLeft: 'auto' }}/>
              </div>
            </div>
          </Card>
        </div>
      </div>

      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '14px 20px 30px', background: 'color-mix(in oklch, var(--surface) 92%, transparent)',
        backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
        borderTop: '1px solid var(--border)',
      }}>
        <Button variant="primary" size="lg" block rightIcon="arrowRight">Publish homework</Button>
      </div>
    </div>
  );
}

Object.assign(window, {
  StatusDot, MobileTabBar,
  ParentLoginScreen, ParentHomeScreen, ParentAttendanceScreen, ParentHomeworkScreen,
  TeacherTimetableScreen, TeacherAttendanceScreen, TeacherHomeworkCreateScreen,
});