import type { Metadata } from "next";
import Link from "next/link";
export const metadata: Metadata = { title: "Office — Ravneet Brar", description: "Welcome to my digital office." };
export default function OfficePage() {
  const items = [
    { label:"COMPUTER", desc:"Work", href:"/work", icon:"💻" },
    { label:"NOTEBOOK", desc:"Blog", href:"/blog", icon:"📓" },
    { label:"SERVER", desc:"Infrastructure", href:"/zyphron", icon:"🗄️" },
    { label:"PHONE", desc:"Socials", href:"/links", icon:"📱" },
    { label:"TERMINAL", desc:"Developer info", href:"/uses", icon:"▣" },
    { label:"CLOUD", desc:"Zyphron Cloud", href:"https://zyphron.cloud", icon:"☁️" },
    { label:"FREEDASH PANEL", desc:"FreeDash", href:"https://freedash.zyphron.cloud/", icon:"🎮" },
  ];
  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-[32px] sm:text-[48px] font-[800] tracking-[-0.04em] text-white">WELCOME TO MY DIGITAL OFFICE.</h1>
        <p className="text-white/50 text-sm">Stylized workspace — hover and click. No heavy 3D, just CSS/SVG.</p>
      </section>
      <section className="max-w-[900px] mx-auto px-6 sm:px-8 pb-12 grid sm:grid-cols-3 gap-4">
        {items.map(i=>(
          <Link key={i.label} href={i.href} target={i.href.startsWith("http") ? "_blank" : undefined} className="rounded-2xl border border-white/10 bg-white/[0.04] p-6 text-center hover:bg-white hover:text-black group">
            <span className="text-2xl">{i.icon}</span>
            <p className="font-bold mt-2 text-sm">{i.label}</p>
            <p className="text-xs opacity-60">→ {i.desc}</p>
          </Link>
        ))}
      </section>
    </div>
  );
}