import type { Metadata } from "next";
import Link from "next/link";
export const metadata: Metadata = { title: "Lab — Ravneet Brar", description: "Experiments, prototypes and ideas that may or may not become something bigger." };
const experiments = [
  { slug:"auto-provision", name:"Auto Provision", desc:"Pterodactyl auto-deploy prototype.", status:"PROTOTYPE", tech:"Node.js • Pterodactyl", date:"Aug 2026" },
  { slug:"credit-economy", name:"Credit Economy", desc:"FreeDash credit balancing simulator.", status:"EXPERIMENT", tech:"TypeScript", date:"Jul 2026" },
  { slug:"infra-visual", name:"Infra Visual", desc:"Animated server map.", status:"IN DEVELOPMENT", tech:"Framer Motion", date:"Aug 2026" },
];
export default function LabPage() {
  return (
    <div className="bg-[#07080c] pt-24">
      <section className="max-w-[1100px] mx-auto px-6 sm:px-8 py-12 text-center">
        <p className="text-[11px] tracking-[0.2em] font-semibold text-white/30 uppercase">Lab</p>
        <h1 className="mt-3 text-[40px] sm:text-[64px] font-[800] tracking-[-0.05em] text-white">THE LAB</h1>
        <p className="text-white/50">Experiments, prototypes and ideas that may or may not become something bigger.</p>
      </section>
      <section className="max-w-[1100px] mx-auto px-6 sm:px-8 pb-6 flex gap-2 overflow-x-auto">
        {["ALL","AI","WEB","INFRASTRUCTURE","UI","AUTOMATION","GAMES","EXPERIMENTS"].map(c=>(
          <span key={c} className="shrink-0 px-3.5 py-1.5 rounded-full border border-white/10 bg-white/5 text-white/60 text-xs font-semibold">{c}</span>
        ))}
      </section>
      <section className="max-w-[1100px] mx-auto px-6 sm:px-8 pb-12 grid sm:grid-cols-3 gap-4">
        {experiments.map(e=>(
          <Link key={e.slug} href={`/lab/${e.slug}`} className="rounded-[20px] border border-white/10 bg-white/[0.04] p-5 hover:bg-white hover:text-black group">
            <p className="text-xs tracking-widest opacity-50">{e.status} • {e.date}</p>
            <h3 className="font-bold mt-1">{e.name}</h3>
            <p className="text-sm opacity-60 mt-1">{e.desc}</p>
            <p className="text-xs opacity-40 mt-2">{e.tech}</p>
            <span className="mt-3 inline-flex text-xs font-semibold">Demo →</span>
          </Link>
        ))}
      </section>
      <p className="text-center text-xs text-white/20 pb-10">Interactive demos: live preview, video, code snippet, screenshots — editable via Admin → Lab</p>
    </div>
  );
}