import type { Metadata } from "next";
import Link from "next/link";
export const metadata: Metadata = { title: "Ecosystem — Ravneet Brar", description: "The projects, products and infrastructure I'm building around my work." };
export default function EcosystemPage() {
  return (
    <div className="bg-[#07080c] pt-24">
      <section className="max-w-[900px] mx-auto px-6 sm:px-8 py-12 text-center">
        <p className="text-[11px] tracking-[0.2em] font-semibold text-white/30 uppercase">Ecosystem</p>
        <h1 className="mt-3 text-[40px] sm:text-[64px] font-[800] tracking-[-0.05em] text-white">THE ECOSYSTEM.</h1>
        <p className="text-white/50">The projects, products and infrastructure I&apos;m building around my work.</p>
      </section>
      <section className="max-w-[900px] mx-auto px-6 sm:px-8 pb-12">
        <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-6 sm:p-8 text-center font-mono text-xs">
          <div className="flex flex-col items-center gap-1.5">
            <Link href="/about" className="px-6 py-2 rounded-full bg-white text-black font-bold hover:bg-white/90">RAVNEET BRAR</Link>
            <span className="w-px h-4 bg-white/20" />
            <div className="flex gap-3 w-full justify-center">
              <div className="flex-1 flex flex-col items-center gap-1.5">
                <Link href="/work/zyphron-cloud" className="w-full py-2 rounded-full bg-[#2563eb] text-white font-bold text-center hover:bg-[#1d4ed8]">ZYPHRON CLOUD</Link>
                <div className="flex gap-2 w-full"><Link href="/work" className="flex-1 py-1.5 rounded-full bg-white/10 border border-white/10 text-white/70 text-center">HOSTING</Link><Link href="/work/freedash" className="flex-1 py-1.5 rounded-full bg-emerald-500/20 border border-emerald-500/30 text-emerald-300 text-center">FREEDASH</Link></div>
              </div>
              <div className="flex-1 flex flex-col items-center gap-1.5">
                <Link href="/work" className="w-full py-2 rounded-full bg-white/10 border border-white/10 text-white/70 text-center hover:bg-white/20">PERSONAL</Link>
                <div className="flex gap-2 w-full"><Link href="/blog" className="flex-1 py-1.5 rounded-full bg-white/10 border border-white/10 text-white/70 text-center hover:bg-white/20">BLOG</Link><Link href="/work" className="flex-1 py-1.5 rounded-full bg-white/10 border border-white/10 text-white/70 text-center">WORK</Link></div>
              </div>
            </div>
            <span className="w-px h-4 bg-white/20" />
            <span className="px-4 py-2 rounded-full bg-white/10 border border-white/10 text-white/60">INFRASTRUCTURE</span>
          </div>
          <p className="text-xs text-white/20 mt-4">Hover: glow • lines brighten • related highlight — click to navigate</p>
        </div>
      </section>
      <p className="text-center text-xs text-white/20 pb-10">One ecosystem. Different ways to host. • Related content links across Work/Experience/Blog/Uses</p>
    </div>
  );
}