// idea-1-syllabus.jsx — "Syllabus Dot-Point Mastery Map"
// Visualises every NESA syllabus dot-point as a coloured tile in a heatmap-style
// grid. Click any dot to see linked lesson, your attempt history, and CTAs.

// NESA Year 12 Biology modules (real names). Each module has 18–28 dot-points;
// we render mock numbers but the structure matches the syllabus shape.
const SM_MODULES = [
  { id: 'm5', name: 'Module 5 · Heredity',         eye: 'Year 12',  dots: 22, mastery: [4,1,2,2,3,3,3,2,1,0,2,3,3,4,2,1,2,3,3,2,1,2] },
  { id: 'm6', name: 'Module 6 · Genetic Change',   eye: 'Year 12',  dots: 18, mastery: [3,3,2,2,2,1,1,2,3,3,2,1,2,1,0,0,1,2] },
  { id: 'm7', name: 'Module 7 · Infectious Disease', eye: 'Year 12', dots: 24, mastery: [4,3,3,2,2,2,1,0,0,0,1,1,2,2,3,3,2,2,1,1,2,2,3,3] },
  { id: 'm8', name: 'Module 8 · Non-Infectious Disease & Disorders', eye: 'Year 12', dots: 20, mastery: [2,2,1,1,0,0,1,1,2,2,3,3,3,2,2,1,1,2,2,3] },
];
// mastery scale: 0 untouched · 1 shaky · 2 learning · 3 mastered · 4 perfect

const SM_STATE_CLS = ['untouched','shaky','learning','mastered','perfect'];

const SM_NAV_OTHER = [
  { name: 'Yr 11 · Cells to Organisms', count: '32 / 32', done: true },
  { name: 'Yr 11 · Organisation of Living Things', count: '28 / 28', done: true },
  { name: 'Yr 11 · Biological Diversity', count: '22 / 26' },
  { name: 'Yr 11 · Ecosystem Dynamics', count: '14 / 24' },
];

// Currently selected dot's detail
const SM_SELECTED = {
  module: 'Module 7 · Infectious Disease',
  code: 'BIO12-7-04',
  dotId: 9,
  text: 'Investigate the transmission of a disease during an epidemic — including direct contact, droplet, vector, and waterborne transmission.',
  mastery: 0.18,
  masteryLabel: 'Shaky · 2 attempts',
  attempts: [
    { ok: false, q: 'Q · 2023 HSC Q14 · Identify the transmission mode of cholera', date: '12 May' },
    { ok: false, q: 'Q · Practice · Vector-borne disease example match',             date: '08 May' },
  ],
};

