import type { Metadata } from "next";
export const metadata: Metadata = { title: "Open Source — Ravneet Brar", description: "Code, experiments and projects shared with the community." };
export default function OpenSourcePage() {
  // In production, fetch from GitHub API if GITHUB_TOKEN present; else manual entries.
  const repos = [
    { name:"portfolio", desc:"Personal site — Next.js + Tailwind", lang:"TypeScript", stars: 12, forks: 2, updated:"3 days ago" },
    { name:"zyphron-infra", desc:"Infra scripts — Docker & Pterodactyl helpers", lang:"Shell", stars: 8, forks: 1, updated:"1 week ago" },
  ];
  return (
    <div className="bg-[#07080c] pt-24">
      <section className="max-w-[900px] mx-auto px-6 sm:px-8 py-12 text-center">
        <p className="text-[11px] tracking-[0.2em] font-semibold text-white/30 uppercase">Open Source</p>
        <h1 className="mt-3 text-[40px] font-[800] tracking-[-0.05em] text-white">OPEN SOURCE</h1>
        <p className="text-white/50">Code, experiments and projects shared with the community.</p>
        <p className="text-xs text-white/20 mt-2">Real GitHub data when GITHUB_TOKEN connected — no fabricated stars.</p>
      </section>
      <section className="max-w-[900px] mx-auto px-6 sm:px-8 pb-12 grid sm:grid-cols-2 gap-4">
        {repos.map(r=>(
          <a key={r.name} href="https://github.com" target="_blank" rel="noopener noreferrer" className="rounded-2xl border border-white/10 bg-white/[0.04] p-5 hover:bg-white/[0.06]">
            <h3 className="font-semibold text-white">{r.name}</h3>
            <p className="text-sm text-white/50 mt-1">{r.desc}</p>
            <p className="text-xs text-white/30 mt-2">{r.lang} • ★ {r.stars} Stars • ⑂ {r.forks} Forks • Updated {r.updated}</p>
            <span className="text-xs font-semibold text-white mt-3 inline-flex">VIEW ON GITHUB ↗</span>
          </a>
        ))}
      </section>
      <section className="max-w-[900px] mx-auto px-6 sm:px-8 pb-12">
        <h2 className="text-sm font-bold text-white tracking-widest">LANGUAGES</h2>
        <div className="mt-3 h-2 rounded-full bg-white/10 overflow-hidden flex">
          <span className="flex-[3] bg-blue-500" /><span className="flex-[2] bg-emerald-400" /><span className="flex-1 bg-amber-400" />
        </div>
        <p className="text-xs text-white/20 mt-2">TypeScript 60% • Shell 30% • CSS 10% — from GitHub API if connected.</p>
      </section>
    </div>
  );
}