import { useEffect, useRef, useState } from "react";
import { Reveal } from "./Reveal";

const STATS = [
  { v: 120, suf: "+", label: "Cities covered" },
  { v: 18000, suf: "+", label: "Verified partners" },
  { v: 1200000, suf: "+", label: "Bookings served" },
  { v: 340000, suf: "+", label: "Vehicles managed" },
  { v: 96, suf: "%", label: "Happy customers" },
];

export function Stats() {
  return (
    <section className="py-24 lg:py-28 bg-ink text-white">
      <div className="container-airfis">
        <div className="max-w-2xl">
          <p className="eyebrow">By the numbers</p>
          <h2 className="h-section mt-4">A movement, not a marketplace.</h2>
        </div>
        <div className="mt-14 grid grid-cols-2 md:grid-cols-5 gap-8">
          {STATS.map((s, i) => (
            <Reveal key={s.label} delay={i * 80}>
              <div>
                <Counter to={s.v} suffix={s.suf} />
                <div className="mt-2 text-sm text-white/60">{s.label}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Counter({ to, suffix = "" }: { to: number; suffix?: string }) {
  const [v, setV] = useState(0);
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let started = false;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && !started) {
            started = true;
            const start = performance.now();
            const dur = 1600;
            const tick = (t: number) => {
              const p = Math.min(1, (t - start) / dur);
              const eased = 1 - Math.pow(1 - p, 3);
              setV(Math.round(to * eased));
              if (p < 1) requestAnimationFrame(tick);
            };
            requestAnimationFrame(tick);
          }
        });
      },
      { threshold: 0.4 },
    );
    io.observe(el);
    return () => io.disconnect();
  }, [to]);
  return (
    <div ref={ref} className="text-4xl md:text-5xl font-semibold tracking-tight">
      {format(v)}
      <span className="text-primary">{suffix}</span>
    </div>
  );
}

function format(n: number) {
  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M";
  if (n >= 1_000) return (n / 1_000).toFixed(0) + "K";
  return String(n);
}