// EthanStory — peer proof beat: Ethan Li, Maths IA 10->17.
// Two HTML trees: es-desktop (>=900px) / es-mobile (<900px, unchanged).

const EsCallout = ({ icon, children }) => (
  <div className="fp-callout">
    <div className="fp-callout-icon"><Icon name={icon} /></div>
    <p className="fp-callout-text">{children}</p>
  </div>
);

const ES_CRITERIA = [
  { name: "Presentation",              before: "2/4", after: "3/4", note: "Clear structure, logical flow, strong graphs" },
  { name: "Mathematical communication",before: "2/4", after: "4/4", note: "Notation correct, explanations connected" },
  { name: "Personal engagement",       before: "2/3", after: "3/3", note: "Independent decisions, own data used" },
  { name: "Reflection",                before: "1/3", after: "3/3", note: "Limitations discussed, Euler's method linked" },
  { name: "Use of mathematics",        before: "3/6", after: "4/6", note: "Relevant maths, better interpretation" },
];

const EthanStory = () => (
  <section className="section founders-proof-section">
    <div className="wide">

      {/* ════════════════════════════════════════════════
          DESKTOP LAYOUT  >=900px
          Full-width header, then two-column split below.
          ════════════════════════════════════════════════ */}
      <div className="es-desktop">

        {/* Full-width header — spans the whole wide container */}
        <header className="es-full-header">
          <span className="eyebrow">One of our students</span>
          <h2 className="fp-heading es-heading">
            Ethan was at a 10. Same IA. Same examiner. Then a <Scribble>17</Scribble>.
          </h2>
          <p className="fp-subheading es-subheading">
            Not English. <b>A Maths IA.</b> The marks move the same way in every subject the IB grades against a rubric.
          </p>
        </header>

        {/* Two-column split below the header */}
        <div className="es-cols">

          {/* ── LEFT: score cards · criteria · callout ── */}
          <div className="es-left">

            <div className="es-score-grid">
              <div className="es-score-card">
                <div className="es-score-top">
                  <div className="fp-badge">1</div>
                  <span className="es-score-label">Before coaching</span>
                </div>
                <div className="es-score-frac">
                  <span className="es-frac-num">10</span>
                  <span className="es-frac-denom">/20</span>
                </div>
                <p className="es-score-caption">Predicted. The maths was there - the marks weren't.</p>
              </div>
              <div className="es-score-card es-score-card-accent">
                <div className="es-score-top">
                  <div className="fp-badge fp-badge-gold">2</div>
                  <span className="es-score-label">After coaching</span>
                </div>
                <div className="es-score-frac es-score-frac-purple">
                  <span className="es-frac-num">17</span>
                  <span className="es-frac-denom">/20</span>
                </div>
                <p className="es-score-caption">Same rubric. <span className="fp-caption-accent">The examiner's verdict flipped.</span></p>
              </div>
            </div>

            <div className="es-criteria">
              <p className="es-criteria-head">What changed - not the topic, the marking logic</p>
              {ES_CRITERIA.map((c, i) => (
                <div key={i} className="es-criterion-row">
                  <div className="es-crit-dot" />
                  <div className="es-crit-text">
                    <span className="es-crit-name">{c.name}</span>
                    <span className="es-crit-note">{c.note}</span>
                  </div>
                  <div className="es-crit-score">
                    <span className="es-crit-before">{c.before}</span>
                    <span className="es-crit-arrow">→</span>
                    <span className="es-crit-after">{c.after}</span>
                  </div>
                </div>
              ))}
            </div>

            <div className="fp-callout">
              <div className="fp-callout-icon"><Icon name="award" /></div>
              <p className="fp-callout-text">
                He didn't get smarter at maths. He learned what the examiner was <em>actually rewarding.</em>
              </p>
            </div>

          </div>{/* /es-left */}

          {/* ── RIGHT: evidence panel with both images ── */}
          <div className="es-right">
            <div className="es-evidence-panel">

              <span className="eyebrow">The Evidence</span>

              <div className="es-images-wrap">
                <div className="es-img-slot">
                  <div className="es-img-card">
                    <img src="ethan-ia-before.png" alt="Ethan's 10/20 Maths IA marking sheet" className="fp-img es-img" />
                  </div>
                  <span className="es-img-pill">Before: Predicted 10/20</span>
                </div>

                <div className="es-img-arrow" aria-hidden="true">
                  <Icon name="arrow-right" />
                </div>

                <div className="es-img-slot">
                  <div className="es-img-card es-img-card-after">
                    <img src="ethan-ia-after.jpg" alt="Ethan's 17/20 marked IA returned over chat" className="fp-img es-img" />
                  </div>
                  <span className="es-img-pill es-img-pill-after">After: Awarded 17/20</span>
                </div>
              </div>

              <div className="es-evidence-bar">
                <div className="es-evidence-bar-icon"><Icon name="check-circle" /></div>
                <p className="es-evidence-bar-text">
                  Same IA. Same examiner. Different outcome. Because the <em>rubric was mastered.</em>
                </p>
              </div>

            </div>
          </div>{/* /es-right */}

        </div>{/* /es-cols */}

      </div>{/* /es-desktop */}


      {/* ════════════════════════════════════════════════
          MOBILE LAYOUT  <900px — unchanged single-column
          ════════════════════════════════════════════════ */}
      <div className="es-mobile">

        <header className="fp-header">
          <span className="eyebrow with-bullet">One of our students</span>
          <h2 className="fp-heading">
            Ethan was at a 10. Same IA. Same examiner. Then a <Scribble>17</Scribble>.
          </h2>
          <p className="fp-subheading">
            Not English. <b>A Maths IA.</b> The marks move the same way in every subject the IB grades against a rubric.
          </p>
        </header>

        <div className="fp-steps">

          <div className="fp-step">
            <div className="fp-step-left">
              <div className="fp-badge-row">
                <div className="fp-badge">1</div>
                <span className="fp-label-pill">Before</span>
              </div>
              <div className="fp-fraction">
                <span className="fp-frac-num">10</span>
                <span className="fp-frac-denom">/20</span>
              </div>
              <p className="fp-caption">Predicted. The maths was there - the marks weren't.</p>
            </div>
            <div className="fp-step-right">
              <div className="fp-essay-card">
                <img src="ethan-ia-before.png" alt="Ethan's 10/20 Maths IA marking sheet" className="fp-img" />
              </div>
              <EsCallout icon="message-circle">
                Every comment said the same thing: <em>relevant, but under-interpreted.</em>
              </EsCallout>
            </div>
          </div>

          <div className="fp-divider" aria-hidden="true" />

          <div className="fp-step">
            <div className="fp-step-left">
              <div className="fp-badge-row">
                <div className="fp-badge fp-badge-gold">2</div>
                <span className="fp-label-pill">After coaching</span>
              </div>
              <div className="fp-fraction fp-fraction-purple">
                <span className="fp-frac-num">17</span>
                <span className="fp-frac-denom">/20</span>
              </div>
              <p className="fp-caption">
                Same rubric. <span className="fp-caption-accent">The examiner's verdict flipped.</span>
              </p>
            </div>
            <div className="fp-step-right">
              <div className="fp-essay-card">
                <img src="ethan-ia-after.jpg" alt="Ethan's 17/20 marked IA returned over chat" className="fp-img" />
              </div>
              <EsCallout icon="sparkles">
                He didn't get smarter at maths. He learned what the examiner was <em>actually rewarding.</em>
              </EsCallout>
            </div>
          </div>

        </div>

      </div>{/* /es-mobile */}

    </div>
  </section>
);

window.EthanStory = EthanStory;