// Stats — animated counter band. Three big numbers + labels.
function Stats() {
  const ref = React.useRef(null);
  const [run, setRun] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setRun(true); obs.disconnect(); }
    }, { threshold: 0.35 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  const items = [
    { n: 40, suffix: "+", label: "Tahun pengalaman", caption: "Sejak 26 April 1983" },
    { n: 3, suffix: "", label: "Layanan plating", caption: "Zinc · Nickel Chrome · Nickel Brass" },
    { n: 3, suffix: "", label: "Sektor industri", caption: "Otomotif · Rumah tangga · Office" },
  ];
  return (
    <section ref={ref} className="dep-stats" id="tentang">
      <div className="dep-stats__head">
        <span className="eyebrow">About the Company</span>
        <h2>Mitra electroplating yang sudah teruji puluhan tahun.</h2>
        <p className="lead">
          PT Dinamika Electro Plating berdiri sejak tahun 1983. Kami berfokus pada jasa
          plating yang berkualitas, berorientasi pada kepuasan pelanggan, harga yang
          kompetitif, dan efisiensi proses produksi.
        </p>
      </div>
      <div className="dep-stats__row">
        {items.map((it, i) => (
          <Stat key={i} run={run} {...it} />
        ))}
      </div>
    </section>
  );
}

function Stat({ n, suffix, label, caption, run }) {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    if (!run) return;
    let s = performance.now();
    const dur = 900;
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - s) / dur);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(n * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [run, n]);
  return (
    <div className="dep-stat">
      <div className="dep-stat__num">{val}<span>{suffix}</span></div>
      <div className="dep-stat__label">{label}</div>
      <div className="dep-stat__cap">{caption}</div>
    </div>
  );
}
window.Stats = Stats;