import type { Metadata } from "next";
import Link from "next/link";
import { journey } from "@/lib/experience";
export const metadata: Metadata = { title: "Timeline — Ravneet Brar", description: "The journey so far." };
export default function TimelinePage() {
  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-[32px] sm:text-[48px] font-[800] tracking-[-0.05em] text-white">THE JOURNEY SO FAR.</h1>
      </section>
      <section className="max-w-[800px] mx-auto px-6 sm:px-8 pb-12">
        <div className="relative">
          <div className="absolute left-3 top-2 bottom-2 w-px bg-white/10 hidden sm:block" />
          <div className="space-y-4">
            {journey.map(j=>(
              <div key={j.year+j.title} className="flex gap-4">
                <span className="hidden sm:grid place-items-center w-6 h-6 rounded-full bg-white shrink-0 mt-1"><span className={`w-2 h-2 rounded-full ${j.color}`} /></span>
                <div className="flex-1 rounded-2xl border border-white/10 bg-white/[0.04] p-5">
                  <p className="text-xs tracking-widest text-blue-300">{j.year}</p>
                  <h3 className="font-semibold text-white">{j.title}</h3>
                  <p className="text-sm text-white/50">{j.desc}</p>
                  <div className="mt-2 flex gap-2 text-xs">
                    <Link href="/work" className="px-2 py-1 rounded-full bg-white/10 border border-white/10 text-white/60 hover:text-white">Work</Link>
                    <Link href="/experience" className="px-2 py-1 rounded-full bg-white/10 border border-white/10 text-white/60 hover:text-white">Experience</Link>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}