SnapOtter/apps/landing/src/components/TrustSignals.astro

---
function formatNumber(n: number): string {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1).replace(/\.0$/, "")}M`;
  if (n >= 1_000) return `${(n / 1_000).toFixed(1).replace(/\.0$/, "")}k`;
  return n.toString();
}

let starCount = 0;
try {
  const res = await fetch("https://api.github.com/repos/snapotter-hq/snapotter", {
    headers: { Accept: "application/vnd.github.v3+json" },
  });
  if (res.ok) {
    const data = await res.json();
    starCount = data.stargazers_count ?? 0;
  }
} catch {
  starCount = 0;
}

// Docker Hub pull count (public API, refreshed at build time)
let dockerHubPulls = 0;
try {
  const res = await fetch("https://hub.docker.com/v2/repositories/snapotter/snapotter/");
  if (res.ok) {
    const data = await res.json();
    dockerHubPulls = data.pull_count ?? 0;
  }
} catch {
  dockerHubPulls = 0;
}

// GHCR (ghcr.io) has no public pull-count API, so this is a manual figure (update as it grows).
const GHCR_PULLS = 28_800;
const dockerForTotal = dockerHubPulls > 0 ? dockerHubPulls : 89_100;
const totalPulls = dockerForTotal + GHCR_PULLS;
const pullsDisplay =
  totalPulls >= 1_000_000
    ? `${Math.floor(totalPulls / 100_000) / 10}M+`
    : `${Math.floor(totalPulls / 100_000) * 100}K+`;

const stats = [
  {
    value: "157",
    label: "Processing Tools",
    sublabel: "Across 5 file modalities",
  },
  {
    value: starCount > 0 ? formatNumber(starCount) : "1.6k",
    label: "GitHub Stars",
    sublabel: "Open-source & growing",
  },
  {
    value: pullsDisplay,
    label: "Image Pulls",
    sublabel: "Deployed worldwide",
  },
  {
    value: "20+",
    label: "Languages",
    sublabel: "Speaks your language",
  },
];
---

<div class="relative mx-auto mt-10 max-w-5xl border-t border-border/70 pt-10">

    <!-- Stats grid -->
    <div class="reveal grid grid-cols-2 gap-10 sm:gap-12 lg:grid-cols-4">
      {stats.map((stat) => {
        const inner = (
          <div class="text-center">
            <p class="font-display text-5xl font-extrabold tracking-tight text-primary md:text-6xl">
              {stat.value}
            </p>
            <p class="mt-2 text-sm font-semibold text-foreground">{stat.label}</p>
            <p class="mt-0.5 text-xs text-muted">{stat.sublabel}</p>
          </div>
        );

        return <div class="p-3">{inner}</div>;
      })}
    </div>

</div>