import Link from "next/link";
import { notFound } from "next/navigation";
const exps: Record<string, any> = {
  "auto-provision": { title:"Auto Provision", problem:"Manual server setup doesn't scale.", idea:"Automate Pterodactyl provisioning.", tech:"Node.js, Pterodactyl, Docker" },
  "credit-economy": { title:"Credit Economy", problem:"Free tier abuse.", idea:"Credit balancing simulator.", tech:"TypeScript" },
  "infra-visual": { title:"Infra Visual", problem:"Infra is invisible.", idea:"Animated server map.", tech:"Framer Motion" },
};
export function generateStaticParams(){ return Object.keys(exps).map(slug=>({ slug })); }
export default async function LabDetail({ params }: { params: Promise<{ slug:string }> }) {
  const { slug } = await params; const e = exps[slug]; if (!e) notFound();
  return (
    <div className="pt-24 bg-[#07080c] min-h-[70vh]">
      <div className="max-w-[800px] mx-auto px-6 sm:px-8 py-12">
        <Link href="/lab" className="text-xs tracking-widest text-white/30 hover:text-white uppercase">← Lab</Link>
        <h1 className="mt-3 text-3xl font-bold text-white">{e.title}</h1>
        <p className="text-sm text-white/50 mt-1">{e.tech} • Status: {e.problem ? "EXPERIMENT" : "PROTOTYPE"}</p>
        <div className="mt-6 space-y-4 text-sm leading-relaxed text-white/60">
          <div><h2 className="font-semibold text-white">Problem</h2><p>{e.problem}</p></div>
          <div><h2 className="font-semibold text-white">Idea</h2><p>{e.idea}</p></div>
          <div><h2 className="font-semibold text-white">Implementation</h2><p>Prototype with {e.tech} — demo, screenshots, lessons.</p></div>
          <div className="rounded-xl border border-white/10 bg-white/[0.04] h-48 grid place-items-center text-white/20 text-xs">Demo / Screenshots / Video</div>
        </div>
      </div>
    </div>
  );
}