import type { Metadata } from "next";
import { projects } from "@/lib/projects";
import { posts } from "@/lib/blog";
export const metadata: Metadata = { title: "Stats — Ravneet Brar", description: "By the numbers — real data only." };
export default function StatsPage() {
  const stats = [
    { label:"Projects", value: String(projects.length) },
    { label:"Blog posts", value: String(posts.length) },
    { label:"Experience entries", value: "4" },
    { label:"Technologies", value: "16" },
  ];
  return (
    <div className="bg-[#07080c] pt-24">
      <section className="max-w-[900px] mx-auto px-6 sm:px-8 py-12 text-center">
        <p className="text-[11px] tracking-[0.2em] font-semibold text-white/30 uppercase">Stats</p>
        <h1 className="mt-3 text-[40px] font-[800] tracking-[-0.05em] text-white">BY THE NUMBERS.</h1>
        <p className="text-white/50 text-sm">Only real data — if API unavailable, metric hidden.</p>
      </section>
      <section className="max-w-[900px] mx-auto px-6 sm:px-8 pb-12 grid sm:grid-cols-4 gap-4">
        {stats.map(s=>(
          <div key={s.label} className="rounded-2xl border border-white/10 bg-white/[0.04] p-6 text-center">
            <p className="text-2xl font-bold text-white">{s.value}</p><p className="text-xs tracking-widest text-white/30 uppercase">{s.label}</p>
          </div>
        ))}
      </section>
      <p className="text-center text-xs text-white/20 pb-10">GitHub repos/contributions, views, Zyphron/FreeDash stats hidden until API connected.</p>
    </div>
  );
}