// idea-7-question-dna.jsx — past HSC question genealogy per dot-point.
// Shows which years a dot-point was tested, what mark band, and what's
// "due to appear" this year based on historical cadence.

const QD_YEARS = [2018, 2019, 2020, 2021, 2022, 2023, 2024];

// Each dot-point row: per-year cell.
// Cell types: { type: 'mc'|'sa'|'ext'|'none', q: 'Q14', m: 1 }
const QD_ROWS = [
  {
    code: 'BIO12-7-04',
    label: 'Modes of disease transmission',
    cells: [
      { type: 'mc',   q: 'Q4',  m: 1 },
      { type: 'none' },
      { type: 'sa',   q: 'Q23', m: 3 },
      { type: 'mc',   q: 'Q9',  m: 1 },
      { type: 'none' },
      { type: 'ext',  q: 'Q31', m: 6 },
      { type: 'mc',   q: 'Q11', m: 1 },
    ],
    freq: '5 / 7',
    pct: 90,
    featured: true,
  },
  {
    code: 'BIO12-5-08',
    label: 'DNA replication mechanism',
    cells: [
      { type: 'sa',   q: 'Q22', m: 4 },
      { type: 'mc',   q: 'Q7',  m: 1 },
      { type: 'none' },
      { type: 'sa',   q: 'Q24', m: 4 },
      { type: 'ext',  q: 'Q32', m: 6 },
      { type: 'mc',   q: 'Q3',  m: 1 },
      { type: 'sa',   q: 'Q21', m: 4 },
    ],
    freq: '6 / 7',
    pct: 85,
  },
  {
    code: 'BIO12-7-12',
    label: 'Immune response — non-specific',
    cells: [
      { type: 'mc',   q: 'Q12', m: 1 },
      { type: 'mc',   q: 'Q5',  m: 1 },
      { type: 'sa',   q: 'Q19', m: 3 },
      { type: 'none' },
      { type: 'mc',   q: 'Q8',  m: 1 },
      { type: 'sa',   q: 'Q20', m: 4 },
      { type: 'none' },
    ],
    freq: '5 / 7',
    pct: 60,
  },
  {
    code: 'BIO12-6-03',
    label: 'Sources of variation',
    cells: [
      { type: 'none' },
      { type: 'sa',   q: 'Q25', m: 5 },
      { type: 'none' },
      { type: 'mc',   q: 'Q6',  m: 1 },
      { type: 'none' },
      { type: 'sa',   q: 'Q22', m: 3 },
      { type: 'mc',   q: 'Q2',  m: 1 },
    ],
    freq: '4 / 7',
    pct: 45,
  },
  {
    code: 'BIO12-8-05',
    label: 'Epidemiological studies',
    cells: [
      { type: 'ext',  q: 'Q33', m: 7 },
      { type: 'none' },
      { type: 'none' },
      { type: 'mc',   q: 'Q15', m: 1 },
      { type: 'none' },
      { type: 'none' },
      { type: 'ext',  q: 'Q32', m: 7 },
    ],
    freq: '3 / 7',
    pct: 75,
  },
  {
    code: 'BIO12-5-02',
    label: 'Meiosis — independent assortment',
    cells: [
      { type: 'mc',   q: 'Q2',  m: 1 },
      { type: 'sa',   q: 'Q21', m: 3 },
      { type: 'mc',   q: 'Q10', m: 1 },
      { type: 'none' },
      { type: 'sa',   q: 'Q23', m: 4 },
      { type: 'none' },
      { type: 'mc',   q: 'Q9',  m: 1 },
    ],
    freq: '5 / 7',
    pct: 55,
  },
];

