/* global React, SectionHead, Counter */

function Proof() {
  return (
    <section className="section" id="proof" data-screen-label="08 Stakes">
      <SectionHead
        num="§ 06 · STAKES"
        eyebrow="Industry context"
        h2={<>Discovery is getting harder.<br/><em>Demand isn't waiting.</em></>}
      />

      <div className="proof reveal">
        <div className="topo" />
        <div className="proof-content">
          <p className="proof-quote reveal">
            Exploration is contracting at the exact moment the energy transition is bidding the same metals up. The decade ahead runs on what's being found, and what isn't, right now.
          </p>
          <div className="proof-sources">
            <span className="proof-sources-l">Sources</span>
            <span className="proof-sources-v">S&amp;P Global · IEA · World Resources Institute</span>
          </div>
        </div>
        <div className="proof-stats">
          <div className="proof-stat">
            <div className="proof-stat-v"><Counter to={15.7} decimals={1} /><span className="unit">yr</span></div>
            <div className="proof-stat-l">Avg. lead time, discovery to first production</div>
            <div className="proof-stat-src">S&amp;P Global · study of 127 mines, 2023</div>
          </div>
          <div className="proof-stat">
            <div className="proof-stat-v"><span className="unit-pre">$</span><Counter to={12.5} decimals={1} /><span className="unit">B</span></div>
            <div className="proof-stat-l">Global nonferrous exploration budget, 2024</div>
            <div className="proof-stat-src">S&amp;P CES 2024 · −3% YoY, second straight decline</div>
          </div>
          <div className="proof-stat">
            <div className="proof-stat-v"><Counter to={22} suffix="%" /></div>
            <div className="proof-stat-l">Share going to grassroots discovery, record low</div>
            <div className="proof-stat-src">S&amp;P Global · Dec 2024, down from ~50% in early 2000s</div>
          </div>
          <div className="proof-stat">
            <div className="proof-stat-v"><Counter to={4} suffix="×" /></div>
            <div className="proof-stat-l">Projected critical-mineral demand, 2040 vs today</div>
            <div className="proof-stat-src">IEA · Net Zero by 2050 scenario</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Proof = Proof;