// screens.jsx — All screens for Scholiq mobile app prototype
// Parent / Student / Teacher variants. Each Screen receives ({ nav, role, lang, t })

const { useState, useEffect, useMemo } = React;

// ─────────────────────────────────────────────────────────────
// I18n strings (English / Hindi / Telugu) — small set, covering hero copy
// ─────────────────────────────────────────────────────────────
const STRINGS = {
  en: {
    greeting: 'Good morning', dues: 'Combined dues', viewAll: 'View all',
    payNow: 'Pay now', upcoming: 'Upcoming', recent: 'Recent activity',
    children: 'Your children', addChild: 'Add child', quickActions: 'Quick actions',
    fees: 'Fees', attendance: 'Attendance', timetable: 'Timetable', homework: 'Homework',
    transport: 'Transport', library: 'Library', announcements: 'Announcements',
    home: 'Home', learn: 'Learn', chat: 'Chat', profile: 'Profile',
    today: 'Today', classes: 'Classes', tasks: 'Tasks',
    streak: 'day streak', exam: 'Mid-Term · Mathematics', examIn: 'in 5 days',
  },
  hi: {
    greeting: 'सुप्रभात', dues: 'कुल बकाया', viewAll: 'सभी देखें',
    payNow: 'भुगतान करें', upcoming: 'आगामी', recent: 'हाल की गतिविधि',
    children: 'आपके बच्चे', addChild: 'बच्चा जोड़ें', quickActions: 'त्वरित क्रियाएँ',
    fees: 'फीस', attendance: 'उपस्थिति', timetable: 'समय-सारणी', homework: 'गृहकार्य',
    transport: 'परिवहन', library: 'पुस्तकालय', announcements: 'घोषणाएँ',
    home: 'होम', learn: 'सीखें', chat: 'चैट', profile: 'प्रोफ़ाइल',
    today: 'आज', classes: 'कक्षाएँ', tasks: 'कार्य',
    streak: 'दिन की लय', exam: 'मध्यावधि · गणित', examIn: '5 दिनों में',
  },
  te: {
    greeting: 'శుభోదయం', dues: 'మొత్తం బకాయి', viewAll: 'అన్నీ చూడండి',
    payNow: 'ఇప్పుడు చెల్లించండి', upcoming: 'రాబోయే', recent: 'ఇటీవలి కార్యకలాపం',
    children: 'మీ పిల్లలు', addChild: 'పిల్లవాడిని జోడించండి', quickActions: 'త్వరిత చర్యలు',
    fees: 'ఫీజులు', attendance: 'హాజరు', timetable: 'సమయపట్టిక', homework: 'ఇంటిపని',
    transport: 'రవాణా', library: 'గ్రంథాలయం', announcements: 'ప్రకటనలు',
    home: 'హోమ్', learn: 'నేర్చుకోండి', chat: 'చాట్', profile: 'ప్రొఫైల్',
    today: 'నేడు', classes: 'తరగతులు', tasks: 'పనులు',
    streak: 'రోజుల వరుస', exam: 'మధ్య-పరీక్ష · గణితం', examIn: '5 రోజుల్లో',
  },
};

const useT = (lang) => STRINGS[lang] || STRINGS.en;

// ─────────────────────────────────────────────────────────────
// Status bar + Top header bar
// ─────────────────────────────────────────────────────────────
function StatusBar({ dark = false }) {
  return (
    <div className={`sb${dark ? ' dark' : ''}`}>
      <span className="sb-time">9:41</span>
      <span className="sb-icons">
        <span className="sb-bars"><i></i><i></i><i></i><i></i></span>
        <svg className="sb-wifi" viewBox="0 0 14 10" fill="currentColor"><path d="M7 2.5c1.6 0 3 .55 4.05 1.5L12.5 2.55C11 1.05 9.1 0 7 0S3 1.05 1.5 2.55L2.95 4C4 3.05 5.4 2.5 7 2.5zm0 3c.95 0 1.8.4 2.4 1l1.45-1.45C9.85 4 8.5 3.5 7 3.5s-2.85.5-3.85 1.55L4.6 6.5c.6-.6 1.45-1 2.4-1z"/><circle cx="7" cy="9" r="1"/></svg>
        <span className="sb-batt"><b></b></span>
      </span>
    </div>
  );
}