function SyllabusMap() {
  return (
    <div className="sm-wrap">
      {/* left nav */}
      <nav className="sm-nav">
        <div className="sm-nav-section">
          <div className="sm-nav-title">Biology · Year 12</div>
          {SM_MODULES.map((m, i) => (
            <div key={m.id} className={`sm-nav-item ${i === 2 ? 'active' : ''}`}>
              <span>{m.name.split(' · ')[0]}</span>
              <span className="sm-nav-count">{m.mastery.filter(x => x >= 3).length}/{m.dots}</span>
            </div>
          ))}
        </div>
        <div className="sm-nav-section">
          <div className="sm-nav-title">Year 11</div>
          {SM_NAV_OTHER.map((m, i) => (
            <div key={i} className="sm-nav-item">
              <span>{m.name.replace(/^Yr 11 · /, '')}</span>
              <span className="sm-nav-count">{m.count.split(' / ')[0]}</span>
            </div>
          ))}
        </div>
        <div className="sm-nav-section">
          <div className="sm-nav-title">Other subjects</div>
          <div className="sm-nav-item"><span>Chemistry</span><span className="sm-nav-count">42%</span></div>
          <div className="sm-nav-item"><span>Physics</span><span className="sm-nav-count">—</span></div>
        </div>
      </nav>

      {/* main board */}
      <div className="sm-board">
        <div className="sm-board-head">
          <h2><small>Mastery map · Biology Yr 12</small>Your dot-point coverage</h2>
          <div style={{ textAlign: 'right' }}>
            <div className="sm-board-stat">52<small> / 84</small></div>
            <div style={{ fontSize: 11, color: 'var(--adv-muted)', fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>dots mastered</div>
          </div>
        </div>

        <div className="sm-legend">
          <span className="sm-legend-sw sw-untouched"><i/>Untouched</span>
          <span className="sm-legend-sw sw-shaky"><i/>Shaky</span>
          <span className="sm-legend-sw sw-learning"><i/>Learning</span>
          <span className="sm-legend-sw sw-mastered"><i/>Mastered</span>
          <span className="sm-legend-sw sw-perfect"><i/>Locked-in</span>
        </div>

        {SM_MODULES.map((m, mi) => {
          const total = m.mastery.length;
          const masteredPct = m.mastery.filter(x => x >= 3).length / total;
          const learningPct = m.mastery.filter(x => x === 2).length / total;
          const shakyPct    = m.mastery.filter(x => x === 1).length / total;
          const untouchedPct= m.mastery.filter(x => x === 0).length / total;
          return (
            <div key={m.id} className="sm-module">
              <div className="sm-module-head">
                <div className="sm-module-title">{m.name} <em>{m.dots} dot-points</em></div>
                <div className="sm-module-bar">
                  <i style={{ width: `${masteredPct*100}%`, background: '#6b9b7c' }}/>
                  <i style={{ width: `${learningPct*100}%`, background: '#d6a85f' }}/>
                  <i style={{ width: `${shakyPct*100}%`,    background: '#c47b8a' }}/>
                  <i style={{ width: `${untouchedPct*100}%`, background: '#e5dccb' }}/>
                </div>
              </div>
              <div className="sm-grid">
                {m.mastery.map((v, i) => {
                  const isSelected = mi === 2 && i === 9;
                  return (
                    <div key={i}
                      className={`sm-dot ${SM_STATE_CLS[v]} ${isSelected ? 'selected' : ''}`}>
                      {`${mi+5}.${String(i+1).padStart(2,'0')}`}
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      {/* detail rail */}
      <aside className="sm-detail">
        <div className="sm-detail-eye">SELECTED DOT-POINT</div>
        <div className="sm-detail-id">{SM_SELECTED.code} · {SM_SELECTED.module}</div>
        <div className="sm-detail-quote">"{SM_SELECTED.text}"</div>

        <div className="sm-detail-mastery">
          <div className="sm-detail-mast-row">
            <span>Your mastery</span>
            <strong style={{ color: 'var(--adv-rose-deep)', fontFamily: 'Outfit', fontWeight: 800 }}>
              {SM_SELECTED.masteryLabel}
            </strong>
          </div>
          <div className="sm-detail-mast-bar"><i style={{ width: `${SM_SELECTED.mastery*100}%` }}/></div>
        </div>

        <div className="sm-attempts">
          <h5>Your last attempts</h5>
          {SM_SELECTED.attempts.map((a, i) => (
            <div key={i} className="sm-attempt">
              <div className={`sm-attempt-mark ${a.ok ? 'ok' : 'no'}`}>
                <Icon name={a.ok ? 'check' : 'x'}/>
              </div>
              <div className="sm-attempt-q">{a.q}</div>
              <div className="sm-attempt-date">{a.date}</div>
            </div>
          ))}
        </div>

        <div className="sm-detail-ctas">
          <button className="sm-cta primary">
            <Icon name="play"/>
            <div>
              Watch the lesson
              <small>4 min · "Modes of transmission" by Dr Chen</small>
            </div>
          </button>
          <button className="sm-cta">
            <Icon name="target"/>
            <div>
              Drill 5 questions
              <small>Mixed difficulty · ~6 minutes</small>
            </div>
          </button>
          <button className="sm-cta">
            <Icon name="book"/>
            <div>
              Read syllabus notes
              <small>NESA-aligned · 3 min read</small>
            </div>
          </button>
        </div>
      </aside>
    </div>
  );
}

function Idea1() {
  return (
    <IdeaShell
      num="01"
      title="Syllabus"
      titleEm="Mastery Map"
      tagline={<><strong>Replace the lesson list</strong> with a visual heat-map of every NESA dot-point. Students see exactly where they're weak, click any tile to drill it — no more guessing what to study next.</>}
      pills={[
        { kind: 'rose', icon: 'sparkles', label: 'UX · core navigation' },
        { kind: 'gold', icon: 'target',   label: 'NESA dot-point native' },
      ]}
      stats={[
        { num: '84', label: 'Dot-points per subject', sub: 'Mapped 1:1 to the NESA syllabus structure — every exam Q lives somewhere on the map.' },
        { num: '3×', label: 'Study efficiency', sub: 'Students stop re-watching mastered topics; spend time on red tiles only.', dark: true },
      ]}
      pros={[
        'Diagnostic <strong>and</strong> directive in one view — no separate dashboards.',
        '<strong>SEO + content moat</strong>: dot-point pages are uniquely googleable ("syllabus dot 7.4 cholera").',
        'Teachers love it — it speaks their language (every assessment task references dot-points).',
        'Mastery state is auto-updated from quiz/past-paper attempts; zero manual logging.',
      ]}
    >
      <SyllabusMap/>
    </IdeaShell>
  );
}

window.Idea1 = Idea1;