import type { Metadata } from "next";
import Link from "next/link";
export const metadata: Metadata = { title: "Services — Ravneet Brar", description: "What I can build — development, infrastructure and digital products." };
const services = [
  { slug:"web-development", title:"WEB DEVELOPMENT", desc:"Websites, web apps, dashboards, landing pages.", tech:"Next.js • React" },
  { slug:"application-development", title:"APPLICATION DEVELOPMENT", desc:"Custom apps, APIs, backend, automation.", tech:"Node.js • PHP • Laravel" },
  { slug:"infrastructure", title:"INFRASTRUCTURE", desc:"Server setup, Linux, hosting, cloud, deployment.", tech:"Linux • Docker" },
  { slug:"hosting", title:"HOSTING", desc:"Game hosting, bot hosting, cloud services, server management.", tech:"Pterodactyl" },
  { slug:"consulting", title:"TECHNICAL CONSULTING", desc:"Architecture, infra planning, performance, deployment.", tech:"Advisory" },
];
export default function ServicesPage() {
  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">Services</p>
        <h1 className="mt-3 text-[40px] sm:text-[64px] font-[800] tracking-[-0.05em] text-white">WHAT I CAN BUILD.</h1>
        <p className="text-white/50">Development, infrastructure and digital products.</p>
      </section>
      <section className="max-w-[1100px] mx-auto px-6 sm:px-8 pb-12 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {services.map(s=>(
          <Link key={s.slug} href={`/services/${s.slug}`} className="rounded-[20px] border border-white/10 bg-white/[0.04] p-6 hover:bg-white hover:text-black group">
            <h3 className="font-bold">{s.title}</h3>
            <p className="text-sm opacity-60 mt-1">{s.desc}</p>
            <p className="text-xs opacity-40 mt-2">{s.tech}</p>
            <span className="text-xs font-semibold mt-3 inline-flex">Learn more →</span>
          </Link>
        ))}
      </section>
      <p className="text-center text-xs text-white/20 pb-10">Only services actually offered — editable via Admin → Services</p>
    </div>
  );
}