// Big, prominent social proof block. used standalone further down the page.

function SocialProofBig() {
  const stats = [
    { num: "9/10", label: "patients get significant relief", source: "Independent clinical surveys" },
    { num: "140+", label: "peer-reviewed studies", source: "Published clinical research" },
    { num: "94%",  label: "felt better after 5 weeks", source: "Peer-reviewed trial · n=2,358" },
    { num: "40+",  label: "years prescribed", source: "Since 1981" },
  ];
  const badges = [
    "U.S. Dept. of Veterans Affairs",
    "U.S. Department of Defense",
    "Mayo Clinic",
    "Cleveland Clinic",
    "Johns Hopkins",
  ];
  return (
    <section className="section sp">
      <div className="container">
        <div className="sp-head">
          <span className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>Proven · prescribed · trusted</span>
          <h2 className="sp-h2">The most-studied CES device in the world.</h2>
        </div>

        <div className="sp-grid">
          {stats.map(s => (
            <div key={s.num} className="sp-card">
              <div className="sp-num">{s.num}</div>
              <div className="sp-label">{s.label}</div>
              <div className="sp-source">{s.source}</div>
            </div>
          ))}
        </div>

        <div className="sp-badges">
          <div className="sp-badges-label">Prescribed and used by:</div>
          <div className="sp-badges-row">
            {badges.map(b => (
              <div key={b} className="sp-badge">{b}</div>
            ))}
          </div>
        </div>

        <div className="sp-reviews">
          <Stars />
          <div className="sp-reviews-text">
            <strong>4.8 / 5</strong> from 12,400+ verified patient reviews
          </div>
        </div>
      </div>
    </section>
  );
}

window.SocialProofBig = SocialProofBig;