// Stats section — 3 column counters
const { useEffect: useEffectS, useRef: useRefS, useState: useStateS } = React;

const STATS = [
  { value: 20, suffix: "+", label: "Years Experience" },
  { value: 95, suffix: "+", label: "Projects Done" },
  { value: 200, suffix: "%", label: "Satisfied Clients" },
];

function Counter({ end, suffix }) {
  const [val, setVal] = useStateS(0);
  const ref = useRefS(null);
  const startedRef = useRefS(false);

  useEffectS(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && !startedRef.current) {
            startedRef.current = true;
            const dur = 1600;
            const start = performance.now();
            const tick = (t) => {
              const p = Math.min(1, (t - start) / dur);
              const eased = 1 - Math.pow(1 - p, 3);
              setVal(Math.round(end * eased));
              if (p < 1) requestAnimationFrame(tick);
            };
            requestAnimationFrame(tick);
          }
        });
      },
      { threshold: 0.4 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [end]);

  return (
    <span ref={ref} className="tabular-nums">
      {val}
      {suffix}
    </span>
  );
}

function Stats() {
  return (
    <section className="bg-bg py-16 md:py-24 border-t border-stroke/60">
      <div className="max-w-[1200px] mx-auto px-6 md:px-10 lg:px-16">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-6">
          {STATS.map((s, i) => (
            <div
              key={s.label}
              className={`flex flex-col items-start md:items-center md:text-center gap-3 ${
                i > 0 ? "md:border-l border-stroke/60 md:pl-6" : ""
              }`}
            >
              <div className="text-5xl md:text-7xl lg:text-8xl font-display text-text-primary leading-none">
                <Counter end={s.value} suffix={s.suffix} />
              </div>
              <div className="text-xs text-muted uppercase tracking-[0.3em]">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Stats = Stats;