import type { Metadata } from "next";
export const metadata: Metadata = { title: "Achievements — Ravneet Brar", description: "Milestones — real achievements only." };
const milestones = [
  { year:"2025", title:"Zyphron Cloud founded", desc:"Started building hosting & infra company.", cat:"Business" },
  { year:"2026", title:"FreeDash launched", desc:"Free hosting via credits — part of Zyphron ecosystem.", cat:"Projects" },
  { year:"2026", title:"Portfolio shipped", desc:"Premium multi-page portfolio with admin.", cat:"Development" },
];
export default function AchievementsPage() {
  return (
    <div className="bg-[#07080c] pt-24">
      <section className="max-w-[800px] mx-auto px-6 sm:px-8 py-12 text-center">
        <h1 className="text-[40px] font-[800] tracking-[-0.05em] text-white">MILESTONES.</h1>
        <p className="text-white/50 text-sm">Real achievements — no invented awards.</p>
      </section>
      <section className="max-w-[800px] mx-auto px-6 sm:px-8 pb-12">
        <div className="space-y-4">
          {milestones.map(m=>(
            <div key={m.year+m.title} className="rounded-2xl border border-white/10 bg-white/[0.04] p-5 flex gap-4">
              <span className="text-xs font-bold px-2 py-1 rounded-full bg-white text-black h-fit">{m.year}</span>
              <div>
                <p className="text-xs tracking-widest text-white/30">{m.cat}</p>
                <h3 className="font-semibold text-white">{m.title}</h3>
                <p className="text-sm text-white/50">{m.desc}</p>
              </div>
            </div>
          ))}
        </div>
        <p className="text-xs text-white/20 text-center mt-4">Timeline: 2025 → 2026 → NOW • Editable via Admin → Achievements</p>
      </section>
    </div>
  );
}