import type { Metadata } from "next";
import Link from "next/link";
export const metadata: Metadata = { title: "Now — Ravneet Brar", description: "What I'm working on right now — Zyphron Cloud, FreeDash and personal website." };
export default function NowPage() {
  const updated = "August 2026";
  return (
    <div className="bg-[#07080c]">
      <section className="relative min-h-[70vh] flex flex-col justify-center overflow-hidden pt-24">
        <div className="absolute inset-0 grid-pattern opacity-[0.18] [mask-image:radial-gradient(60%_50%_at_50%_0%,black,transparent)]" />
        <div className="absolute inset-0 bg-[radial-gradient(800px_400px_at_50%_0%,rgba(59,130,246,0.12),transparent_70%)]" />
        <div className="relative max-w-[1100px] mx-auto px-6 sm:px-8 py-12 text-center w-full">
          <p className="text-[11px] tracking-[0.2em] font-semibold text-white/30 uppercase">Now</p>
          <h1 className="mt-3 text-[44px] sm:text-[72px] font-[800] tracking-[-0.05em] leading-[0.85] text-white">CURRENTLY<br /><span className="bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent">BUILDING.</span></h1>
          <p className="mt-4 text-white/50 max-w-[640px] mx-auto">A live snapshot of what I'm working on, learning and exploring.</p>
          <p className="text-xs text-white/20 mt-2">Last updated: {updated} • Editable via Admin → Now</p>
        </div>
      </section>
      <section className="max-w-[1100px] mx-auto px-6 sm:px-8 py-8">
        <h2 className="text-[11px] tracking-[0.2em] text-white/30 uppercase">Current Focus</h2>
        <div className="mt-4 grid lg:grid-cols-3 gap-4">
          {[
            { title:"ZYPHRON CLOUD", desc:"Current work — Infrastructure, hosting, development, operations.", items:["Nodes","Billing","Pterodactyl","Support"] },
            { title:"FREEDASH", desc:"Current work — Free hosting, automation, product development.", items:["Credits","Pterodactyl","Automation"] },
            { title:"PERSONAL WEBSITE", desc:"Design, development, content, experiments.", items:["Portfolio","Blog","Lab","Ecosystem"] },
          ].map(c=>(
            <div key={c.title} className="rounded-[20px] border border-white/10 bg-white/[0.04] p-6">
              <h3 className="font-bold text-white">{c.title}</h3><p className="text-sm text-white/50 mt-1">{c.desc}</p>
              <div className="mt-3 flex flex-wrap gap-1.5">{c.items.map(i=> <span key={i} className="text-xs px-2 py-1 rounded-full bg-white/10 border border-white/10 text-white/60">{i}</span>)}</div>
            </div>
          ))}
        </div>
      </section>
      <section className="max-w-[1100px] mx-auto px-6 sm:px-8 py-8 border-t border-white/10">
        <h2 className="text-xl font-bold text-white">CURRENTLY LEARNING</h2>
        <div className="mt-4 grid sm:grid-cols-3 gap-4">
          {[
            { name:"Linux Networking", level:"Comfortable", note:"Hardening & routing" },
            { name:"Docker Orchestration", level:"Learning", note:"Multi-node" },
            { name:"Framer Motion", level:"Advanced", note:"Cinematic UX" },
          ].map(l=>(
            <div key={l.name} className="rounded-2xl border border-white/10 bg-white/[0.04] p-5">
              <p className="font-semibold text-white text-sm">{l.name}</p>
              <p className="text-xs px-2 py-1 rounded-full bg-blue-500/15 border border-blue-500/20 text-blue-300 w-fit mt-2">{l.level}</p>
              <p className="text-xs text-white/40 mt-1">{l.note}</p>
            </div>
          ))}
        </div>
        <p className="text-xs text-white/20 mt-3">Levels are manual: Beginner / Learning / Comfortable / Advanced — no fake percentages.</p>
      </section>
      <section className="max-w-[800px] mx-auto px-6 sm:px-8 py-8 border-t border-white/10">
        <h2 className="text-sm font-bold text-white tracking-widest">RECENTLY UPDATED</h2>
        <div className="mt-3 space-y-2 text-sm">
          <div className="rounded-xl border border-white/10 bg-white/[0.03] px-4 py-3 flex justify-between"><span className="text-white">Added FreeDash showcase</span><span className="text-white/30 text-xs">Aug 2026</span></div>
          <div className="rounded-xl border border-white/10 bg-white/[0.03] px-4 py-3 flex justify-between"><span className="text-white">Added Uses page</span><span className="text-white/30 text-xs">Aug 2026</span></div>
          <div className="rounded-xl border border-white/10 bg-white/[0.03] px-4 py-3 flex justify-between"><span className="text-white">Portfolio animations</span><span className="text-white/30 text-xs">Aug 2026</span></div>
        </div>
        <p className="text-xs text-white/20 mt-3">Connected to CMS — real recent updates only.</p>
        <div className="mt-6 flex gap-3">
          <Link href="/lab" className="px-4 py-2 rounded-full bg-white text-black font-semibold text-sm">Explore Lab →</Link>
          <Link href="/changelog" className="px-4 py-2 rounded-full border border-white/15 text-white font-semibold text-sm">Changelog</Link>
        </div>
      </section>
    </div>
  );
}