function StudentProfile({ onNavigate }) {
  const [tab, setTab] = React.useState('Bookmarks');
  const tabs = ['Bookmarks', 'Notes', 'Offline Downloads', 'Settings'];

  const [profile, setProfile] = React.useState({ name: 'Rahul Kumar', trade: 'Fitter', sem: 'Semester 3', roll: 'FTR-24-018', iti: 'Govt ITI Cuttack' });
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState(profile);
  const initials = profile.name.trim().split(/\s+/).map(w => w[0]).slice(0, 2).join('').toUpperCase() || 'ST';

  const openEdit = () => { setDraft(profile); setEditing(true); };
  const saveProfile = () => {
    if (!draft.name.trim()) { window.toast('Name cannot be empty'); return; }
    setProfile(draft);
    setEditing(false);
    window.toast('Profile updated');
  };

  const bookmarks = [
    { t: 'Star-Delta Winding Termination', trade: 'Electrician', type: '3D Lesson', nav: 'lesson' },
    { t: 'MIG Welding — Butt Joint', trade: 'Welder', type: 'Virtual Lab', nav: 'lab' },
    { t: 'Fits & Tolerances', trade: 'Fitter', type: 'Concept', nav: 'lesson' },
    { t: 'Centre Lathe SOP', trade: 'Fitter', type: 'Manual', nav: 'manual' },
  ];

  const notes = [
    { t: 'Vernier caliper least count', body: 'LC = 1 MSD − 1 VSD = 0.02 mm for standard metric caliper. Remember zero error correction.', date: '14 Jul', lesson: 'Measuring Instruments' },
    { t: 'Synchronous speed formula', body: 'Ns = 120f / P. For 50 Hz, 4-pole: Ns = 1500 rpm. Slip s = (Ns − N)/Ns.', date: '12 Jul', lesson: 'Three-Phase Motor' },
    { t: 'Welding travel speed', body: 'Aim ~250 mm/min for 6mm MS plate. Too fast = poor penetration, too slow = burn-through.', date: '09 Jul', lesson: 'MIG Welding' },
  ];

  const downloads = [
    { t: 'Semester 3 · Electrical Machines', size: '184 MB', prog: 100 },
    { t: 'Fitter Workshop Manual (PDF)', size: '22 MB', prog: 100 },
    { t: 'Virtual Lab: MIG Welding pack', size: '310 MB', prog: 64 },
  ];

  return (
    <div className="content">
      {/* Profile header */}
      <div className="card" style={{ padding: 0, overflow: 'hidden', marginBottom: 20 }}>
        <div style={{ height: 90, background: 'linear-gradient(120deg, #0b2a5b, #133c7a)', position: 'relative' }}>
          <div className="blueprint-bg" style={{ position: 'absolute', inset: 0, opacity: 0.35 }} />
        </div>
        <div style={{ padding: '0 28px 22px', display: 'flex', alignItems: 'end', gap: 20, marginTop: -34, position: 'relative', flexWrap: 'wrap' }}>
          <div style={{ width: 84, height: 84, borderRadius: 18, background: 'var(--saffron-500)', color: 'white', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-serif)', fontSize: 32, fontWeight: 600, border: '4px solid white', boxShadow: 'var(--shadow-2)' }}>{initials}</div>
          <div style={{ flex: 1, minWidth: 200 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <h1 style={{ fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 600, color: 'var(--ink-900)', margin: 0 }}>{profile.name}</h1>
              <span className="badge green" style={{ fontSize: 10 }}>Active</span>
            </div>
            <div style={{ fontSize: 13, color: 'var(--ink-600)', marginTop: 3 }}>{profile.trade} · {profile.sem} · Roll {profile.roll} · {profile.iti}</div>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <button className="btn btn-ghost" onClick={() => onNavigate('certificates')}><window.IconAward size={13}/> Certificates</button>
            <button className="btn btn-primary" onClick={openEdit}><window.IconEdit size={13}/> Edit profile</button>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', borderTop: '1px solid var(--ink-200)' }}>
          {[
            { k: '68%', v: 'Completion' },
            { k: '12', v: 'Day streak' },
            { k: '4.2', v: 'Avg. score' },
            { k: '11/14', v: 'Practicals' },
            { k: 'B2', v: 'Readiness' },
          ].map((s, i) => (
            <div key={s.v} style={{ padding: '16px 20px', borderRight: i < 4 ? '1px solid var(--ink-200)' : 'none', textAlign: 'center' }}>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 24, fontWeight: 500, color: 'var(--navy-800)' }}>{s.k}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-600)', textTransform: 'uppercase', letterSpacing: '0.06em', marginTop: 3, fontWeight: 600 }}>{s.v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Tabs */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 20, borderBottom: '1px solid var(--ink-200)' }}>
        {tabs.map(t => (
          <button key={t} onClick={() => setTab(t)} style={{ padding: '10px 16px', fontSize: 13, fontWeight: 600, color: tab === t ? 'var(--navy-800)' : 'var(--ink-600)', borderBottom: tab === t ? '2px solid var(--saffron-500)' : '2px solid transparent', marginBottom: -1 }}>{t}</button>
        ))}
      </div>

      {tab === 'Bookmarks' && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {bookmarks.map(b => (
            <div key={b.t} className="card" style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer' }} onClick={() => onNavigate(b.nav)}>
              <div style={{ width: 40, height: 40, borderRadius: 9, background: 'var(--saffron-100)', color: 'var(--saffron-600)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><window.IconBookmark size={18}/></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-900)' }}>{b.t}</div>
                <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
                  <span className="badge navy" style={{ fontSize: 9 }}>{b.trade}</span>
                  <span style={{ fontSize: 11, color: 'var(--ink-600)' }}>{b.type}</span>
                </div>
              </div>
              <window.IconArrow size={16} style={{ color: 'var(--ink-400)' }} />
            </div>
          ))}
        </div>
      )}

      {tab === 'Notes' && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {notes.map(n => (
            <div key={n.t} className="card" style={{ padding: 18 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 8 }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink-900)' }}>{n.t}</div>
                <window.IconEdit size={14} style={{ color: 'var(--ink-400)' }} />
              </div>
              <p style={{ fontSize: 12.5, color: 'var(--ink-700)', lineHeight: 1.55, margin: 0 }}>{n.body}</p>
              <div style={{ marginTop: 12, paddingTop: 10, borderTop: '1px dashed var(--ink-200)', display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--ink-500)' }}>
                <span>{n.lesson}</span>
                <span style={{ fontFamily: 'var(--font-mono)' }}>{n.date}</span>
              </div>
            </div>
          ))}
          <button onClick={() => window.toast('New note — jot down a quick revision note (demo)')} className="card" style={{ padding: 18, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--ink-500)', border: '1px dashed var(--ink-300)', background: 'var(--ink-50)', minHeight: 140, cursor: 'pointer' }}>
            <window.IconPlus size={22}/><span style={{ fontSize: 13, fontWeight: 600 }}>New note</span>
          </button>
        </div>
      )}

      {tab === 'Offline Downloads' && (
        <div className="card" style={{ maxWidth: 720 }}>
          <div className="card-header" style={{ justifyContent: 'space-between' }}>
            <div className="card-title">Downloaded for offline use</div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-600)' }}>516 MB / 2 GB</span>
          </div>
          <div style={{ padding: '6px 0' }}>
            {downloads.map(d => (
              <div key={d.t} style={{ padding: '14px 20px', borderTop: '1px solid var(--ink-100)', display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{ width: 38, height: 38, borderRadius: 8, background: 'var(--navy-50)', color: 'var(--navy-700)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>{d.prog === 100 ? <window.IconCheck size={17}/> : <window.IconDownload size={17}/>}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink-900)' }}>{d.t}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 5 }}>
                    <div className="progress-track" style={{ flex: 1, height: 4 }}><div className="progress-fill green" style={{ width: `${d.prog}%` }} /></div>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-500)' }}>{d.prog === 100 ? d.size : `${d.prog}%`}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {tab === 'Settings' && <ProfileSettings />}

      <window.Modal
        open={editing}
        title="Edit profile"
        subtitle="Update your student details"
        onClose={() => setEditing(false)}
        width={520}
        footer={<>
          <button className="btn btn-ghost" onClick={() => setEditing(false)}>Cancel</button>
          <button className="btn btn-primary" onClick={saveProfile}><window.IconCheck size={13}/> Save changes</button>
        </>}
      >
        <window.Field label="Full name">
          <input value={draft.name} onChange={e => setDraft(d => ({ ...d, name: e.target.value }))} placeholder="Your name" style={window.fieldInputStyle} />
        </window.Field>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <window.Field label="Trade">
            <input value={draft.trade} onChange={e => setDraft(d => ({ ...d, trade: e.target.value }))} style={window.fieldInputStyle} />
          </window.Field>
          <window.Field label="Semester">
            <input value={draft.sem} onChange={e => setDraft(d => ({ ...d, sem: e.target.value }))} style={window.fieldInputStyle} />
          </window.Field>
          <window.Field label="Roll number">
            <input value={draft.roll} onChange={e => setDraft(d => ({ ...d, roll: e.target.value }))} style={window.fieldInputStyle} />
          </window.Field>
          <window.Field label="Institute">
            <input value={draft.iti} onChange={e => setDraft(d => ({ ...d, iti: e.target.value }))} style={window.fieldInputStyle} />
          </window.Field>
        </div>
      </window.Modal>
    </div>
  );
}

function ProfileSettings() {
  const [toggles, setToggles] = React.useState({ Subtitles: true, 'Auto-download over Wi-Fi': true, 'High-contrast mode': false });
  const rows = [
    { l: 'Interface language', v: 'English', opts: true },
    { l: 'Voice-over language', v: 'हिंदी', opts: true },
    { l: 'Subtitles', toggle: true },
    { l: 'Auto-download over Wi-Fi', toggle: true },
    { l: 'Daily reminder', v: '7:00 PM', opts: true },
    { l: 'High-contrast mode', toggle: true },
  ];
  const flip = l => setToggles(t => ({ ...t, [l]: !t[l] }));
  return (
    <div className="card" style={{ padding: 24, maxWidth: 640 }}>
      <div className="card-title" style={{ marginBottom: 18 }}>Preferences</div>
      {rows.map(s => (
        <div key={s.l} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 0', borderBottom: '1px dashed var(--ink-200)' }}>
          <span style={{ fontSize: 14, color: 'var(--ink-800)', fontWeight: 500 }}>{s.l}</span>
          {s.opts ? (
            <button onClick={() => window.toast(s.l + ' — options (demo)')} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: 'var(--navy-800)', padding: '6px 12px', background: 'var(--ink-100)', borderRadius: 6, border: 'none', cursor: 'pointer' }}>{s.v} <window.IconChevronRight size={13}/></button>
          ) : (
            <div onClick={() => flip(s.l)} role="switch" aria-checked={!!toggles[s.l]} style={{ width: 42, height: 24, borderRadius: 999, background: toggles[s.l] ? 'var(--green-600)' : 'var(--ink-300)', position: 'relative', cursor: 'pointer', transition: 'background 0.15s' }}>
              <div style={{ position: 'absolute', top: 3, left: toggles[s.l] ? 21 : 3, width: 18, height: 18, borderRadius: '50%', background: 'white', transition: 'left 0.15s' }} />
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

window.StudentProfile = StudentProfile;