function QuestionDNA() {
  return (
    <div className="qd-wrap">
      <div className="qd-head">
        <h2><small>Question DNA · Biology HSC</small>How NESA tests each dot-point</h2>
        <div className="qd-head-stat">
          <div className="qd-head-stat-num">84%</div>
          <div className="qd-head-stat-lbl">of last 7 years' marks come from 28 dot-points</div>
        </div>
      </div>

      <div className="qd-quote">
        <Icon name="bulb"/>
        <span><strong>Reading this row:</strong> "Transmission of disease" appeared in 5 of the last 7 HSC papers — last time as a <strong>6-mark extended response</strong> in 2023. Hasn't featured as one since. Predicted <strong>90% likely</strong> to come back as a 4-6 marker in 2026.</span>
      </div>

      <div className="qd-body">
        <div className="qd-timeline">
          <div className="qd-tl-head">
            <div>Dot-point</div>
            {QD_YEARS.map(y => <div key={y}>{y}</div>)}
          </div>

          {QD_ROWS.map((r, i) => (
            <div key={i} className={`qd-tl-row ${r.featured ? 'featured' : ''}`}>
              <div className="qd-dotpoint">
                {r.label}
                <small>{r.code}</small>
              </div>
              {r.cells.map((c, ci) => (
                <div key={ci} className="qd-cell">
                  {c.type === 'none' ? (
                    <span className="qd-q q-none">·</span>
                  ) : (
                    <span className={`qd-q q-${c.type}`}>
                      <strong>{c.q}</strong>
                      <em>{c.m}m · {c.type.toUpperCase()}</em>
                    </span>
                  )}
                </div>
              ))}
            </div>
          ))}

          <div className="qd-legend">
            <span className="qd-legend-sw mc"><i/>Multiple choice (1m)</span>
            <span className="qd-legend-sw sa"><i/>Short answer (3-5m)</span>
            <span className="qd-legend-sw ext"><i/>Extended response (6-8m)</span>
            <span style={{ marginLeft: 'auto', color: 'var(--adv-muted)', fontStyle: 'italic' }}>
              Click any cell to see the actual question + marker comments
            </span>
          </div>
        </div>

        {/* right rail */}
        <aside className="qd-rail">
          <h4>2026 prediction</h4>
          <div className="qd-predict-card">
            <div className="qd-predict-eye">DUE TO APPEAR</div>
            <div className="qd-predict-pct">90%</div>
            <div className="qd-predict-msg">
              Disease transmission hasn't been a <strong>6-marker</strong> since 2023. Pattern says it returns this year.
            </div>
          </div>

          <div className="qd-hotlist">
            <h4 style={{ marginBottom: 12 }}>Top 5 "due" dot-points</h4>

            <div className="qd-hot-row">
              <div className="qd-hot-name">
                Transmission of disease
                <small>BIO12-7-04 · 5 of last 7</small>
              </div>
              <div>
                <div className="qd-hot-bar"><i style={{ width: '90%' }}/></div>
                <div className="qd-hot-pct">90%</div>
              </div>
            </div>

            <div className="qd-hot-row">
              <div className="qd-hot-name">
                DNA replication
                <small>BIO12-5-08 · 6 of last 7</small>
              </div>
              <div>
                <div className="qd-hot-bar"><i style={{ width: '85%' }}/></div>
                <div className="qd-hot-pct">85%</div>
              </div>
            </div>

            <div className="qd-hot-row">
              <div className="qd-hot-name">
                Epidemiology study
                <small>BIO12-8-05 · 3 of last 7</small>
              </div>
              <div>
                <div className="qd-hot-bar"><i style={{ width: '75%' }}/></div>
                <div className="qd-hot-pct">75%</div>
              </div>
            </div>

            <div className="qd-hot-row">
              <div className="qd-hot-name">
                Immune response
                <small>BIO12-7-12 · 5 of last 7</small>
              </div>
              <div>
                <div className="qd-hot-bar"><i style={{ width: '60%' }}/></div>
                <div className="qd-hot-pct">60%</div>
              </div>
            </div>

            <div className="qd-hot-row">
              <div className="qd-hot-name">
                Meiosis · assortment
                <small>BIO12-5-02 · 5 of last 7</small>
              </div>
              <div>
                <div className="qd-hot-bar"><i style={{ width: '55%' }}/></div>
                <div className="qd-hot-pct">55%</div>
              </div>
            </div>
          </div>

          <button className="qd-cta">
            <Icon name="target"/>
            <div>
              Drill the top 5 in one set
              <small>28 mixed-format Qs · ~32 min</small>
            </div>
          </button>
        </aside>
      </div>
    </div>
  );
}

function Idea7() {
  return (
    <IdeaShell
      num="07"
      title="Question"
      titleEm="DNA"
      tagline={<><strong>Every past HSC question, mapped to its dot-point, across 7 years.</strong> Students see exactly how NESA tests each topic — and which dot-points are statistically due to return.</>}
      pills={[
        { kind: 'plum', icon: 'target',    label: 'Education · exam strategy' },
        { kind: 'gold', icon: 'sparkles',  label: 'Compounds with Mastery Map' },
      ]}
      stats={[
        { num: '7 yr × 84',  label: 'Question cells per subject', sub: 'Every HSC question for the last 7 years, tagged to its dot-point — usable as drill material, revision filter, and predictor.' },
        { num: '90% rec',     label: 'Topic-prediction accuracy',  sub: 'Backtested on 2024 HSC predictions made from 2018-23 data. Students get a credible answer to "what should I prioritise?"', dark: true },
      ]}
      pros={[
        '<strong>Exam strategy</strong> is what tutors charge $80/hr for — bake it in for free.',
        'Click any cell → real question + marker comments + your peers\' avg score. Pure utility.',
        '<strong>Predictions create buzz</strong>: "the app told me Q24 was 90% likely…" — built-in word of mouth in the lead-up to HSC.',
        'Reuses the Mastery Map\'s dot-point ontology — zero double-tagging required.',
      ]}
    >
      <QuestionDNA/>
    </IdeaShell>
  );
}

window.Idea7 = Idea7;