"use client";
import { useEffect, useState, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Search, ArrowUpRight, X, Maximize2, RefreshCw, Monitor, Laptop, Server, Smartphone, Star } from "lucide-react";
import { tools, setupTimeline } from "./data";
import Link from "next/link";

const categories = ["ALL","HARDWARE","OS","DEVELOPMENT","DATABASES","INFRASTRUCTURE","DESIGN","AI","PRODUCTIVITY","BUSINESS"] as const;

export default function UsesClient() {
  const [activeCat, setActiveCat] = useState<string>("ALL");
  const [q, setQ] = useState("");
  const [selected, setSelected] = useState<string | null>(null);
  const [hoverWs, setHoverWs] = useState<string | null>(null);
  const [zyFull, setZyFull] = useState(false);
  const [zyKey, setZyKey] = useState(0);
  const sel = tools.find(t=>t.name===selected);

  const filtered = tools.filter(t=>{
    const cat = activeCat==="ALL" ? true : t.category===activeCat;
    const sq = q.trim().toLowerCase();
    const search = !sq ? true : [t.name, t.category, t.desc, t.purpose, t.why, ...t.projects].join(" ").toLowerCase().includes(sq);
    return cat && search;
  });

  useEffect(() => {
    if (zyFull) document.body.style.overflow = "hidden"; else document.body.style.overflow = "";
    return () => { document.body.style.overflow = ""; };
  }, [zyFull]);

  return (
    <div className="bg-[#07080c] overflow-hidden">
      {/* HERO */}
      <section className="relative min-h-[84vh] flex flex-col justify-center overflow-hidden">
        <div className="absolute inset-0">
          <div className="absolute inset-0 grid-pattern opacity-[0.22] [mask-image:radial-gradient(70%_50%_at_50%_0%,black,transparent)]" />
          <div className="absolute inset-0 bg-[radial-gradient(800px_500px_at_50%_-10%,rgba(59,130,246,0.14),transparent_70%)]" />
          <div className="absolute inset-0 opacity-[0.035]" style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")` }} />
          <div className="absolute top-[18%] left-[6%] hidden sm:block text-[10px] tracking-[0.2em] text-white/10">$ system — Developer Environment</div>
          <div className="absolute bottom-[18%] right-[8%] hidden sm:block text-[10px] tracking-[0.2em] text-white/10">$ zyphron — cloud</div>
        </div>
        <div className="relative max-w-[1100px] mx-auto px-6 sm:px-8 pt-24 pb-10 text-center w-full">
          <p className="text-[11px] tracking-[0.2em] font-semibold text-white/30 uppercase">Uses / Toolkit</p>
          <motion.h1 initial={{ opacity:0, y:16 }} animate={{ opacity:1, y:0 }} transition={{ duration:0.6, ease:[0.16,1,0.3,1] }} className="mt-3 text-[36px] sm:text-[64px] lg:text-[72px] font-[800] tracking-[-0.05em] leading-[0.85] text-white">THE TOOLS BEHIND<br /><span className="bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent">THE WORK.</span></motion.h1>
          <p className="mt-4 max-w-[640px] mx-auto text-[14px] leading-relaxed text-white/50">A look at the hardware, software and systems I use to build, deploy and run things.</p>
        </div>
        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-white/30"><span className="text-[10px] tracking-[0.2em]">EXPLORE MY SETUP</span><span className="w-px h-8 bg-gradient-to-b from-white/30 to-transparent animate-pulse" /></div>
      </section>

      {/* WORKSTATION */}
      <section className="py-10 max-w-[1100px] mx-auto px-6 sm:px-8">
        <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-6 sm:p-8 grid lg:grid-cols-[1.2fr_0.8fr] gap-6 items-center overflow-hidden relative">
          <div className="absolute inset-0 bg-[radial-gradient(600px_300px_at_30%_0%,rgba(59,130,246,0.08),transparent_70%)]" />
          <div className="relative grid grid-cols-2 gap-3">
            {[
              { name:"Monitor", label:"Development", icon: Monitor, desc:"Code • Preview" },
              { name:"Laptop", label:"Management", icon: Laptop, desc:"Ops • Business" },
              { name:"Server", label:"Infrastructure", icon: Server, desc:"Nodes • Hosting" },
              { name:"Phone", label:"Testing", icon: Smartphone, desc:"QA • Mobile" },
            ].map(s=>(
              <div key={s.name} onMouseEnter={()=>setHoverWs(s.name)} onMouseLeave={()=>setHoverWs(null)} className={`rounded-2xl border p-5 text-center transition ${hoverWs===s.name ? "bg-white text-black border-white" : "bg-white/[0.04] border-white/10 text-white"}`}>
                <s.icon size={22} className="mx-auto" />
                <p className="font-semibold mt-2 text-sm">{s.name}</p>
                <p className={`text-xs ${hoverWs===s.name ? "text-black/60" : "text-white/40"}`}>{hoverWs===s.name ? s.label : s.desc}</p>
              </div>
            ))}
          </div>
          <div className="relative">
            <h2 className="text-xl font-bold text-white">Interactive workstation</h2>
            <p className="text-sm text-white/50 mt-1">Hover the setup — monitor is for development, laptop for management, server for infrastructure, phone for testing. No fake photo.</p>
            <div className="mt-4 rounded-xl bg-[#0a0d12] border border-white/10 p-4 font-mono text-xs leading-relaxed text-white/60">
              <div>$ system<br /><span className="text-white">Developer Environment</span></div>
              <div className="mt-2">$ primary-stack<br />Next.js • React • Node.js • Linux</div>
              <div className="mt-2">$ infrastructure<br />Docker • Pterodactyl • Servers</div>
              <div className="mt-2">$ current-project<br /><span className="text-blue-400">Zyphron Cloud</span></div>
            </div>
          </div>
        </div>
      </section>

      {/* SEARCH + CATEGORIES */}
      <div className="sticky top-[68px] z-20 backdrop-blur-xl bg-[#07080c]/80 border-y border-white/10">
        <div className="max-w-[1100px] mx-auto px-6 sm:px-8 py-3 flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
          <div className="relative flex-1 max-w-[420px] w-full">
            <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-white/30" />
            <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Search my setup..." className="w-full rounded-full bg-white/[0.06] border border-white/10 pl-9 pr-4 py-2 text-sm text-white placeholder:text-white/30 outline-none" />
          </div>
          <span className="text-xs text-white/30 hidden sm:inline">{filtered.length} tools</span>
        </div>
        <div className="max-w-[1100px] mx-auto px-6 sm:px-8 pb-3 flex gap-1.5 overflow-x-auto">
          {categories.map(c=>(
            <button key={c} onClick={()=>setActiveCat(c)} className={`shrink-0 px-3.5 py-1.5 rounded-full text-xs font-semibold border whitespace-nowrap ${activeCat===c ? "bg-white text-black border-white" : "bg-white/5 border-white/10 text-white/60 hover:text-white"}`}>{c}</button>
          ))}
        </div>
      </div>

      {/* HARDWARE */}
      <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">My Desk • Hardware</h2>
        <p className="text-white/40 text-sm mt-1">Each card: name • model • purpose — editable, no invented specs.</p>
        <div className="mt-4 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {filtered.filter(t=>t.category==="HARDWARE").map(t=>(
            <button key={t.name} onClick={()=>setSelected(t.name)} className="text-left rounded-[20px] border border-white/10 bg-white/[0.04] p-5 hover:bg-white hover:text-black group transition overflow-hidden">
              <div className="h-20 rounded-xl bg-gradient-to-br from-white/[0.06] to-transparent border border-white/10 grid place-items-center group-hover:scale-[1.02] transition"><span className="text-xs tracking-widest text-white/30 group-hover:text-black/40">IMAGE • {t.name}</span></div>
              <p className="font-semibold mt-3 flex items-center gap-1">{t.name} {t.favorite && <Star size={12} className="fill-amber-400 text-amber-400" />}</p>
              <p className="text-xs opacity-60">{t.desc} • {t.purpose}</p>
              <p className="text-xs opacity-40 mt-1">Why: {t.why}</p>
            </button>
          ))}
        </div>
      </section>

      {/* OS */}
      <section className="max-w-[1100px] mx-auto px-6 sm:px-8 py-6 border-t border-white/10">
        <h2 className="text-xl font-bold text-white">OPERATING SYSTEMS</h2>
        <div className="mt-4 grid sm:grid-cols-3 gap-4">
          {filtered.filter(t=>t.category==="OS").map(t=>(
            <button key={t.name} onClick={()=>setSelected(t.name)} className="rounded-2xl border border-white/10 bg-white/[0.04] p-5 text-left hover:bg-white/[0.06]">
              <p className="font-semibold text-white">{t.name}</p><p className="text-xs text-white/40">{t.desc}</p><p className="text-xs text-white/60 mt-1">{t.purpose} — {t.why}</p>
            </button>
          ))}
        </div>
      </section>

      {/* DEVELOPMENT + DATABASES */}
      <section className="max-w-[1100px] mx-auto px-6 sm:px-8 py-6 border-t border-white/10">
        <h2 className="text-xl font-bold text-white">DEVELOPMENT</h2>
        <div className="mt-4 grid sm:grid-cols-3 lg:grid-cols-4 gap-3">
          {filtered.filter(t=>t.category==="DEVELOPMENT").map(t=>(
            <button key={t.name} onClick={()=>setSelected(t.name)} className="rounded-2xl border border-white/10 bg-white/[0.04] p-4 text-left hover:bg-white hover:text-black group">
              <p className="font-semibold flex items-center gap-1">{t.name} {t.favorite && <Star size={10} className="fill-amber-400 text-amber-400" />}</p><p className="text-xs opacity-60">{t.purpose} • {t.desc}</p><p className="text-[11px] opacity-40 mt-1">Why: {t.why}</p>
              <p className="text-[11px] opacity-30 mt-1">{t.projects.join(" • ")}</p>
            </button>
          ))}
        </div>
        <h2 className="text-xl font-bold text-white mt-8">DATA</h2>
        <div className="mt-4 grid sm:grid-cols-3 gap-4">
          {filtered.filter(t=>t.category==="DATABASES").map(t=>(
            <div key={t.name} className="rounded-2xl border border-white/10 bg-white/[0.04] p-5">
              <p className="font-semibold text-white">{t.name}</p>
              <div className="mt-2 font-mono text-[11px] leading-tight text-white/50">DATABASE<br />↓<br />{ "█".repeat(12)}<br />{ "█".repeat(8)}<br />{ "█".repeat(4)}</div>
              <p className="text-xs text-white/40 mt-2">{t.purpose} • {t.why}</p>
            </div>
          ))}
        </div>
      </section>

      {/* INFRASTRUCTURE */}
      <section className="py-8 border-t border-white/10 max-w-[1100px] mx-auto px-6 sm:px-8">
        <h2 className="text-[28px] font-[800] tracking-[-0.04em] text-white">INFRASTRUCTURE</h2>
        <p className="text-white/50 text-sm">Linux • Docker • Pterodactyl • Servers • Networking → ZYPHRON CLOUD</p>
        <div className="mt-6 rounded-[24px] border border-white/10 bg-white/[0.03] p-6 text-center">
          <div className="flex flex-col items-center gap-2 font-mono text-xs">
            <span className="px-6 py-2 rounded-full bg-[#2563eb] text-white font-bold tracking-widest">ZYPHRON CLOUD</span>
            <span className="w-px h-4 bg-white/20" />
            <div className="flex gap-2"><span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">Linux</span><span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">Docker</span><span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">Database</span></div>
            <span className="w-px h-4 bg-white/20" />
            <span className="px-4 py-2 rounded-full bg-white text-black font-bold">SERVERS</span>
          </div>
          <div className="mt-4 grid sm:grid-cols-4 gap-2 text-xs">
            {filtered.filter(t=>t.category==="INFRASTRUCTURE").map(t=>(
              <button key={t.name} onClick={()=>setSelected(t.name)} className="rounded-xl border border-white/10 bg-white/[0.04] p-3 text-white/70 hover:bg-white hover:text-black">{t.name}</button>
            ))}
          </div>
        </div>
      </section>

      {/* TERMINAL + EDITOR */}
      <section className="py-8 max-w-[1100px] mx-auto px-6 sm:px-8 grid lg:grid-cols-2 gap-6 border-t border-white/10">
        <div className="rounded-[18px] border border-white/10 bg-[#0a0d12] overflow-hidden">
          <div className="flex items-center justify-between px-4 py-3 bg-white/[0.04] border-b border-white/10"><span className="font-mono text-xs text-white/40">ravneet@setup:~$</span><span className="text-xs text-emerald-400">●</span></div>
          <div className="p-5 font-mono text-xs leading-relaxed text-white/60">
            <div>$ system<br /><span className="text-white">Developer Environment</span></div>
            <div className="mt-2">$ primary-stack<br />Next.js • React • Node.js • Linux</div>
            <div className="mt-2">$ infrastructure<br />Docker • Pterodactyl • Servers</div>
            <div className="mt-2">$ current-project<br /><span className="text-blue-400">Zyphron Cloud</span></div>
            <p className="text-white/20 mt-3">help • stack • hardware • software • infrastructure • projects • clear</p>
          </div>
        </div>
        <div className="rounded-[18px] border border-white/10 bg-[#0a0d12] p-5 font-mono text-xs">
          <p className="text-white/30 tracking-widest uppercase">Explorer</p>
          <div className="mt-2 text-white/50 leading-relaxed">
            src/<br />&nbsp;&nbsp;components/<br />&nbsp;&nbsp;app/<br />&nbsp;&nbsp;lib/<br />&nbsp;&nbsp;public/<br />package.json<br />README.md
          </div>
          <pre className="mt-4 p-3 rounded-xl bg-black/40 border border-white/10 text-[11px] leading-relaxed text-white/60">{`// sample\nconst build = () => {\n  learn();\n  ship();\n};`}</pre>
        </div>
      </section>

      {/* BROWSER / DESIGN / AI / PRODUCTIVITY / BUSINESS */}
      <section className="max-w-[1100px] mx-auto px-6 sm:px-8 py-6 border-t border-white/10 grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {[
          { title:"THE WEB • Browsers", cat:"BROWSER" },
          { title:"DESIGN", cat:"DESIGN" },
          { title:"AI", cat:"AI" },
          { title:"PRODUCTIVITY", cat:"PRODUCTIVITY" },
          { title:"RUNNING THE BUSINESS", cat:"BUSINESS" },
        ].map(s=>(
          <div key={s.title} className="rounded-2xl border border-white/10 bg-white/[0.04] p-5">
            <p className="text-xs tracking-widest text-white/30 uppercase">{s.title}</p>
            <div className="mt-3 flex flex-wrap gap-2">
              {filtered.filter(t=>t.category===s.cat).map(t=>(
                <button key={t.name} onClick={()=>setSelected(t.name)} className="px-3 py-1.5 rounded-full bg-white text-black text-xs font-semibold hover:bg-blue-500 hover:text-white">{t.name}</button>
              ))}
            </div>
            {s.cat==="AI" && <p className="text-xs text-white/30 mt-2">Only tools actually used — no invented AI.</p>}
          </div>
        ))}
      </section>

      {/* ZYPHRON STACK */}
      <section className="py-10 max-w-[900px] mx-auto px-6 sm:px-8 text-center border-t border-white/10">
        <h2 className="text-[28px] font-[800] tracking-[-0.04em] text-white">THE ZYPHRON STACK.</h2>
        <div className="mt-6 flex flex-col items-center gap-1.5 font-mono text-xs">
          {["ZYPHRON CLOUD","WEBSITE","BILLING","API","DATABASE","SERVERS","INFRASTRUCTURE"].map(s=>(
            <div key={s} className="flex flex-col items-center gap-1.5">
              <span className={`px-4 py-2 rounded-full border ${s==="ZYPHRON CLOUD" ? "bg-[#2563eb] text-white border-blue-500 font-bold" : "bg-white/5 border-white/10 text-white/60"}`}>{s}</span><span className="w-px h-3 bg-white/15" />
            </div>
          ))}
        </div>
      </section>

      {/* LIVE PREVIEW */}
      <section className="py-6 max-w-[1100px] mx-auto px-6 sm:px-8">
        <div className="rounded-[18px] border border-white/10 bg-[#0e1118] overflow-hidden">
          <div className="flex items-center justify-between px-4 py-3 border-b border-white/10">
            <div className="flex gap-1.5"><span className="w-3 h-3 rounded-full bg-red-500/80" /><span className="w-3 h-3 rounded-full bg-yellow-500/80" /><span className="w-3 h-3 rounded-full bg-green-500/80" /></div>
            <span className="text-xs text-white/50 flex items-center gap-2"><span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" /> zyphron.cloud</span>
            <div className="flex gap-1"><button onClick={()=>setZyKey(k=>k+1)} className="w-7 h-7 rounded-full bg-white/10 grid place-items-center text-white/60"><RefreshCw size={12} /></button><button onClick={()=>setZyFull(true)} className="w-7 h-7 rounded-full bg-white text-black grid place-items-center"><Maximize2 size={12} /></button></div>
          </div>
          <div className="h-[360px] bg-white"><iframe key={zyKey} src="https://zyphron.cloud/" title="Live Zyphron Cloud" className="w-full h-full border-0" loading="lazy" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox" /></div>
          <div className="px-4 py-2 flex justify-between text-xs text-white/30 border-t border-white/10"><span>● LIVE • zyphron.cloud</span><a href="https://zyphron.cloud" target="_blank" rel="noopener noreferrer" className="text-blue-400">OPEN LIVE WEBSITE ↗</a></div>
        </div>
        {zyFull && <div className="fixed inset-0 z-40 bg-black/80 backdrop-blur flex flex-col"><div className="flex justify-between items-center px-4 py-3 bg-[#0e1118] border-b border-white/10"><span className="text-xs text-white/60">zyphron.cloud</span><button onClick={()=>setZyFull(false)} className="w-8 h-8 rounded-full bg-white/10 grid place-items-center text-white"><X size={16} /></button></div><div className="flex-1 bg-white"><iframe src="https://zyphron.cloud/" title="Zyphron fullscreen" className="w-full h-full border-0" /></div></div>}
      </section>

      {/* GRAPH */}
      <section className="py-8 max-w-[900px] mx-auto px-6 sm:px-8 text-center">
        <h2 className="text-xl font-bold text-white">EVERYTHING CONNECTS.</h2>
        <div className="mt-4 flex flex-col items-center gap-1.5 font-mono text-xs">
          {["React","Next.js","Node.js","PostgreSQL","Linux","Docker","Infrastructure","ZYPHRON CLOUD"].map(s=>(
            <div key={s} className="flex flex-col items-center gap-1.5">
              <span className={`px-3 py-1 rounded-full border ${s==="ZYPHRON CLOUD" ? "bg-[#2563eb] text-white border-blue-500" : "bg-white/5 border-white/10 text-white/60"}`}>{s}</span><span className="w-px h-3 bg-white/15" />
            </div>
          ))}
        </div>
      </section>

      {/* CURRENT + FAVORITES + TIMELINE */}
      <section className="max-w-[1100px] mx-auto px-6 sm:px-8 py-6 border-t border-white/10 grid sm:grid-cols-3 gap-4">
        <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-5">
          <p className="text-xs tracking-widest text-white/30 uppercase">Current Setup</p>
          <p className="text-sm text-white/60 mt-1">Only currently used tools shown when filtered.</p>
          <p className="text-xs text-white/20 mt-2">Last updated: August 2026 (editable)</p>
        </div>
        <div className="rounded-2xl border border-amber-500/20 bg-amber-500/10 p-5">
          <p className="text-xs tracking-widest text-amber-300">★ FAVORITES</p>
          <div className="mt-2 flex flex-wrap gap-1.5">{tools.filter(t=>t.favorite).slice(0,6).map(t=> <span key={t.name} className="px-2 py-1 rounded-full bg-white text-black text-xs font-semibold">{t.name}</span>)}</div>
        </div>
        <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-5">
          <p className="text-xs tracking-widest text-white/30 uppercase">How setup evolved</p>
          <div className="mt-2 space-y-1 text-sm text-white/60">{setupTimeline.map(s=> <div key={s.label} className="flex gap-2"><span className="font-semibold text-white">{s.label}</span><span>→ {s.desc}</span></div>)}</div>
        </div>
      </section>

      {/* FINAL */}
      <section className="py-16 sm:py-20 text-center border-t border-white/10 bg-gradient-to-b from-white/[0.04] to-transparent">
        <p className="text-[11px] tracking-[0.2em] text-white/30 uppercase">The toolkit changes.</p>
        <h2 className="mt-2 text-[32px] sm:text-[52px] font-[800] tracking-[-0.04em] text-white leading-none">THE WORK DOESN&apos;T STOP.</h2>
        <p className="text-white/50 mt-2">Tools evolve. Projects change. The setup gets better.</p>
        <p className="text-sm font-semibold text-white mt-2">THIS IS THE SYSTEM BEHIND THE WORK.</p>
        <div className="mt-6 flex flex-wrap justify-center gap-3">
          <Link href="/work" className="px-6 py-3 rounded-full bg-white text-black font-semibold">Explore My Work →</Link>
          <Link href="/skills" className="px-6 py-3 rounded-full border border-white/15 text-white font-semibold">View My Skills →</Link>
          <a href="https://zyphron.cloud" target="_blank" rel="noopener noreferrer" className="px-6 py-3 rounded-full bg-[#2563eb] text-white font-semibold">Visit Zyphron Cloud ↗</a>
        </div>
      </section>

      {/* MODAL */}
      <AnimatePresence>
        {sel && (
          <motion.div initial={{ opacity:0 }} animate={{ opacity:1 }} exit={{ opacity:0 }} className="fixed inset-0 z-40 flex justify-end">
            <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={()=>setSelected(null)} />
            <motion.div initial={{ x:"100%" }} animate={{ x:0 }} exit={{ x:"100%" }} transition={{ type:"spring", damping:28, stiffness:300 }} className="relative w-full max-w-[420px] bg-[#0f1117] border-l border-white/10 p-6 sm:p-8 overflow-auto">
              <button onClick={()=>setSelected(null)} className="absolute top-4 right-4 w-8 h-8 rounded-full bg-white/10 grid place-items-center text-white"><X size={14} /></button>
              <p className="text-[11px] tracking-widest text-blue-300">{sel.category} • {sel.current ? "CURRENT" : "PREVIOUSLY"}</p>
              <h3 className="mt-1 text-2xl font-bold text-white flex items-center gap-2">{sel.name} {sel.favorite && <Star size={14} className="fill-amber-400 text-amber-400" />}</h3>
              <p className="text-sm text-white/60 mt-2">{sel.desc}</p>
              <p className="text-sm text-white/40 mt-2"><b className="text-white/60">Why:</b> {sel.why}</p>
              <p className="text-sm text-white/60 mt-2"><b>Purpose:</b> {sel.purpose}</p>
              <p className="text-xs text-white/30 mt-3">Projects: {sel.projects.join(" • ") || "—"}</p>
              {sel.website && <a href={sel.website} target="_blank" rel="noopener noreferrer" className="mt-4 inline-flex px-4 py-2 rounded-full bg-white text-black font-semibold text-sm">Visit Website ↗</a>}
              <Link href="/work" onClick={()=>setSelected(null)} className="mt-3 ml-2 inline-flex px-4 py-2 rounded-full border border-white/15 text-white font-semibold text-sm">View Projects →</Link>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}