// FoundersProof — "This is real" section.
// Three numbered steps: plateau (12), breakthrough (19), first full marks (20).
// Images: score-12.png · score-19.png · score-20.jpg

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

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

      <header className="fp-header">
        <h2 className="fp-heading">
          Stuck at a 5 for a year.<br />
          Then I saw <Scribble>why.</Scribble>
        </h2>
        <p className="fp-subheading">
          Same rubric. Different result. Everything changed when I understood what the examiner was actually counting.
        </p>
      </header>

      <div className="fp-steps">

        {/* ── STEP 1: The plateau ── */}
        <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">Where I started</span>
            </div>
            <div className="fp-fraction">
              <span className="fp-frac-num">12</span>
              <span className="fp-frac-denom">/20</span>
            </div>
            <p className="fp-caption">This was my level for over a year.</p>
            <div className="fp-ghost-marks" aria-hidden="true">12 · 13 · 12</div>
            <div className="fp-annotation">
              <svg className="fp-annotation-arrow" viewBox="0 0 56 32" fill="none" aria-hidden="true">
                <path d="M4 28 Q24 28 48 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
                <path d="M42 4 L48 6 L44 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              <span>12s and 13s.<br />Three across the board.</span>
            </div>
          </div>
          <div className="fp-step-right">
            <div className="fp-essay-card">
              <img src="score-12.png" alt="12/20 marked essay" className="fp-img" />
            </div>
            <FpCallout icon="message-circle">
              The examiner kept saying the same thing: <em>effects are asserted more than explored.</em>
            </FpCallout>
          </div>
        </div>

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

        {/* ── STEP 2: The breakthrough ── */}
        <div className="fp-step">
          <div className="fp-step-left">
            <div className="fp-badge-row">
              <div className="fp-badge">2</div>
              <span className="fp-label-pill">A few months later</span>
            </div>
            <div className="fp-fraction">
              <span className="fp-frac-num">19</span>
              <span className="fp-frac-denom">/20</span>
            </div>
            <p className="fp-caption">
              Same rubric.<br />
              <span className="fp-caption-accent">Opposite verdict.</span>
            </p>
          </div>
          <div className="fp-step-right">
            <div className="fp-essay-card">
              <img src="score-19.png" alt="19/20 marked essay" className="fp-img" />
            </div>
            <FpCallout icon="star">
              Nothing about my brain changed; I just learned what the examiner was <em>actually counting.</em>
            </FpCallout>
          </div>
        </div>

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

        {/* ── STEP 3: First full marks ── */}
        <div className="fp-step">
          <div className="fp-step-left">
            <div className="fp-badge-row">
              <div className="fp-badge fp-badge-gold">3</div>
              <span className="fp-label-pill">First ever full marks</span>
            </div>
            <div className="fp-fraction fp-fraction-purple">
              <span className="fp-frac-num">20</span>
              <span className="fp-frac-denom">/20</span>
            </div>
            <p className="fp-caption fp-caption-underline">My first ever full marks.</p>
            <FpCallout icon="sparkles">
              I screenshotted it and sent it to a friend. I still couldn't quite believe it.
            </FpCallout>
          </div>
          <div className="fp-step-right fp-step-right-tall">
            <div className="fp-essay-card">
              <img src="score-20.jpg" alt="20/20 essay screenshot" className="fp-img" />
            </div>
          </div>
        </div>

      </div>

      {/* ── Closing bar ── */}
      <div className="fp-closing-bar">
        <div className="fp-closing-icon"><Icon name="heart" /></div>
        <p className="fp-closing-text">
          It wasn't about working harder.<br />
          <strong>It was about seeing what the examiner was actually looking for.</strong>
        </p>
      </div>

    </div>
  </section>
);

window.FoundersProof = FoundersProof;