import type { Metadata } from "next";
import Link from "next/link";
export const metadata: Metadata = { title: "Changelog — Ravneet Brar", description: "Things are constantly being built, improved and changed." };
const logs = [
  { slug:"freedash-showcase", date:"Aug 2026", title:"Added FreeDash showcase", desc:"Full case study + live preview (X-Frame DENY fallback).", cat:"FreeDash" },
  { slug:"uses-page", date:"Aug 2026", title:"Added Uses page", desc:"Toolkit, workstation, zyphron stack.", cat:"Website" },
  { slug:"portfolio-animations", date:"Aug 2026", title:"Improved portfolio animations", desc:"Parallax, grain, orbit, stagger.", cat:"Design" },
];
export default function ChangelogPage() {
  return (
    <div className="bg-[#07080c] pt-24">
      <section className="max-w-[800px] mx-auto px-6 sm:px-8 py-12 text-center">
        <p className="text-[11px] tracking-[0.2em] font-semibold text-white/30 uppercase">Changelog</p>
        <h1 className="mt-3 text-[40px] font-[800] tracking-[-0.05em] text-white">CHANGELOG</h1>
        <p className="text-white/50">Things are constantly being built, improved and changed.</p>
      </section>
      <section className="max-w-[800px] mx-auto px-6 sm:px-8 pb-12">
        <div className="flex gap-2 overflow-x-auto pb-3">
          {["All","Website","Zyphron","FreeDash","Infrastructure","Blog","Design","Other"].map(c=>(
            <span key={c} className="shrink-0 px-3 py-1 rounded-full border border-white/10 bg-white/5 text-white/60 text-xs">{c}</span>
          ))}
        </div>
        <div className="mt-6 space-y-4">
          {logs.map(l=>(
            <Link key={l.slug} href={`/changelog/${l.slug}`} className="block rounded-2xl border border-white/10 bg-white/[0.04] p-5 hover:bg-white/[0.06]">
              <p className="text-xs tracking-widest text-blue-300">{l.date} • {l.cat}</p>
              <h3 className="font-semibold text-white mt-1">{l.title}</h3>
              <p className="text-sm text-white/50">{l.desc}</p>
            </Link>
          ))}
        </div>
      </section>
    </div>
  );
}