"use client";
import { useEffect, useRef, useState } from "react";

const stats = [
  { value: 40, suffix: "h", label: "Oszczędności miesięczne" },
  { value: 98, suffix: "%", label: "Satysfakcja klientów" },
  { value: 3, suffix: "x", label: "Wzrost efektywności" },
  { value: 24, suffix: "/7", label: "Monitor agentów" },
];

function useCountUp(target: number, duration = 1500) {
  const [count, setCount] = useState(0);
  const [started, setStarted] = useState(false);

  useEffect(() => {
    if (!started) return;
    const startTime = performance.now();
    const step = (now: number) => {
      const elapsed = now - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      setCount(Math.round(target * eased));
      if (progress < 1) requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
  }, [started, target, duration]);

  return { count, setStarted };
}

function StatCard({ value, suffix, label }: { value: number; suffix: string; label: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const { count, setStarted } = useCountUp(value);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setStarted(true);
          observer.unobserve(el);
        }
      },
      { threshold: 0.3 }
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, [setStarted]);

  return (
    <div ref={ref} className="text-center px-4">
      <div className="text-5xl md:text-6xl font-bold">
        <span className="text-cyan-400">{count}</span>
        <span className="text-cyan-300">{suffix}</span>
      </div>
      <p className="text-gray-400 mt-3 text-sm tracking-wide uppercase">{label}</p>
    </div>
  );
}

export default function Stats() {
  return (
    <section className="py-16 px-4 bg-gray-900 border-y border-gray-800">
      <div className="max-w-4xl mx-auto">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          {stats.map((s) => (
            <StatCard key={s.label} value={s.value} suffix={s.suffix} label={s.label} />
          ))}
        </div>
      </div>
    </section>
  );
}