// ─── Grading + Risk Dashboard Section ─────────────────────

function GradingRiskSection() {
  return (
    <section id="for-principals" className="section" style={{ background: 'var(--bg-0)' }}>
      <div className="wrap">
        <SectionHeader
          eyebrow="Intelligence in action"
          title="Grade a whole class."
          italicTail="Know every child."
          subtitle="EduGuard's grading engine doesn't just give marks. It diagnoses. What each student got wrong, which topic the class misunderstood, where to focus the next lesson. Upload once, teach smarter for the rest of the term."
          align="center"
        />

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)',
          gap: 24,
          alignItems: 'stretch',
        }} className="grading-grid">

          {/* Grading dashboard mock */}
          <div className="card card-elevated" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{
              padding: '16px 22px',
              borderBottom: '1px solid var(--line)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              background: 'var(--bg-2)',
            }}>
              <div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-2)', textTransform: 'uppercase', marginBottom: 2 }}>
                  Grade 9-B · Science · Unit Test 3
                </div>
                <div style={{ fontSize: 15, fontWeight: 600 }}>42 papers graded in 6 min 12 sec</div>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <span style={{ padding: '5px 10px', background: 'var(--green-soft)', color: 'var(--green)', borderRadius: 6, fontSize: 11, fontWeight: 600, fontFamily: 'var(--font-mono)', letterSpacing: '0.05em' }}>✓ COMPLETE</span>
              </div>
            </div>

            {/* Class distribution */}
            <div style={{ padding: 24 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-0)' }}>Class mark distribution</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-2)' }}>Avg 72.4 · Median 74</div>
              </div>

              {/* Histogram */}
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 110, marginBottom: 28 }}>
                {[8, 14, 22, 38, 58, 78, 95, 100, 82, 54, 28, 12].map((h, i) => (
                  <div key={i} style={{
                    flex: 1,
                    height: `${h}%`,
                    background: i >= 6 && i <= 8 ? 'var(--saffron)' : 'var(--ink-4)',
                    borderRadius: '4px 4px 0 0',
                    position: 'relative',
                  }}>
                    {i === 7 && (
                      <div style={{
                        position: 'absolute', top: -24, left: '50%', transform: 'translateX(-50%)',
                        fontSize: 9, fontWeight: 700, color: 'var(--saffron)', fontFamily: 'var(--font-mono)',
                      }}>PEAK</div>
                    )}
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--ink-2)', fontFamily: 'var(--font-mono)', marginTop: -20, marginBottom: 24 }}>
                <span>0</span><span>25</span><span>50</span><span>75</span><span>100</span>
              </div>

              {/* Topic weakness heatmap */}
              <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 14, color: 'var(--ink-0)' }}>Topic-wise class performance</div>
              <div style={{ display: 'grid', gap: 6 }}>
                {[
                  { t: 'Cell structure & function', p: 88, n: '37 correct / 42' },
                  { t: 'Chemical reactions', p: 51, n: '21 correct / 42', flag: true },
                  { t: 'Motion & forces', p: 79, n: '33 correct / 42' },
                  { t: 'Light — reflection', p: 84, n: '35 correct / 42' },
                  { t: 'Electric current', p: 43, n: '18 correct / 42', flag: true },
                  { t: 'Acids, bases, salts', p: 92, n: '39 correct / 42' },
                ].map((r, i) => (
                  <div key={i} style={{
                    display: 'grid',
                    gridTemplateColumns: '1fr 120px 90px 16px',
                    gap: 12,
                    alignItems: 'center',
                    padding: '8px 10px',
                    borderRadius: 6,
                    background: r.flag ? 'rgba(26,92,151,0.06)' : 'transparent',
                  }}>
                    <div style={{ fontSize: 12.5, color: 'var(--ink-0)', fontWeight: r.flag ? 600 : 500 }}>{r.t}</div>
                    <div style={{ height: 6, background: 'var(--bg-3)', borderRadius: 3, overflow: 'hidden', position: 'relative' }}>
                      <div style={{
                        height: '100%',
                        width: `${r.p}%`,
                        background: r.p < 60 ? 'var(--saffron)' : r.p < 75 ? '#d4a852' : 'var(--green)',
                        borderRadius: 3,
                      }} />
                    </div>
                    <div className="mono" style={{ fontSize: 10.5, color: 'var(--ink-2)', textAlign: 'right' }}>{r.n}</div>
                    <div style={{ fontSize: 11, fontWeight: 700, color: r.p < 60 ? 'var(--saffron)' : 'var(--ink-1)', textAlign: 'right' }}>{r.p}%</div>
                  </div>
                ))}
              </div>

              {/* Action row */}
              <div style={{
                marginTop: 20,
                padding: 14,
                background: 'var(--ink-0)',
                color: 'var(--bg-1)',
                borderRadius: 10,
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <Icon.Brain style={{ width: 18, height: 18, color: 'var(--saffron-soft)', flexShrink: 0 }} />
                  <div style={{ fontSize: 13 }}>
                    <strong style={{ fontWeight: 600 }}>Eva suggests:</strong> Reteach <em style={{ color: 'var(--saffron-soft)', fontFamily: 'var(--font-display)' }}>Chemical reactions</em> + <em style={{ color: 'var(--saffron-soft)', fontFamily: 'var(--font-display)' }}>Electric current</em> before next unit.
                  </div>
                </div>
                <Icon.Arrow style={{ width: 16, height: 16, color: 'var(--saffron-soft)', flexShrink: 0 }} />
              </div>
            </div>
          </div>

          {/* Risk profile stack */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div className="card" style={{ padding: 20, flex: '0 0 auto' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-2)', textTransform: 'uppercase' }}>Weekly Risk Roster</div>
                <span style={{ fontSize: 10, color: 'var(--ink-2)' }}>Updated 9:12 AM</span>
              </div>

              {[
                { name: 'Aarav M.', cls: '9-B', score: 74, factors: ['Late arrivals', 'Grade drop', 'Peer shift'], color: 'var(--crimson)' },
                { name: 'Ishaan P.', cls: '8-A', score: 58, factors: ['Missed 4 days', 'Unauth. zone'], color: 'var(--saffron)' },
                { name: 'Meera S.', cls: '10-C', score: 42, factors: ['Subject dip — Math'], color: '#d4a852' },
                { name: 'Kabir V.', cls: '7-B', score: 31, factors: ['Attendance pattern'], color: '#b8b87a' },
              ].map((s, i) => (
                <div key={i} style={{
                  padding: '12px 0',
                  borderBottom: i < 3 ? '1px solid var(--line)' : 'none',
                  display: 'grid',
                  gridTemplateColumns: '38px 1fr auto',
                  gap: 12,
                  alignItems: 'center',
                }}>
                  <div style={{
                    width: 38, height: 38, borderRadius: '50%',
                    background: 'var(--bg-2)', border: `2px solid ${s.color}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 12, fontWeight: 700, color: s.color,
                    fontFamily: 'var(--font-mono)',
                  }}>{s.score}</div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{s.name} <span style={{ color: 'var(--ink-2)', fontWeight: 400, fontSize: 11 }}> · {s.cls}</span></div>
                    <div style={{ fontSize: 11, color: 'var(--ink-2)', marginTop: 2 }}>{s.factors.join(' · ')}</div>
                  </div>
                  <button style={{
                    padding: '5px 10px',
                    background: 'var(--bg-2)',
                    border: '1px solid var(--line)',
                    borderRadius: 6,
                    fontSize: 10.5,
                    color: 'var(--ink-1)',
                    cursor: 'pointer',
                    fontFamily: 'var(--font-mono)',
                    letterSpacing: '0.05em',
                    textTransform: 'uppercase',
                  }}>Open</button>
                </div>
              ))}
            </div>

            {/* Mini stat cards */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, flex: '0 0 auto' }}>
              <div className="card" style={{ padding: 18 }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-2)', textTransform: 'uppercase' }}>Today</div>
                <div className="display" style={{ fontSize: 34, color: 'var(--ink-0)', marginTop: 8, lineHeight: 1 }}>1,284</div>
                <div style={{ fontSize: 12, color: 'var(--ink-1)', marginTop: 4 }}>students present</div>
                <div style={{ fontSize: 11, color: 'var(--green)', marginTop: 8, fontWeight: 600 }}>↑ 96.3% attendance</div>
              </div>
              <div className="card" style={{ padding: 18 }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-2)', textTransform: 'uppercase' }}>This week</div>
                <div className="display" style={{ fontSize: 34, color: 'var(--saffron)', marginTop: 8, lineHeight: 1 }}>14</div>
                <div style={{ fontSize: 12, color: 'var(--ink-1)', marginTop: 4 }}>students flagged</div>
                <div style={{ fontSize: 11, color: 'var(--ink-2)', marginTop: 8, fontWeight: 600 }}>↓ 3 from last week</div>
              </div>
            </div>

            {/* Campus heatmap mini */}
            <div className="card" style={{ padding: 18, flex: 1 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-2)', textTransform: 'uppercase' }}>Campus Heatmap · Now</div>
                <span style={{ fontSize: 10, color: 'var(--ink-2)' }}>Period 4</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 3 }}>
                {Array.from({ length: 40 }).map((_, i) => {
                  const intensity = [0.1, 0.2, 0.3, 0.5, 0.7, 0.9, 1, 0.8, 0.4][i % 9];
                  return (
                    <div key={i} style={{
                      aspectRatio: 1,
                      background: intensity > 0.6 ? `rgba(26,92,151,${intensity})` : intensity > 0.3 ? `rgba(26,92,151,${intensity * 0.6})` : `rgba(13,21,48,${intensity * 0.1})`,
                      borderRadius: 3,
                    }} />
                  );
                })}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12, fontSize: 10, color: 'var(--ink-2)' }}>
                <span>Sparse</span>
                <span className="mono" style={{ fontSize: 10 }}>24 rooms live</span>
                <span>Dense</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 1000px) { .grading-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { GradingRiskSection });