// Stats V2 — Counters that tick up when in view + animated rings
const { useState: useStateStV2, useEffect: useEffectStV2, useRef: useRefStV2 } = React;

const STATS_V2_DATA = [
  { num: 60,   suffix: "%",   label: "Comenzi confirmate",  caption: "din drafts" },
  { num: 85,   suffix: "%",   label: "Comenzi confirmate",  caption: "de Echipa Confirmări.ro" },
  { num: 40,   suffix: "s",   label: "Timp mediu apel",     caption: "de la sunet la confirmare" },
  { num: 1.40, suffix: " RON",label: "Cost mediu/confirmare",   caption: "raportat la 100 de comenzi reale", decimals: 2 },
];

const useCountUp = (target, dur = 1400, start = false) => {
  const [v, setV] = useStateStV2(0);
  useEffectStV2(() => {
    if (!start) return;
    let raf, t0;
    const step = (now) => {
      if (!t0) t0 = now;
      const p = Math.min(1, (now - t0) / dur);
      setV(target * (1 - Math.pow(1 - p, 3))); // easeOut cubic
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [start, target, dur]);
  return v;
};

const StatBlock = ({ s, idx, started, isMobile }) => {
  const v = useCountUp(s.num, 1600 + idx * 200, started);
  const display = s.decimals
    ? v.toFixed(s.decimals).replace(".", ",") + s.suffix
    : s.suffix === "/7"
      ? Math.round(v) + "/7"
      : Math.round(v) + s.suffix;
  return (
    <div style={{ position: "relative" }}>
      <div style={{
        height: isMobile ? 52 : 84, display: "flex", alignItems: "flex-end",
      }}>
        <div style={{
          fontSize: isMobile ? (s.decimals ? 36 : 48) : (s.decimals ? 64 : 84), fontWeight: 900, color: "#fff",
          letterSpacing: "-0.05em", lineHeight: 1, fontVariantNumeric: "tabular-nums",
          textShadow: "0 0 40px rgba(9,169,85,0.4)",
          whiteSpace: "nowrap",
        }}>{display}</div>
      </div>
      <div style={{ fontSize: isMobile ? 13 : 16, fontWeight: 800, color: "#fff", marginTop: isMobile ? 10 : 14, letterSpacing: "-0.01em" }}>{s.label}</div>
      <div style={{ fontSize: isMobile ? 11 : 13, color: "var(--fg-3)", marginTop: 4, lineHeight: 1.4 }}>{s.caption}</div>
      {/* animated underline */}
      <div style={{
        marginTop: isMobile ? 12 : 18, height: 2,
        background: "linear-gradient(90deg, var(--neon-purple), transparent)",
        width: started ? "100%" : 0,
        transition: `width 1.2s cubic-bezier(.2,.7,.2,1) ${idx * 0.15}s`,
        boxShadow: "0 0 8px rgba(9,169,85,0.6)",
      }} />
    </div>
  );
};

const StatsV2 = () => {
  const ref = useRefStV2(null);
  const [started, setStarted] = useStateStV2(false);
  const [isMobile, setIsMobile] = useStateStV2(false);

  useEffectStV2(() => {
    const check = () => setIsMobile(window.innerWidth < 760);
    check();
    window.addEventListener("resize", check);
    return () => window.removeEventListener("resize", check);
  }, []);

  // Trigger count-up only when the stats grid scrolls into view
  useEffectStV2(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) {
          setStarted(true);
          io.disconnect();
          break;
        }
      }
    }, { threshold: 0.35, rootMargin: "0px 0px -10% 0px" });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <div ref={ref} className="ev-stage" style={{
      width: "100%", height: "100%", padding: isMobile ? "40px 18px" : "60px 80px",
      display: "flex", flexDirection: "column", justifyContent: "center",
    }}>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(4, 1fr)", gap: isMobile ? 24 : 36, rowGap: isMobile ? 32 : 36 }}>
        {STATS_V2_DATA.map((s, i) => <StatBlock key={i} s={s} idx={i} started={started} isMobile={isMobile} />)}
      </div>
    </div>
  );
};

window.StatsV2 = StatsV2;