/* global React */

function SectionStats() {
  const [started, setStarted] = useState(false);
  const ref = useRef();
  useEffect(() => {
    const ob = new IntersectionObserver((es) => {
      if (es[0].isIntersecting) { setStarted(true); ob.disconnect(); }
    }, { threshold: .2 });
    if (ref.current) ob.observe(ref.current);
    return () => ob.disconnect();
  }, []);

  return (
    <section className="stats" ref={ref}>
      <div className="container">
        <div className="stats__grid">
          {STATS.map((s, i) => (
            <div className="stat" key={s.label} style={{ animationDelay: `${i * 120}ms` }}>
              <div className="stat__num" style={{opacity: started ? 1 : 0, transform: started ? "none" : "translateY(20px)", transition: `all .8s var(--ease) ${i * 120}ms`}}>{s.num}</div>
              <div className="stat__label">{s.label}</div>
              <div className="stat__sublabel">{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SectionStats = SectionStats;