import type { Metadata } from "next";
import Link from "next/link";
export const metadata: Metadata = { title: "Hire Me — Ravneet Brar", description: "Need a builder? Let's turn your idea into something real." };
export default function HirePage() {
  return (
    <div className="bg-[#07080c] pt-24">
      <section className="max-w-[900px] mx-auto px-6 sm:px-8 py-12 text-center">
        <h1 className="text-[36px] sm:text-[56px] font-[800] tracking-[-0.05em] text-white">NEED A BUILDER?</h1>
        <p className="text-white/50">Let&apos;s turn your idea into something real.</p>
        <div className="mt-6 flex flex-wrap justify-center gap-2 text-sm">
          {["Websites","Applications","Infrastructure","Cloud","Hosting","Technical projects"].map(s=> <span key={s} className="px-3 py-1.5 rounded-full bg-white/10 border border-white/10 text-white/60">{s}</span>)}
        </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>
      </section>
      <section className="max-w-[900px] mx-auto px-6 sm:px-8 pb-12">
        <h2 className="text-sm font-bold tracking-widest text-white/30">PROJECT BRIEF</h2>
        <div className="mt-3 grid sm:grid-cols-5 gap-2 text-xs">
          {["01 PROJECT","02 REQUIREMENTS","03 TIMELINE","04 BUDGET","05 CONTACT"].map(s=>(
            <div key={s} className="rounded-xl border border-white/10 bg-white/[0.04] p-4 text-center text-white/70">{s}</div>
          ))}
        </div>
        <Link href="/contact" className="mt-6 inline-flex px-6 py-3 rounded-full bg-[#2563eb] text-white font-semibold">SEND PROJECT BRIEF →</Link>
      </section>
    </div>
  );
}