function NavHeader({ title, onBack, right, transparent }) {
  return (
    <div style={{
      padding: '8px 16px 12px', display: 'flex', alignItems: 'center', gap: 8,
      background: transparent ? 'transparent' : '#fff', flexShrink: 0,
    }}>
      {onBack && (
        <button onClick={onBack} style={{
          width: 40, height: 40, borderRadius: 12, background: transparent ? 'rgba(255,255,255,.15)' : 'var(--n50)',
          display: 'grid', placeItems: 'center', color: transparent ? '#fff' : 'var(--n800)',
        }}>
          <Icon name="chev-l" size={20}/>
        </button>
      )}
      <div style={{ flex: 1, fontSize: 17, fontWeight: 700, color: transparent ? '#fff' : 'var(--n900)', letterSpacing: '-.01em' }}>{title}</div>
      {right}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Greeting / hero card
// ─────────────────────────────────────────────────────────────
function HeroParent({ t, lang, nav, membership, onSwitch }) {
  return (
    <div className="head-grad" style={{ paddingTop: 56 }}>
      {membership && onSwitch && (
        <div className="row" style={{ marginBottom: 14 }}>
          <MembershipChip membership={membership} onTap={onSwitch} variant="dark"/>
        </div>
      )}
      <div className="spread" style={{ marginBottom: 20 }}>
        <div>
          <div style={{ fontSize: 12, opacity: .85, fontWeight: 500, letterSpacing: '.02em' }}>{t.greeting}, Priya 👋</div>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.02em', marginTop: 2 }}>3 children · 2 schools</div>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <button onClick={() => nav.push('search')} style={{ width: 38, height: 38, borderRadius: 12, background: 'rgba(255,255,255,.18)', display: 'grid', placeItems: 'center', color: '#fff', backdropFilter: 'blur(8px)' }}><Icon name="search" size={18}/></button>
          <button onClick={() => nav.push('notifications')} style={{ width: 38, height: 38, borderRadius: 12, background: 'rgba(255,255,255,.18)', display: 'grid', placeItems: 'center', color: '#fff', position: 'relative', backdropFilter: 'blur(8px)' }}>
            <Icon name="bell" size={18}/>
            <span style={{ position: 'absolute', top: 8, right: 8, width: 8, height: 8, borderRadius: 99, background: 'var(--c500)', boxShadow: '0 0 0 2px var(--p600)' }}></span>
          </button>
        </div>
      </div>
      <div style={{
        background: 'rgba(255,255,255,.14)', backdropFilter: 'blur(12px)',
        border: '1px solid rgba(255,255,255,.2)', borderRadius: 18, padding: '16px 18px',
      }}>
        <div className="spread" style={{ alignItems: 'flex-start' }}>
          <div>
            <div style={{ fontSize: 11, opacity: .85, textTransform: 'uppercase', letterSpacing: '.08em', fontFamily: 'var(--mono)', fontWeight: 600 }}>{t.dues}</div>
            <div style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-.03em', marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>₹47,250</div>
            <div style={{ fontSize: 11, opacity: .9, marginTop: 2 }}>3 components · due Friday, Nov 15</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 10, opacity: .8, fontFamily: 'var(--mono)', fontWeight: 600, letterSpacing: '.06em' }}>PAID</div>
            <div style={{ fontSize: 14, fontWeight: 800, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>₹25,000</div>
            <div style={{ fontSize: 10, opacity: .75, marginTop: 1 }}>of ₹72,250</div>
          </div>
        </div>
        {/* Year progress */}
        <div style={{ marginTop: 14 }}>
          <div className="spread" style={{ marginBottom: 6, fontSize: 10, opacity: .9 }}>
            <span style={{ fontWeight: 600 }}>Academic year 2024–25</span>
            <span style={{ fontFamily: 'var(--mono)', fontWeight: 700 }}>34%</span>
          </div>
          <div style={{ height: 6, background: 'rgba(255,255,255,.18)', borderRadius: 99, overflow: 'hidden' }}>
            <div style={{ width: '34%', height: '100%', background: 'linear-gradient(90deg,#fff,rgba(255,255,255,.85))', borderRadius: 99 }}></div>
          </div>
        </div>
        <button onClick={() => nav.push('pay')} style={{
          marginTop: 14, width: '100%', background: '#fff', color: 'var(--p700)', height: 44,
          borderRadius: 99, fontSize: 13, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          boxShadow: '0 6px 18px rgba(0,0,0,.18)', letterSpacing: '-.01em',
        }}>{t.payNow} · ₹47,250 <Icon name="arrow-right" size={14}/></button>
        <div className="row" style={{ gap: 6, marginTop: 10, fontSize: 10, opacity: .8, justifyContent: 'center' }}>
          <Icon name="check" size={11}/>
          <span>Secured by Razorpay · UPI, Card, Net banking</span>
        </div>
      </div>
    </div>
  );
}

function HeroStudent({ t, membership, onSwitch }) {
  return (
    <div className="head-grad" style={{ background: 'linear-gradient(135deg,#4F46E5 0%,#F43F5E 100%)', paddingTop: 56 }}>
      {membership && onSwitch && (
        <div className="row" style={{ marginBottom: 14 }}>
          <MembershipChip membership={membership} onTap={onSwitch} variant="dark"/>
        </div>
      )}
      <div className="spread" style={{ marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 12, opacity: .9, fontWeight: 500 }}>{t.greeting}</div>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.02em', marginTop: 2 }}>Aarav Reddy</div>
          <div style={{ fontSize: 11, opacity: .85, marginTop: 2 }}>Class 8-B · DPS Hyderabad</div>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px',
          borderRadius: 99, background: 'rgba(255,255,255,.2)', border: '1px solid rgba(255,255,255,.3)',
          backdropFilter: 'blur(8px)',
        }}>
          <span className="flame" style={{ color: '#FFB347' }}><Icon name="flame" size={16}/></span>
          <span style={{ fontWeight: 800, fontSize: 14 }}>12</span>
          <span style={{ fontSize: 10, opacity: .85 }}>{t.streak}</span>
        </div>
      </div>
      <div style={{
        background: 'rgba(255,255,255,.14)', backdropFilter: 'blur(12px)',
        border: '1px solid rgba(255,255,255,.2)', borderRadius: 18, padding: '14px 16px',
      }}>
        <div className="spread">
          <div>
            <div style={{ fontSize: 11, opacity: .85, textTransform: 'uppercase', letterSpacing: '.08em', fontFamily: 'var(--mono)', fontWeight: 600 }}>NEXT EXAM</div>
            <div style={{ fontSize: 16, fontWeight: 800, marginTop: 4 }}>{t.exam}</div>
            <div style={{ fontSize: 11, opacity: .9, marginTop: 2 }}>{t.examIn} · 9:30 AM · Hall A</div>
          </div>
          <div style={{ position: 'relative', width: 56, height: 56 }}>
            <svg className="ring-svg" width="56" height="56" viewBox="0 0 64 64" style={{ '--ring-dash': '170' }}>
              <circle className="ring-bg" cx="32" cy="32" r="28"/>
              <circle className="ring-fg" cx="32" cy="32" r="28"/>
            </svg>
            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', fontSize: 18, fontWeight: 800 }}>5d</div>
          </div>
        </div>
        {/* Prep progress */}
        <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid rgba(255,255,255,.18)' }}>
          <div className="spread" style={{ marginBottom: 6, fontSize: 10, opacity: .9 }}>
            <span style={{ fontWeight: 600 }}>Syllabus revised</span>
            <span style={{ fontFamily: 'var(--mono)', fontWeight: 700 }}>4 / 7 chapters</span>
          </div>
          <div style={{ display: 'flex', gap: 4 }}>
            {[1,1,1,1,0,0,0].map((v,i) => (
              <div key={i} style={{ flex: 1, height: 4, borderRadius: 99, background: v ? '#fff' : 'rgba(255,255,255,.22)' }}></div>
            ))}
          </div>
          <div style={{ fontSize: 10, opacity: .85, marginTop: 8 }}>3 days to unlock the <b style={{ fontWeight: 800 }}>15-day streak</b> badge 🔥</div>
        </div>
      </div>
      {/* Mini streak strip */}
      <div className="row" style={{ gap: 6, marginTop: 12, justifyContent: 'space-between' }}>
        {['M','T','W','T','F','S','S'].map((d,i) => {
          const done = i < 4;
          const today = i === 4;
          return (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
              <div style={{ fontSize: 9, opacity: .7, fontFamily: 'var(--mono)', fontWeight: 700 }}>{d}</div>
              <div style={{
                width: 26, height: 26, borderRadius: 99,
                background: today ? 'rgba(255,255,255,.95)' : done ? 'rgba(255,255,255,.32)' : 'rgba(255,255,255,.08)',
                border: today ? '0' : done ? '0' : '1px dashed rgba(255,255,255,.4)',
                color: today ? '#F43F5E' : '#fff',
                display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 800,
                boxShadow: today ? '0 0 0 3px rgba(255,255,255,.25)' : 'none',
                position: 'relative',
              }}>
                {today ? '🔥' : done ? <Icon name="check" size={12}/> : ''}
                {today && <span style={{ position: 'absolute', bottom: -14, fontSize: 8, fontWeight: 800, color: '#fff', background: 'rgba(0,0,0,.25)', padding: '1px 6px', borderRadius: 99, letterSpacing: '.04em' }}>NOW</span>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function HeroTeacher({ t, membership, onSwitch }) {
  return (
    <div className="head-grad" style={{ background: 'linear-gradient(135deg,#312E81 0%,#6366F1 100%)', paddingTop: 56 }}>
      {membership && onSwitch && (
        <div className="row" style={{ marginBottom: 14 }}>
          <MembershipChip membership={membership} onTap={onSwitch} variant="dark"/>
        </div>
      )}
      <div className="spread" style={{ marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 12, opacity: .85, fontWeight: 500 }}>{t.greeting}</div>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.02em', marginTop: 2 }}>Mrs. Reddy</div>
          <div style={{ fontSize: 11, opacity: .85, marginTop: 2 }}>Mathematics · Class 8 to 10</div>
        </div>
        <div className="av av-44" style={{ background: 'rgba(255,255,255,.2)', color: '#fff', border: '1px solid rgba(255,255,255,.3)' }}>SR</div>
      </div>
      {/* Day timeline */}
      <div style={{
        background: 'rgba(255,255,255,.14)', backdropFilter: 'blur(12px)',
        border: '1px solid rgba(255,255,255,.2)', borderRadius: 18, padding: '14px 16px', marginBottom: 10,
      }}>
        <div className="spread" style={{ marginBottom: 10 }}>
          <div>
            <div style={{ fontSize: 10, opacity: .85, fontFamily: 'var(--mono)', fontWeight: 700, letterSpacing: '.08em' }}>YOUR DAY</div>
            <div style={{ fontSize: 14, fontWeight: 700, marginTop: 2 }}>1 of 5 classes done · 4 to go</div>
          </div>
          <div style={{ position: 'relative', width: 44, height: 44 }}>
            <svg className="ring-svg" width="44" height="44" viewBox="0 0 64 64" style={{ '--ring-dash': '34' }}>
              <circle className="ring-bg" cx="32" cy="32" r="28"/>
              <circle className="ring-fg" cx="32" cy="32" r="28"/>
            </svg>
            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 800 }}>1/5</div>
          </div>
        </div>
        <div style={{ position: 'relative', height: 28, marginTop: 4 }}>
          <div style={{ position: 'absolute', left: 0, right: 0, top: 12, height: 4, background: 'rgba(255,255,255,.2)', borderRadius: 99 }}></div>
          <div style={{ position: 'absolute', left: 0, top: 12, height: 4, width: '28%', background: '#fff', borderRadius: 99 }}></div>
          {[0, 25, 50, 75, 100].map((p, i) => (
            <div key={i} style={{
              position: 'absolute', left: `calc(${p}% - 4px)`, top: 10, width: 8, height: 8, borderRadius: 99,
              background: p <= 25 ? '#fff' : 'rgba(255,255,255,.45)',
            }}></div>
          ))}
          <div style={{ position: 'absolute', left: 'calc(28% - 6px)', top: 6, width: 12, height: 12, borderRadius: 99, background: '#fff', boxShadow: '0 0 0 4px rgba(255,255,255,.25)' }}></div>
        </div>
        <div className="spread" style={{ marginTop: 4, fontSize: 9, opacity: .7, fontFamily: 'var(--mono)', fontWeight: 600 }}>
          <span>8:30</span><span>10:30</span><span>12:30</span><span>2:30</span><span>4:30</span>
        </div>
      </div>
      {/* Stat tiles */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
        {[
          { lab: 'Now', val: '8-B', sub: 'Algebra · Rm 204', ic: 'zap', accent: true },
          { lab: 'Pending', val: '12', sub: 'submissions', ic: 'clipboard' },
          { lab: 'Absent', val: '3', sub: 'students', ic: 'user' },
        ].map((s, i) => (
          <div key={i} style={{
            background: s.accent ? 'rgba(255,255,255,.22)' : 'rgba(255,255,255,.12)',
            backdropFilter: 'blur(12px)',
            border: s.accent ? '1px solid rgba(255,255,255,.4)' : '1px solid rgba(255,255,255,.18)',
            borderRadius: 14, padding: '12px', position: 'relative',
          }}>
            <div className="row" style={{ gap: 6, alignItems: 'center' }}>
              <Icon name={s.ic} size={12}/>
              <div style={{ fontSize: 9, opacity: .85, textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 700 }}>{s.lab}</div>
            </div>
            <div style={{ fontSize: s.val.length > 2 ? 18 : 24, fontWeight: 800, marginTop: 4, lineHeight: 1, letterSpacing: '-.02em' }}>{s.val}</div>
            <div style={{ fontSize: 10, opacity: .85, marginTop: 3, lineHeight: 1.2 }}>{s.sub}</div>
            {s.accent && <span style={{ position: 'absolute', top: 8, right: 8, width: 6, height: 6, borderRadius: 99, background: '#FFB347', boxShadow: '0 0 0 3px rgba(255,179,71,.3)' }}></span>}
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HOME — Parent
// ─────────────────────────────────────────────────────────────
function ParentHome({ nav, lang, membership, onSwitch }) {
  const t = useT(lang);
  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">
        <HeroParent t={t} lang={lang} nav={nav} membership={membership} onSwitch={onSwitch}/>

        {/* Child switcher */}
        <div style={{ padding: '20px 20px 0' }}>
          <div className="spread" style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>{t.children}</div>
            <button className="btn-ghost" style={{ fontSize: 12, fontWeight: 600 }}>{t.viewAll}</button>
          </div>
          <div style={{ display: 'flex', gap: 10, overflowX: 'auto', margin: '0 -20px', padding: '0 20px 4px' }}>
            {[
              { name: 'Aarav', cls: '8-B', clr: 'p', dues: '₹18,500', dot: 'var(--c500)', initial: 'A' },
              { name: 'Diya', cls: '5-A', clr: 'coral', dues: 'Paid', dot: 'var(--success)', initial: 'D' },
              { name: 'Vihaan', cls: '2-C', clr: 'green', dues: '₹28,750', dot: 'var(--c500)', initial: 'V' },
            ].map((c, i) => (
              <button key={i} onClick={() => nav.push('childDash', c)} style={{
                flexShrink: 0, width: 130, padding: 14, background: '#fff',
                border: '1px solid var(--n100)', borderRadius: 16, textAlign: 'left',
                boxShadow: 'var(--el-1)',
              }}>
                <div className={`av av-44 ${c.clr === 'p' ? '' : c.clr}`} style={{ marginBottom: 8 }}>{c.initial}</div>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>{c.name}</div>
                <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 1 }}>Class {c.cls}</div>
                <div style={{ fontSize: 11, fontWeight: 600, marginTop: 8, display: 'flex', alignItems: 'center', gap: 4, color: c.dues === 'Paid' ? '#065F46' : 'var(--c700)' }}>
                  <span style={{ width: 6, height: 6, borderRadius: 99, background: c.dot }}></span>
                  {c.dues}
                </div>
              </button>
            ))}
            <button style={{
              flexShrink: 0, width: 130, border: '1.5px dashed var(--n200)',
              borderRadius: 16, padding: 14, color: 'var(--n500)', display: 'flex',
              flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'space-between',
              minHeight: 116, background: 'transparent',
            }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="plus" size={18}/></div>
              <div style={{ fontSize: 12, fontWeight: 600 }}>{t.addChild}</div>
            </button>
          </div>
        </div>

        {/* Quick actions */}
        <div style={{ padding: '20px' }}>
          <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 12, color: 'var(--n900)' }}>{t.quickActions}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
            {[
              { ic: 'rupee', lab: t.fees, bg: 'var(--c50)', clr: 'var(--c600)', to: 'fees' },
              { ic: 'calendar', lab: t.attendance, bg: 'var(--p50)', clr: 'var(--p600)', to: 'attendance' },
              { ic: 'clock', lab: t.timetable, bg: 'var(--info-50)', clr: '#1E40AF', to: 'timetable' },
              { ic: 'clipboard', lab: t.homework, bg: 'var(--warning-50)', clr: '#92400E', to: 'homework' },
              { ic: 'bus', lab: t.transport, bg: 'var(--success-50)', clr: '#065F46', to: 'transport' },
              { ic: 'book-open', lab: t.library, bg: '#FAF5FF', clr: '#6B21A8', to: 'library' },
              { ic: 'megaphone', lab: t.announcements, bg: '#FFF7ED', clr: '#9A3412', to: 'announcements' },
              { ic: 'trophy', lab: 'Results', bg: '#FEFCE8', clr: '#854D0E', to: 'results' },
            ].map((q, i) => (
              <button key={i} onClick={() => nav.push(q.to)} style={{
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                padding: '12px 4px', borderRadius: 14, background: 'transparent',
              }}>
                <div style={{ width: 48, height: 48, borderRadius: 14, background: q.bg, color: q.clr, display: 'grid', placeItems: 'center' }}>
                  <Icon name={q.ic} size={22}/>
                </div>
                <div style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--n700)', textAlign: 'center', lineHeight: 1.2 }}>{q.lab}</div>
              </button>
            ))}
          </div>
        </div>

        {/* Today's schedule strip */}
        <div style={{ padding: '0 20px 20px' }}>
          <div className="spread" style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>Aarav · {t.today}</div>
            <span className="pill pill-p"><span className="dot" style={{background:'var(--p600)'}}></span>Class 8-B</span>
          </div>
          <div className="card-grad" style={{ padding: 16 }}>
            <div className="spread">
              <div>
                <div style={{ fontSize: 10, opacity: .85, textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 700 }}>NOW · 10:30 — 11:15</div>
                <div style={{ fontSize: 17, fontWeight: 800, marginTop: 4 }}>Mathematics</div>
                <div style={{ fontSize: 12, opacity: .9, marginTop: 2 }}>Mrs. Reddy · Room 204</div>
              </div>
              <div style={{ width: 44, height: 44, borderRadius: 14, background: 'rgba(255,255,255,.2)', display: 'grid', placeItems: 'center', backdropFilter: 'blur(8px)' }}>
                <Icon name="zap" size={20}/>
              </div>
            </div>
            <div style={{ height: 1, background: 'rgba(255,255,255,.2)', margin: '14px -16px' }}></div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontSize: 11 }}>
              <div>
                <div style={{ opacity: .8, marginBottom: 2 }}>Next · 11:30</div>
                <div style={{ fontWeight: 700 }}>Science · Lab 1</div>
              </div>
              <div>
                <div style={{ opacity: .8, marginBottom: 2 }}>After · 12:30</div>
                <div style={{ fontWeight: 700 }}>Lunch break</div>
              </div>
            </div>
          </div>
        </div>

        {/* Children's recent assessment results (#5) */}
        <ParentRecentAssessments nav={nav}/>

        {/* Recent activity */}
        <div style={{ padding: '0 20px 20px' }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)', marginBottom: 12 }}>{t.recent}</div>
          <div className="col" style={{ gap: 8 }}>
            {[
              { ic: 'rupee', clr: 'var(--c600)', bg: 'var(--c50)', title: 'Term 2 fees due', sub: 'Aarav · in 14 days', time: '5h' },
              { ic: 'check', clr: '#1E40AF', bg: 'var(--info-50)', title: 'Attendance marked present', sub: 'Vihaan · 7 days streak', time: 'Yest' },
            ].map((a, i) => (
              <div key={i} className="row card" style={{ gap: 12, padding: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: 12, background: a.bg, color: a.clr, display: 'grid', placeItems: 'center' }}>
                  <Icon name={a.ic} size={18}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--n900)' }}>{a.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 1 }}>{a.sub}</div>
                </div>
                <div style={{ fontSize: 10, color: 'var(--n400)', fontWeight: 600 }}>{a.time}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// Recent-assessments card for parents — pulls window.PARENT_KIDS_RESULTS, taps drill into the
// existing assessmentResult screen for completed items, and the awaiting timeline for pending.
function ParentRecentAssessments({ nav }) {
  const kids = (typeof window !== 'undefined' && window.PARENT_KIDS_RESULTS) || [];
  const flat = [];
  kids.forEach(k => k.items.forEach(it => flat.push({ ...it, kid: k })));
  if (flat.length === 0) return null;
  const newCount = flat.filter(x => x.state === 'completed' && /^[0-9]+\s*h\s*ago$/i.test(x.when || '')).length;

  return (
    <div style={{ padding: '0 20px 20px' }}>
      <div className="spread" style={{ marginBottom: 12 }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>
          Children's results {newCount > 0 && <span className="pill pill-p" style={{ marginLeft: 6, fontSize: 9.5 }}>{newCount} new</span>}
        </div>
        <button className="btn-ghost" style={{ fontSize: 12, fontWeight: 600 }} onClick={() => nav.push('results')}>View all</button>
      </div>
      <div className="card" style={{ padding: 0 }}>
        {flat.slice(0, 4).map((it, i, arr) => {
          const isAwaiting = it.state === 'awaiting';
          const beats = !isAwaiting && it.classAvgPct != null && it.scorePct >= it.classAvgPct;
          const onTap = () => {
            if (it.aid) nav.push('assessmentResult', { id: it.aid });
            else nav.push('childDash', { name: it.kid.name, cls: it.kid.cls, initial: it.kid.initial, clr: it.kid.clr });
          };
          return (
            <button key={i} onClick={onTap} className="row" style={{
              width: '100%', padding: '12px 14px', gap: 12, textAlign: 'left',
              borderBottom: i < arr.length - 1 ? '1px solid var(--n100)' : 'none',
            }}>
              <div className={`av av-36 ${it.kid.clr}`} style={{ width: 36, height: 36, fontSize: 12, flexShrink: 0 }}>{it.kid.initial}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="spread">
                  <div style={{ fontSize: 9.5, fontWeight: 700, color: 'var(--n500)', letterSpacing: '.08em', fontFamily: 'var(--mono)' }}>
                    {it.kid.name.toUpperCase()} · {it.sub.toUpperCase()}
                  </div>
                  {isAwaiting ? (
                    <span className="pill pill-w" style={{ fontSize: 9.5 }}>Awaiting</span>
                  ) : (
                    <div className="row" style={{ gap: 6 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 800, color: 'var(--n900)', fontVariantNumeric: 'tabular-nums' }}>
                        {it.score}/{it.scoreMax}
                      </div>
                      <div style={{ fontSize: 9.5, fontWeight: 800, color: beats ? 'var(--success)' : 'var(--c600)', fontFamily: 'var(--mono)' }}>
                        {beats ? '↑' : '↓'} {Math.abs(it.scorePct - it.classAvgPct)}
                      </div>
                    </div>
                  )}
                </div>
                <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--n900)', marginTop: 2 }}>{it.title}</div>
                <div className="row" style={{ gap: 8, marginTop: 4, flexWrap: 'wrap', rowGap: 2 }}>
                  <span style={{ fontSize: 10.5, color: 'var(--n500)' }}>Class {it.kid.cls}</span>
                  <span style={{ fontSize: 10.5, color: 'var(--n400)' }}>·</span>
                  <span style={{ fontSize: 10.5, color: isAwaiting ? 'var(--warning)' : 'var(--n500)', fontWeight: isAwaiting ? 700 : 500 }}>
                    {isAwaiting ? `Submitted ${it.when}` : it.when}
                  </span>
                  {!isAwaiting && it.classAvgPct != null && (
                    <>
                      <span style={{ fontSize: 10.5, color: 'var(--n400)' }}>·</span>
                      <span style={{ fontSize: 10.5, color: 'var(--n500)' }}>Class avg {it.classAvgPct}%</span>
                    </>
                  )}
                </div>
              </div>
              <Icon name="chev-r" size={14} style={{ color: 'var(--n400)' }}/>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HOME — Student
// ─────────────────────────────────────────────────────────────
function StudentHome({ nav, lang, membership, onSwitch }) {
  const t = useT(lang);
  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">
        <HeroStudent t={t} membership={membership} onSwitch={onSwitch}/>

        {/* Today timeline */}
        <div style={{ padding: '20px' }}>
          <div className="spread" style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>{t.today}</div>
            <span style={{ fontSize: 11, color: 'var(--n500)', fontFamily: 'var(--mono)' }}>WED · 12 MAR</span>
          </div>
          <div className="col" style={{ gap: 0, position: 'relative' }}>
            <div style={{ position: 'absolute', left: 32, top: 8, bottom: 8, width: 2, background: 'var(--n100)' }}></div>
            {[
              { time: '08:30', subj: 'Assembly', room: 'Quad', state: 'done' },
              { time: '09:15', subj: 'English', room: '204', state: 'done' },
              { time: '10:00', subj: 'Mathematics', room: '204', state: 'now' },
              { time: '10:45', subj: 'Science', room: 'Lab 1', state: 'next' },
              { time: '11:30', subj: 'Lunch', room: '', state: 'next' },
              { time: '12:15', subj: 'History', room: '108', state: 'next' },
            ].map((p, i) => (
              <div key={i} className="row" style={{ gap: 16, padding: '8px 0', position: 'relative', zIndex: 1 }}>
                <div style={{ width: 44, fontSize: 11, color: 'var(--n500)', fontFamily: 'var(--mono)', fontWeight: 600 }}>{p.time}</div>
                <div style={{
                  width: 14, height: 14, borderRadius: 99,
                  background: p.state === 'now' ? 'var(--p600)' : p.state === 'done' ? 'var(--n100)' : '#fff',
                  border: p.state === 'next' ? '2px solid var(--n200)' : '0',
                  boxShadow: p.state === 'now' ? '0 0 0 4px var(--p100)' : 'none',
                  flexShrink: 0,
                }}></div>
                <div style={{ flex: 1, padding: p.state === 'now' ? 12 : '4px 0',
                  background: p.state === 'now' ? 'var(--p50)' : 'transparent',
                  borderRadius: p.state === 'now' ? 12 : 0,
                  border: p.state === 'now' ? '1px solid var(--p100)' : 'none',
                }}>
                  <div style={{ fontSize: 14, fontWeight: p.state === 'now' ? 700 : 600, color: p.state === 'done' ? 'var(--n400)' : 'var(--n900)', textDecoration: p.state === 'done' ? 'line-through' : 'none' }}>
                    {p.subj} {p.state === 'now' && <span className="pill pill-p" style={{ marginLeft: 6, fontSize: 9 }}>NOW</span>}
                  </div>
                  {p.room && <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>Room {p.room}{p.state === 'now' ? ' · Mrs. Reddy' : ''}</div>}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Homework */}
        <div style={{ padding: '0 20px 20px' }}>
          <div className="spread" style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>{t.homework} · 4 due</div>
            <button className="btn-ghost" style={{ fontSize: 12, fontWeight: 600 }} onClick={() => nav.push('homework')}>{t.viewAll}</button>
          </div>
          <div className="col" style={{ gap: 8 }}>
            {[
              { sub: 'Mathematics', task: 'Exercise 7.3 — Q1 to Q12', due: 'Tonight 11:59 PM', urg: 'late', clr: 'var(--c500)' },
              { sub: 'Science', task: 'Lab report — Photosynthesis', due: 'Tomorrow', urg: 'soon', clr: 'var(--warning)' },
              { sub: 'English', task: 'Essay · 500 words', due: 'Fri · 14 Mar', urg: 'ok', clr: 'var(--n300)' },
            ].map((h, i) => (
              <div key={i} className="card" style={{ padding: 14, borderLeft: `3px solid ${h.clr}`, borderRadius: '12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
                <div className="spread">
                  <div style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 600, fontFamily: 'var(--mono)' }}>{h.sub.toUpperCase()}</div>
                  {h.urg === 'late' && <span className="pill pill-c">⏰ Due tonight</span>}
                  {h.urg === 'soon' && <span className="pill pill-w">Due tomorrow</span>}
                  {h.urg === 'ok' && <span className="pill">Fri · 14 Mar</span>}
                </div>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>{h.task}</div>
                <div style={{ fontSize: 11, color: 'var(--n500)' }}>{h.due}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Assessments — entry to test engine (dynamic count from window.ASSESSMENTS) */}
        {(() => {
          const A = (typeof window !== 'undefined' && window.ASSESSMENTS) || [];
          const pendingCount = A.filter(a => a.state === 'assigned' || a.state === 'in_progress').length;
          const awaitingCount = A.filter(a => a.state === 'awaiting').length;
          const a2 = A.find(a => a.id === 'a2') || { sub: 'Science', cls: '8-B', title: 'Photosynthesis · Concept check', qCount: 8, durationMin: 15, marks: 24 };
          return (
            <div style={{ padding: '0 20px 20px' }}>
              <div className="spread" style={{ marginBottom: 12 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>
                  Assessments · {pendingCount} due{awaitingCount > 0 ? ` · ${awaitingCount} awaiting` : ''}
                </div>
                <button className="btn-ghost" style={{ fontSize: 12, fontWeight: 600 }} onClick={() => nav.push('assessments')}>{t.viewAll}</button>
              </div>
              <button onClick={() => nav.push('assessmentIntro', { id: 'a2' })} className="card" style={{ padding: 14, width: '100%', textAlign: 'left', borderLeft: '3px solid var(--c500)' }}>
                <div className="spread" style={{ marginBottom: 8 }}>
                  <div className="row" style={{ gap: 10 }}>
                    <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--success-50)', color: 'var(--success)', display: 'grid', placeItems: 'center' }}><Icon name="flask" size={18}/></div>
                    <div>
                      <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--n500)', letterSpacing: '.06em', fontFamily: 'var(--mono)' }}>{a2.sub.toUpperCase()} · {a2.cls}</div>
                      <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--n900)', marginTop: 1 }}>{a2.title}</div>
                    </div>
                  </div>
                  <span className="pill pill-c">⏰ Due tonight</span>
                </div>
                <div className="row" style={{ gap: 14, paddingLeft: 46, color: 'var(--n500)' }}>
                  <div className="row" style={{ gap: 4 }}><Icon name="clipboard" size={12}/><span style={{ fontSize: 10.5, fontWeight: 600 }}>{a2.qCount} questions · mixed types</span></div>
                  <div className="row" style={{ gap: 4 }}><Icon name="clock" size={12}/><span style={{ fontSize: 10.5, fontWeight: 600 }}>{a2.durationMin} min</span></div>
                </div>
              </button>
              <button onClick={() => nav.push('leaderboard')} className="row" style={{ width: '100%', marginTop: 8, padding: '10px 14px', gap: 10, background: 'var(--p50)', border: '1px solid var(--p100)', borderRadius: 12 }}>
                <Icon name="trophy" size={16} style={{ color: 'var(--p600)' }}/>
                <div style={{ flex: 1, textAlign: 'left' }}>
                  <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--p700)' }}>Class rank #4 · 89% avg</div>
                  <div style={{ fontSize: 10.5, color: 'var(--p600)' }}>↑ 2 places this week — see leaderboard</div>
                </div>
                <Icon name="chev-r" size={14} style={{ color: 'var(--p600)' }}/>
              </button>
            </div>
          );
        })()}

        {/* Achievements */}
        <div style={{ padding: '0 20px 20px' }}>
          <div className="card-grad-coral" style={{ padding: 16 }}>
            <div className="spread">
              <div>
                <div style={{ fontSize: 10, opacity: .9, textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 700 }}>NEW BADGE EARNED</div>
                <div style={{ fontSize: 17, fontWeight: 800, marginTop: 4 }}>Math Marathon</div>
                <div style={{ fontSize: 11, opacity: .9, marginTop: 2 }}>Submitted 10 assignments on time</div>
              </div>
              <div className="float-soft" style={{ width: 56, height: 56, borderRadius: 18, background: 'rgba(255,255,255,.25)', display: 'grid', placeItems: 'center', backdropFilter: 'blur(8px)' }}>
                <Icon name="trophy" size={28}/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// HOME — Teacher
// ─────────────────────────────────────────────────────────────
function TeacherHome({ nav, lang, membership, onSwitch }) {
  const t = useT(lang);
  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">
        <HeroTeacher t={t} membership={membership} onSwitch={onSwitch}/>

        {/* Now teaching */}
        <div style={{ padding: '20px' }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)', marginBottom: 12 }}>Now teaching</div>
          <div className="card" style={{ padding: 16, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, background: 'var(--p600)' }}></div>
            <div className="spread">
              <div>
                <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--p600)', textTransform: 'uppercase', letterSpacing: '.08em' }}>10:30 — 11:15 · LIVE</div>
                <div style={{ fontSize: 17, fontWeight: 800, marginTop: 4, color: 'var(--n900)' }}>Class 8-B · Algebra</div>
                <div style={{ fontSize: 12, color: 'var(--n500)', marginTop: 2 }}>32 students · Room 204</div>
              </div>
              <button className="btn-sm btn-soft" style={{ height: 36, padding: '0 14px', fontSize: 12 }}>Mark attendance</button>
            </div>
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--n100)', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
              <div><div style={{ fontSize: 18, fontWeight: 800, color: 'var(--n900)' }}>29</div><div style={{ fontSize: 10, color: 'var(--n500)' }}>Present</div></div>
              <div><div style={{ fontSize: 18, fontWeight: 800, color: 'var(--c600)' }}>3</div><div style={{ fontSize: 10, color: 'var(--n500)' }}>Absent</div></div>
              <div><div style={{ fontSize: 18, fontWeight: 800, color: 'var(--warning)' }}>0</div><div style={{ fontSize: 10, color: 'var(--n500)' }}>Late</div></div>
            </div>
          </div>
        </div>

        {/* Assessments */}
        <div style={{ padding: '0 20px 20px' }}>
          <div className="spread" style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>Assessments</div>
            <button onClick={() => nav.push('teachAssessments')} className="btn-ghost" style={{ fontSize: 12, fontWeight: 600 }}>Manage all →</button>
          </div>
          <button onClick={() => nav.push('teachAssessments', { tab: 'to_grade' })} className="card" style={{ padding: 16, position: 'relative', overflow: 'hidden', textAlign: 'left', width: '100%' }}>
            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, background: 'var(--warning)' }}></div>
            <div className="spread">
              <div>
                <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--warning)', textTransform: 'uppercase', letterSpacing: '.08em', fontFamily: 'var(--mono)' }}>● 4 awaiting your review</div>
                <div style={{ fontSize: 17, fontWeight: 800, marginTop: 4, color: 'var(--n900)' }}>History · Mid-term</div>
                <div style={{ fontSize: 12, color: 'var(--n500)', marginTop: 2 }}>Class 8-B · 28 of 32 submitted · publish by Fri</div>
              </div>
              <Icon name="chev-r" size={18} style={{ color: 'var(--n400)' }}/>
            </div>
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--n100)', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
              <div><div style={{ fontSize: 18, fontWeight: 800, color: 'var(--success)' }}>2</div><div style={{ fontSize: 10, color: 'var(--n500)' }}>Live now</div></div>
              <div><div style={{ fontSize: 18, fontWeight: 800, color: 'var(--warning)' }}>4</div><div style={{ fontSize: 10, color: 'var(--n500)' }}>To grade</div></div>
              <div><div style={{ fontSize: 18, fontWeight: 800, color: 'var(--n900)' }}>1</div><div style={{ fontSize: 10, color: 'var(--n500)' }}>Drafts</div></div>
            </div>
          </button>
        </div>

        {/* Homework */}
        <div style={{ padding: '0 20px 20px' }}>
          <div className="spread" style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>Homework</div>
            <button onClick={() => nav.push('teachHomework')} className="btn-ghost" style={{ fontSize: 12, fontWeight: 600 }}>Manage all →</button>
          </div>
          <button onClick={() => nav.push('teachHomework', { tab: 'to_grade' })} className="card" style={{ padding: 16, position: 'relative', overflow: 'hidden', textAlign: 'left', width: '100%' }}>
            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, background: 'var(--c500)' }}></div>
            <div className="spread">
              <div>
                <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--c600)', textTransform: 'uppercase', letterSpacing: '.08em', fontFamily: 'var(--mono)' }}>● 18 to grade across 2 classes</div>
                <div style={{ fontSize: 17, fontWeight: 800, marginTop: 4, color: 'var(--n900)' }}>Algebra · Practice set 7.2</div>
                <div style={{ fontSize: 12, color: 'var(--n500)', marginTop: 2 }}>Class 8-B · 28 of 32 submitted · closed Mon</div>
              </div>
              <Icon name="chev-r" size={18} style={{ color: 'var(--n400)' }}/>
            </div>
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--n100)', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
              <div><div style={{ fontSize: 18, fontWeight: 800, color: 'var(--success)' }}>3</div><div style={{ fontSize: 10, color: 'var(--n500)' }}>Active</div></div>
              <div><div style={{ fontSize: 18, fontWeight: 800, color: 'var(--c600)' }}>18</div><div style={{ fontSize: 10, color: 'var(--n500)' }}>To grade</div></div>
              <div><div style={{ fontSize: 18, fontWeight: 800, color: 'var(--n900)' }}>2</div><div style={{ fontSize: 10, color: 'var(--n500)' }}>Drafts</div></div>
            </div>
          </button>
        </div>

        {/* Pending tasks */}
        <div style={{ padding: '0 20px 20px' }}>
          <div className="spread" style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>Pending review</div>
            <span className="pill pill-c">12 new</span>
          </div>
          <div className="col" style={{ gap: 8 }}>
            {[
              { stu: 'Aarav R.', cls: '8-B', task: 'Algebra Ex. 7.3', when: 'Submitted 2h ago', initial: 'A', clr: '' },
              { stu: 'Diya S.', cls: '5-A', task: 'Geometry sheet', when: '4h ago', initial: 'D', clr: 'coral' },
              { stu: 'Kavya M.', cls: '8-B', task: 'Word problems', when: '6h ago', initial: 'K', clr: 'green' },
            ].map((s, i) => (
              <div key={i} className="row card" 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.when}</div>
                </div>
                <button style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--p50)', color: 'var(--p600)', display: 'grid', placeItems: 'center' }}><Icon name="chev-r" size={16}/></button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// FEES screen
// ─────────────────────────────────────────────────────────────
function FeesScreen({ nav, lang }) {
  const t = useT(lang);
  const children = [
    { name: 'Aarav Reddy', cls: 'Class 8-B · DPS', due: 18500, paid: 7000, total: 25500, date: '26 Mar', daysLeft: 14, state: 'due', clr: '', initial: 'A' },
    { name: 'Diya Reddy',  cls: 'Class 5-A · DPS', due: 0,     paid: 18000, total: 18000, date: 'Up to date', daysLeft: null, state: 'paid', clr: 'coral', initial: 'D' },
    { name: 'Vihaan Reddy',cls: 'Class 2-C · Oakridge', due: 28750, paid: 0, total: 28750, date: '5 Apr', daysLeft: 24, state: 'due', clr: 'green', initial: 'V' },
  ];
  const totalPaid = children.reduce((s,c)=>s+c.paid,0);
  const totalAll  = children.reduce((s,c)=>s+c.total,0);
  const pct = Math.round((totalPaid / totalAll) * 100);
  const ringDash = 176; // 2πr ≈ 175.9 for r=28
  const ringOff = ringDash * (1 - pct/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={{ background: 'var(--grad-warm)', paddingTop: 56 }}>
          <div className="spread" style={{ marginBottom: 16 }}>
            <div>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.02em' }}>{t.fees}</div>
              <div style={{ fontSize: 11, opacity: .85, marginTop: 2, fontFamily: 'var(--mono)', fontWeight: 600 }}>ACADEMIC YEAR 2024–25</div>
            </div>
            <div className="row" style={{ gap: 8 }}>
              <button onClick={() => nav.push('history')} style={{ width: 38, height: 38, borderRadius: 12, background: 'rgba(255,255,255,.2)', display: 'grid', placeItems: 'center', color: '#fff' }} title="Receipts"><Icon name="receipt" size={18}/></button>
              <button style={{ width: 38, height: 38, borderRadius: 12, background: 'rgba(255,255,255,.2)', display: 'grid', placeItems: 'center', color: '#fff' }} title="Filter"><Icon name="filter" size={18}/></button>
            </div>
          </div>

          {/* Year progress card with ring */}
          <div style={{
            background: 'rgba(255,255,255,.14)', backdropFilter: 'blur(12px)',
            border: '1px solid rgba(255,255,255,.2)', borderRadius: 18, padding: '16px 18px',
          }}>
            <div className="row" style={{ gap: 16 }}>
              <div style={{ position: 'relative', width: 76, height: 76, flexShrink: 0 }}>
                <svg width="76" height="76" viewBox="0 0 64 64" style={{ transform: 'rotate(-90deg)' }}>
                  <circle cx="32" cy="32" r="28" fill="none" stroke="rgba(255,255,255,.18)" strokeWidth="6"/>
                  <circle cx="32" cy="32" r="28" fill="none" stroke="#fff" strokeWidth="6" strokeLinecap="round"
                    strokeDasharray={ringDash} strokeDashoffset={ringOff} style={{ transition: 'stroke-dashoffset .8s ease' }}/>
                </svg>
                <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', flexDirection: 'column' }}>
                  <div style={{ fontSize: 18, fontWeight: 800, lineHeight: 1, fontVariantNumeric: 'tabular-nums', letterSpacing: '-.02em' }}>{pct}%</div>
                  <div style={{ fontSize: 8, opacity: .8, fontWeight: 700, letterSpacing: '.08em', marginTop: 2 }}>PAID</div>
                </div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11, opacity: .85, textTransform: 'uppercase', letterSpacing: '.08em', fontFamily: 'var(--mono)', fontWeight: 600 }}>Outstanding · 3 children</div>
                <div style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-.03em', marginTop: 2, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>₹47,250</div>
                <div className="row" style={{ gap: 8, marginTop: 6, fontSize: 11, opacity: .9 }}>
                  <span><Icon name="clock" size={11} style={{ verticalAlign: -1, marginRight: 3 }}/>Earliest 26 Mar</span>
                  <span style={{ opacity: .5 }}>·</span>
                  <span style={{ fontFamily: 'var(--mono)', fontWeight: 700 }}>14 days</span>
                </div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 14, paddingTop: 12, borderTop: '1px solid rgba(255,255,255,.18)' }}>
              <div>
                <div style={{ fontSize: 10, opacity: .8, letterSpacing: '.06em', fontWeight: 600 }}>PAID YTD</div>
                <div style={{ fontSize: 16, fontWeight: 800, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>₹{totalPaid.toLocaleString('en-IN')}</div>
              </div>
              <div>
                <div style={{ fontSize: 10, opacity: .8, letterSpacing: '.06em', fontWeight: 600 }}>ANNUAL</div>
                <div style={{ fontSize: 16, fontWeight: 800, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>₹{totalAll.toLocaleString('en-IN')}</div>
              </div>
            </div>
          </div>
        </div>

        {/* Upcoming due strip */}
        <div style={{ padding: '20px 20px 0' }}>
          <div className="spread" style={{ marginBottom: 10 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>Upcoming due dates</div>
            <span className="pill pill-c"><span className="dot"></span>2 in 30d</span>
          </div>
          <div style={{ display: 'flex', gap: 10, overflowX: 'auto', margin: '0 -20px', padding: '0 20px 4px' }}>
            {[
              { d: '26', m: 'MAR', label: 'Aarav · Term 2', amt: '₹18,500', urgent: true, days: 'in 14d' },
              { d: '05', m: 'APR', label: 'Vihaan · Term 2', amt: '₹28,750', urgent: false, days: 'in 24d' },
              { d: '15', m: 'MAY', label: 'Aarav · Bus pass', amt: '₹3,200', urgent: false, days: 'in 64d' },
            ].map((u,i) => (
              <div key={i} style={{
                flexShrink: 0, width: 188, padding: 14, background: '#fff',
                border: u.urgent ? '1.5px solid var(--c500)' : '1px solid var(--n100)',
                borderRadius: 16, boxShadow: 'var(--el-1)', display: 'flex', flexDirection: 'column', gap: 8,
              }}>
                <div className="row" style={{ gap: 12, alignItems: 'center' }}>
                  <div style={{
                    width: 44, height: 48, borderRadius: 10,
                    background: u.urgent ? 'var(--c50)' : 'var(--n50)',
                    color: u.urgent ? 'var(--c700)' : 'var(--n700)',
                    display: 'grid', placeItems: 'center', textAlign: 'center', flexShrink: 0,
                  }}>
                    <div>
                      <div style={{ fontSize: 18, fontWeight: 800, lineHeight: 1, letterSpacing: '-.02em' }}>{u.d}</div>
                      <div style={{ fontSize: 8, fontWeight: 700, letterSpacing: '.1em', marginTop: 2 }}>{u.m}</div>
                    </div>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--n900)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{u.label}</div>
                    <div style={{ fontSize: 14, fontWeight: 800, color: u.urgent ? 'var(--c600)' : 'var(--n900)', fontVariantNumeric: 'tabular-nums', marginTop: 2 }}>{u.amt}</div>
                  </div>
                </div>
                <div className="spread" style={{ fontSize: 10, color: 'var(--n500)' }}>
                  <span style={{ fontFamily: 'var(--mono)', fontWeight: 600 }}>{u.days}</span>
                  {u.urgent && <span className="pill pill-c" style={{ fontSize: 9 }}>Due soon</span>}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* By child */}
        <div style={{ padding: 20 }}>
          <div className="spread" style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>By child</div>
            <button className="btn-ghost" style={{ fontSize: 12, fontWeight: 600 }}>{t.viewAll}</button>
          </div>
          <div className="col" style={{ gap: 10 }}>
            {children.map((c, i) => {
              const childPct = Math.round((c.paid / c.total) * 100);
              return (
                <button key={i} onClick={() => c.state === 'due' && nav.push('pay')} className="card" style={{ padding: 14, textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <div className="row" style={{ gap: 12, width: '100%' }}>
                    <div className={`av av-48 ${c.clr}`}>{c.initial}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="spread">
                        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>{c.name}</div>
                        {c.state === 'paid'
                          ? <span className="pill pill-s"><Icon name="check" size={11}/> Paid</span>
                          : <span className="pill pill-c"><span className="dot"></span>{c.daysLeft}d</span>}
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 1 }}>{c.cls}</div>
                    </div>
                    {c.state === 'due' && <Icon name="chev-r" size={18} style={{ color: 'var(--n400)' }}/>}
                  </div>
                  {/* Mini paid bar */}
                  <div style={{ width: '100%' }}>
                    <div className="spread" style={{ marginBottom: 4, fontSize: 10, color: 'var(--n500)' }}>
                      <span>Year paid · <b style={{ color: 'var(--n800)', fontFamily: 'var(--mono)' }}>{childPct}%</b></span>
                      <span style={{ fontFamily: 'var(--mono)', fontWeight: 600 }}>₹{c.paid.toLocaleString('en-IN')} / ₹{c.total.toLocaleString('en-IN')}</span>
                    </div>
                    <div style={{ height: 5, background: 'var(--n100)', borderRadius: 99, overflow: 'hidden' }}>
                      <div style={{ width: `${childPct}%`, height: '100%', background: c.state === 'paid' ? 'var(--success)' : 'var(--p500)', borderRadius: 99 }}></div>
                    </div>
                  </div>
                  {c.state === 'due' && (
                    <div className="spread" style={{ width: '100%', paddingTop: 8, borderTop: '1px dashed var(--n100)' }}>
                      <div>
                        <div style={{ fontSize: 10, color: 'var(--n500)', fontWeight: 600 }}>OUTSTANDING</div>
                        <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--c600)', fontVariantNumeric: 'tabular-nums' }}>₹{c.due.toLocaleString('en-IN')}</div>
                      </div>
                      <div style={{ textAlign: 'right' }}>
                        <div style={{ fontSize: 10, color: 'var(--n500)', fontWeight: 600 }}>DUE</div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n800)' }}>{c.date}</div>
                      </div>
                    </div>
                  )}
                </button>
              );
            })}
          </div>

          {/* Quick actions strip */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, marginTop: 16 }}>
            {[
              { ic: 'down', lab: 'Receipts', sub: 'Year ledger', clr: 'var(--p600)', bg: 'var(--p50)' },
              { ic: 'sparkle', lab: 'Scholarship', sub: 'Apply / track', clr: '#9A3412', bg: '#FFF7ED' },
              { ic: 'clock', lab: 'Extension', sub: 'Request more time', clr: '#1E40AF', bg: 'var(--info-50)' },
            ].map((q, i) => (
              <button key={i} className="card" style={{ padding: 12, textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-start' }}>
                <div style={{ width: 32, height: 32, borderRadius: 10, background: q.bg, color: q.clr, display: 'grid', placeItems: 'center' }}><Icon name={q.ic} size={16}/></div>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--n900)' }}>{q.lab}</div>
                  <div style={{ fontSize: 10, color: 'var(--n500)', marginTop: 1 }}>{q.sub}</div>
                </div>
              </button>
            ))}
          </div>

          {/* Save with full year */}
          <div style={{ marginTop: 16, padding: 14, background: 'linear-gradient(135deg,#ECFDF5,#D1FAE5)', border: '1px solid #A7F3D0', borderRadius: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: '#fff', display: 'grid', placeItems: 'center', color: 'var(--success)', flexShrink: 0 }}><Icon name="sparkle" size={20}/></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#065F46' }}>Save ₹945 · Pay full year upfront</div>
              <div style={{ fontSize: 11, color: 'var(--n600)', marginTop: 2 }}>2% off on ₹47,250 outstanding · Locked rate</div>
            </div>
            <Icon name="chev-r" size={18} style={{ color: '#065F46' }}/>
          </div>

          {/* Autopay */}
          <div style={{ marginTop: 12, padding: 14, background: 'var(--p50)', border: '1px solid var(--p100)', borderRadius: 14, display: 'flex', gap: 12 }}>
            <div style={{ width: 40, height: 40, borderRadius: 12, background: '#fff', display: 'grid', placeItems: 'center', color: 'var(--p600)', flexShrink: 0 }}><Icon name="zap" size={20}/></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--p800)' }}>Set up UPI Autopay</div>
              <div style={{ fontSize: 11, color: 'var(--n600)', marginTop: 2 }}>Auto-debit on the 1st · NPCI mandate · cancel anytime</div>
              <button className="btn-sm btn-soft" style={{ marginTop: 8, fontSize: 11 }}>Set up · 60 sec</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PAY screen — composition / sheet
// ─────────────────────────────────────────────────────────────
function PayScreen({ nav, lang }) {
  const [sheet, setSheet] = useState(false);
  const [processing, setProcessing] = useState(false);
  const [items, setItems] = useState({ tuition: true, lab: true, lib: true, transport: false, exam: false });
  const [coupon, setCoupon] = useState('');
  const [couponApplied, setCouponApplied] = useState(false);

  const lines = [
    { id: 'tuition', lab: 'Tuition · Term 2', sub: 'Jan – Mar 2026', amt: 14500, dot: 'var(--p600)', req: true },
    { id: 'lab',      lab: 'Lab fee',          sub: 'Science · Computer',  amt: 1800,  dot: 'var(--c500)', req: true },
    { id: 'lib',      lab: 'Library',          sub: 'Annual access',       amt: 500,   dot: 'var(--success)', req: true },
    { id: 'transport',lab: 'Transport',        sub: 'Bus · Route 12 · Term 2', amt: 1700, dot: 'var(--warning)', req: false },
    { id: 'exam',     lab: 'Exam fee',         sub: 'Mid-term · optional',  amt: 350, dot: '#8B5CF6', req: false },
  ];
  const subtotal = lines.reduce((s, l) => s + (items[l.id] ? l.amt : 0), 0);
  const discount = couponApplied ? Math.round(subtotal * 0.02) : 0;
  const taxable  = subtotal - discount;
  // GST already-inclusive on tuition is school-policy; show ledger transparency line
  const conv     = 0; // UPI default; updated by method later
  const total    = taxable + conv;

  const toggle = (id) => setItems(s => ({ ...s, [id]: !s[id] }));
  const applyCoupon = () => {
    if (coupon.trim().toUpperCase() === 'EARLY2') setCouponApplied(true);
  };

  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="Aarav · Term 2" onBack={() => nav.pop()} right={<button style={{ width:36,height:36,borderRadius:10,background:'var(--n50)',display:'grid',placeItems:'center'}}><Icon name="info" size={18}/></button>}/>
      <div className="app-body" style={{ paddingTop: 4, paddingBottom: 132 }}>
        {/* Hero amount card */}
        <div className="card-grad-coral" style={{ padding: 20, position: 'relative', overflow: 'hidden' }}>
          <div className="spread" style={{ alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontSize: 11, opacity: .85, textTransform: 'uppercase', letterSpacing: '.08em', fontFamily: 'var(--mono)', fontWeight: 600 }}>Amount to pay</div>
              <div style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-.03em', marginTop: 4, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>₹{total.toLocaleString('en-IN')}</div>
              <div style={{ fontSize: 12, opacity: .9, marginTop: 6 }}>Due 26 Mar · 14 days from today</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="av av-44" style={{ background: 'rgba(255,255,255,.22)', color: '#fff', border: '1px solid rgba(255,255,255,.3)', marginLeft: 'auto' }}>A</div>
              <div style={{ fontSize: 10, opacity: .85, marginTop: 6, fontFamily: 'var(--mono)', fontWeight: 600 }}>CLASS 8-B</div>
            </div>
          </div>
          {couponApplied && (
            <div style={{ marginTop: 12, padding: '6px 10px', background: 'rgba(255,255,255,.2)', border: '1px dashed rgba(255,255,255,.4)', borderRadius: 99, fontSize: 11, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <Icon name="sparkle" size={12}/> EARLY2 applied · saved ₹{discount}
            </div>
          )}
        </div>

        {/* Breakdown — toggleable line items */}
        <div className="card">
          <div className="spread" style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>Fee components</div>
            <span style={{ fontSize: 10, color: 'var(--n500)', fontFamily: 'var(--mono)', fontWeight: 600 }}>{lines.filter(l => items[l.id]).length} of {lines.length}</span>
          </div>
          <div className="col" style={{ gap: 8 }}>
            {lines.map((l) => {
              const on = !!items[l.id];
              const locked = l.req;
              return (
                <button key={l.id} onClick={() => !locked && toggle(l.id)} disabled={locked} style={{
                  width: '100%', padding: 12, borderRadius: 12,
                  background: on ? '#fff' : 'var(--n50)',
                  border: `1.5px solid ${on ? 'var(--n100)' : 'var(--n100)'}`,
                  display: 'flex', alignItems: 'center', gap: 12, textAlign: 'left',
                  opacity: on ? 1 : .65, cursor: locked ? 'default' : 'pointer',
                }}>
                  <div style={{
                    width: 22, height: 22, borderRadius: 7,
                    background: on ? 'var(--p600)' : '#fff',
                    border: `1.5px solid ${on ? 'var(--p600)' : 'var(--n200)'}`,
                    display: 'grid', placeItems: 'center', color: '#fff', flexShrink: 0,
                  }}>
                    {on && <Icon name="check" size={14}/>}
                  </div>
                  <span style={{ width: 6, height: 6, borderRadius: 99, background: l.dot, flexShrink: 0 }}></span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="spread">
                      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--n900)' }}>{l.lab}</div>
                      <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)', fontVariantNumeric: 'tabular-nums' }}>₹{l.amt.toLocaleString('en-IN')}</div>
                    </div>
                    <div className="spread" style={{ marginTop: 2 }}>
                      <div style={{ fontSize: 10.5, color: 'var(--n500)' }}>{l.sub}</div>
                      {locked
                        ? <span style={{ fontSize: 9, color: 'var(--n400)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em' }}>Required</span>
                        : <span style={{ fontSize: 9, color: 'var(--n500)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em' }}>Optional</span>
                      }
                    </div>
                  </div>
                </button>
              );
            })}
          </div>

          {/* Coupon */}
          <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px dashed var(--n100)' }}>
            <div style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 600, marginBottom: 6 }}>Have a discount code?</div>
            <div className="row" style={{ gap: 8 }}>
              <input
                value={coupon}
                onChange={(e) => { setCoupon(e.target.value); setCouponApplied(false); }}
                placeholder="Try EARLY2"
                style={{
                  flex: 1, height: 40, padding: '0 12px', borderRadius: 10,
                  border: '1.5px solid var(--n200)', fontSize: 13, fontWeight: 600,
                  fontFamily: 'var(--mono)', textTransform: 'uppercase', background: '#fff',
                }}
              />
              <button onClick={applyCoupon} className="btn-sm btn-soft" style={{ height: 40, padding: '0 16px' }}>
                {couponApplied ? <><Icon name="check" size={14}/> Applied</> : 'Apply'}
              </button>
            </div>
          </div>

          {/* Totals */}
          <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--n100)' }} className="col">
            <div className="spread" style={{ fontSize: 12, color: 'var(--n600)' }}>
              <span>Subtotal</span>
              <span className="tnum">₹{subtotal.toLocaleString('en-IN')}</span>
            </div>
            {couponApplied && (
              <div className="spread" style={{ fontSize: 12, color: 'var(--success)', marginTop: 6 }}>
                <span>Early-bird discount (2%)</span>
                <span className="tnum">– ₹{discount.toLocaleString('en-IN')}</span>
              </div>
            )}
            <div className="spread" style={{ fontSize: 12, color: 'var(--n600)', marginTop: 6 }}>
              <span>Convenience fee · UPI</span>
              <span className="tnum" style={{ color: 'var(--success)', fontWeight: 700 }}>FREE</span>
            </div>
            <div className="spread" style={{ marginTop: 10, paddingTop: 10, borderTop: '1px dashed var(--n100)' }}>
              <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>Total</span>
              <span style={{ fontSize: 22, fontWeight: 800, color: 'var(--n900)', fontVariantNumeric: 'tabular-nums', letterSpacing: '-.02em' }}>₹{total.toLocaleString('en-IN')}</span>
            </div>
            <div style={{ fontSize: 10, color: 'var(--n400)', marginTop: 4 }}>Inclusive of 18% GST · Invoice GSTIN 36AABCU9603R1ZX</div>
          </div>
        </div>

        {/* Trust strip */}
        <div className="card-flat" style={{ padding: 12 }}>
          <div className="row" style={{ gap: 10, marginBottom: 8 }}>
            <Icon name="shield" size={18} style={{ color: 'var(--success)' }}/>
            <div style={{ fontSize: 11, color: 'var(--n600)', flex: 1 }}>
              GST invoice sent to <b style={{ color: 'var(--n800)' }}>+91 98765 43210</b> on WhatsApp
            </div>
          </div>
          <div className="row" style={{ gap: 6, flexWrap: 'wrap', paddingTop: 8, borderTop: '1px dashed var(--n100)' }}>
            {['Razorpay secured', '256-bit TLS', 'DPDPA compliant', 'PCI-DSS L1'].map((b, i) => (
              <span key={i} className="pill" style={{ fontSize: 9, padding: '3px 8px', fontWeight: 600 }}>
                <Icon name="check" size={9}/> {b}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* Sticky CTA */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '12px 20px 28px', background: '#fff',
        borderTop: '1px solid var(--n100)', boxShadow: '0 -4px 20px rgba(0,0,0,.04)',
      }}>
        <div className="spread" style={{ marginBottom: 8 }}>
          <span style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 600 }}>Total</span>
          <span style={{ fontSize: 16, fontWeight: 800, color: 'var(--n900)', fontVariantNumeric: 'tabular-nums' }}>₹{total.toLocaleString('en-IN')}</span>
        </div>
        <button className="btn btn-coral" onClick={() => setSheet(true)}>
          Choose payment method <Icon name="arrow-right" size={16}/>
        </button>
      </div>

      {sheet && !processing && <PayMethodSheet total={total} onClose={() => setSheet(false)} onPay={() => { setProcessing(true); setSheet(false); setTimeout(() => nav.replace('paySuccess'), 1800); }}/>}
      {processing && (
        <div className="sheet-backdrop fade-in">
          <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
            <div className="card" style={{ width: 280, padding: 24, textAlign: 'center' }}>
              <div className="float-soft" style={{ width: 56, height: 56, borderRadius: 18, background: 'var(--grad-cool)', color: '#fff', display: 'grid', placeItems: 'center', margin: '0 auto', boxShadow: 'var(--el-glow)' }}>
                <Icon name="zap" size={28}/>
              </div>
              <div style={{ fontSize: 16, fontWeight: 700, marginTop: 16, color: 'var(--n900)' }}>Processing payment…</div>
              <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 4 }}>GPay · ₹{total.toLocaleString('en-IN')}</div>
              <div className="prog" style={{ marginTop: 14 }}><b style={{ width: '60%', animation: 'shimmer 1.5s linear infinite' }}></b></div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function PayMethodSheet({ onClose, onPay, total = 18500 }) {
  const [selected, setSelected] = useState('gpay');
  const totalStr = `₹${total.toLocaleString('en-IN')}`;
  return (
    <>
      <div className="sheet-backdrop" onClick={onClose}></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)', letterSpacing: '-.01em' }}>Pay {totalStr}</div>
            <button onClick={onClose} style={{ width: 32, height: 32, borderRadius: 10, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="x" size={16}/></button>
          </div>
          <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>Choose how you'd like to pay</div>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: '8px 20px' }}>
          <div style={{ fontSize: 11, color: 'var(--n500)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 700, fontFamily: 'var(--mono)', marginBottom: 8, marginTop: 4 }}>UPI · INSTANT</div>
          <div className="col" style={{ gap: 8 }}>
            {[
              { id: 'gpay', name: 'Google Pay', vpa: 'priya@oksbi', bg: 'linear-gradient(135deg,#4285F4,#34A853,#FBBC04)', logo: 'G' },
              { id: 'phonepe', name: 'PhonePe', vpa: 'priya@ybl', bg: '#5F259F', logo: 'P' },
              { id: 'paytm', name: 'Paytm', vpa: 'priya@paytm', bg: '#00BAF2', logo: 'P' },
            ].map((u) => (
              <button key={u.id} onClick={() => setSelected(u.id)} className="row" style={{
                width: '100%', padding: 12, borderRadius: 14, gap: 12,
                background: selected === u.id ? 'var(--p50)' : '#fff',
                border: `1.5px solid ${selected === u.id ? 'var(--p500)' : 'var(--n100)'}`,
              }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: u.bg, color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 16 }}>{u.logo}</div>
                <div style={{ flex: 1, textAlign: 'left' }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{u.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', fontFamily: 'var(--mono)', marginTop: 1 }}>{u.vpa}</div>
                </div>
                <div style={{ width: 20, height: 20, borderRadius: 99, border: `2px solid ${selected === u.id ? 'var(--p600)' : 'var(--n300)'}`, display: 'grid', placeItems: 'center' }}>
                  {selected === u.id && <span style={{ width: 8, height: 8, borderRadius: 99, background: 'var(--p600)' }}></span>}
                </div>
              </button>
            ))}
          </div>

          <div style={{ fontSize: 11, color: 'var(--n500)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 700, fontFamily: 'var(--mono)', marginBottom: 8, marginTop: 16 }}>Other methods</div>
          <div className="col" style={{ gap: 8 }}>
            {[
              { ic: 'card', name: 'Cards', sub: 'Credit / Debit · Visa, MC, Rupay' },
              { ic: 'bank', name: 'Net Banking', sub: '50+ banks · SBI, HDFC, ICICI' },
            ].map((m, i) => (
              <button key={i} className="row" style={{ width: '100%', padding: 12, borderRadius: 14, gap: 12, background: '#fff', border: '1.5px solid var(--n100)' }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--n50)', color: 'var(--n700)', display: 'grid', placeItems: 'center' }}><Icon name={m.ic} size={20}/></div>
                <div style={{ flex: 1, textAlign: 'left' }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{m.name}</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>
        </div>
        <div style={{ padding: '12px 20px 28px', borderTop: '1px solid var(--n100)' }}>
          <button className="btn" onClick={onPay}>Pay {totalStr} with GPay <Icon name="arrow-right" size={16}/></button>
        </div>
      </div>
    </>
  );
}

// ─────────────────────────────────────────────────────────────
// PAY SUCCESS
// ─────────────────────────────────────────────────────────────
function PaySuccess({ nav }) {
  const colors = ['#6366F1', '#F43F5E', '#10B981', '#F59E0B', '#8B5CF6'];
  return (
    <div className="app screen-in">
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 60 }}><StatusBar dark/></div>
      <div className="app-body no-pad" style={{ background: 'var(--grad-cool)', color: '#fff', padding: 0 }}>
        <div className="confetti-burst">
          {Array.from({ length: 24 }).map((_, i) => {
            const c = colors[i % colors.length];
            const cx = (Math.random() - .5) * 400;
            const cr = (Math.random() - .5) * 1440;
            const delay = Math.random() * 1.5;
            return <i key={i} style={{ background: c, left: `${50 + (Math.random() - .5) * 20}%`, '--cx': `${cx}px`, '--cr': `${cr}deg`, animationDelay: `${delay}s` }}></i>;
          })}
        </div>
        <div style={{ padding: '80px 24px 0', position: 'relative', zIndex: 1, textAlign: 'center' }}>
          <div className="float-soft" style={{ width: 96, height: 96, borderRadius: 32, background: '#fff', color: 'var(--success)', display: 'grid', placeItems: 'center', margin: '0 auto', boxShadow: '0 20px 60px rgba(0,0,0,.2)' }}>
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12" className="check-anim" style={{ strokeDasharray: 32, strokeDashoffset: 32, animation: 'check-draw .6s .4s ease-out forwards' }}/>
            </svg>
          </div>
          <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-.02em', marginTop: 24 }}>Payment successful</div>
          <div style={{ fontSize: 14, opacity: .9, marginTop: 6 }}>₹18,500 paid for Aarav · Term 2</div>
        </div>

        <div style={{ background: '#fff', color: 'var(--n900)', borderRadius: '32px 32px 0 0', marginTop: 60, padding: 24, flex: 1 }}>
          <div className="col" style={{ gap: 0 }}>
            {[
              { lab: 'Transaction ID', val: 'SCQ8492736251', mono: true },
              { lab: 'Paid via', val: 'Google Pay · UPI' },
              { lab: 'Date · time', val: '12 Mar · 9:42 AM' },
              { lab: 'GSTIN', val: '36AABCU9603R1ZX', mono: true },
            ].map((r, i) => (
              <div key={i} className="spread" style={{ padding: '12px 0', borderBottom: i < 3 ? '1px solid var(--n100)' : 'none' }}>
                <span style={{ fontSize: 12, color: 'var(--n500)' }}>{r.lab}</span>
                <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--n900)', fontFamily: r.mono ? 'var(--mono)' : 'var(--font)' }}>{r.val}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16, padding: 14, background: '#25D36614', border: '1px solid #25D36633', borderRadius: 14, display: 'flex', gap: 10, alignItems: 'center' }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: '#25D366', color: '#fff', display: 'grid', placeItems: 'center' }}><Icon name="whatsapp" size={18}/></div>
            <div style={{ flex: 1, fontSize: 11, color: 'var(--n700)' }}>Receipt sent to <b>+91 98765 43210</b> on WhatsApp</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 20 }}>
            <button className="btn btn-outline" style={{ height: 46 }}><Icon name="down" size={16}/> Receipt</button>
            <button className="btn" style={{ height: 46 }} onClick={() => nav.replace('home')}>Done</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ATTENDANCE
// ─────────────────────────────────────────────────────────────
function AttendanceScreen({ nav, role, lang }) {
  const t = useT(lang);
  const days = [];
  for (let i = 1; i <= 31; i++) {
    let cls = '';
    if (i === 12) cls = 'today';
    else if ([1, 8, 15, 22, 29, 7, 14, 21, 28].includes(i)) cls = 'hol';
    else if ([3, 17].includes(i)) cls = 'absent';
    else if ([10].includes(i)) cls = 'leave';
    else if (i < 12) cls = 'present';
    days.push({ n: i, cls });
  }
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title={t.attendance} 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">
        {/* Hero ring */}
        <div className="card-grad" style={{ padding: 20, display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ position: 'relative', width: 96, height: 96 }}>
            <svg className="ring-svg" width="96" height="96" viewBox="0 0 64 64" style={{ '--ring-dash': '310' }}>
              <circle className="ring-bg" cx="32" cy="32" r="28"/>
              <circle className="ring-fg" cx="32" cy="32" r="28"/>
            </svg>
            <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', textAlign: 'center' }}>
              <div>
                <div style={{ fontSize: 24, fontWeight: 800, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>92%</div>
                <div style={{ fontSize: 9, opacity: .9, fontWeight: 600, letterSpacing: '.05em', marginTop: 2 }}>YEAR</div>
              </div>
            </div>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, opacity: .85, fontWeight: 600 }}>{role === 'student' ? 'Your attendance' : 'Aarav · Class 8-B'}</div>
            <div style={{ fontSize: 18, fontWeight: 800, marginTop: 2 }}>Above target ✨</div>
            <div style={{ fontSize: 11, opacity: .9, marginTop: 4, lineHeight: 1.5 }}>School target 75% · You're 17 points above</div>
          </div>
        </div>

        {/* Calendar */}
        <div className="card">
          <div className="spread" style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 14, fontWeight: 700 }}>March 2026</div>
            <div className="row" style={{ gap: 4 }}>
              <button style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="chev-l" size={14}/></button>
              <button style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="chev-r" size={14}/></button>
            </div>
          </div>
          <div className="cal" style={{ marginBottom: 8 }}>
            {['S','M','T','W','T','F','S'].map((d,i) => <div key={i} className="cal-d h">{d}</div>)}
          </div>
          <div className="cal">
            <div className="cal-d muted">28</div>
            {days.map((d, i) => <div key={i} className={`cal-d ${d.cls}`}>{d.n}</div>)}
            {[1,2,3].map(d => <div key={'n'+d} className="cal-d muted">{d}</div>)}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 6, marginTop: 14, fontSize: 11 }}>
            {[
              { c: 'present', l: '20 Present' },
              { c: 'absent', l: '2 Absent' },
              { c: 'leave', l: '1 Leave' },
              { c: 'hol', l: '5 Holiday' },
            ].map((l,i)=>(
              <div key={i} className="row" style={{gap:6}}>
                <span className="cal-d" style={{width:14,height:14,borderRadius:4,fontSize:0}}>
                  <span className={`cal-d ${l.c}`} style={{width:'100%',height:'100%',borderRadius:4}}></span>
                </span>
                <span style={{color:'var(--n700)'}}>{l.l}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Subject-wise attendance — matters for exam eligibility */}
        <div className="card">
          <div className="spread" style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 14, fontWeight: 700 }}>By subject</div>
            <span style={{ fontSize: 10, color: 'var(--n500)', fontFamily: 'var(--mono)', fontWeight: 600 }}>EXAM CUTOFF · 75%</span>
          </div>
          <div className="col" style={{ gap: 12 }}>
            {[
              { sub: 'Mathematics', pct: 96, attended: 48, total: 50, ok: true },
              { sub: 'Science', pct: 88, attended: 44, total: 50, ok: true },
              { sub: 'English', pct: 82, attended: 41, total: 50, ok: true },
              { sub: 'Hindi', pct: 78, attended: 39, total: 50, ok: true, warn: true },
              { sub: 'Social Studies', pct: 72, attended: 36, total: 50, ok: false },
            ].map((s, i) => (
              <div key={i}>
                <div className="spread" style={{ marginBottom: 5 }}>
                  <div className="row" style={{ gap: 6 }}>
                    <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--n900)' }}>{s.sub}</span>
                    {!s.ok && <span className="pill pill-c" style={{ fontSize: 9 }}>BELOW 75%</span>}
                    {s.warn && <span className="pill pill-w" style={{ fontSize: 9 }}>NEAR LIMIT</span>}
                  </div>
                  <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--n900)', fontVariantNumeric: 'tabular-nums' }}>{s.pct}%</span>
                </div>
                <div style={{ position: 'relative', height: 6, background: 'var(--n100)', borderRadius: 99, overflow: 'hidden' }}>
                  <div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: `${s.pct}%`, background: s.ok ? (s.warn ? 'var(--warning)' : 'var(--success)') : 'var(--c500)', borderRadius: 99, transition: 'width .6s ease' }}></div>
                  <div style={{ position: 'absolute', left: '75%', top: -2, width: 2, height: 10, background: 'var(--n400)' }}></div>
                </div>
                <div style={{ fontSize: 10, color: 'var(--n500)', marginTop: 4, fontFamily: 'var(--mono)', fontWeight: 600 }}>{s.attended} / {s.total} classes</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 14, padding: 10, background: 'var(--c50)', border: '1px solid #FECACA', borderRadius: 10, fontSize: 11, color: 'var(--c700)', display: 'flex', gap: 8, alignItems: 'flex-start' }}>
            <Icon name="info" size={13} style={{ flexShrink: 0, marginTop: 1 }}/>
            <div>Social Studies below 75% — <b>4 more classes needed</b> before final exam to be eligible.</div>
          </div>
        </div>

        {/* Apply leave — high-frequency parent action */}
        <div className="row" style={{ gap: 10 }}>
          <button className="card" style={{ flex: 1, padding: 14, textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-start' }}>
            <div style={{ width: 36, height: 36, borderRadius: 11, background: 'var(--p50)', color: 'var(--p600)', display: 'grid', placeItems: 'center' }}><Icon name="calendar" size={18}/></div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>Apply for leave</div>
              <div style={{ fontSize: 10.5, color: 'var(--n500)', marginTop: 2 }}>Sick · Family · Other</div>
            </div>
          </button>
          <button className="card" style={{ flex: 1, padding: 14, textAlign: 'left', display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-start' }}>
            <div style={{ width: 36, height: 36, borderRadius: 11, background: 'var(--success-50)', color: '#065F46', display: 'grid', placeItems: 'center' }}><Icon name="check" size={18}/></div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>Mark in/out</div>
              <div style={{ fontSize: 10.5, color: 'var(--n500)', marginTop: 2 }}>Late arrival · Early pickup</div>
            </div>
          </button>
        </div>

        {/* Recent absences with reasons */}
        <div className="card">
          <div className="spread" style={{ marginBottom: 12 }}>
            <div style={{ fontSize: 14, fontWeight: 700 }}>Recent absences</div>
            <button className="btn-ghost" style={{ fontSize: 11, fontWeight: 600 }}>Full log</button>
          </div>
          <div className="col" style={{ gap: 10 }}>
            {[
              { date: '17 Mar', day: 'Mon', reason: 'Fever · medical certificate uploaded', state: 'Approved', clr: 'var(--success)', bg: 'var(--success-50)' },
              { date: '10 Mar', day: 'Mon', reason: 'Family wedding · half-day leave', state: 'Approved', clr: 'var(--success)', bg: 'var(--success-50)' },
              { date: '03 Mar', day: 'Mon', reason: 'Pending — please add reason', state: 'Action needed', clr: 'var(--c600)', bg: 'var(--c50)' },
            ].map((a, i) => (
              <div key={i} className="row" style={{ gap: 12, alignItems: 'flex-start' }}>
                <div style={{ width: 44, padding: '6px 0', borderRadius: 10, background: 'var(--n50)', textAlign: 'center', flexShrink: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--n900)', lineHeight: 1 }}>{a.date.split(' ')[0]}</div>
                  <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--n500)', marginTop: 3, letterSpacing: '.08em' }}>{a.date.split(' ')[1].toUpperCase()}</div>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, color: 'var(--n800)', fontWeight: 600, lineHeight: 1.4 }}>{a.reason}</div>
                  <span className="pill" style={{ marginTop: 4, fontSize: 9, background: a.bg, color: a.clr, border: 'none' }}>{a.state}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Streak */}
        <div className="card row" style={{ gap: 14, padding: 16 }}>
          <span className="flame" style={{ color: 'var(--c500)', fontSize: 28 }}><Icon name="flame" size={32}/></span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>12 day streak</div>
            <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>Hasn't missed since 28 Feb · keep it going!</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CHAT — list + thread
// ─────────────────────────────────────────────────────────────
function ChatList({ nav, role, lang }) {
  const t = useT(lang);
  const filters = role === 'teacher'
    ? ['All', 'Class 8-B', 'Class 9-A', 'Parents']
    : ['All', 'Aarav', 'Diya', 'Vihaan'];
  const [active, setActive] = useState(filters[0]);

  return (
    <div className="app screen-in">
      <StatusBar/>
      <div style={{ padding: '8px 20px 16px', flexShrink: 0 }}>
        <div className="spread" style={{ marginBottom: 14 }}>
          <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-.02em', color: 'var(--n900)' }}>{t.chat}</div>
          <button style={{ width: 38, height: 38, borderRadius: 12, background: 'var(--p50)', color: 'var(--p600)', display: 'grid', placeItems: 'center' }}><Icon name="edit" size={18}/></button>
        </div>
        <div className="input">
          <Icon name="search" size={18} style={{ color: 'var(--n400)' }}/>
          <input placeholder="Search teachers, parents…" style={{ border: 0, outline: 0, width: '100%', font: 'inherit', color: 'var(--n800)' }}/>
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 12, overflowX: 'auto', margin: '12px -20px 0', padding: '0 20px' }}>
          {filters.map((f, i) => (
            <button key={i} onClick={() => setActive(f)} className="pill" style={{
              flexShrink: 0, padding: '8px 14px', fontSize: 12,
              background: active === f ? 'var(--n900)' : 'var(--n50)',
              color: active === f ? '#fff' : 'var(--n700)',
              border: '1px solid transparent',
            }}>{f}</button>
          ))}
        </div>
      </div>
      <div className="app-body" style={{ paddingTop: 4 }}>
        {[
          { name: 'Mrs. Reddy', sub: 'Math · Aarav', msg: 'Aarav did really well in today\'s class test.', time: '11:24 AM', unread: 2, initial: 'SR', clr: '' },
          { name: 'Mr. Sharma', sub: 'Class teacher · Diya', msg: 'PTM is rescheduled to Saturday.', time: '10:02 AM', unread: 0, initial: 'AS', clr: 'coral', typing: true },
          { name: 'School Office', sub: 'Oakridge', msg: 'Term 2 fee structure attached', time: 'Yest', unread: 1, initial: 'OK', clr: 'green' },
          { name: 'Ms. Iyer', sub: 'English · Aarav', msg: 'Sent you the essay rubric 📎', time: 'Yest', unread: 0, initial: 'KI', clr: 'violet' },
          { name: 'Bus Coordinator', sub: 'Route 14', msg: 'Bus running 10 min late', time: 'Mon', unread: 0, initial: 'BC', clr: 'amber' },
          { name: 'Principal Rao', sub: 'DPS Hyderabad', msg: 'Independence day assembly', time: '5 Mar', unread: 0, initial: 'PR', clr: 'sky' },
        ].map((c, i) => (
          <button key={i} onClick={() => nav.push('chatThread', c)} className="row" style={{ padding: '12px 4px', gap: 12, background: 'transparent', textAlign: 'left' }}>
            <div className={`av av-48 ${c.clr}`} style={{ position: 'relative' }}>
              {c.initial}
              {i < 2 && <span style={{ position: 'absolute', right: -2, bottom: -2, width: 12, height: 12, borderRadius: 99, background: 'var(--success)', border: '2px solid #fff' }}></span>}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="spread">
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>{c.name}</div>
                <div style={{ fontSize: 10, color: c.unread ? 'var(--p600)' : 'var(--n400)', fontWeight: c.unread ? 700 : 500 }}>{c.time}</div>
              </div>
              <div style={{ fontSize: 11, color: 'var(--n400)', marginTop: 1 }}>{c.sub}</div>
              <div className="spread" style={{ marginTop: 4 }}>
                <div style={{ fontSize: 12, color: c.unread ? 'var(--n800)' : 'var(--n500)', fontWeight: c.unread ? 600 : 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, paddingRight: 8 }}>
                  {c.typing ? <span style={{ color: 'var(--success)', fontWeight: 600 }}>typing…</span> : c.msg}
                </div>
                {c.unread > 0 && <span style={{ minWidth: 18, height: 18, padding: '0 5px', background: 'var(--p600)', color: '#fff', borderRadius: 99, fontSize: 10, fontWeight: 700, display: 'grid', placeItems: 'center' }}>{c.unread}</span>}
              </div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

function ChatThread({ nav, params }) {
  const c = params || { name: 'Mrs. Reddy', sub: 'Math · Aarav', initial: 'SR', clr: '' };
  return (
    <div className="app screen-in" style={{ background: 'var(--n50)' }}>
      <StatusBar/>
      <div style={{ padding: '8px 16px 12px', display: 'flex', alignItems: 'center', gap: 10, background: '#fff', borderBottom: '1px solid var(--n100)' }}>
        <button onClick={() => nav.pop()} style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="chev-l" size={18}/></button>
        <div className={`av av-40 ${c.clr || ''}`}>{c.initial}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>{c.name}</div>
          <div style={{ fontSize: 10, color: 'var(--success)', fontWeight: 600 }}>● Online</div>
        </div>
        <button style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="more" size={18}/></button>
      </div>
      <div className="app-body" style={{ background: 'var(--n50)', padding: '16px 16px 100px', gap: 8 }}>
        <div style={{ alignSelf: 'center', fontSize: 10, color: 'var(--n400)', padding: '4px 10px', background: '#fff', borderRadius: 99, fontFamily: 'var(--mono)', fontWeight: 600 }}>TODAY</div>
        {[
          { me: false, t: 'Hi Mrs. Reddy 👋', ts: '11:18' },
          { me: false, t: 'Just wanted to check on Aarav\'s progress in algebra this term', ts: '11:18' },
          { me: true, t: 'Hello Priya! He\'s doing wonderfully.', ts: '11:22' },
          { me: true, t: 'Scored 95% on today\'s class test — top 3 in the class. Word problems are his strong suit.', ts: '11:23' },
          { me: false, t: 'That\'s amazing news 🎉', ts: '11:24' },
        ].map((m, i) => (
          <div key={i} style={{
            alignSelf: m.me ? 'flex-end' : 'flex-start',
            maxWidth: '82%',
            background: m.me ? 'var(--p600)' : '#fff',
            color: m.me ? '#fff' : 'var(--n800)',
            padding: '10px 14px',
            borderRadius: m.me ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
            fontSize: 13.5, lineHeight: 1.45,
            boxShadow: m.me ? 'var(--el-glow)' : 'var(--el-1)',
          }}>
            {m.t}
            <div style={{ fontSize: 9, marginTop: 4, opacity: m.me ? .8 : .5, textAlign: 'right' }}>
              {m.ts}{m.me ? ' ✓✓' : ''}
            </div>
          </div>
        ))}
        <div className="row" style={{ alignSelf: 'flex-start', gap: 4, padding: '6px 12px', background: '#fff', borderRadius: 18, marginTop: 4 }}>
          <span className="row" style={{ gap: 3 }}>
            <i style={{ width: 5, height: 5, borderRadius: 99, background: 'var(--n300)', animation: 'pulse-soft 1.4s ease-in-out infinite' }}></i>
            <i style={{ width: 5, height: 5, borderRadius: 99, background: 'var(--n300)', animation: 'pulse-soft 1.4s .15s ease-in-out infinite' }}></i>
            <i style={{ width: 5, height: 5, borderRadius: 99, background: 'var(--n300)', animation: 'pulse-soft 1.4s .3s ease-in-out infinite' }}></i>
          </span>
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '10px 12px 28px', background: 'rgba(255,255,255,.95)', backdropFilter: 'blur(12px)', borderTop: '1px solid var(--n100)', display: 'flex', alignItems: 'center', gap: 8, zIndex: 30 }}>
        <button style={{ width: 38, height: 38, borderRadius: 10, background: 'var(--n50)', display: 'grid', placeItems: 'center', color: 'var(--n600)' }}><Icon name="paperclip" size={18}/></button>
        <div style={{ flex: 1, height: 38, background: 'var(--n50)', borderRadius: 99, padding: '0 14px', display: 'flex', alignItems: 'center', fontSize: 13, color: 'var(--n500)' }}>
          Type a message…
        </div>
        <button style={{ width: 38, height: 38, borderRadius: 99, background: 'var(--p600)', color: '#fff', display: 'grid', placeItems: 'center', boxShadow: 'var(--el-glow)' }}><Icon name="send" size={16}/></button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// PROFILE — shared shell
// Three layers: identity (always same) → active membership +
// role spotlight (varies) → all memberships + account (always same)
// ─────────────────────────────────────────────────────────────

function ProfileSectionHeader({ label, hint, right }) {
  return (
    <div style={{ padding: '0 4px 8px' }}>
      <div className="spread">
        <div style={{ fontSize: 11, color: 'var(--n500)', textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 700, fontFamily: 'var(--mono)' }}>{label}</div>
        {right}
      </div>
      {hint && <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 4, lineHeight: 1.45 }}>{hint}</div>}
    </div>
  );
}

function ProfileIdentityCard({ person, onEdit }) {
  return (
    <div className="card" style={{ padding: 18 }}>
      <div className="row" style={{ gap: 14 }}>
        <div style={{ position: 'relative', flexShrink: 0 }}>
          <div className={`av av-56 ${person.clr || ''}`} style={{ width: 64, height: 64, fontSize: 22 }}>{person.initial}</div>
          <button onClick={onEdit} title="Edit photo" style={{ position: 'absolute', bottom: -2, right: -2, width: 24, height: 24, borderRadius: 99, background: 'var(--p600)', color: '#fff', display: 'grid', placeItems: 'center', boxShadow: 'var(--el-1)', border: '2px solid #fff' }}><Icon name="edit" size={11}/></button>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--n900)', letterSpacing: '-.01em' }}>{person.name}</div>
          <div className="row" style={{ gap: 6, marginTop: 6, color: 'var(--n600)' }}>
            <Icon name="phone" size={12} style={{ color: 'var(--n400)', flexShrink: 0 }}/>
            <span style={{ fontSize: 11.5, fontVariantNumeric: 'tabular-nums' }}>{person.phone}</span>
          </div>
          <div className="row" style={{ gap: 6, marginTop: 3, color: 'var(--n600)', minWidth: 0 }}>
            <Icon name="message" size={12} style={{ color: 'var(--n400)', flexShrink: 0 }}/>
            <span style={{ fontSize: 11.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>{person.email}</span>
          </div>
        </div>
      </div>
      <div className="row" style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--n100)', gap: 10 }}>
        <span style={{ fontSize: 11, color: 'var(--n500)', flex: 1, minWidth: 0 }}>Signed in as <b style={{ color: 'var(--n900)' }}>{person.name}</b></span>
        <button onClick={onEdit} className="btn-ghost" style={{ fontSize: 11, fontWeight: 700, color: 'var(--p600)' }}>Edit profile</button>
      </div>
    </div>
  );
}

function ProfileMembershipChip({ membership, onSwitch }) {
  if (!membership) return null;
  const rs = (typeof roleChipStyle === 'function' ? roleChipStyle(membership.roleType) : { clr: 'var(--p600)' });
  return (
    <button onClick={onSwitch} className="row" style={{
      width: '100%', padding: 14, gap: 12, background: '#fff',
      border: '1px solid var(--n100)', borderRadius: 14,
      boxShadow: 'var(--el-1)', textAlign: 'left',
    }}>
      <div style={{ position: 'relative', flexShrink: 0 }}>
        <div style={{ width: 40, height: 40, borderRadius: 11, background: membership.bg, color: membership.clr, display: 'grid', placeItems: 'center', fontSize: 18 }}>{membership.glyph}</div>
        <div style={{ position: 'absolute', bottom: -3, right: -3, width: 14, height: 14, borderRadius: 99, background: rs.clr, border: '2px solid #fff' }}></div>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="row" style={{ gap: 6 }}>
          <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--n900)' }}>{membership.team}</div>
          <span className="pill" style={{ fontSize: 9, padding: '1px 7px', background: 'var(--success-50)', color: 'var(--success)', border: 'none', fontWeight: 800, letterSpacing: '.05em' }}>● ACTIVE</span>
        </div>
        <div style={{ fontSize: 11.5, color: 'var(--n600)', marginTop: 2 }}>{membership.role} · {membership.context}</div>
      </div>
      <Icon name="chev-r" size={16} style={{ color: 'var(--n400)' }}/>
    </button>
  );
}

function ProfileSettingsList({ items, nav }) {
  return (
    <div style={{ background: '#fff', border: '1px solid var(--n100)', borderRadius: 16, overflow: 'hidden', boxShadow: 'var(--el-1)' }}>
      {items.map((it, i) => (
        <button key={i} onClick={() => it.to && nav && nav.push(it.to)} className="row" style={{
          width: '100%', padding: '12px 14px', gap: 12, textAlign: 'left',
          borderBottom: i < items.length - 1 ? '1px solid var(--n100)' : 'none',
        }}>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: it.accent ? 'var(--p50)' : 'var(--n50)', color: it.accent ? 'var(--p700)' : 'var(--n700)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name={it.ic} size={18}/></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--n900)' }}>{it.lab}</div>
            <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 1 }}>{it.sub}</div>
          </div>
          {it.badge && <span className="pill pill-s">{it.badge}</span>}
          <Icon name="chev-r" size={16} style={{ color: 'var(--n400)' }}/>
        </button>
      ))}
    </div>
  );
}

function ProfileScreen({ nav, role, lang, membership, onSwitch }) {
  const t = useT(lang);
  const person = role === 'student'
    ? { name: 'Aarav Reddy', initial: 'A', clr: '', email: 'aarav.r@dpshyd.in', phone: 'No phone yet' }
    : role === 'teacher'
    ? { name: 'Sneha Reddy', initial: 'SR', clr: 'violet', email: 'sneha.r@dpshyd.in', phone: '+91 98765 12345' }
    : role === 'driver'
    ? { name: 'Arjun R.', initial: 'AR', clr: 'sky', email: 'arjun.r@saitravels.in', phone: '+91 98765 11111' }
    : role === 'operator'
    ? { name: 'Priya Menon', initial: 'PM', clr: 'coral', email: 'priya@saitravels.in', phone: '+91 98765 22000' }
    : { name: 'Priya Reddy', initial: 'PR', clr: 'coral', email: 'priya.r@gmail.com', phone: '+91 98765 43210' };

  // ── Layer 2 (varies) — KPI strip across the top of the spotlight
  const heroStats = role === 'student'
    ? [{ v: '92%', l: 'Attendance' }, { v: '#4', l: 'Class rank' }, { v: '12', l: 'Badges' }]
    : role === 'teacher'
    ? [{ v: '184', l: 'Students' }, { v: '6', l: 'Sections' }, { v: '4.9', l: 'Rating' }]
    : role === 'driver'
    ? [{ v: '1,284', l: 'Trips' }, { v: '4.8★', l: 'Rating' }, { v: '0', l: 'Incidents' }]
    : role === 'operator'
    ? [{ v: '18', l: 'Buses' }, { v: '22', l: 'Drivers' }, { v: '4', l: 'Schools' }]
    : [{ v: '3', l: 'Children' }, { v: '₹49k', l: 'Paid YTD' }, { v: '4y', l: 'On Scholiq' }];

  // ── Layer 2 (varies) — role spotlight content
  const spotlight = role === 'student' ? (
    <>
      <div className="spread" style={{ marginBottom: 10 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>Your achievements</div>
        <button className="btn-ghost" style={{ fontSize: 11 }}>See all</button>
      </div>
      <div style={{ display: 'flex', gap: 10, overflowX: 'auto', margin: '0 -20px', padding: '0 20px 4px' }}>
        {[
          { emoji: '🏆', lab: 'Top scorer', sub: 'Math UT-2', clr: '#FEFCE8', bd: '#FDE68A' },
          { emoji: '🔥', lab: '12-day streak', sub: 'Daily revision', clr: '#FFF7ED', bd: '#FED7AA' },
          { emoji: '🥇', lab: 'Science Olympiad', sub: 'Bronze · 2025', clr: 'var(--p50)', bd: 'var(--p100)' },
          { emoji: '✍️', lab: 'Best essay', sub: 'English · Jan', clr: 'var(--success-50)', bd: '#A7F3D0' },
          { emoji: '🎨', lab: 'Art exhibit', sub: 'Selected · Dec', clr: '#FAF5FF', bd: '#E9D5FF' },
        ].map((b, i) => (
          <div key={i} style={{ flexShrink: 0, width: 132, padding: 14, background: b.clr, border: `1px solid ${b.bd}`, borderRadius: 16 }}>
            <div style={{ fontSize: 28 }}>{b.emoji}</div>
            <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--n900)', marginTop: 8 }}>{b.lab}</div>
            <div style={{ fontSize: 10.5, color: 'var(--n600)', marginTop: 1 }}>{b.sub}</div>
          </div>
        ))}
      </div>
      <div className="card-flat" style={{ marginTop: 12, padding: 14, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
        {[
          { v: '147', l: 'Hours studied' },
          { v: '38', l: 'Quizzes taken', to: 'assessments' },
          { v: '94%', l: 'On-time HW' },
        ].map((s, i) => (
          <button key={i} onClick={() => s.to && nav.push(s.to)} disabled={!s.to} style={{ textAlign: 'center', borderRight: i < 2 ? '1px solid var(--n100)' : 'none', cursor: s.to ? 'pointer' : 'default', background: 'transparent', padding: 0 }}>
            <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--n900)', fontVariantNumeric: 'tabular-nums', letterSpacing: '-.02em' }}>{s.v}</div>
            <div style={{ fontSize: 10, color: 'var(--n500)', marginTop: 2, fontWeight: 600 }}>{s.l}</div>
          </button>
        ))}
      </div>
    </>
  ) : role === 'teacher' ? (
    <>
      <div className="spread" style={{ marginBottom: 10 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>Sections you teach</div>
        <button className="btn-ghost" style={{ fontSize: 11 }} onClick={() => nav.push('classes')}>Manage</button>
      </div>
      <div className="card" style={{ padding: 0 }}>
        {[
          { cls: '8-B', n: 32, role: 'Class teacher', clr: 'var(--p600)', bg: 'var(--p50)' },
          { cls: '9-A', n: 28, role: 'Subject teacher', clr: 'var(--c600)', bg: 'var(--c50)' },
          { cls: '10-C', n: 30, role: 'Subject teacher', clr: 'var(--success)', bg: 'var(--success-50)' },
          { cls: '8-A', n: 31, role: 'Subject teacher', clr: 'var(--warning)', bg: 'var(--warning-50)' },
          { cls: '9-B', n: 29, role: 'Subject teacher', clr: '#1E40AF', bg: 'var(--info-50)' },
          { cls: '10-A', n: 34, role: 'Subject teacher', clr: '#8B5CF6', bg: '#FAF5FF' },
        ].map((c, i, arr) => (
          <div key={i} className="row" style={{ padding: '12px 14px', gap: 12, borderBottom: i < arr.length - 1 ? '1px solid var(--n100)' : 'none' }}>
            <div style={{ width: 40, height: 40, borderRadius: 11, background: c.bg, color: c.clr, display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 800, letterSpacing: '-.02em' }}>{c.cls}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>Class {c.cls} <span style={{ fontWeight: 500, color: 'var(--n500)' }}>· {c.n} students</span></div>
              <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 1 }}>{c.role}</div>
            </div>
            {i === 0 && <span className="pill pill-p">Mentor</span>}
          </div>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 12 }}>
        <div className="card-flat" style={{ padding: 12 }}>
          <div style={{ fontSize: 10, color: 'var(--n500)', fontWeight: 700, letterSpacing: '.06em', fontFamily: 'var(--mono)' }}>QUALIFICATIONS</div>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--n900)', marginTop: 6 }}>M.Sc. Mathematics</div>
          <div style={{ fontSize: 10.5, color: 'var(--n500)' }}>B.Ed · IIT Madras alum</div>
        </div>
        <div className="card-flat" style={{ padding: 12 }}>
          <div style={{ fontSize: 10, color: 'var(--n500)', fontWeight: 700, letterSpacing: '.06em', fontFamily: 'var(--mono)' }}>EXPERIENCE</div>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--n900)', marginTop: 6 }}>8 years teaching</div>
          <div style={{ fontSize: 10.5, color: 'var(--n500)' }}>5 at DPS Hyderabad</div>
        </div>
      </div>
    </>
  ) : role === 'driver' ? (
    <>
      <div className="spread" style={{ marginBottom: 10 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>License & verification</div>
        <button className="btn-ghost" style={{ fontSize: 11 }} onClick={() => nav.push('drvVehicle')}>Vehicle log</button>
      </div>
      <div className="card" style={{ padding: 0 }}>
        {[
          { l: 'Heavy vehicle license', sub: 'DL-09 1185 · valid till Aug 2027' },
          { l: 'Police verification', sub: 'Cleared · 14 Feb 2024' },
          { l: 'Medical fitness', sub: 'Renewed 22 Jan 2025' },
          { l: 'First-aid training', sub: 'Completed Mar 2024' },
        ].map((d, i, arr) => (
          <div key={i} className="row" style={{ padding: '12px 14px', gap: 12, borderBottom: i < arr.length - 1 ? '1px solid var(--n100)' : 'none' }}>
            <Icon name="shield" size={18} style={{ color: 'var(--success)' }}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{d.l}</div>
              <div style={{ fontSize: 11, color: 'var(--n500)' }}>{d.sub}</div>
            </div>
            <Icon name="chev-r" size={14} style={{ color: 'var(--n400)' }}/>
          </div>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 12 }}>
        <div className="card-flat" style={{ padding: 12 }}>
          <div style={{ fontSize: 10, color: 'var(--n500)', fontWeight: 700, letterSpacing: '.06em', fontFamily: 'var(--mono)' }}>ASSIGNED VEHICLE</div>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--n900)', marginTop: 6 }}>TS09 EQ 4421</div>
          <div style={{ fontSize: 10.5, color: 'var(--n500)' }}>Tata Starbus · Route 14</div>
        </div>
        <div className="card-flat" style={{ padding: 12 }}>
          <div style={{ fontSize: 10, color: 'var(--n500)', fontWeight: 700, letterSpacing: '.06em', fontFamily: 'var(--mono)' }}>EXPERIENCE</div>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--n900)', marginTop: 6 }}>3.2 years driving</div>
          <div style={{ fontSize: 10.5, color: 'var(--n500)' }}>2.1y at Sai Travels</div>
        </div>
      </div>
    </>
  ) : role === 'operator' ? (
    <>
      <div className="spread" style={{ marginBottom: 10 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>Fleet snapshot</div>
        <button className="btn-ghost" style={{ fontSize: 11 }} onClick={() => nav.push('opFleet')}>Manage</button>
      </div>
      <div className="card-flat" style={{ padding: 12, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
        {[
          { v: '14', l: 'On route', clr: 'var(--success)' },
          { v: '1', l: 'Service', clr: 'var(--warning)' },
          { v: '3', l: 'Garage', clr: 'var(--n500)' },
          { v: '₹2.4Cr', l: 'YTD rev.', clr: 'var(--p600)' },
        ].map((s, i) => (
          <div key={i} style={{ textAlign: 'center', borderRight: i < 3 ? '1px solid var(--n100)' : 'none' }}>
            <div style={{ fontSize: 16, fontWeight: 800, color: s.clr, fontVariantNumeric: 'tabular-nums', letterSpacing: '-.02em' }}>{s.v}</div>
            <div style={{ fontSize: 9.5, color: 'var(--n500)', marginTop: 2, fontWeight: 600 }}>{s.l}</div>
          </div>
        ))}
      </div>
      <div className="spread" style={{ marginTop: 16, marginBottom: 10 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>Schools served</div>
        <button className="btn-ghost" style={{ fontSize: 11 }} onClick={() => nav.push('opSchools')}>All</button>
      </div>
      <div className="card" style={{ padding: 0 }}>
        {[
          { sch: 'DPS Hyderabad', sub: '142 students · 5 buses', clr: '#1E40AF', bg: 'var(--info-50)' },
          { sch: 'Vidyaranya High', sub: '188 students · 6 buses', clr: 'var(--success)', bg: 'var(--success-50)' },
          { sch: 'Oakridge Intl.', sub: '124 students · 4 buses', clr: 'var(--c600)', bg: 'var(--c50)' },
        ].map((s, i, arr) => (
          <div key={i} className="row" style={{ padding: '12px 14px', gap: 12, borderBottom: i < arr.length - 1 ? '1px solid var(--n100)' : 'none' }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: s.bg, color: s.clr, display: 'grid', placeItems: 'center' }}><Icon name="building" size={16}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{s.sch}</div>
              <div style={{ fontSize: 11, color: 'var(--n500)' }}>{s.sub}</div>
            </div>
            <Icon name="chev-r" size={14} style={{ color: 'var(--n400)' }}/>
          </div>
        ))}
      </div>
    </>
  ) : (
    <>
      <div className="spread" style={{ marginBottom: 10 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>Your children</div>
        <button className="btn-ghost" style={{ fontSize: 11 }}><Icon name="plus" size={12}/> Add</button>
      </div>
      <div className="card" style={{ padding: 0 }}>
        {[
          { name: 'Aarav', cls: '8-B', initial: 'A', clr: '', dot: 'var(--success)', state: 'In school' },
          { name: 'Diya', cls: '5-A', initial: 'D', clr: 'coral', dot: 'var(--success)', state: 'In school' },
          { name: 'Vihaan', cls: '2-C', initial: 'V', clr: 'green', dot: 'var(--warning)', state: 'On bus · 8 min' },
        ].map((c, i, arr) => (
          <button key={i} className="row" onClick={() => nav.push('childDash', c)} style={{ width: '100%', padding: '12px 14px', gap: 12, textAlign: 'left', borderBottom: i < arr.length - 1 ? '1px solid var(--n100)' : 'none' }}>
            <div className={`av av-44 ${c.clr}`}>{c.initial}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="spread">
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{c.name} Reddy</div>
                <span style={{ fontSize: 10, color: 'var(--n400)', fontFamily: 'var(--mono)', fontWeight: 600 }}>Class {c.cls}</span>
              </div>
              <div className="row" style={{ gap: 6, marginTop: 4 }}>
                <span className="dot" style={{ background: c.dot }}></span>
                <span style={{ fontSize: 11, color: 'var(--n600)' }}>{c.state}</span>
              </div>
            </div>
            <Icon name="chev-r" size={16} style={{ color: 'var(--n400)' }}/>
          </button>
        ))}
      </div>

      {/* Latest assessment per child — parent profile read-out (#5) */}
      {(() => {
        const kids = (typeof window !== 'undefined' && window.PARENT_KIDS_RESULTS) || [];
        const latest = kids.map(k => ({ kid: k, last: k.items[0] })).filter(x => x.last);
        if (latest.length === 0) return null;
        return (
          <>
            <div className="spread" style={{ marginTop: 16, marginBottom: 10 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>Latest assessments</div>
              <button className="btn-ghost" style={{ fontSize: 11 }} onClick={() => nav.push('results')}>All results</button>
            </div>
            <div className="card" style={{ padding: 0 }}>
              {latest.map(({ kid, last }, i, arr) => {
                const isAwaiting = last.state === 'awaiting';
                const beats = !isAwaiting && last.classAvgPct != null && last.scorePct >= last.classAvgPct;
                const onTap = () => {
                  if (last.aid) nav.push('assessmentResult', { id: last.aid });
                  else nav.push('childDash', { name: kid.name, cls: kid.cls, initial: kid.initial, clr: kid.clr });
                };
                return (
                  <button key={kid.childId} onClick={onTap} className="row" style={{
                    width: '100%', padding: '11px 14px', gap: 12, textAlign: 'left',
                    borderBottom: i < arr.length - 1 ? '1px solid var(--n100)' : 'none',
                  }}>
                    <div style={{ width: 32, height: 32, borderRadius: 9, background: last.bg, color: last.clr, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                      <Icon name={last.icon} size={14}/>
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="spread">
                        <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--n900)' }}>{kid.name}</div>
                        {isAwaiting ? (
                          <span className="pill pill-w" style={{ fontSize: 9 }}>Awaiting</span>
                        ) : (
                          <div className="row" style={{ gap: 6 }}>
                            <span style={{ fontSize: 12, fontWeight: 800, color: 'var(--n900)', fontFamily: 'var(--mono)', fontVariantNumeric: 'tabular-nums' }}>{last.scorePct}%</span>
                            <span style={{ fontSize: 9.5, fontWeight: 800, color: beats ? 'var(--success)' : 'var(--c600)' }}>
                              {beats ? '↑' : '↓'} vs class
                            </span>
                          </div>
                        )}
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>{last.title}</div>
                    </div>
                    <Icon name="chev-r" size={14} style={{ color: 'var(--n400)' }}/>
                  </button>
                );
              })}
            </div>
          </>
        );
      })()}
    </>
  );

  // ── Layer 2 (varies) — 2 role-specific quick actions tied to this membership
  const roleQuickActions = role === 'parent'
    ? [
        { ic: 'rupee', lab: 'Pay fees', clr: 'var(--c600)', bg: 'var(--c50)', to: 'fees' },
        { ic: 'plus', lab: 'Add child', clr: 'var(--p600)', bg: 'var(--p50)', to: 'home' },
      ]
    : role === 'teacher'
    ? [
        { ic: 'clipboard', lab: 'Assessments', clr: 'var(--p600)', bg: 'var(--p50)', to: 'teachAssessments' },
        { ic: 'document', lab: 'Homework', clr: 'var(--c600)', bg: 'var(--c50)', to: 'teachHomework' },
      ]
    : role === 'driver'
    ? [
        { ic: 'bus', lab: 'Today’s trip', clr: 'var(--p600)', bg: 'var(--p50)', to: 'drvTrip' },
        { ic: 'shield', lab: 'Documents', clr: 'var(--success)', bg: 'var(--success-50)', to: 'drvVehicle' },
      ]
    : role === 'operator'
    ? [
        { ic: 'pin', lab: 'Live map', clr: 'var(--p600)', bg: 'var(--p50)', to: 'opLive' },
        { ic: 'bus', lab: 'Fleet', clr: 'var(--c600)', bg: 'var(--c50)', to: 'opFleet' },
      ]
    : [
        { ic: 'clipboard', lab: 'Assessments', clr: 'var(--p600)', bg: 'var(--p50)', to: 'assessments' },
        { ic: 'trophy', lab: 'Results', clr: '#854D0E', bg: '#FEFCE8', to: 'results' },
      ];

  // ── Layer 3 (always same) — account-level settings
  const accountItems = [
    { ic: 'user', lab: 'Personal info', sub: 'Name, photo, date of birth', to: 'personalInfo' },
    { ic: 'shield', lab: 'Security', sub: 'PIN, biometric, 3 sessions', badge: 'Strong', to: 'security' },
    { ic: 'bell', lab: 'Notifications', sub: '3 of 5 channels on', to: 'notifPrefs' },
    { ic: 'globe', lab: 'Language', sub: lang === 'en' ? 'English' : lang === 'hi' ? 'हिन्दी' : 'తెలుగు', accent: true, to: 'language' },
    { ic: 'palette', lab: 'Appearance', sub: 'System default', to: 'appearance' },
  ];
  const supportItems = [
    { ic: 'help', lab: 'Help center', sub: 'FAQs, video tutorials', to: 'helpCenter' },
    { ic: 'message', lab: 'Contact support', sub: 'Avg reply in 4 min', to: 'contactSupport' },
    { ic: 'shield', lab: 'Privacy & data', sub: 'DPDPA compliant', to: 'privacy' },
    { ic: 'info', lab: 'About Scholiq', sub: 'v2.4.1 · Made in Hyderabad', to: 'about' },
  ];

  return (
    <div className="app screen-in">
      <StatusBar/>
      <div className="app-body" style={{ paddingTop: 8 }}>
        {/* Title row */}
        <div className="spread" style={{ padding: '6px 0 4px' }}>
          <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-.02em' }}>{t.profile}</div>
          <div className="row" style={{ gap: 8 }}>
            <button onClick={() => nav.push('shareProfile')} title="Share QR" style={{ width: 38, height: 38, borderRadius: 12, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="qr" size={18}/></button>
            <button onClick={() => nav.push('appSettings')} title="Settings" style={{ width: 38, height: 38, borderRadius: 12, background: 'var(--n50)', display: 'grid', placeItems: 'center' }}><Icon name="settings" size={18}/></button>
          </div>
        </div>

        {/* SECTION 1 — identity (always same) */}
        <ProfileIdentityCard person={person} onEdit={() => nav.push('editProfile')}/>

        {/* SECTION 2 — role spotlight (varies based on active membership) */}
        <ProfileSectionHeader
          label={`Your role · ${membership ? membership.role : 'membership'}`}
          hint={membership ? `Showing ${membership.team} — ${membership.context}.` : 'Showing what your active membership unlocks.'}
        />

        <div className="card-flat" style={{ padding: 12, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
          {heroStats.map((s, i) => (
            <div key={i} style={{ textAlign: 'center', borderRight: i < 2 ? '1px solid var(--n200)' : 'none' }}>
              <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--n900)', fontVariantNumeric: 'tabular-nums', letterSpacing: '-.02em' }}>{s.v}</div>
              <div style={{ fontSize: 10, color: 'var(--n500)', marginTop: 2, fontWeight: 600 }}>{s.l}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 14 }}>
          {spotlight}
        </div>

        <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 8 }}>
          {roleQuickActions.map((q, i) => (
            <button key={i} onClick={() => nav.push(q.to)} className="row" style={{ padding: '12px 14px', gap: 10, background: '#fff', border: '1px solid var(--n100)', borderRadius: 12, boxShadow: 'var(--el-1)', textAlign: 'left' }}>
              <div style={{ width: 32, height: 32, borderRadius: 9, background: q.bg, color: q.clr, display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name={q.ic} size={16}/></div>
              <div style={{ flex: 1, fontSize: 12.5, fontWeight: 700, color: 'var(--n900)' }}>{q.lab}</div>
              <Icon name="chev-r" size={14} style={{ color: 'var(--n400)' }}/>
            </button>
          ))}
        </div>

        {/* SECTION 3 — active membership (acts as switcher) */}
        <ProfileSectionHeader
          label="Active membership"
          hint="Tap to switch to another team or role."
        />
        <ProfileMembershipChip membership={membership} onSwitch={onSwitch}/>

        {/* Account & app (always same) */}
        <ProfileSectionHeader label="Account & app"/>
        <ProfileSettingsList items={accountItems} nav={nav}/>

        <ProfileSectionHeader label="Support & legal"/>
        <ProfileSettingsList items={supportItems} nav={nav}/>

        <button onClick={() => nav.push('signOut')} className="btn btn-outline" style={{ marginTop: 8, color: 'var(--c600)', borderColor: 'var(--c200)' }}><Icon name="logout" size={16}/> Sign out</button>
        <div style={{ textAlign: 'center', fontSize: 10, color: 'var(--n400)', margin: '14px 0 4px', fontFamily: 'var(--mono)', letterSpacing: '.08em' }}>SCHOLIQ v2.4.1 · MADE IN HYDERABAD</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// NOTIFICATIONS — secondary
// ─────────────────────────────────────────────────────────────
function NotificationsScreen({ nav }) {
  const [filter, setFilter] = useState('all');
  const items = [
    { ic: 'rupee', clr: '#fff', bg: 'var(--p600)', cat: 'FEES · URGENT', title: 'Term 2 fees due in 14 days', sub: '₹18,500 for Aarav · ₹28,750 for Vihaan', time: '2h', kind: 'critical', action: 'Pay now', actionTo: 'pay', urgent: true },
    { ic: 'calendar', clr: 'var(--c600)', bg: 'var(--c50)', cat: 'PTM', title: 'PTM rescheduled to Saturday', sub: 'Confirm slot by Friday 5 PM · Mrs. Reddy', time: '4h', kind: 'critical', action: 'Confirm slot', actionTo: 'chat' },
    { ic: 'bus', clr: 'var(--warning)', bg: 'var(--warning-50)', cat: 'TRANSPORT', title: 'Bus running 10 min late', sub: 'Route 14 · Vihaan · arriving 7:55 AM', time: 'Yest', kind: 'critical', action: 'Track bus', actionTo: 'transport' },
    { ic: 'trophy', clr: 'var(--success)', bg: 'var(--success-50)', cat: 'RESULT', title: 'Diya scored 92/100', sub: 'Hindi class test · Mr. Sharma', time: '5h', kind: 'updates' },
    { ic: 'clipboard', clr: '#1E40AF', bg: 'var(--info-50)', cat: 'HOMEWORK', title: 'New assignment · Mathematics', sub: 'Aarav · Exercise 7.3 · due Friday', time: '6h', kind: 'updates', action: 'View', actionTo: 'homework' },
    { ic: 'check', clr: 'var(--success)', bg: 'var(--success-50)', cat: 'ATTENDANCE', title: 'Vihaan marked present', sub: 'On time · 8:42 AM', time: '8h', kind: 'updates' },
    { ic: 'megaphone', clr: '#1E40AF', bg: 'var(--info-50)', cat: 'ANNOUNCEMENT', title: 'Annual Day · 28 March', sub: 'DPS Hyderabad · all classes · 4 PM at auditorium', time: 'Mon', kind: 'social' },
    { ic: 'sparkle', clr: '#9A3412', bg: '#FFF7ED', cat: 'NEWSLETTER', title: 'March newsletter is out', sub: 'Read about the science fair winners', time: 'Sat', kind: 'social' },
  ];
  const counts = {
    all: items.length,
    critical: items.filter(i => i.kind === 'critical').length,
    updates: items.filter(i => i.kind === 'updates').length,
    social: items.filter(i => i.kind === 'social').length,
  };
  const visible = filter === 'all' ? items : items.filter(i => i.kind === filter);
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="Notifications" onBack={() => nav.pop()} right={<button className="btn-ghost" style={{ fontSize: 12, fontWeight: 600 }}>Mark all read</button>}/>
      {/* Filter tabs */}
      <div style={{ padding: '0 20px 12px', background: '#fff', borderBottom: '1px solid var(--n100)' }}>
        <div className="row" style={{ gap: 6, overflowX: 'auto', margin: '0 -4px', padding: '0 4px' }}>
          {[
            { id: 'all', lab: 'All' },
            { id: 'critical', lab: 'Action needed', urgent: true },
            { id: 'updates', lab: 'Updates' },
            { id: 'social', lab: 'School life' },
          ].map(t => (
            <button key={t.id} onClick={() => setFilter(t.id)} style={{
              flexShrink: 0, padding: '8px 14px', borderRadius: 99, fontSize: 12, fontWeight: 700,
              background: filter === t.id ? 'var(--n900)' : 'var(--n50)',
              color: filter === t.id ? '#fff' : 'var(--n700)',
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              {t.lab}
              <span style={{
                display: 'inline-grid', placeItems: 'center', minWidth: 18, height: 18, padding: '0 5px',
                borderRadius: 99, fontSize: 10, fontWeight: 800,
                background: filter === t.id ? 'rgba(255,255,255,.18)' : (t.urgent ? 'var(--c500)' : 'var(--n100)'),
                color: filter === t.id ? '#fff' : (t.urgent ? '#fff' : 'var(--n600)'),
              }}>{counts[t.id]}</span>
            </button>
          ))}
        </div>
      </div>
      <div className="app-body" style={{ paddingTop: 12 }}>
        {visible.map((n, i) => (
          <div key={i} className={n.urgent ? 'card-tinted' : 'card'} style={{ padding: 14 }}>
            <div className="row" style={{ gap: 12, alignItems: 'flex-start' }}>
              <div style={{ width: 40, height: 40, borderRadius: 12, background: n.bg, color: n.clr, display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name={n.ic} size={18}/></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="spread">
                  <span style={{ fontSize: 9, fontWeight: 700, color: n.urgent ? 'var(--p700)' : 'var(--n500)', letterSpacing: '.08em', fontFamily: 'var(--mono)' }}>{n.cat}</span>
                  <span style={{ fontSize: 10, color: n.urgent ? 'var(--p700)' : 'var(--n400)', fontWeight: 600 }}>{n.time}</span>
                </div>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)', marginTop: 4 }}>{n.title}</div>
                <div style={{ fontSize: 11, color: 'var(--n600)', marginTop: 2, lineHeight: 1.5 }}>{n.sub}</div>
                {n.action && (
                  <div className="row" style={{ gap: 8, marginTop: 10 }}>
                    <button onClick={() => n.actionTo && nav.push(n.actionTo)} className="btn-sm" style={{
                      background: n.urgent ? 'var(--p600)' : 'var(--n900)', color: '#fff',
                      height: 32, padding: '0 14px', fontSize: 11, fontWeight: 700, borderRadius: 9,
                    }}>{n.action}</button>
                    <button className="btn-sm btn-ghost" style={{ height: 32, padding: '0 12px', fontSize: 11 }}>Dismiss</button>
                  </div>
                )}
              </div>
            </div>
          </div>
        ))}
        {visible.length === 0 && (
          <div className="card" style={{ padding: 28, textAlign: 'center' }}>
            <div style={{ fontSize: 28 }}>🎉</div>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)', marginTop: 8 }}>You're all caught up</div>
            <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 4 }}>Nothing in this category</div>
          </div>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SIMPLE / placeholder screens for nav targets
// ─────────────────────────────────────────────────────────────
function PlaceholderScreen({ nav, title, icon = 'sparkles', subtitle = 'Section preview' }) {
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title={title} onBack={() => nav.pop()}/>
      <div className="app-body" style={{ alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '40px 32px' }}>
        <div style={{ width: 80, height: 80, borderRadius: 24, background: 'var(--p50)', color: 'var(--p600)', display: 'grid', placeItems: 'center', margin: '0 auto 20px' }}>
          <Icon name={icon} size={32}/>
        </div>
        <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--n900)' }}>{title}</div>
        <div style={{ fontSize: 13, color: 'var(--n500)', marginTop: 6, maxWidth: 240 }}>{subtitle}</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Bottom nav
// ─────────────────────────────────────────────────────────────
function BottomNav({ active, onTab, role, lang }) {
  const t = useT(lang);
  const tabs = role === 'student'
    ? [
        { id: 'home', ic: 'home', lab: t.home },
        { id: 'today', ic: 'calendar', lab: t.today },
        { id: 'library', ic: 'book-open', lab: t.library },
        { id: 'chat', ic: 'message', lab: t.chat },
        { id: 'profile', ic: 'user', lab: t.profile },
      ]
    : role === 'teacher'
    ? [
        { id: 'home', ic: 'home', lab: t.home },
        { id: 'classes', ic: 'users', lab: t.classes },
        { id: 'tasks', ic: 'clipboard', lab: t.tasks },
        { id: 'chat', ic: 'message', lab: t.chat },
        { id: 'profile', ic: 'user', lab: t.profile },
      ]
    : [
        { id: 'home', ic: 'home', lab: t.home },
        { id: 'fees', ic: 'rupee', lab: t.fees },
        { id: 'learn', ic: 'book-open', lab: t.learn },
        { id: 'chat', ic: 'message', lab: t.chat },
        { id: 'profile', ic: 'user', lab: t.profile },
      ];
  return (
    <div className="bnav">
      {tabs.map((tb) => (
        <button key={tb.id} onClick={() => onTab(tb.id)} className={`bnav-item${active === tb.id ? ' active' : ''}`}>
          <i><Icon name={tb.ic} size={22}/></i>
          <span>{tb.lab}</span>
        </button>
      ))}
    </div>
  );
}

Object.assign(window, {
  StatusBar, NavHeader, BottomNav,
  ParentHome, StudentHome, TeacherHome,
  FeesScreen, PayScreen, PaySuccess,
  AttendanceScreen, ChatList, ChatThread,
  ProfileScreen, NotificationsScreen, PlaceholderScreen,
  useT,
});