---
import { contadores } from "../data/empresa";
const iconMap: Record<string, string> = {
  chart: "chart",
  smile: "smile",
  thumbs: "thumbs",
  user: "userCheck",
};
---

<!-- ==================== CONTADORES (sección oscura) ==================== -->
<div class="bg-stripes">
  <div class="container-x py-[40px]">
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
      {contadores.map((c) => (
        <div class="flex flex-col items-center text-center">
          <div class="mb-3 text-[#d16b6b]" data-counter-icon={c.icono}>
            {c.icono === "chart" && (
              <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor"><path d="M3.5 18.49 10 11.94l4 4.01 7-9.01-1.41-1.41L14 13.94l-4-4.01L2 16.92l1.5 1.57Z"/></svg>
            )}
            {c.icono === "smile" && (
              <svg width="50" height="50" viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5Zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11Zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5Z"/></svg>
            )}
            {c.icono === "thumbs" && (
              <svg width="46" height="46" viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h3V9H1v12Zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2Z"/></svg>
            )}
            {c.icono === "user" && (
              <svg width="42" height="42" viewBox="0 0 24 24" fill="currentColor"><path d="M17 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-8-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-2.67 0-8 1.34-8 4v3h10v-3c0-1.02.51-1.93 1.28-2.69C10.96 11.11 9.74 11 9 11Zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-3c0-2.66-5.33-4-7-4Z"/></svg>
            )}
          </div>
          <div class="text-[#ffafa3] text-[42px] font-bold leading-none mb-2">
            <span class="counter" data-target={c.numero} data-suffix={c.sufijo || ""}>0</span>
          </div>
          <p class="text-white text-[18px] font-display">{c.titulo}</p>
        </div>
      ))}
    </div>
  </div>
</div>

<script>
  // Count-up animation con IntersectionObserver
  const counters = document.querySelectorAll<HTMLElement>(".counter");
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const el = entry.target as HTMLElement;
          const target = Number(el.dataset.target || 0);
          const suffix = el.dataset.suffix || "";
          const duration = 2500;
          const start = performance.now();
          function update(now: number) {
            const progress = Math.min((now - start) / duration, 1);
            const eased = 1 - Math.pow(1 - progress, 3);
            const value = Math.floor(target * eased);
            el.textContent = value.toLocaleString("es-AR") + suffix;
            if (progress < 1) requestAnimationFrame(update);
            else el.textContent = target.toLocaleString("es-AR") + suffix;
          }
          requestAnimationFrame(update);
          observer.unobserve(el);
        }
      });
    },
    { threshold: 0.3 }
  );
  counters.forEach((c) => observer.observe(c));
</script>