const Stats = () => (
  <section className="stats-section" data-screen-label="Stats">
    <div className="shell">
      <div className="stats-wrap">
        <div className="stats-copy">
          <span className="kicker"><span className="pip" /> Our Achievements</span>
          <h2 className="title metal">
            Proven SEO Results<br/>
            You Can Trust
          </h2>
          <p className="section-sub">
            From startups to industry leaders, we've helped businesses achieve remarkable results in record time.
          </p>
        </div>

        <div className="stats-art">
          {/* small kw bubbles scattered around */}
          <div className="kw-bubble" style={{ top: 30,  left: 30  }}><Sparkle size={24} /></div>
          <div className="kw-bubble" style={{ top: 130, left: 230 }}><Sparkle size={24} /></div>
          <div className="kw-bubble" style={{ bottom: 80, left: 60  }}><Sparkle size={24} /></div>
          <div className="kw-bubble" style={{ bottom: 200, right: 40 }}><Sparkle size={24} /></div>
          <div className="kw-bubble" style={{ top: 250, right: 0 }} ><Sparkle size={24} /></div>

          <div className="float-stat fs1">
            <div className="big">200<span style={{ fontSize: 44 }}>%</span></div>
            <div className="lbl">Organic Traffic</div>
          </div>
          <div className="float-stat fs2">
            <div className="big">50K<span style={{ fontSize: 44 }}>+</span></div>
            <div className="lbl">Keywords Ranked</div>
          </div>
          <div className="float-stat fs3">
            <div className="big" style={{ fontSize: 56 }}>1.4M</div>
            <div className="lbl">Sessions / month</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

window.Stats = Stats;