// screens-extra.jsx — Production-ready screens for the Original Scholiq app
// All real screens (no placeholders) wired into the router. Uses primitives + tokens from screens.jsx + tokens.css.

const { useState: useStateX, useEffect: useEffectX, useMemo: useMemoX } = React;

// Section heading helper
function SH({ title, right }) {
  return (
    <div className="spread" style={{ marginBottom: 12 }}>
      <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>{title}</div>
      {right}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HOMEWORK — full list with submit flow
// ─────────────────────────────────────────────────────────────
function HomeworkScreen({ nav, role }) {
  const [tab, setTab] = useStateX('pending');
  const [submitting, setSubmitting] = useStateX(null);
  const data = {
    pending: [
      { sub: 'Mathematics', task: 'Exercise 7.3 · Q1–Q12', due: 'Tonight 11:59 PM', urg: 'late', clr: 'var(--c500)', teacher: 'Mrs. Reddy', files: 1 },
      { sub: 'Science', task: 'Lab report — Photosynthesis', due: 'Tomorrow', urg: 'soon', clr: 'var(--warning)', teacher: 'Mr. Khan', files: 2 },
      { sub: 'English', task: 'Essay · 500 words on a hero', due: 'Fri · 14 Mar', urg: 'ok', clr: 'var(--n300)', teacher: 'Mrs. Iyer', files: 0 },
      { sub: 'Hindi', task: 'पाठ 6 · प्रश्न उत्तर', due: 'Mon · 17 Mar', urg: 'ok', clr: 'var(--n300)', teacher: 'Mr. Sharma', files: 0 },
    ],
    submitted: [
      { sub: 'Social Studies', task: 'Map work · India rivers', when: 'Submitted 2h ago', state: 'Awaiting grade', clr: 'var(--warning)' },
      { sub: 'Mathematics', task: 'Practice set 7.2', when: 'Submitted yesterday', state: 'Awaiting grade', clr: 'var(--warning)' },
    ],
    graded: [
      { sub: 'Science', task: 'Chapter 5 worksheet', when: 'Graded 3d ago', state: '18 / 20', clr: 'var(--success)' },
      { sub: 'English', task: 'Reading comprehension', when: 'Graded last week', state: '14 / 15', clr: 'var(--success)' },
      { sub: 'Hindi', task: 'व्याकरण exercise', when: 'Graded last week', state: '9 / 10', clr: 'var(--success)' },
    ],
  };
  const counts = { pending: data.pending.length, submitted: data.submitted.length, graded: data.graded.length };
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title={role === 'teacher' ? 'Assignments' : 'Homework'} onBack={() => nav.pop()} right={role === 'teacher' && <button className="btn-sm btn-soft" style={{ height: 32, padding: '0 12px', fontSize: 11 }}><Icon name="plus" size={14}/> New</button>}/>
      <div style={{ padding: '0 20px 12px', background: '#fff', borderBottom: '1px solid var(--n100)' }}>
        <div className="row" style={{ gap: 6, overflowX: 'auto' }}>
          {[
            { id: 'pending', lab: 'Pending' },
            { id: 'submitted', lab: 'Submitted' },
            { id: 'graded', lab: 'Graded' },
          ].map(x => (
            <button key={x.id} onClick={() => setTab(x.id)} style={{
              flexShrink: 0, padding: '8px 14px', borderRadius: 99, fontSize: 12, fontWeight: 700,
              background: tab === x.id ? 'var(--n900)' : 'var(--n50)', color: tab === x.id ? '#fff' : 'var(--n700)',
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              {x.lab}
              <span style={{ display: 'inline-grid', placeItems: 'center', minWidth: 18, height: 18, padding: '0 5px', borderRadius: 99, fontSize: 10, fontWeight: 800, background: tab === x.id ? 'rgba(255,255,255,.18)' : 'var(--n100)', color: tab === x.id ? '#fff' : 'var(--n600)' }}>{counts[x.id]}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="app-body" style={{ paddingTop: 12 }}>
        {tab === 'pending' && data.pending.map((h, i) => (
          <div key={i} className="card" style={{ padding: 14, borderLeft: `3px solid ${h.clr}` }}>
            <div className="spread">
              <div style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 700, fontFamily: 'var(--mono)', letterSpacing: '.06em' }}>{h.sub.toUpperCase()}</div>
              {h.urg === 'late' && <span className="pill pill-c">⏰ Tonight</span>}
              {h.urg === 'soon' && <span className="pill pill-w">Tomorrow</span>}
              {h.urg === 'ok' && <span className="pill">{h.due.split(' · ')[0]}</span>}
            </div>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)', marginTop: 6 }}>{h.task}</div>
            <div className="spread" style={{ marginTop: 10, paddingTop: 10, borderTop: '1px dashed var(--n100)' }}>
              <div style={{ fontSize: 11, color: 'var(--n500)' }}>{h.teacher}{h.files > 0 && <> · <Icon name="paperclip" size={10}/> {h.files} file{h.files > 1 ? 's' : ''}</>}</div>
              <button onClick={() => setSubmitting(h)} className="btn-sm" style={{ background: 'var(--p600)', color: '#fff', height: 30, padding: '0 12px', fontSize: 11, fontWeight: 700, borderRadius: 8 }}>{role === 'teacher' ? 'Review' : 'Submit'}</button>
            </div>
          </div>
        ))}
        {tab === 'submitted' && data.submitted.map((h, i) => (
          <div key={i} className="card" style={{ padding: 14 }}>
            <div className="spread">
              <div style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 700, fontFamily: 'var(--mono)' }}>{h.sub.toUpperCase()}</div>
              <span className="pill pill-w">{h.state}</span>
            </div>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)', marginTop: 6 }}>{h.task}</div>
            <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 6 }}>{h.when}</div>
          </div>
        ))}
        {tab === 'graded' && data.graded.map((h, i) => (
          <div key={i} className="card" style={{ padding: 14 }}>
            <div className="spread">
              <div style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 700, fontFamily: 'var(--mono)' }}>{h.sub.toUpperCase()}</div>
              <span className="pill pill-s"><Icon name="check" size={11}/> {h.state}</span>
            </div>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)', marginTop: 6 }}>{h.task}</div>
            <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 6 }}>{h.when}</div>
          </div>
        ))}
      </div>
      {submitting && (
        <>
          <div className="sheet-backdrop" onClick={() => setSubmitting(null)}></div>
          <div className="sheet sheet-up">
            <div className="sheet-handle"></div>
            <div style={{ padding: '16px 20px 8px' }}>
              <div className="spread">
                <div style={{ fontSize: 17, fontWeight: 800, color: 'var(--n900)' }}>Submit homework</div>
                <button onClick={() => setSubmitting(null)} style={{ width: 32, height: 32, borderRadius: 10, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="x" size={16}/></button>
              </div>
              <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>{submitting.sub} · {submitting.task}</div>
            </div>
            <div style={{ flex: 1, overflowY: 'auto', padding: '8px 20px' }}>
              <div className="col" style={{ gap: 8 }}>
                {[
                  { ic: 'paperclip', lab: 'Attach files', sub: 'PDF, image, doc · max 10 MB' },
                  { ic: 'camera', lab: 'Take photo', sub: 'Snap pages of your notebook' },
                  { ic: 'edit', lab: 'Type answer', sub: 'Inline text editor' },
                ].map((m, i) => (
                  <button key={i} className="row" style={{ width: '100%', padding: 14, borderRadius: 14, gap: 12, background: '#fff', border: '1.5px solid var(--n100)', textAlign: 'left' }}>
                    <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--p50)', color: 'var(--p600)', display: 'grid', placeItems: 'center' }}><Icon name={m.ic} size={20}/></div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{m.lab}</div>
                      <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 1 }}>{m.sub}</div>
                    </div>
                    <Icon name="chev-r" size={16} style={{ color: 'var(--n400)' }}/>
                  </button>
                ))}
              </div>
              <textarea placeholder="Note for teacher (optional)" style={{ width: '100%', marginTop: 12, padding: 12, borderRadius: 12, border: '1.5px solid var(--n100)', fontSize: 13, minHeight: 80, fontFamily: 'inherit', resize: 'none' }}/>
            </div>
            <div style={{ padding: '12px 20px 28px', borderTop: '1px solid var(--n100)' }}>
              <button className="btn" onClick={() => { setSubmitting(null); }}>Submit homework <Icon name="arrow-right" size={16}/></button>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TIMETABLE — weekly grid with live highlight
// ─────────────────────────────────────────────────────────────
function TimetableScreen({ nav }) {
  const [day, setDay] = useStateX(2); // Wed
  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const periods = [
    { time: '08:30', subj: 'Assembly', room: 'Quad', clr: '#8B5CF6' },
    { time: '09:15', subj: 'English', room: '204', clr: '#1E40AF' },
    { time: '10:00', subj: 'Mathematics', room: '204', clr: 'var(--p600)', live: true },
    { time: '10:45', subj: 'Science', room: 'Lab 1', clr: 'var(--success)' },
    { time: '11:30', subj: 'Lunch', room: 'Cafeteria', clr: 'var(--n400)' },
    { time: '12:15', subj: 'History', room: '108', clr: 'var(--warning)' },
    { time: '13:00', subj: 'Hindi', room: '204', clr: 'var(--c500)' },
    { time: '13:45', subj: 'Sports', room: 'Field', clr: 'var(--success)' },
  ];
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="Timetable" onBack={() => nav.pop()} right={<button style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="down" size={18}/></button>}/>
      <div style={{ padding: '0 20px 12px', background: '#fff', borderBottom: '1px solid var(--n100)' }}>
        <div className="row" style={{ gap: 6, overflowX: 'auto' }}>
          {days.map((d, i) => (
            <button key={i} onClick={() => setDay(i)} style={{
              flexShrink: 0, minWidth: 56, padding: '8px 12px', borderRadius: 12, fontSize: 12, fontWeight: 700,
              background: day === i ? 'var(--n900)' : 'var(--n50)', color: day === i ? '#fff' : 'var(--n700)',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
            }}>
              <span style={{ fontSize: 9, opacity: .7, letterSpacing: '.08em' }}>{d.toUpperCase()}</span>
              <span style={{ fontSize: 14, fontWeight: 800 }}>{10 + i}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="app-body" style={{ paddingTop: 12 }}>
        <div className="card" style={{ padding: 0 }}>
          {periods.map((p, i) => (
            <div key={i} className="row" style={{
              padding: 14, gap: 14, borderBottom: i < periods.length - 1 ? '1px solid var(--n100)' : 'none',
              background: p.live ? 'var(--p50)' : 'transparent',
            }}>
              <div style={{ width: 50, fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 700, color: p.live ? 'var(--p700)' : 'var(--n500)' }}>{p.time}</div>
              <div style={{ width: 4, alignSelf: 'stretch', background: p.clr, borderRadius: 2 }}></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="spread">
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>{p.subj}</div>
                  {p.live && <span className="pill pill-p"><span className="dot" style={{ background: 'var(--p600)' }}></span>NOW</span>}
                </div>
                <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>Room {p.room} · 45 min</div>
              </div>
            </div>
          ))}
        </div>
        <div className="card-flat row" style={{ gap: 10, padding: 12 }}>
          <Icon name="info" size={16} style={{ color: 'var(--p600)' }}/>
          <div style={{ fontSize: 11, color: 'var(--n600)', flex: 1 }}>Substitute alert: <b style={{ color: 'var(--n800)' }}>Mrs. Iyer</b> covers Mathematics tomorrow.</div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TRANSPORT — live ETA, route, driver
// ─────────────────────────────────────────────────────────────
function TransportScreen({ nav }) {
  const stops = [
    { name: 'School', time: '07:30', state: 'pickup' },
    { name: 'Madhapur Junction', time: '07:42', state: 'done' },
    { name: 'Hi-Tech City', time: '07:54', state: 'now' },
    { name: 'Kondapur', time: '08:02', state: 'next' },
    { name: 'Your stop · Botanical Gardens', time: '08:12', state: 'yours' },
    { name: 'Gachibowli', time: '08:20', 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">
        {/* Map placeholder */}
        <div style={{
          height: 280, background: 'linear-gradient(135deg,#0F172A,#1E293B)', position: 'relative',
          paddingTop: 56, color: '#fff',
        }}>
          <div style={{ padding: '0 20px' }}>
            <button onClick={() => nav.pop()} style={{ width: 38, height: 38, borderRadius: 12, background: 'rgba(255,255,255,.18)', display: 'grid', placeItems: 'center', color: '#fff', backdropFilter: 'blur(8px)' }}><Icon name="chev-l" size={18}/></button>
          </div>
          {/* Faux road */}
          <svg width="100%" height="180" style={{ position: 'absolute', bottom: 0, left: 0, opacity: .55 }} viewBox="0 0 400 160" preserveAspectRatio="none">
            <path d="M -20,140 Q 80,80 160,100 T 320,40 T 440,90" stroke="rgba(99,102,241,.6)" strokeWidth="3" fill="none" strokeDasharray="6 4"/>
            <path d="M -20,140 Q 80,80 160,100 T 240,70" stroke="#6366F1" strokeWidth="4" fill="none"/>
            <circle cx="240" cy="70" r="9" fill="#fff"/>
            <circle cx="240" cy="70" r="5" fill="#6366F1"/>
            <circle cx="320" cy="40" r="6" fill="rgba(255,255,255,.4)"/>
            <circle cx="380" cy="65" r="6" fill="rgba(255,255,255,.4)"/>
          </svg>
          <div style={{ position: 'absolute', bottom: 18, left: 20, right: 20 }}>
            <div style={{ fontSize: 10, opacity: .8, letterSpacing: '.08em', fontWeight: 700, fontFamily: 'var(--mono)' }}>ROUTE 14 · BUS TS09 EQ 4421</div>
            <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-.02em', marginTop: 4, whiteSpace: 'nowrap' }}>Arriving in 8 min</div>
            <div style={{ marginTop: 6 }}>
              <span className="pill" style={{ background: 'rgba(16,185,129,.3)', color: '#10B981', border: '1px solid rgba(16,185,129,.4)' }}><span className="dot" style={{ background: '#10B981' }}></span>On time · 0.4 km away</span>
            </div>
          </div>
        </div>

        <div style={{ padding: 20 }}>
          {/* Driver card */}
          <div className="card row" style={{ padding: 14, gap: 12 }}>
            <div className="av av-48" style={{ background: 'var(--n100)', color: 'var(--n700)' }}>RK</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>Ramesh Kumar</div>
              <div style={{ fontSize: 11, color: 'var(--n500)' }}>Driver · 4.8 ★ · 6 years</div>
            </div>
            <button style={{ width: 38, height: 38, borderRadius: 11, background: 'var(--success-50)', color: 'var(--success)', display: 'grid', placeItems: 'center' }}><Icon name="phone" size={18}/></button>
            <button style={{ width: 38, height: 38, borderRadius: 11, background: 'var(--p50)', color: 'var(--p600)', display: 'grid', placeItems: 'center' }}><Icon name="message" size={18}/></button>
          </div>

          {/* Stops */}
          <div style={{ marginTop: 16 }}>
            <SH title="Today's route"/>
            <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: '8px 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(--n200)' : s.state === 'yours' ? 'var(--c500)' : '#fff',
                    border: s.state === 'next' ? '2px solid var(--n200)' : '0',
                    boxShadow: s.state === 'now' ? '0 0 0 4px var(--p100)' : s.state === 'yours' ? '0 0 0 4px var(--c50)' : 'none',
                  }}></div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: s.state === 'yours' || s.state === 'now' ? 700 : 600, color: s.state === 'done' ? 'var(--n400)' : 'var(--n900)' }}>
                      {s.name}
                      {s.state === 'yours' && <span className="pill pill-c" style={{ marginLeft: 8, fontSize: 9 }}>YOUR STOP</span>}
                      {s.state === 'now' && <span className="pill pill-p" style={{ marginLeft: 8, fontSize: 9 }}>NOW</span>}
                    </div>
                  </div>
                  <div style={{ fontSize: 11, fontFamily: 'var(--mono)', fontWeight: 600, color: 'var(--n500)' }}>{s.time}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 16 }}>
            <button className="card" style={{ padding: 14, textAlign: 'left' }}>
              <Icon name="calendar" size={18} style={{ color: 'var(--p600)' }}/>
              <div style={{ fontSize: 13, fontWeight: 700, marginTop: 8, color: 'var(--n900)' }}>Skip ride</div>
              <div style={{ fontSize: 10, color: 'var(--n500)', marginTop: 2 }}>Mark off for tomorrow</div>
            </button>
            <button className="card" style={{ padding: 14, textAlign: 'left' }}>
              <Icon name="alert" size={18} style={{ color: 'var(--c600)' }}/>
              <div style={{ fontSize: 13, fontWeight: 700, marginTop: 8, color: 'var(--n900)' }}>Report issue</div>
              <div style={{ fontSize: 10, color: 'var(--n500)', marginTop: 2 }}>Late, missed stop, etc.</div>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// LIBRARY — borrowed + recommendations
// ─────────────────────────────────────────────────────────────
function LibraryScreen({ nav, role }) {
  const borrowed = [
    { title: 'A Brief History of Time', author: 'Stephen Hawking', due: '20 Mar', daysLeft: 8, color: 'linear-gradient(135deg,#1E1B4B,#312E81)' },
    { title: 'Wings of Fire', author: 'A.P.J. Abdul Kalam', due: '25 Mar', daysLeft: 13, color: 'linear-gradient(135deg,#7C2D12,#B45309)' },
    { title: 'Five Point Someone', author: 'Chetan Bhagat', due: '14 Mar · OVERDUE', daysLeft: -1, color: 'linear-gradient(135deg,#831843,#BE185D)' },
  ];
  const recs = [
    { title: 'Sapiens', author: 'Y.N. Harari', tag: 'History', color: 'linear-gradient(135deg,#064E3B,#065F46)' },
    { title: 'Atomic Habits', author: 'James Clear', tag: 'Self-help', color: 'linear-gradient(135deg,#1F2937,#374151)' },
    { title: 'The Alchemist', author: 'Paulo Coelho', tag: 'Fiction', color: 'linear-gradient(135deg,#78350F,#92400E)' },
  ];
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="Library" onBack={() => nav.pop()} right={<button style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="search" size={18}/></button>}/>
      <div className="app-body">
        {/* Stats */}
        <div className="card-grad" style={{ padding: 16, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
          {[
            { lab: 'Borrowed', val: '3' },
            { lab: 'Read this year', val: '14' },
            { lab: 'Late returns', val: '1' },
          ].map((s, i) => (
            <div key={i}>
              <div style={{ fontSize: 9, opacity: .85, fontWeight: 700, letterSpacing: '.08em' }}>{s.lab.toUpperCase()}</div>
              <div style={{ fontSize: 22, fontWeight: 800, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>{s.val}</div>
            </div>
          ))}
        </div>

        <div>
          <SH title="Currently borrowed" right={<span className="pill pill-c">1 overdue</span>}/>
          <div className="col" style={{ gap: 10 }}>
            {borrowed.map((b, i) => (
              <div key={i} className="card row" style={{ padding: 12, gap: 12 }}>
                <div style={{ width: 56, height: 76, borderRadius: 8, background: b.color, color: '#fff', padding: 8, display: 'flex', alignItems: 'flex-end', boxShadow: '0 4px 12px rgba(0,0,0,.15)', flexShrink: 0 }}>
                  <div style={{ fontSize: 8, fontWeight: 700, opacity: .85, lineHeight: 1.2 }}>{b.title.slice(0, 16)}</div>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{b.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 1 }}>{b.author}</div>
                  <div className="row" style={{ gap: 6, marginTop: 8 }}>
                    {b.daysLeft < 0
                      ? <span className="pill pill-c">⏰ {b.due}</span>
                      : b.daysLeft <= 5
                        ? <span className="pill pill-w">Due in {b.daysLeft}d</span>
                        : <span className="pill">{b.due}</span>}
                    <button className="btn-sm btn-soft" style={{ height: 26, padding: '0 10px', fontSize: 10 }}>Renew</button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div>
          <SH title="Recommended for you"/>
          <div style={{ display: 'flex', gap: 12, overflowX: 'auto', margin: '0 -20px', padding: '0 20px 4px' }}>
            {recs.map((r, i) => (
              <button key={i} style={{ flexShrink: 0, width: 132, textAlign: 'left', background: 'transparent' }}>
                <div style={{ width: '100%', height: 180, borderRadius: 12, background: r.color, color: '#fff', padding: 14, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', boxShadow: '0 6px 18px rgba(0,0,0,.18)' }}>
                  <div style={{ fontSize: 13, fontWeight: 800, lineHeight: 1.2 }}>{r.title}</div>
                </div>
                <div style={{ marginTop: 8, fontSize: 11, color: 'var(--n800)', fontWeight: 600 }}>{r.author}</div>
                <div style={{ fontSize: 10, color: 'var(--n500)' }}>{r.tag}</div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HISTORY — receipts grouped by month
// ─────────────────────────────────────────────────────────────
function HistoryScreen({ nav }) {
  const months = [
    {
      m: 'March 2026', total: '₹7,000',
      items: [
        { date: '02 Mar', label: 'Aarav · Term 1 last instalment', amt: '₹7,000', txn: 'SCQ8492736251', method: 'GPay' },
      ],
    },
    {
      m: 'February 2026', total: '₹18,000',
      items: [
        { date: '15 Feb', label: 'Diya · Term 2 + bus pass', amt: '₹18,000', txn: 'SCQ8492536144', method: 'PhonePe' },
      ],
    },
    {
      m: 'January 2026', total: '₹24,000',
      items: [
        { date: '20 Jan', label: 'Vihaan · Term 1', amt: '₹18,500', txn: 'SCQ8492336018', method: 'Card · HDFC' },
        { date: '08 Jan', label: 'Aarav · Lab + library', amt: '₹5,500', txn: 'SCQ8492235877', method: 'UPI · SBI' },
      ],
    },
  ];
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="Payment history" onBack={() => nav.pop()} right={<button className="btn-ghost" style={{ fontSize: 12, fontWeight: 600 }}><Icon name="down" size={14}/> Year</button>}/>
      <div className="app-body">
        <div className="card-grad" style={{ padding: 16 }}>
          <div style={{ fontSize: 10, opacity: .85, letterSpacing: '.08em', fontWeight: 700, fontFamily: 'var(--mono)' }}>PAID THIS YEAR</div>
          <div style={{ fontSize: 32, fontWeight: 800, marginTop: 4, fontVariantNumeric: 'tabular-nums', letterSpacing: '-.02em' }}>₹49,000</div>
          <div className="spread" style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid rgba(255,255,255,.18)', fontSize: 11, opacity: .9 }}>
            <span>4 transactions · 3 children</span>
            <button style={{ background: 'rgba(255,255,255,.2)', height: 28, padding: '0 12px', borderRadius: 8, fontSize: 11, fontWeight: 700, color: '#fff' }}><Icon name="down" size={12}/> Annual ledger</button>
          </div>
        </div>
        {months.map((m, mi) => (
          <div key={mi}>
            <div className="spread" style={{ marginBottom: 8, padding: '0 4px' }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--n900)', fontFamily: 'var(--mono)', letterSpacing: '.04em' }}>{m.m.toUpperCase()}</div>
              <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--n600)', fontVariantNumeric: 'tabular-nums' }}>{m.total}</div>
            </div>
            <div className="card" style={{ padding: 0 }}>
              {m.items.map((it, i) => (
                <div key={i} className="row" style={{ padding: 14, gap: 12, borderBottom: i < m.items.length - 1 ? '1px solid var(--n100)' : 'none' }}>
                  <div style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--success-50)', color: 'var(--success)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name="check" size={18}/></div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="spread">
                      <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{it.label}</div>
                      <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--n900)', fontVariantNumeric: 'tabular-nums' }}>{it.amt}</div>
                    </div>
                    <div className="spread" style={{ marginTop: 2 }}>
                      <div style={{ fontSize: 10, color: 'var(--n500)' }}>{it.date} · {it.method}</div>
                      <div style={{ fontSize: 9, color: 'var(--n400)', fontFamily: 'var(--mono)' }}>{it.txn}</div>
                    </div>
                    <div className="row" style={{ gap: 6, marginTop: 8 }}>
                      <button className="btn-sm btn-ghost" style={{ height: 26, padding: '0 10px', fontSize: 10 }}><Icon name="down" size={11}/> Receipt</button>
                      <button className="btn-sm btn-ghost" style={{ height: 26, padding: '0 10px', fontSize: 10 }}><Icon name="share" size={11}/> Share</button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SEARCH
// ─────────────────────────────────────────────────────────────
function SearchScreen({ nav }) {
  const [q, setQ] = useStateX('');
  const recents = ['Aarav fees', 'Bus 14', 'Mrs. Reddy', 'Term 2 invoice'];
  const cats = [
    { ic: 'user', lab: 'Children', clr: 'var(--p600)', bg: 'var(--p50)' },
    { ic: 'rupee', lab: 'Receipts', clr: 'var(--c600)', bg: 'var(--c50)' },
    { ic: 'message', lab: 'Messages', clr: '#1E40AF', bg: 'var(--info-50)' },
    { ic: 'megaphone', lab: 'Announcements', clr: '#9A3412', bg: '#FFF7ED' },
  ];
  const results = q.toLowerCase().includes('aarav') ? [
    { ic: 'user', lab: 'Aarav Reddy', sub: 'Class 8-B · DPS', to: 'fees' },
    { ic: 'rupee', lab: 'Aarav · Term 2 fees', sub: '₹18,500 · due 26 Mar', to: 'pay' },
    { ic: 'clipboard', lab: "Aarav's homework", sub: '4 due · 1 overdue', to: 'homework' },
    { ic: 'calendar', lab: "Aarav's attendance", sub: '92% this year', to: 'attendance' },
  ] : [];
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="Search" onBack={() => nav.pop()}/>
      <div style={{ padding: '0 20px 12px', background: '#fff' }}>
        <div className="row" style={{ gap: 8, padding: '10px 14px', background: 'var(--n50)', borderRadius: 12 }}>
          <Icon name="search" size={18} style={{ color: 'var(--n500)' }}/>
          <input autoFocus value={q} onChange={e => setQ(e.target.value)} placeholder="Search children, receipts, messages…" style={{ flex: 1, border: 'none', background: 'transparent', fontSize: 14, fontWeight: 500, color: 'var(--n900)', outline: 'none' }}/>
          {q && <button onClick={() => setQ('')} style={{ width: 22, height: 22, borderRadius: 99, background: 'var(--n200)', color: 'var(--n600)', display: 'grid', placeItems: 'center' }}><Icon name="x" size={12}/></button>}
        </div>
      </div>
      <div className="app-body" style={{ paddingTop: 16 }}>
        {!q && (
          <>
            <div>
              <SH title="Recent" right={<button className="btn-ghost" style={{ fontSize: 11 }}>Clear</button>}/>
              <div className="row" style={{ gap: 6, flexWrap: 'wrap' }}>
                {recents.map((r, i) => (
                  <button key={i} onClick={() => setQ(r)} className="pill" style={{ background: 'var(--n50)', border: '1px solid var(--n100)', cursor: 'pointer', padding: '6px 12px' }}><Icon name="clock" size={11}/> {r}</button>
                ))}
              </div>
            </div>
            <div>
              <SH title="Browse"/>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10 }}>
                {cats.map((c, i) => (
                  <button key={i} className="card" style={{ padding: 14, textAlign: 'left', display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{ width: 36, height: 36, borderRadius: 10, background: c.bg, color: c.clr, display: 'grid', placeItems: 'center' }}><Icon name={c.ic} size={18}/></div>
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{c.lab}</div>
                  </button>
                ))}
              </div>
            </div>
          </>
        )}
        {q && results.length > 0 && (
          <div className="card" style={{ padding: 0 }}>
            {results.map((r, i) => (
              <button key={i} onClick={() => nav.replace(r.to)} className="row" style={{ width: '100%', padding: 14, gap: 12, borderBottom: i < results.length - 1 ? '1px solid var(--n100)' : 'none', background: 'transparent', textAlign: 'left' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--n50)', color: 'var(--n700)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name={r.ic} size={18}/></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{r.lab}</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 1 }}>{r.sub}</div>
                </div>
                <Icon name="chev-r" size={16} style={{ color: 'var(--n400)' }}/>
              </button>
            ))}
          </div>
        )}
        {q && results.length === 0 && (
          <div className="card" style={{ padding: 28, textAlign: 'center' }}>
            <Icon name="search" size={28} style={{ color: 'var(--n300)' }}/>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)', marginTop: 8 }}>No results for "{q}"</div>
            <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 4 }}>Try searching by child name or receipt number</div>
          </div>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CLASSES (teacher)
// ─────────────────────────────────────────────────────────────
function ClassesScreen({ nav }) {
  const sections = [
    { cls: '8-B', subj: 'Mathematics', students: 32, present: 29, next: '10:30 today', clr: 'var(--p600)', bg: 'var(--p50)' },
    { cls: '9-A', subj: 'Mathematics', students: 28, present: 26, next: '11:30 today', clr: 'var(--c600)', bg: 'var(--c50)' },
    { cls: '10-C', subj: 'Mathematics', students: 30, present: 28, next: '12:30 today', clr: 'var(--success)', bg: 'var(--success-50)' },
    { cls: '8-A', subj: 'Mathematics', students: 31, present: 0, next: 'Tomorrow', clr: 'var(--warning)', bg: 'var(--warning-50)' },
    { cls: '9-B', subj: 'Mathematics', students: 29, present: 0, next: 'Tomorrow', clr: '#1E40AF', bg: 'var(--info-50)' },
    { cls: '10-A', subj: 'Mathematics', students: 34, present: 0, next: 'Wed', clr: '#8B5CF6', bg: '#FAF5FF' },
  ];
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="My classes" onBack={() => nav.pop()} right={<button className="btn-ghost" style={{ fontSize: 12, fontWeight: 600 }}><Icon name="filter" size={14}/></button>}/>
      <div className="app-body">
        <div className="card-grad" style={{ padding: 16 }}>
          <div style={{ fontSize: 10, opacity: .85, letterSpacing: '.08em', fontWeight: 700, fontFamily: 'var(--mono)' }}>YOU TEACH</div>
          <div className="row" style={{ gap: 16, marginTop: 6 }}>
            <div><div style={{ fontSize: 26, fontWeight: 800, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>6</div><div style={{ fontSize: 10, opacity: .85, marginTop: 2 }}>sections</div></div>
            <div style={{ width: 1, background: 'rgba(255,255,255,.2)' }}></div>
            <div><div style={{ fontSize: 26, fontWeight: 800, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>184</div><div style={{ fontSize: 10, opacity: .85, marginTop: 2 }}>students</div></div>
            <div style={{ width: 1, background: 'rgba(255,255,255,.2)' }}></div>
            <div><div style={{ fontSize: 26, fontWeight: 800, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>4</div><div style={{ fontSize: 10, opacity: .85, marginTop: 2 }}>today</div></div>
          </div>
        </div>
        <div className="col" style={{ gap: 10 }}>
          {sections.map((s, i) => (
            <button key={i} className="card row" style={{ padding: 14, gap: 12, textAlign: 'left' }}>
              <div style={{ width: 52, height: 52, borderRadius: 14, background: s.bg, color: s.clr, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: '-.02em' }}>{s.cls}</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="spread">
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>Class {s.cls}</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', fontFamily: 'var(--mono)', fontWeight: 600 }}>{s.next}</div>
                </div>
                <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>{s.subj} · {s.students} students</div>
                <div className="row" style={{ gap: 6, marginTop: 8 }}>
                  {s.present > 0 ? <span className="pill pill-s"><Icon name="check" size={10}/> {s.present}/{s.students} present</span> : <span className="pill">Upcoming</span>}
                </div>
              </div>
              <Icon name="chev-r" size={18} style={{ color: 'var(--n400)' }}/>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TASKS (teacher)
// ─────────────────────────────────────────────────────────────
function TasksScreen({ nav }) {
  const [tab, setTab] = useStateX('grade');
  const toGrade = [
    { stu: 'Aarav R.', cls: '8-B', task: 'Algebra Ex. 7.3', submitted: '2h ago', initial: 'A', clr: '' },
    { stu: 'Diya S.', cls: '5-A', task: 'Geometry sheet', submitted: '4h ago', initial: 'D', clr: 'coral' },
    { stu: 'Kavya M.', cls: '8-B', task: 'Word problems', submitted: '6h ago', initial: 'K', clr: 'green' },
    { stu: 'Rohan P.', cls: '9-A', task: 'Trig identities', submitted: 'Yest', initial: 'R', clr: 'sky' },
    { stu: 'Anaya G.', cls: '10-C', task: 'Statistics worksheet', submitted: 'Yest', initial: 'A', clr: '' },
  ];
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="Tasks" onBack={() => nav.pop()} right={<button className="btn-ghost" style={{ fontSize: 12, fontWeight: 600 }}><Icon name="plus" size={14}/> Post</button>}/>
      <div style={{ padding: '0 20px 12px', background: '#fff', borderBottom: '1px solid var(--n100)' }}>
        <div className="row" style={{ gap: 6 }}>
          {[
            { id: 'grade', lab: 'To grade', n: 12 },
            { id: 'posted', lab: 'Posted', n: 8 },
            { id: 'drafts', lab: 'Drafts', n: 2 },
          ].map(x => (
            <button key={x.id} onClick={() => setTab(x.id)} style={{
              flexShrink: 0, padding: '8px 14px', borderRadius: 99, fontSize: 12, fontWeight: 700,
              background: tab === x.id ? 'var(--n900)' : 'var(--n50)', color: tab === x.id ? '#fff' : 'var(--n700)',
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              {x.lab}
              <span style={{ display: 'inline-grid', placeItems: 'center', minWidth: 18, height: 18, padding: '0 5px', borderRadius: 99, fontSize: 10, fontWeight: 800, background: tab === x.id ? 'rgba(255,255,255,.18)' : 'var(--n100)', color: tab === x.id ? '#fff' : 'var(--n600)' }}>{x.n}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="app-body" style={{ paddingTop: 12 }}>
        {tab === 'grade' && (
          <>
            <div className="row" style={{ gap: 8, marginBottom: 4 }}>
              <button className="btn-sm btn-soft" style={{ flex: 1, height: 36, fontSize: 12 }}><Icon name="check" size={14}/> Quick grade all</button>
              <button className="btn-sm btn-ghost" style={{ height: 36, fontSize: 12, padding: '0 12px' }}>Filter</button>
            </div>
            {toGrade.map((s, i) => (
              <div key={i} className="card row" style={{ padding: 12, gap: 12 }}>
                <div className={`av av-44 ${s.clr}`}>{s.initial}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="spread">
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{s.stu}</div>
                    <span style={{ fontSize: 10, color: 'var(--n400)', fontFamily: 'var(--mono)' }}>{s.cls}</span>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--n600)', marginTop: 1 }}>{s.task}</div>
                  <div style={{ fontSize: 10, color: 'var(--n400)', marginTop: 2 }}>{s.submitted}</div>
                </div>
                <button className="btn-sm" style={{ background: 'var(--p600)', color: '#fff', height: 32, padding: '0 12px', fontSize: 11, fontWeight: 700, borderRadius: 8 }}>Grade</button>
              </div>
            ))}
          </>
        )}
        {tab === 'posted' && (
          <div className="card" style={{ padding: 28, textAlign: 'center' }}>
            <div style={{ fontSize: 28 }}>📚</div>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)', marginTop: 8 }}>8 active assignments</div>
            <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 4 }}>Across 6 sections</div>
          </div>
        )}
        {tab === 'drafts' && (
          <div className="card" style={{ padding: 28, textAlign: 'center' }}>
            <div style={{ fontSize: 28 }}>📝</div>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)', marginTop: 8 }}>2 drafts</div>
            <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 4 }}>Continue where you left off</div>
          </div>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// LEARN (student) — study resources
// ─────────────────────────────────────────────────────────────
function LearnScreen({ nav }) {
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="Learn" onBack={() => nav.pop()} right={<button style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="search" size={18}/></button>}/>
      <div className="app-body">
        <div className="card-grad-coral" style={{ padding: 18 }}>
          <div style={{ fontSize: 10, opacity: .85, letterSpacing: '.08em', fontWeight: 700, fontFamily: 'var(--mono)' }}>EXAM PREP</div>
          <div style={{ fontSize: 18, fontWeight: 800, marginTop: 4 }}>Mid-Term · Mathematics</div>
          <div style={{ fontSize: 11, opacity: .9, marginTop: 2 }}>4 of 7 chapters revised · 5 days to go</div>
          <div style={{ height: 6, background: 'rgba(255,255,255,.22)', borderRadius: 99, marginTop: 12, overflow: 'hidden' }}>
            <div style={{ width: '57%', height: '100%', background: '#fff', borderRadius: 99 }}></div>
          </div>
        </div>
        <div>
          <SH title="Quick resources"/>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10 }}>
            {[
              { ic: 'play', lab: 'Recorded lectures', sub: '24 videos', clr: 'var(--p600)', bg: 'var(--p50)' },
              { ic: 'clipboard', lab: 'Past papers', sub: 'Last 5 years', clr: 'var(--c600)', bg: 'var(--c50)' },
              { ic: 'book-open', lab: 'Textbooks', sub: 'NCERT · class 8', clr: '#1E40AF', bg: 'var(--info-50)' },
              { ic: 'sparkle', lab: 'Practice quiz', sub: 'AI-generated', clr: '#9A3412', bg: '#FFF7ED' },
            ].map((c, i) => (
              <button key={i} className="card" style={{ padding: 14, textAlign: 'left' }}>
                <div style={{ width: 40, height: 40, borderRadius: 11, background: c.bg, color: c.clr, display: 'grid', placeItems: 'center' }}><Icon name={c.ic} size={20}/></div>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)', marginTop: 10 }}>{c.lab}</div>
                <div style={{ fontSize: 10.5, color: 'var(--n500)', marginTop: 2 }}>{c.sub}</div>
              </button>
            ))}
          </div>
        </div>
        <div>
          <SH title="Continue where you left off" right={<button className="btn-ghost" style={{ fontSize: 11 }}>See all</button>}/>
          <div className="col" style={{ gap: 10 }}>
            {[
              { sub: 'Mathematics', ch: 'Ch 7 · Linear equations', pct: 60, time: '12 min left' },
              { sub: 'Science', ch: 'Ch 5 · Photosynthesis', pct: 35, time: '24 min left' },
              { sub: 'English', ch: 'Poem · The Road Not Taken', pct: 80, time: '4 min left' },
            ].map((r, i) => (
              <div key={i} className="card row" style={{ padding: 12, gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--n50)', color: 'var(--n700)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name="play" size={18}/></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="spread">
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{r.ch}</div>
                    <div style={{ fontSize: 10, color: 'var(--n500)', fontFamily: 'var(--mono)', fontWeight: 600 }}>{r.pct}%</div>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 1 }}>{r.sub} · {r.time}</div>
                  <div style={{ height: 4, background: 'var(--n100)', borderRadius: 99, marginTop: 8, overflow: 'hidden' }}>
                    <div style={{ width: `${r.pct}%`, height: '100%', background: 'var(--p500)', borderRadius: 99 }}></div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// RESULTS — exam results breakdown
// ─────────────────────────────────────────────────────────────
function ResultsScreen({ nav }) {
  const subjects = [
    { sub: 'Mathematics', score: 92, max: 100, grade: 'A1', clr: 'var(--success)' },
    { sub: 'Science', score: 88, max: 100, grade: 'A1', clr: 'var(--success)' },
    { sub: 'English', score: 84, max: 100, grade: 'A2', clr: 'var(--p600)' },
    { sub: 'Social Studies', score: 76, max: 100, grade: 'B1', clr: 'var(--warning)' },
    { sub: 'Hindi', score: 81, max: 100, grade: 'A2', clr: 'var(--p600)' },
  ];
  const total = subjects.reduce((s, x) => s + x.score, 0);
  const totalMax = subjects.reduce((s, x) => s + x.max, 0);
  const pct = Math.round((total / totalMax) * 100);
  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={{ paddingTop: 56 }}>
          <button onClick={() => nav.pop()} style={{ width: 38, height: 38, borderRadius: 12, background: 'rgba(255,255,255,.18)', display: 'grid', placeItems: 'center', color: '#fff', marginBottom: 16 }}><Icon name="chev-l" size={18}/></button>
          <div style={{ fontSize: 11, opacity: .85, fontFamily: 'var(--mono)', letterSpacing: '.08em', fontWeight: 700 }}>UNIT TEST 2 · MARCH 2026</div>
          <div style={{ fontSize: 24, fontWeight: 800, marginTop: 4, letterSpacing: '-.02em' }}>Aarav Reddy · 8-B</div>
          <div className="row" style={{ gap: 16, marginTop: 16 }}>
            <div>
              <div style={{ fontSize: 44, fontWeight: 800, fontVariantNumeric: 'tabular-nums', lineHeight: 1, letterSpacing: '-.03em' }}>{pct}%</div>
              <div style={{ fontSize: 11, opacity: .85, marginTop: 4 }}>{total} of {totalMax} marks</div>
            </div>
            <div style={{ width: 1, background: 'rgba(255,255,255,.2)' }}></div>
            <div>
              <div style={{ fontSize: 22, fontWeight: 800, lineHeight: 1 }}>A1</div>
              <div style={{ fontSize: 11, opacity: .85, marginTop: 4 }}>Class rank 4 / 32</div>
            </div>
          </div>
        </div>
        <div style={{ padding: 20 }}>
          <SH title="Subject-wise"/>
          <div className="card" style={{ padding: 0 }}>
            {subjects.map((s, i) => (
              <div key={i} className="row" style={{ padding: 14, gap: 12, borderBottom: i < subjects.length - 1 ? '1px solid var(--n100)' : 'none' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--n50)', color: s.clr, display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 11 }}>{s.grade}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="spread">
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{s.sub}</div>
                    <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--n900)', fontVariantNumeric: 'tabular-nums' }}>{s.score} / {s.max}</div>
                  </div>
                  <div style={{ height: 4, background: 'var(--n100)', borderRadius: 99, marginTop: 6, overflow: 'hidden' }}>
                    <div style={{ width: `${(s.score / s.max) * 100}%`, height: '100%', background: s.clr, borderRadius: 99 }}></div>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div className="row" style={{ gap: 10, marginTop: 16 }}>
            <button className="btn btn-outline" style={{ height: 46, flex: 1 }}><Icon name="down" size={16}/> Report card</button>
            <button className="btn" style={{ height: 46, flex: 1 }}><Icon name="share" size={16}/> Share</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ANNOUNCEMENTS
// ─────────────────────────────────────────────────────────────
function AnnouncementsScreen({ nav }) {
  const items = [
    { date: '12 Mar', title: 'Annual Day · 28 March', body: 'Cultural performances, tech expo and inter-house finale. Auditorium gates open at 3:30 PM.', tag: 'EVENT', clr: '#1E40AF', bg: 'var(--info-50)', pinned: true },
    { date: '08 Mar', title: 'Holi holiday · 14 March', body: 'School closed Monday. Buses won\'t run. Have a safe holiday!', tag: 'HOLIDAY', clr: 'var(--c600)', bg: 'var(--c50)' },
    { date: '06 Mar', title: 'PTM Saturday · 16 March', body: 'Slot booking opens Wednesday 9 AM via the Scholiq app.', tag: 'PTM', clr: '#9A3412', bg: '#FFF7ED' },
    { date: '02 Mar', title: 'Science fair winners', body: 'Class 8-B\'s "Solar drier" team takes 1st prize. Full results inside.', tag: 'WINS', clr: 'var(--success)', bg: 'var(--success-50)' },
    { date: '28 Feb', title: 'Library catalogue refreshed', body: '180 new titles · biographies, sci-fi, regional literature.', tag: 'UPDATE', clr: 'var(--n700)', bg: 'var(--n50)' },
  ];
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="Announcements" onBack={() => nav.pop()}/>
      <div className="app-body">
        {items.map((a, i) => (
          <div key={i} className={a.pinned ? 'card-tinted' : 'card'} style={{ padding: 14 }}>
            <div className="spread">
              <div className="row" style={{ gap: 8 }}>
                <span style={{ fontSize: 9, fontWeight: 800, color: a.clr, letterSpacing: '.08em', padding: '3px 8px', background: a.bg, borderRadius: 99 }}>{a.tag}</span>
                {a.pinned && <span className="pill pill-p" style={{ fontSize: 9 }}>📌 PINNED</span>}
              </div>
              <div style={{ fontSize: 10, color: 'var(--n400)', fontFamily: 'var(--mono)', fontWeight: 600 }}>{a.date}</div>
            </div>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)', marginTop: 8 }}>{a.title}</div>
            <div style={{ fontSize: 11.5, color: 'var(--n600)', marginTop: 4, lineHeight: 1.5 }}>{a.body}</div>
            <div className="row" style={{ gap: 6, marginTop: 10 }}>
              <button className="btn-sm btn-ghost" style={{ height: 28, padding: '0 10px', fontSize: 11 }}>Read more</button>
              <button className="btn-sm btn-ghost" style={{ height: 28, padding: '0 10px', fontSize: 11 }}><Icon name="share" size={11}/> Share</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CHILD DASH — drill-in from parent home
// ─────────────────────────────────────────────────────────────
function ChildDashScreen({ nav, params }) {
  const c = params || { name: 'Aarav', cls: '8-B', initial: 'A', clr: 'p' };
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title={c.name} onBack={() => nav.pop()} right={<button style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="more" size={18}/></button>}/>
      <div className="app-body">
        <div className="card row" style={{ padding: 18, gap: 14 }}>
          <div className={`av av-48 ${c.clr === 'p' ? '' : c.clr}`} style={{ width: 64, height: 64, fontSize: 22 }}>{c.initial}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--n900)' }}>{c.name} Reddy</div>
            <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>Class {c.cls} · Roll #14 · DPS Hyderabad</div>
            <div className="row" style={{ gap: 6, marginTop: 8 }}>
              <span className="pill pill-s">92% attendance</span>
              <span className="pill">Rank 4</span>
            </div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
          {[
            { ic: 'rupee', lab: 'Fees', clr: 'var(--c600)', bg: 'var(--c50)', to: 'fees' },
            { ic: 'calendar', lab: 'Attend', clr: 'var(--p600)', bg: 'var(--p50)', to: 'attendance' },
            { ic: 'clipboard', lab: 'Tasks', clr: '#92400E', bg: 'var(--warning-50)', to: 'homework' },
            { ic: 'trophy', lab: 'Results', clr: '#854D0E', bg: '#FEFCE8', to: 'results' },
          ].map((q, i) => (
            <button key={i} onClick={() => nav.push(q.to)} className="card" style={{ padding: 12, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: q.bg, color: q.clr, display: 'grid', placeItems: 'center' }}><Icon name={q.ic} size={20}/></div>
              <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--n900)' }}>{q.lab}</div>
            </button>
          ))}
        </div>
        <div>
          <SH title="Recent activity" right={<button className="btn-ghost" style={{ fontSize: 11 }}>All</button>}/>
          <div className="col" style={{ gap: 8 }}>
            {[
              { ic: 'check', clr: 'var(--success)', bg: 'var(--success-50)', t: 'Marked present', s: 'Today · 8:42 AM' },
              { ic: 'trophy', clr: '#854D0E', bg: '#FEFCE8', t: 'Scored 92 in Math UT', s: 'Yest' },
              { ic: 'clipboard', clr: '#1E40AF', bg: 'var(--info-50)', t: 'New homework · Science', s: '2d' },
            ].map((a, i) => (
              <div key={i} className="row card" style={{ padding: 12, gap: 12 }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: a.bg, color: a.clr, display: 'grid', placeItems: 'center' }}><Icon name={a.ic} size={16}/></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--n900)' }}>{a.t}</div>
                  <div style={{ fontSize: 10, color: 'var(--n500)', marginTop: 1 }}>{a.s}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// Export all
Object.assign(window, {
  SH,
  HomeworkScreen, TimetableScreen, TransportScreen, LibraryScreen, HistoryScreen,
  SearchScreen, ClassesScreen, TasksScreen, LearnScreen, ResultsScreen,
  AnnouncementsScreen, ChildDashScreen,
});