function Assessment({ onNavigate }) {
  const [selected, setSelected] = React.useState(null);
  const [showResult, setShowResult] = React.useState(false);

  const options = [
    { id: 'a', text: 'The stator windings produce a rotating magnetic field which induces EMF in the rotor bars.', hi: 'स्टेटर वाइंडिंग एक घूर्णन चुंबकीय क्षेत्र उत्पन्न करती है।' },
    { id: 'b', text: 'A DC supply is provided to the rotor via slip rings and brushes.', hi: 'रोटर को स्लिप रिंग के माध्यम से DC सप्लाई दी जाती है।' },
    { id: 'c', text: 'The rotor bars are permanently magnetised during manufacturing.', hi: 'रोटर बार्स को निर्माण के दौरान स्थायी रूप से चुम्बकित किया जाता है।' },
    { id: 'd', text: 'Both stator and rotor are supplied by separate three-phase AC sources.', hi: 'स्टेटर और रोटर दोनों को अलग AC स्रोतों से आपूर्ति की जाती है।' },
  ];

  return (
    <div className="content" style={{ maxWidth: 1200 }}>
      {/* Exam header bar */}
      <div style={{
        background: 'var(--navy-900)', color: 'white',
        padding: '18px 24px', borderRadius: 12,
        display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20,
      }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.14em' }}>MOCK TEST</div>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 600 }}>Fitter · Semester 3 · Trade Test Preview</div>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 24, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.14em', textAlign: 'right' }}>Q PROGRESS</div>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 600, textAlign: 'right' }}>12 / 40</div>
          </div>
          <div style={{
            padding: '8px 16px',
            background: 'rgba(230,117,20,0.15)',
            border: '1px solid var(--saffron-500)',
            borderRadius: 8,
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <window.IconClock size={14}/>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'rgba(255,255,255,0.6)', letterSpacing: '0.1em' }}>TIME LEFT</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 600, color: 'white' }}>42:18</div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 240px', gap: 20 }}>
        <div className="card" style={{ padding: 32 }}>
          {/* Question */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--saffron-600)', fontWeight: 700 }}>QUESTION 13 / 40</span>
            <span className="badge navy mono">3D BASED</span>
            <span className="badge saffron mono">2 MARKS</span>
            <span className="badge green mono">EASY</span>
          </div>

          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 24, fontWeight: 500, letterSpacing: '-0.01em', margin: 0, lineHeight: 1.35, color: 'var(--ink-900)' }}>
            Study the 3D cutaway of the induction motor below. Which statement <em>correctly</em> explains how torque is developed in the rotor?
          </h2>

          <p className="hi" style={{ fontSize: 15, color: 'var(--ink-700)', marginTop: 8, marginBottom: 0, lineHeight: 1.5 }}>
            नीचे दिए गए इंडक्शन मोटर के 3D कटअवे को देखें। कौन-सा कथन रोटर में टॉर्क विकसित होने की सही व्याख्या करता है?
          </p>

          {/* 3D reference */}
          <div style={{
            position: 'relative', marginTop: 20,
            borderRadius: 10, overflow: 'hidden',
            border: '1px solid var(--ink-200)', background: 'var(--ink-50)',
            aspectRatio: '16 / 7',
          }}>
            <img src="assets/hero-motor.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', top: 10, left: 10 }}>
              <span className="badge mono navy" style={{ background: 'rgba(11,42,91,0.9)', color: 'white' }}>REFERENCE · 3D CUTAWAY</span>
            </div>
            <div style={{ position: 'absolute', bottom: 10, right: 10, display: 'flex', gap: 4 }}>
              <button onClick={() => window.toast('Rotating 3D reference')} style={{ padding: '6px 10px', background: 'rgba(11,42,91,0.9)', color: 'white', borderRadius: 4, fontSize: 11, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', border: 'none' }}>
                <window.IconRotate size={12}/> Rotate
              </button>
              <button onClick={() => window.toast('Zooming 3D reference')} style={{ padding: '6px 10px', background: 'rgba(11,42,91,0.9)', color: 'white', borderRadius: 4, fontSize: 11, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', border: 'none' }}>
                <window.IconZoom size={12}/> Zoom
              </button>
            </div>
          </div>

          {/* Options */}
          <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {options.map(o => {
              const isSel = selected === o.id;
              const correct = showResult && o.id === 'a';
              const wrong = showResult && isSel && o.id !== 'a';
              return (
                <button key={o.id} onClick={() => !showResult && setSelected(o.id)} style={{
                  textAlign: 'left', padding: 16,
                  borderRadius: 10,
                  border: `2px solid ${correct ? 'var(--green-600)' : wrong ? 'var(--red-600)' : isSel ? 'var(--navy-800)' : 'var(--ink-200)'}`,
                  background: correct ? 'var(--green-100)' : wrong ? 'var(--red-100)' : isSel ? 'var(--navy-50)' : 'white',
                  display: 'flex', gap: 14, alignItems: 'start',
                  transition: 'all 0.1s',
                }}>
                  <div style={{
                    width: 30, height: 30, borderRadius: 6,
                    background: correct ? 'var(--green-600)' : wrong ? 'var(--red-600)' : isSel ? 'var(--navy-800)' : 'var(--ink-100)',
                    color: correct || wrong || isSel ? 'white' : 'var(--ink-700)',
                    display: 'grid', placeItems: 'center',
                    fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 13,
                    flexShrink: 0,
                  }}>{o.id.toUpperCase()}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14.5, color: 'var(--ink-900)', lineHeight: 1.45 }}>{o.text}</div>
                    <div className="hi" style={{ fontSize: 13, color: 'var(--ink-600)', marginTop: 4, lineHeight: 1.4 }}>{o.hi}</div>
                  </div>
                  {correct && <window.IconCheck size={22} style={{ color: 'var(--green-600)' }}/>}
                </button>
              );
            })}
          </div>

          {/* Action bar */}
          <div style={{ marginTop: 24, display: 'flex', gap: 10, alignItems: 'center' }}>
            <button className="btn btn-ghost" onClick={() => window.toast('Going to the previous question')}>← Previous</button>
            <button className="btn btn-ghost" onClick={() => window.toast('Question marked for review')}>Mark for review</button>
            <div style={{ flex: 1 }}/>
            {!showResult ? (
              <button className="btn btn-primary" onClick={() => selected && setShowResult(true)} disabled={!selected} style={{ opacity: selected ? 1 : 0.5 }}>
                Submit answer
              </button>
            ) : (
              <button className="btn btn-saffron" onClick={() => { setShowResult(false); setSelected(null); }}>
                Next question <window.IconArrow size={13}/>
              </button>
            )}
          </div>

          {showResult && (
            <div style={{ marginTop: 20, padding: 18, background: 'var(--navy-50)', borderRadius: 10, border: '1px solid var(--navy-100)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <window.IconSparkle size={14} style={{ color: 'var(--saffron-500)' }}/>
                <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--navy-800)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Explanation</span>
              </div>
              <p style={{ margin: 0, fontSize: 13.5, color: 'var(--ink-800)', lineHeight: 1.55 }}>
                Correct — the three-phase stator windings, when energised, produce a magnetic field rotating at synchronous speed (Ns = 120f/P). This field induces EMF in the rotor bars, driving currents through them, which then interact with the rotating field to produce torque. This is why the machine is called an "induction" motor.
              </p>
            </div>
          )}
        </div>

        {/* Question palette */}
        <div className="card" style={{ padding: 18, height: 'fit-content' }}>
          <div style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--ink-700)', marginBottom: 12 }}>Question palette</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 5 }}>
            {Array.from({ length: 40 }).map((_, i) => {
              const n = i + 1;
              const state = n < 13 ? 'done' : n === 13 ? 'current' : n === 8 || n === 11 ? 'review' : 'todo';
              return (
                <div key={n} style={{
                  width: '100%', aspectRatio: '1',
                  borderRadius: 4,
                  display: 'grid', placeItems: 'center',
                  fontSize: 11, fontWeight: 600,
                  background: state === 'done' ? 'var(--green-600)' : state === 'current' ? 'var(--saffron-500)' : state === 'review' ? 'var(--navy-100)' : 'var(--ink-100)',
                  color: state === 'done' || state === 'current' ? 'white' : state === 'review' ? 'var(--navy-800)' : 'var(--ink-600)',
                  border: state === 'current' ? '2px solid var(--ink-900)' : 'none',
                }}>{n}</div>
              );
            })}
          </div>
          <div style={{ marginTop: 16, fontSize: 11, color: 'var(--ink-600)' }}>
            {[
              { c: 'var(--green-600)', l: 'Answered' },
              { c: 'var(--saffron-500)', l: 'Current' },
              { c: 'var(--navy-100)', l: 'Marked for review' },
              { c: 'var(--ink-100)', l: 'Not visited' },
            ].map(x => (
              <div key={x.l} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 0' }}>
                <div style={{ width: 12, height: 12, background: x.c, borderRadius: 3 }}/>
                <span>{x.l}</span>
              </div>
            ))}
          </div>

          <button className="btn btn-primary" style={{ width: '100%', marginTop: 16, justifyContent: 'center' }} onClick={() => window.toast('Attempt submitted — 12/40 answered')}>
            Finish attempt
          </button>
        </div>
      </div>
    </div>
  );
}

window.Assessment = Assessment;