// idea-4-teacher.jsx — "Teacher Hub" (B2B classroom dashboard)
// Class mastery matrix · live class mode · flagged students · assignments.

const TH_TOPICS = [
  { code: 'M5.1', name: 'DNA structure' },
  { code: 'M5.2', name: 'Replication' },
  { code: 'M5.3', name: 'Protein synth.' },
  { code: 'M5.4', name: 'Mutations' },
  { code: 'M6.1', name: 'Variation' },
  { code: 'M6.2', name: 'Selection' },
  { code: 'M6.3', name: 'Speciation' },
];

// 8 students × 7 topics. Values: 0=none, 1=lo, 2=md, 3=hi, 4=max, 5=na
const TH_STUDENTS = [
  { name: 'Mari Tan',       tag: 'mitomari',       charId: 'cell',   row: [4,3,3,4,3,3,2], avg: 92 },
  { name: 'Alex Wong',      tag: 'aldolalex',      charId: 'beaker', row: [3,3,2,3,2,2,1], avg: 78 },
  { name: 'Kyle James',     tag: 'kyleajames',     charId: 'leaf',   row: [3,2,2,3,2,2,1], avg: 71 },
  { name: 'Pete D\'Souza',  tag: 'protonpete',     charId: 'atom',   row: [2,1,1,2,1,1,0], avg: 48, flagged: true },
  { name: 'Kira Mehta',     tag: 'kineticktira',   charId: 'helix',  row: [3,3,3,2,2,3,2], avg: 81 },
  { name: 'Olly Chen',      tag: 'oxideolly',      charId: 'mole',   row: [3,2,1,1,2,2,1], avg: 62, flagged: true },
  { name: 'Q Ng',           tag: 'quasarq',        charId: 'prism',  row: [4,3,3,4,3,2,2], avg: 84 },
  { name: 'T Patel',        tag: 'titratort',      charId: 'ph',     row: [2,2,2,2,1,0,0], avg: 54, flagged: true },
];

const TH_CELL_CLS = ['x','lo','md','hi','max','na'];

function TeacherHub() {
  return (
    <div className="th-wrap">
      <div className="th-head">
        <div className="th-class">
          <div className="th-class-mark">11B</div>
          <div>
            <div className="th-class-name">11 Bio · Yr 11 Period 3</div>
            <div className="th-class-meta">24 students · 4 modules covered this term · Dr T. Park</div>
          </div>
        </div>
        <div className="th-code">
          R7-K9P
          <small>JOIN CODE</small>
        </div>
        <button className="th-live">
          <Icon name="play"/> Start live class
        </button>
      </div>

      <div className="th-tabs">
        <button className="th-tab active">Mastery matrix</button>
        <button className="th-tab">Assignments · 3 active</button>
        <button className="th-tab">Live history</button>
        <button className="th-tab">Reports</button>
      </div>

      {/* matrix */}
      <div className="th-matrix">
        <div className="th-matrix-head">
          <div>Student</div>
          {TH_TOPICS.map((t, i) => (
            <div key={i}>
              <div style={{ fontSize: 9.5 }}>{t.code}</div>
              <div style={{ fontSize: 9 }}>{t.name}</div>
            </div>
          ))}
          <div>Avg</div>
        </div>
        {TH_STUDENTS.map((s, si) => (
          <div key={si} className={`th-matrix-row ${s.flagged ? 'flagged' : ''}`}>
            <div className="th-student">
              <div className="th-student-av"><CharAv charId={s.charId} size={28}/></div>
              <div style={{ minWidth: 0 }}>
                <div className="th-student-name">{s.name}</div>
                <small>@{s.tag}</small>
              </div>
            </div>
            {s.row.map((v, ci) => (
              <div key={ci} className="th-cell">
                <div className={`th-cell-dot ${TH_CELL_CLS[v]}`}>
                  {v === 5 ? '—' : v === 0 ? '✕' : `${[35,55,72,86,96][v]}`}
                </div>
              </div>
            ))}
            <div className={`th-avg ${s.avg < 60 ? 'lo' : s.avg >= 85 ? 'hi' : ''}`}>{s.avg}%</div>
          </div>
        ))}
      </div>

      {/* bottom flags */}
      <div className="th-bottom">
        <div className="th-flagcard">
          <h4><Icon name="bulb"/> Class flags · re-teach candidates</h4>

          <div className="th-flag-row warn">
            <Icon name="arrowDn"/>
            <div>Topic <strong>M6.3 Speciation</strong> — 5 of 24 below 60%</div>
            <span className="th-flag-cta">RE-TEACH ▸</span>
          </div>
          <div className="th-flag-row">
            <Icon name="users"/>
            <div><strong>3 students</strong> below 60% overall — likely tutoring referrals</div>
            <span className="th-flag-cta">CONTACT ▸</span>
          </div>
          <div className="th-flag-row good">
            <Icon name="check"/>
            <div>Module 5 mastery up <strong>+18%</strong> since last assignment</div>
            <span className="th-flag-cta">SHARE ▸</span>
          </div>
        </div>

        <div className="th-flagcard">
          <h4><Icon name="bolt"/> Quick actions</h4>

          <div className="th-flag-row">
            <Icon name="pencil"/>
            <div>Assign <strong>Mutations drill</strong> · 12 questions · due Friday</div>
            <span className="th-flag-cta">ASSIGN ▸</span>
          </div>
          <div className="th-flag-row">
            <Icon name="play"/>
            <div>Run <strong>live quiz · Module 6</strong> on the projector now</div>
            <span className="th-flag-cta">LAUNCH ▸</span>
          </div>
          <div className="th-flag-row">
            <Icon name="share"/>
            <div>Export class report PDF for parent–teacher night</div>
            <span className="th-flag-cta">EXPORT ▸</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function Idea4() {
  return (
    <IdeaShell
      num="04"
      title="Teacher Hub"
      titleEm="(free for schools)"
      tagline={<><strong>Hand classrooms the tool</strong> and the students follow. A free teacher dashboard with mastery-by-topic matrix, one-tap live quizzes on the projector, and re-teach flags driven by your own data.</>}
      pills={[
        { kind: 'plum',  icon: 'school', label: 'B2B · school growth' },
        { kind: 'gold',  icon: 'crown',  label: 'Free for teachers' },
      ]}
      stats={[
        { num: '+24 students', label: 'Per signed-up teacher', sub: 'One teacher = one entire class signs up on day 1 via 6-char join code.' },
        { num: '60s',           label: 'Time to launch a quiz',  sub: 'Open laptop · join code on board · students join from any device · go.', dark: true },
      ]}
      pros={[
        'Free for teachers <strong>forever</strong> — students convert to paid Premium individually. Free-channel acquisition.',
        'Mastery matrix is something <strong>no LMS gives them</strong>. Sticky once it\'s in their workflow.',
        'Live mode = the Blooket / Kahoot moment in class — now driven by NESA-aligned content.',
        '<strong>Re-teach flags</strong> save teachers prep time. Real time-back, not just data dumps.',
      ]}
    >
      <TeacherHub/>
    </IdeaShell>
  );
}

window.Idea4 = Idea4;