function Stat({ n, unit, label, decimals = 0 }) {
  const [ref, shown] = useReveal();
  const val = useCountUp(n, 1400, shown);
  const display = decimals ? val.toFixed(decimals) : Math.round(val);
  return (
    <div className="stat" ref={ref}>
      <div className="stat-num">
        {display}<span className="unit">{unit}</span>
      </div>
      <div className="stat-label">{label}</div>
    </div>
  );
}

function Stats() {
  return (
    <section className="section">
      <div className="container">
        <FadeUp>
          <div className="section-head">
            <div className="section-eyebrow">By the numbers</div>
            <h2 className="section-title">
              Five years. Thousands of journeys. <span className="serif">One platform.</span>
            </h2>
          </div>
        </FadeUp>
        <div className="stats-grid">
          <Stat n={25} unit="+" label="Partner universities across India — NAAC-accredited, UGC-entitled." />
          <Stat n={14200} unit="" label="Students enrolled since 2021 — across UG, PG, diploma and pro tracks." />
          <Stat n={96} unit="%" label="Counseling satisfaction score across 3,400+ post-session reviews." />
          <Stat n={68} unit="%" label="Median salary uplift reported by graduates within 18 months." />
        </div>
      </div>
    </section>
  );
}
window.Stats = Stats;