function Stat({ value, suffix, label, desc, decimals = 0 }) {
  const [ref, inView] = useInView();
  const v = useCounter(value, inView);
  return (
    <div className="stat" ref={ref}>
      <div className="v">
        {decimals ? v.toFixed(decimals) : Math.round(v)}
        {suffix && <span className="sfx">{suffix}</span>}
      </div>
      <div className="l">{label}</div>
      {desc && <div className="d">{desc}</div>}
    </div>
  );
}

function Stats() {
  const { t } = useLang();
  return (
    <section className="section" style={{paddingTop:60, paddingBottom:60}}>
      <div className="wrap">
        <div className="reveal" style={{marginBottom:36}}>
          <div className="kicker"><span className="dot"></span><span>{t('stats.kicker')}</span></div>
        </div>
        <div className="stats reveal d1">
          <Stat value={80} suffix="+" label={t('stats.1.label')} desc={t('stats.1.desc')} />
          <Stat value={99.9} suffix="%" label={t('stats.2.label')} desc={t('stats.2.desc')} decimals={1} />
          <Stat value={28} suffix="d" label={t('stats.3.label')} desc={t('stats.3.desc')} />
          <Stat value={4} suffix="y" label={t('stats.4.label')} desc={t('stats.4.desc')} />
        </div>
      </div>
    </section>
  );
}
window.Stats = Stats;