import type { Metadata } from "next";
import { resumeData } from "@/lib/experience";
import PrintButton from "@/components/PrintButton";
export const metadata: Metadata = { title: "Resume — Ravneet Brar" };
export default function ResumePage(){
  return (
    <div className="pt-24 bg-[#07080c]">
      <div className="max-w-[900px] mx-auto px-6 sm:px-8 py-12">
        <div className="flex flex-wrap justify-between gap-4 items-start">
          <div>
            <h1 className="text-[32px] sm:text-[44px] font-[800] tracking-[-0.04em] text-white">Ravneet Brar</h1>
            <p className="text-white/50">Founder, Developer & Entrepreneur • hello@ravneetbrar.in • Punjab, India</p>
          </div>
          <PrintButton />
        </div>
        <p className="mt-6 text-[14px] leading-relaxed text-white/60 max-w-[700px]">{resumeData.profile}</p>
        <div className="mt-8 grid sm:grid-cols-3 gap-6">
          <div className="sm:col-span-2 space-y-6">
            <section><h2 className="text-[12px] tracking-widest text-white/30 uppercase">Experience</h2><div className="mt-3 space-y-3">{resumeData.projects.map(p=> <div key={p.name} className="rounded-xl border border-white/10 bg-white/[0.04] p-4"><div className="flex justify-between text-sm"><span className="font-semibold text-white">{p.name} — {p.role}</span><span className="text-white/30">{p.period}</span></div><ul className="mt-2 list-disc list-inside text-[13px] text-white/60">{p.points.map(pt=> <li key={pt}>{pt}</li>)}</ul></div>)}</div></section>
            <section><h2 className="text-[12px] tracking-widest text-white/30 uppercase">Education</h2><div className="mt-3 rounded-xl border border-white/10 bg-white/[0.04] p-4"><p className="text-sm font-medium text-white">{resumeData.education[0].school}</p><p className="text-[13px] text-white/60">{resumeData.education[0].detail}</p><p className="text-xs text-white/30">{resumeData.education[0].year}</p></div></section>
          </div>
          <div className="space-y-6">
            <section><h2 className="text-[12px] tracking-widest text-white/30 uppercase">Skills</h2><div className="mt-3 flex flex-wrap gap-1.5">{resumeData.skills.map(s=> <span key={s} className="px-2.5 py-1 rounded-full bg-white text-black text-[11px] font-semibold">{s}</span>)}</div></section>
            <section><h2 className="text-[12px] tracking-widest text-white/30 uppercase">Achievements</h2><ul className="mt-2 space-y-1 text-[13px] text-white/60">{resumeData.achievements.map(a=> <li key={a}>• {a}</li>)}</ul></section>
            <section className="rounded-xl border border-blue-500/20 bg-blue-500/10 p-4"><p className="text-sm font-semibold text-white">Contact</p><p className="text-[13px] text-white/60 mt-1">hello@ravneetbrar.in<br />ravneetbrar.in<br />zyphron.cloud</p></section>
          </div>
        </div>
      </div>
    </div>
  );
}