// idea-8-misconception.jsx — wrong-answer crowd intelligence
// Shows what % of students pick each option, names the *specific misconception*
// each wrong answer reveals, and offers a 90-second re-teach video.

function Misconception() {
  return (
    <div className="mc-wrap">
      {/* left — question + crowd distribution */}
      <div className="mc-left">
        <div className="mc-eye"><Icon name="users"/> Crowd intelligence · 4,820 students attempted</div>

        <div className="mc-q">
          A plant cell is placed in a solution with a higher solute concentration than
          its cytoplasm. Which best describes what happens to the cell?
        </div>
        <div className="mc-q-meta">
          <strong>BIO11-3-06</strong> · Osmosis · multiple choice · Yr 11 Mod 3
        </div>

        <div className="mc-option correct">
          <div className="mc-option-letter">A</div>
          <div className="mc-option-text">Water leaves the cell; the cytoplasm shrinks from the cell wall</div>
          <div className="mc-option-pct">
            34%
            <small>CORRECT</small>
          </div>
          <div className="mc-option-bar"><i style={{ width: '34%' }}/></div>
        </div>

        <div className="mc-option your-pick">
          <div className="mc-option-letter">B</div>
          <div className="mc-option-text">Water enters the cell; the cell bursts</div>
          <div className="mc-option-pct">
            47%
            <small>YOU + 47% MORE</small>
          </div>
          <div className="mc-option-bar"><i style={{ width: '47%' }}/></div>
        </div>

        <div className="mc-option">
          <div className="mc-option-letter">C</div>
          <div className="mc-option-text">The cell wall ruptures and the cell collapses entirely</div>
          <div className="mc-option-pct">
            14%
            <small>WRONG</small>
          </div>
          <div className="mc-option-bar"><i style={{ width: '14%' }}/></div>
        </div>

        <div className="mc-option">
          <div className="mc-option-letter">D</div>
          <div className="mc-option-text">No movement of water — the cell membrane is impermeable</div>
          <div className="mc-option-pct">
            5%
            <small>WRONG</small>
          </div>
          <div className="mc-option-bar"><i style={{ width: '5%' }}/></div>
        </div>

        <div className="mc-yourpick">
          <h5>YOU PICKED B</h5>
          <p>You're not alone — 47% of students do. The mistake isn't random; it points to a specific misconception about what cell walls actually do. Let's name it →</p>
        </div>
      </div>

      {/* right — the misconception named */}
      <div className="mc-right">
        <div className="mc-right-eye">YOUR LIKELY MISCONCEPTION</div>
        <h3>"Plant cells <em>burst</em> like animal cells"</h3>

        <div className="mc-misc">
          <div className="mc-misc-pct">
            47%
            <small>SHARE THIS BELIEF</small>
          </div>
          <div className="mc-misc-text">
            <h5>Why students think this</h5>
            <p>You learned animal cells lyse in hypotonic solutions, then over-generalised. The fix is realising you've also got the <strong>direction of water flow wrong</strong> — solute is <em>higher outside</em>, so water leaves, doesn't enter.</p>
          </div>
        </div>

        <div className="mc-truth">
          <Icon name="check"/>
          <div>
            <h5>WHAT'S ACTUALLY TRUE</h5>
            <p>Plant cells have a <strong>rigid cellulose cell wall</strong>. In a hypertonic solution water exits, the membrane peels away from the wall — this is called <strong>plasmolysis</strong>, not lysis. Cell walls prevent bursting in the opposite scenario too.</p>
          </div>
        </div>

        <div className="mc-reteach">
          <div className="mc-reteach-row">
            <div className="mc-reteach-thumb"><Icon name="play"/></div>
            <div className="mc-reteach-info">
              <h5>90-sec re-teach · just for you</h5>
              <p>The cell-wall fix, narrated by Dr Park · skip if you've got it.</p>
            </div>
            <button className="mc-reteach-cta"><Icon name="play"/></button>
          </div>
        </div>

        <div className="mc-cohort">
          <Icon name="users"/>
          <span><strong>2,265 students</strong> who fixed this exact misconception got the follow-up question right next time. Drill it now and the engine moves on — leave it and we'll keep surfacing it.</span>
        </div>
      </div>
    </div>
  );
}

function Idea8() {
  return (
    <IdeaShell
      num="08"
      title="Misconception"
      titleEm="Engine"
      tagline={<><strong>The wrong answer matters more than the right one.</strong> Every wrong option in every quiz is tagged to a specific misconception. We name yours, show how many classmates share it, and surface a 90-second fix targeted at <em>that</em> belief.</>}
      pills={[
        { kind: 'rose',  icon: 'bulb',     label: 'Education · learning science' },
        { kind: 'plum',  icon: 'users',    label: 'Powered by crowd data' },
      ]}
      stats={[
        { num: '+38%',  label: 'Repeat-question success', sub: 'Targeted re-teach beats generic "watch the lesson again" by a wide margin — measured on follow-up attempts.' },
        { num: '~140',   label: 'Tagged misconceptions',  sub: 'Per subject. Each one written by an HSC teacher and linked to a 90-sec micro-video. Reusable across hundreds of Qs.', dark: true },
      ]}
      pros={[
        'Most platforms tell you "wrong, here\'s the right answer". This tells you <strong>why you thought what you thought</strong> — far more memorable.',
        'Crowd %s remove embarrassment ("47% of us got this wrong") — students lean in instead of away.',
        '<strong>Compounding moat</strong>: the more students answer, the better the tags, the better the targeting. Hard for a competitor to replicate cold.',
        '90-sec re-teach format respects time. Skippable. Friendly. Built for revision.',
      ]}
    >
      <Misconception/>
    </IdeaShell>
  );
}

window.Idea8 = Idea8;