// @ts-nocheck
"use client";
import { useState, useEffect, useRef, useMemo } from "react";
import Link from "next/link";
import { motion, AnimatePresence, useScroll, useTransform } from "framer-motion";
import { ArrowUpRight, Search, X, Maximize2, RefreshCw, ExternalLink } from "lucide-react";
import { projects as staticProjects } from "@/lib/projects";

const mainFilters = ["ALL","WEB","APPS","CLOUD","INFRASTRUCTURE","AUTOMATION","BUSINESS","EXPERIMENTS"] as const;
const techFilters = ["All","React","Next.js","Node.js","PHP","Laravel","Linux","Docker","PostgreSQL","Redis","Pterodactyl"] as const;
const yearFilters = ["All","2025","2026","Present"] as const;

function getStatus(p: any) {
  if (p.slug === "zyphron-cloud" || String(p.year).includes("Present")) return "ACTIVE";
  const tags = p.tags || (p.category ? p.category.split(" / ") : []);
  if (tags.includes("Experiments") || String(p.category).includes("Experiments")) return "EXPERIMENT";
  return "COMPLETED";
}

export default function WorkClient({ initialProjects }: { initialProjects?: any[] }) {
  const projects = (initialProjects !== undefined ? initialProjects : staticProjects as any) as any[];
  const [filter, setFilter] = useState<string>("ALL");
  const [tech, setTech] = useState("All");
  const [year, setYear] = useState("All");
  const [q, setQ] = useState("");
  const [searchOpen, setSearchOpen] = useState(false);
  const [hovered, setHovered] = useState<string | null>(null);
  const [mouse, setMouse] = useState({ x: 0, y: 0 });
  const [count, setCount] = useState(0);
  const [zyFull, setZyFull] = useState(false);
  const [zyKey, setZyKey] = useState(0);
  const heroRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
  const heroScale = useTransform(scrollYProgress, [0, 1], [1, 0.95]);
  const heroOpacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
  const archiveRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const t = setInterval(() => setCount(c => c < projects.length ? c + 1 : c), 120);
    return () => clearInterval(t);
  }, []);

  useEffect(() => {
    const onMove = (e: MouseEvent) => setMouse({ x: e.clientX, y: e.clientY });
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => { if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setSearchOpen(true); } if (e.key === "/") { e.preventDefault(); setSearchOpen(true); } };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const filtered = useMemo(() => {
    return projects.filter(p => {
      const f = filter === "ALL" ? true : p.tags.some(t => t.toUpperCase().includes(filter)) || p.category.toUpperCase().includes(filter) || (filter === "APPS" && p.category.toUpperCase().includes("APP"));
      const tf = tech === "All" ? true : p.tech.some(t => t.toLowerCase() === tech.toLowerCase()) || p.tags.some(t => t.toLowerCase() === tech.toLowerCase());
      const yf = year === "All" ? true : p.year.includes(year) || (year === "Present" && p.year.includes("Present"));
      const sq = q.trim().toLowerCase();
      const sf = !sq ? true : [p.title, p.description, p.category, p.year, ...p.tags, ...p.tech].join(" ").toLowerCase().includes(sq);
      return f && tf && yf && sf;
    });
  }, [filter, tech, year, q]);

  const featured = projects.find(p => p.slug === "zyphron-cloud")!;
  const other = filtered.filter(p => p.slug !== featured.slug || filter !== "ALL" || tech !== "All" || year !== "All" || q);

  return (
    <div className="bg-[#07080c] overflow-hidden">
      {/* HERO */}
      <section ref={heroRef} className="relative min-h-[88vh] 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>
        <motion.div style={{ scale: heroScale, opacity: heroOpacity }} className="relative max-w-[1200px] mx-auto px-6 sm:px-8 pt-28 sm:pt-32 pb-8 text-center w-full">
          <p className="text-[11px] tracking-[0.2em] font-semibold text-white/30 uppercase">Selected Work</p>
          <h1 className="mt-3 text-[40px] sm:text-[68px] lg:text-[80px] font-[800] tracking-[-0.05em] leading-[0.85] text-white">THINGS I&apos;VE BUILT.</h1>
          <p className="mt-2 text-[15px] sm:text-[18px] tracking-tight text-white/40">Products. Platforms. Systems. Experiments.</p>
          <p className="mt-3 max-w-[600px] mx-auto text-[14px] leading-relaxed text-white/50">A collection of projects, infrastructure and digital experiences I&apos;ve built and worked on.</p>
          <div className="mt-6 inline-flex items-center gap-3 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2">
            <span className="text-[11px] tracking-[0.15em] text-white/30">PROJECTS</span>
            <span className="text-[22px] font-mono font-bold text-white tabular-nums">{String(count).padStart(2,"0")}</span>
            <span className="text-white/20">/</span>
            <span className="text-[11px] tracking-widest text-white/40">{String(projects.length).padStart(2,"0")} TOTAL</span>
            <span className="w-px h-4 bg-white/10 mx-1 hidden sm:block" />
            <span className="hidden sm:inline text-[11px] text-white/30">Actual count • not fabricated</span>
          </div>
        </motion.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]">SCROLL TO EXPLORE</span><span className="w-px h-10 bg-gradient-to-b from-white/30 to-transparent animate-pulse" /></div>
      </section>

      {/* FEATURED */}
      <section className="relative py-10 sm:py-14 max-w-[1200px] mx-auto px-6 sm:px-8">
        <div className="flex flex-wrap items-center gap-3">
          <span className="text-[11px] tracking-[0.15em] font-semibold px-3 py-1 rounded-full bg-white text-black">01 / FEATURED</span>
          <span className="text-[11px] tracking-widest text-emerald-400 flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" /> ACTIVE</span>
          <span className="text-[11px] text-white/30">2025 — Present • Founder / Developer</span>
        </div>
        <div className="mt-4 grid lg:grid-cols-[1.1fr_0.9fr] gap-6 sm:gap-8 items-start">
          <div>
            <h2 className="text-[34px] sm:text-[48px] font-[800] tracking-[-0.04em] leading-[0.9] text-white">ZYPHRON CLOUD</h2>
            <p className="mt-3 text-[11px] tracking-[0.12em] text-white/30 uppercase">Cloud / Hosting / Infrastructure / Business</p>
            <p className="mt-3 text-[14px] leading-relaxed text-white/60 max-w-[520px]">Cloud infrastructure and hosting platform built around servers, automation, customer experience and scalable digital infrastructure.</p>
            <div className="mt-5 grid grid-cols-2 gap-3 max-w-[520px] text-[12px]">
              <div className="rounded-xl bg-white/[0.04] border border-white/10 p-3"><p className="tracking-widest text-white/30 text-[11px]">ROLE</p><p className="text-white font-medium">Founder / Developer</p></div>
              <div className="rounded-xl bg-white/[0.04] border border-white/10 p-3"><p className="tracking-widest text-white/30 text-[11px]">TYPE</p><p className="text-white font-medium">Cloud Infrastructure</p></div>
              <div className="rounded-xl bg-white/[0.04] border border-white/10 p-3"><p className="tracking-widest text-white/30 text-[11px]">YEAR</p><p className="text-white font-medium">2025–Present</p></div>
              <div className="rounded-xl bg-emerald-500/10 border border-emerald-500/20 p-3"><p className="tracking-widest text-emerald-300 text-[11px]">STATUS</p><p className="text-emerald-300 font-medium">● Active</p></div>
            </div>
            <div className="mt-4 flex flex-wrap gap-1.5 max-w-[520px]"><span className="text-[11px] tracking-widest text-white/30 uppercase mr-1">Stack:</span>{featured.tech.map(t=><span key={t} className="px-2.5 py-1 rounded-full bg-white text-black text-xs font-semibold">{t}</span>)}</div>
            <div className="mt-6 flex flex-wrap gap-3">
              <a href="https://zyphron.cloud" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 bg-[#2563eb] text-white px-5 py-2.5 rounded-full font-semibold text-sm">LIVE WEBSITE <ArrowUpRight size={14} /></a>
              <Link href="/work/zyphron-cloud" className="inline-flex items-center gap-2 bg-white text-black px-5 py-2.5 rounded-full font-semibold text-sm">CASE STUDY <ArrowUpRight size={14} /></Link>
              <button onClick={()=>setZyFull(true)} className="inline-flex items-center gap-2 border border-white/15 text-white px-5 py-2.5 rounded-full font-semibold text-sm hover:bg-white/10"><Maximize2 size={14} /> Fullscreen</button>
            </div>
          </div>
          <div className="relative rounded-[18px] border border-white/10 bg-[#0e1118] overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.5)]">
            <div className="flex items-center justify-between px-4 py-3 bg-[#0e1118] 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 hover:text-white"><RefreshCw size={12} /></button><a href="https://zyphron.cloud" target="_blank" rel="noopener noreferrer" className="w-7 h-7 rounded-full bg-white text-black grid place-items-center"><ExternalLink size={12} /></a></div>
            </div>
            <div className="h-[340px] sm:h-[420px] bg-white">
              <iframe key={zyKey} src="https://zyphron.cloud/" title="Live preview of 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 bg-[#0e1118] border-t border-white/10"><span>● LIVE • zyphron.cloud</span><span className="hidden sm:inline">Founder / Developer • 2025–Present</span></div>
          </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 • Fullscreen</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>

      {/* FILTER BAR sticky */}
      <div className="sticky top-[68px] z-20 backdrop-blur-xl bg-[#07080c]/80 border-y border-white/10">
        <div className="max-w-[1200px] mx-auto px-6 sm:px-8 py-3 flex flex-col lg:flex-row gap-3 items-start lg:items-center justify-between">
          <div className="flex flex-wrap gap-1.5">
            {mainFilters.map(f=>(
              <button key={f} onClick={()=>setFilter(f)} className={`px-3.5 py-1.5 rounded-full text-xs font-semibold border transition ${filter===f ? "bg-white text-black border-white" : "bg-white/5 border-white/10 text-white/60 hover:text-white hover:bg-white/10"}`}>{f}</button>
            ))}
          </div>
          <div className="flex items-center gap-2">
            <button onClick={()=>setSearchOpen(true)} className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white text-black text-xs font-semibold"><Search size={12} /> Search</button>
            <span className="text-xs text-white/30 hidden sm:inline">⌘K or /</span>
            <span className="text-xs text-white/30">{filtered.length} projects</span>
          </div>
        </div>
        <div className="max-w-[1200px] mx-auto px-6 sm:px-8 pb-3 flex flex-wrap gap-2">
          <span className="text-[11px] tracking-widest text-white/20 py-1">FILTER BY TECH:</span>
          {techFilters.map(t=><button key={t} onClick={()=>setTech(t)} className={`px-3 py-1 rounded-full text-xs font-medium border ${tech===t ? "bg-blue-500 text-white border-blue-500" : "bg-white/5 border-white/10 text-white/50 hover:text-white"}`}>{t}</button>)}
        </div>
        <div className="max-w-[1200px] mx-auto px-6 sm:px-8 pb-3 flex flex-wrap gap-2">
          <span className="text-[11px] tracking-widest text-white/20 py-1">YEAR:</span>
          {yearFilters.map(y=> <button key={y} onClick={()=>setYear(y)} className={`px-3 py-1 rounded-full text-xs font-medium border ${year===y ? "bg-white text-black border-white" : "bg-white/5 border-white/10 text-white/50"}`}>{y}</button>)}
        </div>
      </div>

      {/* SEARCH modal */}
      <AnimatePresence>
        {searchOpen && (
          <motion.div initial={{ opacity:0 }} animate={{ opacity:1 }} exit={{ opacity:0 }} className="fixed inset-0 z-30 flex items-start justify-center pt-[20vh] px-4">
            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={()=>setSearchOpen(false)} />
            <div className="relative w-full max-w-[640px] rounded-2xl bg-[#0f1117] border border-white/10 overflow-hidden">
              <div className="flex items-center gap-3 px-4 py-3 border-b border-white/10">
                <Search size={16} className="text-white/40" />
                <input autoFocus value={q} onChange={e=>setQ(e.target.value)} placeholder="Search my work — try Linux, React, 2025…" className="flex-1 bg-transparent outline-none text-sm text-white placeholder:text-white/30" />
                <button onClick={()=>setSearchOpen(false)} className="text-xs tracking-widest text-white/30 px-2 py-1 border border-white/10 rounded-full">ESC</button>
              </div>
              <div className="max-h-[40vh] overflow-auto p-2">
                {filtered.slice(0,8).map(p=>(
                  <Link key={p.slug} href={`/work/${p.slug}`} onClick={()=>setSearchOpen(false)} className="flex justify-between items-center px-3 py-2.5 rounded-xl hover:bg-white hover:text-black text-white text-sm">
                    <span><span className="font-semibold">{p.title}</span> <span className="text-white/40 text-xs">— {p.category}</span></span><ArrowUpRight size={14} />
                  </Link>
                ))}
                {filtered.length===0 && <p className="text-center text-white/30 py-8 text-sm">NOTHING FOUND. Try another project, category or technology.</p>}
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* ARCHIVE list */}
      <section ref={archiveRef} className="max-w-[1200px] mx-auto px-6 sm:px-8 py-8">
        <div className="flex justify-between items-end">
          <h2 className="text-[11px] tracking-[0.2em] text-white/30 uppercase">Project Archive</h2>
          <span className="text-xs text-white/20 hidden sm:inline">Hover for preview • Click for case study</span>
        </div>
        <div className="mt-4 divide-y divide-white/10 border-y border-white/10">
          {filtered.map((p,i)=>(
            <Link key={p.slug} href={`/work/${p.slug}`} onMouseEnter={()=>setHovered(p.slug)} onMouseLeave={()=>setHovered(null)} className="group flex items-center gap-4 py-5 sm:py-6 hover:bg-white/[0.03] px-2 sm:px-3 -mx-2 sm:-mx-3 transition">
              <span className="text-[11px] font-mono text-white/20 w-8 shrink-0">{String(i+1).padStart(2,"0")}</span>
              <div className="flex-1 min-w-0">
                <h3 className="text-[18px] sm:text-[22px] font-[700] tracking-tight text-white group-hover:translate-x-1 transition">{p.title.toUpperCase()}</h3>
                <p className="text-xs tracking-widest text-white/30 uppercase mt-0.5">{p.category} • {p.year}</p>
                <p className="text-[13px] text-white/50 line-clamp-1 hidden sm:block mt-1">{p.description}</p>
                <div className="mt-2 flex flex-wrap gap-1.5 sm:hidden">{p.tags.slice(0,3).map(t=><span key={t} className="text-[10px] px-2 py-1 rounded-full bg-white/10 border border-white/10 text-white/60">{t}</span>)}</div>
              </div>
              <span className={`hidden sm:inline-flex text-[10px] tracking-widest px-2 py-1 rounded-full border font-semibold shrink-0 ${getStatus(p)==="ACTIVE" ? "bg-emerald-500/15 border-emerald-500/20 text-emerald-300" : getStatus(p)==="EXPERIMENT" ? "bg-amber-500/15 border-amber-500/20 text-amber-300" : "bg-white/5 border-white/10 text-white/40"}`}>● {getStatus(p)}</span>
              <span className="w-8 h-8 rounded-full border border-white/10 bg-white/5 grid place-items-center text-white/40 group-hover:bg-white group-hover:text-black group-hover:translate-x-1 transition shrink-0"><ArrowUpRight size={14} /></span>
            </Link>
          ))}
        </div>
        {filtered.length===0 && (
          <div className="py-16 text-center">
            <h3 className="text-2xl font-bold text-white">NOTHING FOUND.</h3>
            <p className="text-white/50 text-sm mt-2">Try another project, category or technology.</p>
            <button onClick={()=>{setFilter("ALL"); setTech("All"); setYear("All"); setQ("");}} className="mt-4 px-5 py-2 rounded-full bg-white text-black font-semibold text-sm">Clear filters</button>
          </div>
        )}
      </section>

      {/* hover preview */}
      <AnimatePresence>
        {hovered && (
          <motion.div style={{ left: mouse.x + 16, top: mouse.y + 16 }} initial={{ opacity:0, scale:0.96 }} animate={{ opacity:1, scale:1 }} exit={{ opacity:0, scale:0.96 }} className="pointer-events-none fixed z-20 hidden lg:block w-[320px] rounded-2xl border border-white/15 bg-[#0f1117] overflow-hidden shadow-2xl">
            {(() => {
              const p = projects.find(x=>x.slug===hovered);
              if (!p) return null;
              return (
                <div>
                  <div className={`h-28 bg-gradient-to-br ${p.accent} relative`}><div className="absolute inset-0 grid-pattern opacity-20" /><span className="absolute top-3 left-3 text-[11px] px-2 py-1 rounded-full bg-white text-black font-semibold">{p.year}</span></div>
                  <div className="p-4"><p className="font-semibold text-white text-sm">{p.title}</p><p className="text-xs text-white/50 mt-1 line-clamp-2">{p.description}</p><div className="mt-2 flex gap-1 flex-wrap">{p.tags.slice(0,3).map(t=><span key={t} className="text-[10px] px-2 py-1 rounded-full bg-white text-black font-semibold">{t}</span>)}</div></div>
                </div>
              );
            })()}
          </motion.div>
        )}
      </AnimatePresence>

      {/* FEATURED GRID varying sizes */}
      <section className="max-w-[1200px] mx-auto px-6 sm:px-8 py-8">
        <h2 className="text-[11px] tracking-[0.2em] text-white/30 uppercase">Featured Grid</h2>
        <div className="mt-4 grid lg:grid-cols-3 gap-4">
          {/* large */}
          <Link href={`/work/${filtered[0]?.slug || "zyphron-cloud"}`} className="lg:col-span-2 rounded-[24px] border border-white/10 bg-white/[0.04] overflow-hidden group">
            <div className={`h-48 bg-gradient-to-br ${filtered[0]?.accent || "from-blue-600/20 to-transparent"} relative`}><div className="absolute inset-0 grid-pattern opacity-20" /><span className="absolute top-4 left-4 text-xs px-2 py-1 rounded-full bg-white text-black font-bold">01</span></div>
            <div className="p-6"><h3 className="font-bold text-white">{filtered[0]?.title || "Zyphron Cloud"}</h3><p className="text-xs tracking-widest text-white/30 uppercase">{filtered[0]?.category}</p><p className="text-sm text-white/50 mt-1 line-clamp-2">{filtered[0]?.description}</p><span className="mt-3 inline-flex text-sm font-semibold text-white group-hover:gap-2 gap-1">Explore <ArrowUpRight size={14} /></span></div>
          </Link>
          {/* two medium */}
          {filtered.slice(1,3).map((p,idx)=>(
            <Link key={p.slug} href={`/work/${p.slug}`} className="rounded-[24px] border border-white/10 bg-white/[0.04] overflow-hidden group">
              <div className={`h-40 bg-gradient-to-br ${p.accent} relative`}><span className="absolute top-3 left-3 text-xs px-2 py-1 rounded-full bg-white text-black font-bold">0{idx+2}</span></div>
              <div className="p-5"><h3 className="font-semibold text-white text-sm">{p.title}</h3><p className="text-xs text-white/40">{p.year}</p><p className="text-xs text-white/50 mt-1 line-clamp-2">{p.description}</p></div>
            </Link>
          ))}
          {/* full width */}
          {filtered[3] && (
            <Link href={`/work/${filtered[3].slug}`} className="lg:col-span-3 rounded-[24px] border border-white/10 bg-white/[0.04] overflow-hidden flex flex-col sm:flex-row group">
              <div className={`sm:w-[420px] h-40 sm:h-auto bg-gradient-to-br ${filtered[3].accent} shrink-0 relative`}><span className="absolute top-3 left-3 text-xs px-2 py-1 rounded-full bg-white text-black font-bold">04</span></div>
              <div className="p-6 flex-1"><h3 className="font-bold text-white">{filtered[3].title}</h3><p className="text-xs tracking-widest text-white/30 uppercase">{filtered[3].category}</p><p className="text-sm text-white/50 mt-2">{filtered[3].description}</p></div>
            </Link>
          )}
        </div>
      </section>

      {/* EXPERIMENTS */}
      <section className="max-w-[1200px] mx-auto px-6 sm:px-8 py-8 border-t border-white/10">
        <h2 className="text-[22px] font-bold text-white">EXPERIMENTS</h2>
        <p className="text-sm text-white/50">Smaller projects and prototypes — different visual treatment.</p>
        <div className="mt-4 grid sm:grid-cols-3 gap-3">
          {projects.filter(p=> p.category.toLowerCase().includes("experiment") || p.tags.includes("Experiments") || !p.featured).slice(0,3).map(p=>(
            <div key={p.slug} className="rounded-2xl border border-dashed border-white/15 bg-white/[0.02] p-5">
              <p className="text-xs tracking-widest text-white/30">{p.category}</p><p className="font-semibold text-white mt-1">{p.title}</p><p className="text-xs text-white/50 mt-1">{p.description.slice(0,80)}…</p><Link href={`/work/${p.slug}`} className="mt-3 inline-flex text-xs font-semibold text-white underline">View →</Link>
            </div>
          ))}
        </div>
      </section>

      {/* CURRENTLY BUILDING */}
      <section className="max-w-[1200px] mx-auto px-6 sm:px-8 py-8 border-t border-white/10">
        <h2 className="text-[22px] font-bold text-white">CURRENTLY BUILDING</h2>
        <div className="mt-4 rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-6 flex flex-col sm:flex-row justify-between gap-4 items-start sm:items-center">
          <div><p className="font-bold text-white flex items-center gap-2"><span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" /> Zyphron Cloud <span className="text-xs px-2 py-0.5 rounded-full bg-emerald-500 text-white">● ACTIVE</span></p><p className="text-sm text-white/70 mt-1">Continuously improving infrastructure, services and the customer experience.</p></div>
          <a href="https://zyphron.cloud" target="_blank" rel="noopener noreferrer" className="px-5 py-2.5 rounded-full bg-white text-black font-semibold text-sm shrink-0">Follow the project →</a>
        </div>
      </section>

      {/* CAROUSEL MORE WORK */}
      <section className="py-8 border-t border-white/10 overflow-hidden">
        <div className="max-w-[1200px] mx-auto px-6 sm:px-8 flex justify-between items-end"><h2 className="text-[11px] tracking-[0.2em] text-white/30 uppercase">More Work</h2><span className="text-xs text-white/20">Horizontal scroll</span></div>
        <div className="mt-4 flex gap-4 overflow-x-auto snap-x snap-mandatory px-6 sm:px-8 pb-4 scrollbar-thin">
          {projects.map((p,i)=>(
            <Link key={p.slug} href={`/work/${p.slug}`} className="snap-start shrink-0 w-[300px] rounded-2xl border border-white/10 bg-white/[0.04] overflow-hidden group">
              <div className={`h-36 bg-gradient-to-br ${p.accent} relative`}><span className="absolute top-3 left-3 text-xs font-mono text-white/60">0{i+1}</span></div>
              <div className="p-4"><p className="font-semibold text-white text-sm">{p.title}</p><p className="text-xs text-white/40">{p.category}</p><span className="text-xs font-semibold text-white inline-flex items-center gap-1 mt-2">View <ArrowUpRight size={12} /></span></div>
            </Link>
          ))}
        </div>
      </section>

      {/* FROM IDEA */}
      <section className="py-16 text-center border-t border-white/10">
        <h2 className="text-[28px] sm:text-[48px] font-[800] tracking-[-0.04em] text-white leading-none">FROM IDEA<br /><span className="bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent">TO SOMETHING REAL.</span></h2>
        <p className="text-white/50 text-sm mt-3">Zyphron Cloud — from experiment to platform.</p>
      </section>

      {/* FINAL CTA */}
      <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">What&apos;s next?</p>
        <h2 className="mt-2 text-[32px] sm:text-[52px] font-[800] tracking-[-0.04em] text-white">LET&apos;S BUILD SOMETHING.</h2>
        <p className="text-white/50 mt-2">Have an idea, project or problem worth solving?</p>
        <div className="mt-6 flex flex-wrap justify-center gap-3">
          <Link href="/contact" className="px-6 py-3 rounded-full bg-white text-black font-semibold">Start a conversation →</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>
    </div>
  );
}