import Link from "next/link";
import { notFound } from "next/navigation";
const services: Record<string, any> = {
  "web-development": { title:"WEB DEVELOPMENT", desc:"Websites, web apps, dashboards, landing pages.", includes:["Landing pages","Dashboards","Web apps"], tech:"Next.js • React • Tailwind", process:"Design → Build → Test → Deploy → Iterate" },
  "application-development": { title:"APPLICATION DEVELOPMENT", desc:"Custom applications, APIs, backend systems, automation.", includes:["APIs","Automation","Backend"], tech:"Node.js • PHP • Laravel", process:"Research → API → Frontend → Deploy" },
  "infrastructure": { title:"INFRASTRUCTURE", desc:"Server setup, Linux, hosting, cloud infrastructure, deployment.", includes:["Linux","Docker","Networking"], tech:"Linux • Pterodactyl", process:"Plan → Provision → Harden → Monitor" },
  "hosting": { title:"HOSTING", desc:"Game hosting, bot hosting, cloud services, server management.", includes:["Game","Bot","VPS"], tech:"Pterodactyl • Docker", process:"Provision → Monitor → Support" },
  "consulting": { title:"TECHNICAL CONSULTING", desc:"Architecture, infrastructure planning, performance, deployment.", includes:["Advisory","Review","Roadmap"], tech:"Consulting", process:"Assess → Plan → Recommend" },
};
export function generateStaticParams(){ return Object.keys(services).map(slug=>({ slug })); }
export default async function ServiceDetail({ params }: { params: Promise<{ slug:string }> }) {
  const { slug } = await params; const s = services[slug]; if (!s) 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="/services" className="text-xs tracking-widest text-white/30 hover:text-white uppercase">← Services</Link>
        <h1 className="mt-3 text-3xl font-bold text-white">{s.title}</h1>
        <p className="text-sm text-white/60 mt-2">{s.desc}</p>
        <div className="mt-6 rounded-2xl border border-white/10 bg-white/[0.04] p-5">
          <p className="text-xs tracking-widest text-white/30">What is included</p>
          <ul className="mt-2 space-y-1 text-sm text-white/70">{s.includes.map((i:string)=> <li key={i}>• {i}</li>)}</ul>
          <p className="text-xs tracking-widest text-white/30 mt-4">Technology</p><p className="text-sm text-white/70">{s.tech}</p>
          <p className="text-xs tracking-widest text-white/30 mt-4">Process</p><p className="text-sm text-white/70">{s.process}</p>
        </div>
        <div className="mt-6">
          <h2 className="font-semibold text-white">FAQ</h2><p className="text-sm text-white/50">Editable via Admin → Services → {s.title}</p>
        </div>
        <Link href="/contact" className="mt-6 inline-flex px-6 py-3 rounded-full bg-white text-black font-semibold">Start a Project →</Link>
      </div>
    </div>
  );
}