function StudentDashboard({ onNavigate }) {
  return (
    <div className="content">
      {/* Greeting row */}
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 20, marginBottom: 20 }}>
        <div className="card" style={{ padding: 26, background: 'linear-gradient(120deg, #0b2a5b 0%, #133c7a 100%)', color: 'white', border: 'none', position: 'relative', overflow: 'hidden' }}>
          <div className="blueprint-bg" style={{ position: 'absolute', inset: 0, opacity: 0.35 }} />
          <div style={{ position: 'relative' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.14em' }}>WED · 15 JUL 2026 · 09:24 IST</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 6 }}>
              <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: 30, fontWeight: 500, letterSpacing: '-0.02em', margin: 0 }}>
                Namaste, Rahul.
              </h1>
              <span className="hi" style={{ fontSize: 20, color: 'rgba(255,255,255,0.75)', fontFamily: 'var(--font-devanagari)' }}>राहुल जी, स्वागत है।</span>
            </div>
            <p style={{ marginTop: 8, color: 'rgba(255,255,255,0.7)', fontSize: 14, maxWidth: 520 }}>
              You're 3 lessons away from completing <strong style={{ color: '#ffb37a' }}>Semester 3 · Electrical Machines</strong>. Two virtual practicals are pending review.
            </p>

            <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
              <button className="btn btn-saffron" onClick={() => onNavigate('lesson')}>
                <window.IconPlay size={12}/> Resume: Three-Phase Motor
              </button>
              <button className="btn btn-ghost" style={{ background: 'rgba(255,255,255,0.08)', borderColor: 'rgba(255,255,255,0.2)', color: 'white' }} onClick={() => onNavigate('lab')}>
                Enter Virtual Lab
              </button>
            </div>
          </div>
        </div>

        <div className="card" style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 44, height: 44, borderRadius: 10, background: 'var(--saffron-100)', color: 'var(--saffron-600)', display: 'grid', placeItems: 'center' }}>
              <window.IconFlame size={22}/>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 500, color: 'var(--ink-900)', letterSpacing: '-0.02em', lineHeight: 1 }}>
                12 <span style={{ fontSize: 14, color: 'var(--ink-600)' }}>day streak</span>
              </div>
              <div style={{ fontSize: 11, color: 'var(--ink-600)', textTransform: 'uppercase', letterSpacing: '0.06em', marginTop: 3, fontWeight: 600 }}>Keep it going!</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 3 }}>
            {Array.from({length: 14}).map((_, i) => (
              <div key={i} style={{
                flex: 1, height: 22,
                borderRadius: 3,
                background: i < 12 ? (i === 11 ? 'var(--saffron-500)' : 'var(--saffron-400)') : 'var(--ink-200)',
              }} title={`Day ${i+1}`}/>
            ))}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--ink-600)', fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>
            <span>2 JUL</span><span>TODAY</span>
          </div>
        </div>
      </div>

      {/* Key stats row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 20 }}>
        {[
          { k: '68%', v: 'Course completion', trend: '+4% this week', color: 'navy' },
          { k: '4.2 / 5', v: 'Avg. assessment score', trend: '↑ 0.3 vs last week', color: 'green' },
          { k: '11 / 14', v: 'Practicals cleared', trend: '3 pending', color: 'saffron' },
          { k: 'B2', v: 'Skill readiness index', trend: 'On track for AITT', color: 'navy' },
        ].map((s, i) => (
          <div key={i} className="card" style={{ padding: 20 }}>
            <div className="stat-num">{s.k}</div>
            <div className="stat-label">{s.v}</div>
            <div style={{ fontSize: 11, color: 'var(--green-600)', marginTop: 10, fontWeight: 500 }}>{s.trend}</div>
          </div>
        ))}
      </div>

      {/* Quick access — explore modules */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12, marginBottom: 20 }}>
        {[
          { id: 'animation', l: 'Process Animation', ic: window.IconVideo },
          { id: 'workshop', l: 'Virtual Workshop', ic: window.IconTool },
          { id: 'arvr', l: 'AR & VR', ic: window.IconHeadset },
          { id: 'certificates', l: 'Certificates', ic: window.IconAward },
          { id: 'readiness', l: 'Job Readiness', ic: window.IconBriefcase },
          { id: 'manual', l: 'Workshop Manual', ic: window.IconFileText },
        ].map(q => {
          const I = q.ic;
          return (
            <button key={q.id} className="card" onClick={() => onNavigate(q.id)} style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'start', textAlign: 'left', cursor: 'pointer', transition: 'all 0.15s' }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-2)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
              <div style={{ width: 36, height: 36, borderRadius: 9, background: 'var(--navy-100)', color: 'var(--navy-700)', display: 'grid', placeItems: 'center' }}><I size={18}/></div>
              <span style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink-900)', lineHeight: 1.25 }}>{q.l}</span>
            </button>
          );
        })}
      </div>

      {/* Main grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 20 }}>
        {/* Curriculum path */}
        <div className="card">
          <div className="card-header" style={{ justifyContent: 'space-between' }}>
            <div>
              <div className="card-title">Your curriculum path</div>
              <div className="card-sub">Fitter · Semester 3 · NCVT syllabus 2024-25</div>
            </div>
            <span className="badge navy mono">NCVT · DGT</span>
          </div>
          <div style={{ padding: 20 }}>
            {[
              { n: 'M1', title: 'Bench Work & Fitting Practice', prog: 100, status: 'Complete', s: 'green' },
              { n: 'M2', title: 'Marking & Measuring Instruments', prog: 100, status: 'Complete', s: 'green' },
              { n: 'M3', title: 'Sheet Metal & Basic Welding', prog: 78, status: 'In progress', s: 'saffron', current: true },
              { n: 'M4', title: 'Lathe Turning — External Operations', prog: 34, status: 'Started', s: 'navy' },
              { n: 'M5', title: 'Milling & Grinding Machines', prog: 0, status: 'Locked', s: 'gray' },
              { n: 'M6', title: 'Assembly & Fits — Practical Assessment', prog: 0, status: 'Locked', s: 'gray' },
            ].map(m => (
              <div key={m.n} style={{
                display: 'grid', gridTemplateColumns: '32px 1fr 100px 90px', gap: 14,
                alignItems: 'center',
                padding: '14px 0',
                borderBottom: '1px dashed var(--ink-200)',
                opacity: m.status === 'Locked' ? 0.55 : 1,
                background: m.current ? 'linear-gradient(90deg, rgba(230,117,20,0.06), transparent)' : 'transparent',
                margin: m.current ? '0 -20px' : 0,
                padding: m.current ? '14px 20px' : '14px 0',
              }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
                  color: m.current ? 'var(--saffron-600)' : 'var(--ink-500)',
                  letterSpacing: '0.06em',
                }}>{m.n}</div>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: m.current ? 600 : 500, color: 'var(--ink-900)' }}>{m.title}</div>
                  {m.current && <div style={{ fontSize: 11, color: 'var(--saffron-600)', marginTop: 3, fontWeight: 600 }}>◆ Current module — 3 lessons remaining</div>}
                </div>
                <div className="progress-track">
                  <div className={`progress-fill ${m.s === 'green' ? 'green' : m.s === 'saffron' ? 'saffron' : ''}`} style={{ width: `${m.prog}%`, background: m.s === 'gray' ? 'var(--ink-300)' : undefined }} />
                </div>
                <div className={`badge ${m.s === 'green' ? 'green' : m.s === 'saffron' ? 'saffron' : m.s === 'navy' ? 'navy' : ''}`} style={{ background: m.s === 'gray' ? 'var(--ink-100)' : undefined, color: m.s === 'gray' ? 'var(--ink-600)' : undefined, justifyContent: 'center', display: 'flex' }}>
                  {m.status}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* Next lesson card with 3D preview */}
          <div className="card" style={{ overflow: 'hidden' }}>
            <div style={{ position: 'relative', aspectRatio: '16/9', background: 'var(--ink-100)' }}>
              <img src="assets/hero-motor.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%)' }} />
              <div style={{ position: 'absolute', top: 12, left: 12 }}>
                <span className="badge mono navy" style={{ background: 'rgba(11,42,91,0.9)', color: 'white' }}>3D LESSON · 12 MIN</span>
              </div>
              <button
                onClick={() => onNavigate('lesson')}
                style={{
                  position: 'absolute', top: '50%', left: '50%',
                  transform: 'translate(-50%, -50%)',
                  width: 56, height: 56, borderRadius: '50%',
                  background: 'rgba(255,255,255,0.95)',
                  color: 'var(--navy-800)',
                  display: 'grid', placeItems: 'center',
                  boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
                }}
              ><window.IconPlay size={22}/></button>
              <div style={{ position: 'absolute', bottom: 12, left: 12, right: 12, color: 'white' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', opacity: 0.8 }}>UP NEXT · L07</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 2 }}>
                  Three-Phase Induction Motor — Construction
                </div>
              </div>
            </div>
          </div>

          {/* Upcoming */}
          <div className="card">
            <div className="card-header">
              <div className="card-title">Upcoming this week</div>
            </div>
            <div style={{ padding: '6px 0' }}>
              {[
                { d: '15 Jul', t: 'Practical viva — Marking gauge', tag: 'Viva', s: 'saffron' },
                { d: '17 Jul', t: 'Mock trade test (Sem 3)', tag: 'Assessment', s: 'navy' },
                { d: '19 Jul', t: 'Virtual lab: MIG welding butt joint', tag: 'Lab', s: 'green' },
                { d: '22 Jul', t: 'Assignment: Fits & tolerances', tag: 'Assignment', s: 'navy' },
              ].map(x => (
                <div key={x.t} style={{ padding: '12px 20px', borderTop: '1px solid var(--ink-100)', display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, textAlign: 'center', width: 48 }}>
                    <div style={{ color: 'var(--ink-500)' }}>{x.d.split(' ')[1].toUpperCase()}</div>
                    <div style={{ fontSize: 16, color: 'var(--ink-900)', fontWeight: 600 }}>{x.d.split(' ')[0]}</div>
                  </div>
                  <div style={{ flex: 1, fontSize: 13, color: 'var(--ink-800)' }}>{x.t}</div>
                  <span className={`badge ${x.s}`}>{x.tag}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Recommendations */}
      <div className="card" style={{ marginTop: 20 }}>
        <div className="card-header" style={{ justifyContent: 'space-between' }}>
          <div>
            <div className="card-title" style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <window.IconSparkle size={16} style={{ color: 'var(--saffron-500)' }}/>
              Recommended by AI Tutor
            </div>
            <div className="card-sub">Based on your weak-topic analysis in yesterday's practice</div>
          </div>
          <button className="btn btn-ghost" onClick={() => onNavigate('tutor')}>Open AI Tutor</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--ink-200)' }}>
          {[
            { t: 'Star delta connection', s: 'Weak in last quiz', dur: '8 min', icon: window.IconCube },
            { t: 'File selection for finishing', s: 'Practical prep', dur: '4 min', icon: window.IconTool },
            { t: 'Reading vernier calipers', s: 'Revision suggested', dur: '6 min', icon: window.IconTarget },
          ].map((r, i) => {
            const I = r.icon;
            return (
              <div key={i} onClick={() => onNavigate('tutor')} style={{ background: 'white', padding: 18, cursor: 'pointer' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                  <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--navy-100)', color: 'var(--navy-700)', display: 'grid', placeItems: 'center' }}>
                    <I size={16}/>
                  </div>
                  <span className="badge saffron" style={{ fontSize: 10 }}>{r.s}</span>
                </div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-900)', marginBottom: 4 }}>{r.t}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-600)', display: 'flex', gap: 6, alignItems: 'center' }}>
                  <window.IconClock size={11}/> {r.dur}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.StudentDashboard = StudentDashboard;