// idea-2-marker.jsx — "AI Marker for past papers"
// Left: a real HSC past-paper question with NESA marking criteria.
// Right: student's response with inline highlights (good/missing/fix),
// plus the AI-generated mark and band comparison.

function AIMarker() {
  return (
    <div className="am-wrap">
      {/* Paper side */}
      <div className="am-paper">
        <div className="am-paper-eye"><Icon name="book"/> Past HSC question</div>
        <div className="am-paper-meta">
          <span><strong>2023 HSC</strong> · Biology</span>
          <span>Module 7 · Q23 (c)</span>
          <span>Pulled from <strong>NESA</strong></span>
        </div>

        <div className="am-paper-marks">
          <Icon name="bolt"/> 6 marks · Extended response
        </div>

        <div className="am-paper-q">
          Compare the production of <strong>ATP</strong> during aerobic and anaerobic
          respiration in human muscle cells. In your answer, refer to the location,
          oxygen requirements, products formed, and the relative energy yield of
          each pathway.
        </div>

        <div className="am-criteria">
          <h5>NESA marking criteria</h5>

          <div className="am-criterion">
            <div className="am-criterion-mark ok"><Icon name="check"/></div>
            <div className="am-criterion-text">
              Identifies <strong>location</strong> of aerobic (mitochondria) and anaerobic (cytoplasm) respiration
            </div>
            <div className="am-criterion-pts">2 / 2</div>
          </div>

          <div className="am-criterion">
            <div className="am-criterion-mark ok"><Icon name="check"/></div>
            <div className="am-criterion-text">
              Outlines <strong>oxygen requirements</strong> — aerobic requires O₂, anaerobic does not
            </div>
            <div className="am-criterion-pts">1 / 1</div>
          </div>

          <div className="am-criterion">
            <div className="am-criterion-mark partial"><Icon name="check"/></div>
            <div className="am-criterion-text">
              Names <strong>products</strong> — aerobic (CO₂, H₂O); anaerobic (lactic acid in muscle)
            </div>
            <div className="am-criterion-pts">1 / 2</div>
          </div>

          <div className="am-criterion">
            <div className="am-criterion-mark ok"><Icon name="check"/></div>
            <div className="am-criterion-text">
              States <strong>ATP yield</strong> — ~36 ATP aerobic vs 2 ATP anaerobic
            </div>
            <div className="am-criterion-pts">1 / 1</div>
          </div>

          <div className="am-criterion">
            <div className="am-criterion-mark no"><Icon name="x"/></div>
            <div className="am-criterion-text">
              Uses comparative language (<em>"whereas"</em>, <em>"in contrast"</em>) and explicitly compares the two pathways throughout
            </div>
            <div className="am-criterion-pts">0 / 1</div>
          </div>
        </div>
      </div>

      {/* Response side */}
      <div className="am-resp">
        <div className="am-resp-head">
          <h3>Your response</h3>
          <div className="am-resp-toggle">
            <button>Type</button>
            <button className="active">Photo</button>
            <button>Voice</button>
          </div>
        </div>

        <div className="am-response">
          Aerobic respiration happens in the <span className="am-hi-good">mitochondria</span> of muscle
          cells and requires <span className="am-hi-good">oxygen</span>. It produces
          <span className="am-hi-good"> CO₂ and water</span>, with a yield of about
          <span className="am-hi-good"> 36 ATP per glucose</span>.
          Anaerobic respiration occurs in the <span className="am-hi-good">cytoplasm</span> without
          oxygen and produces <span className="am-hi-fix">lactic acid</span><sup style={{ color: 'var(--adv-gold-deep)' }}>?</sup> —
          only <span className="am-hi-good">2 ATP</span> are made.
          <span className="am-hi-miss"> Anaerobic is therefore worse than aerobic.</span> Aerobic respiration is more
          efficient because more ATP is produced.
        </div>

        <div className="am-mark-box">
          <div className="am-mark-score">5<small> / 6</small></div>
          <div className="am-mark-body">
            <h4>Strong band 6 work · one mark from full</h4>
            <p>You nailed location, O₂ and yield. Add <em>"pyruvate is converted to lactic acid"</em> for the missing product mark, and frame your closing line as a true comparison ("Aerobic yields 18× more ATP <em>whereas</em>…").</p>
          </div>
          <div className="am-mark-band">
            <div className="am-mark-band-num">B6</div>
            <div className="am-mark-band-lbl">Band</div>
          </div>
        </div>

        <div className="am-actions">
          <button className="am-action primary">
            <Icon name="sparkles"/> See band 6 sample
          </button>
          <button className="am-action">
            <Icon name="pencil"/> Rewrite & re-mark
          </button>
          <button className="am-action">
            <Icon name="target"/> Drill similar Qs
          </button>
        </div>
      </div>
    </div>
  );
}

function Idea2() {
  return (
    <IdeaShell
      num="02"
      title="AI Marker for"
      titleEm="extended responses"
      tagline={<><strong>The biggest gap in HSC self-study</strong> is marking 4–8 mark written answers. Snap a photo of your response, get a NESA-criteria-by-criteria breakdown, a predicted band, and a side-by-side band 6 sample.</>}
      pills={[
        { kind: 'rose',  icon: 'sparkles', label: 'Tutoring · AI feedback' },
        { kind: 'plum',  icon: 'pencil',   label: 'Photo + handwriting' },
      ]}
      stats={[
        { num: '~20 min', label: 'Saved per response', sub: 'Self-marking against a band 6 sample takes ages and is wildly inaccurate. AI does it in 4 seconds.' },
        { num: '$0',      label: 'Marking cost to you', sub: 'Tutor-equivalent marking feedback for free. Premium tier: unlimited + verified-teacher review on flagged answers.', dark: true },
      ]}
      pros={[
        '<strong>Solves the #1 student pain</strong>: "is this answer good enough?" — universally true across HSC sciences.',
        'Trains students on the <strong>NESA marker mindset</strong> — they internalise the rubric instead of just learning content.',
        '<strong>Differentiator vs ScienceReady / BioBrain</strong>: nobody offers marking on extended responses at scale.',
        'Photo input means it works for students still writing by hand — most still do for HSC.',
      ]}
    >
      <AIMarker/>
    </IdeaShell>
  );
}

window.Idea2 = Idea2;