import type { Metadata } from "next";
export const metadata: Metadata = { title: "Resources — Ravneet Brar", description: "Resources I recommend." };
const resources = [
  { name:"Next.js Docs", cat:"Development", desc:"The React framework for production.", why:"Best DX for web apps.", url:"https://nextjs.org" },
  { name:"Linux Journey", cat:"Linux", desc:"Learn Linux quickly.", why:"Fundamentals that scale.", url:"https://linuxjourney.com" },
  { name:"Pterodactyl Docs", cat:"Hosting", desc:"Game server panel docs.", why:"How FreeDash runs.", url:"https://pterodactyl.io" },
];
export default function ResourcesPage() {
  return (
    <div className="bg-[#07080c] pt-24">
      <section className="max-w-[900px] mx-auto px-6 sm:px-8 py-12 text-center">
        <h1 className="text-[32px] font-bold text-white">RESOURCES</h1>
        <p className="text-white/50">Similar to Uses, but focused on recommendations.</p>
      </section>
      <section className="max-w-[900px] mx-auto px-6 sm:px-8 pb-12 grid sm:grid-cols-2 gap-4">
        {resources.map(r=>(
          <a key={r.name} href={r.url} target="_blank" rel="noopener noreferrer" className="rounded-2xl border border-white/10 bg-white/[0.04] p-5 hover:bg-white/[0.06]">
            <p className="text-xs tracking-widest text-white/30">{r.cat}</p>
            <h3 className="font-semibold text-white mt-1">{r.name}</h3>
            <p className="text-sm text-white/50">{r.desc}</p>
            <p className="text-xs text-white/30 mt-1">Why: {r.why}</p>
            <p className="text-xs text-blue-400 mt-2">{r.url} ↗</p>
          </a>
        ))}
      </section>
    </div>
  );
}