"use client";
import { useEffect, useState, useRef } from "react";
import Link from "next/link";
import { motion, AnimatePresence, useScroll, useTransform } from "framer-motion";
import { ArrowUpRight, X, Maximize2, RefreshCw } from "lucide-react";
import { journey } from "@/lib/experience";

const navItems = [
  { label: "INTRO", year: "2025" },
  { label: "BEGINNING", year: "2025" },
  { label: "BUILDING", year: "2025-26" },
  { label: "INFRA", year: "2026" },
  { label: "ZYPHRON", year: "2025" },
  { label: "LESSONS", year: "•" },
  { label: "NOW", year: "NOW" },
  { label: "NEXT", year: "NEXT" },
];

export default function ExperienceClient() {
  const [activeStep, setActiveStep] = useState(0);
  const [activeNav, setActiveNav] = useState(0);
  const [expanded, setExpanded] = useState<string | null>(null);
  const [zyFull, setZyFull] = useState(false);
  const [zyKey, setZyKey] = useState(0);
  const [journeyIdx, setJourneyIdx] = 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.94]);
  const heroOpacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
  const refs = useRef<(HTMLElement | null)[]>([]);

  useEffect(() => {
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { const idx = Number(e.target.getAttribute("data-nav")); if (!isNaN(idx)) setActiveNav(idx); }});
    }, { threshold: 0.35 });
    refs.current.forEach(el => el && obs.observe(el));
    return () => obs.disconnect();
  }, []);

  useEffect(() => {
    const onScroll = () => {
      const el = document.getElementById("horiz-journey");
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const progress = Math.min(1, Math.max(0, (window.innerHeight * 0.5 - rect.top) / rect.height));
      setJourneyIdx(Math.floor(progress * 6));
      const el2 = document.getElementById("how-i-work-exp");
      if (el2) {
        const r2 = el2.getBoundingClientRect();
        const p2 = Math.max(0, Math.min(1, (window.innerHeight * 0.5 - r2.top) / r2.height));
        setActiveStep(Math.floor(p2 * 6));
      }
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  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">
      {/* page transition */}
      <motion.div initial={{ opacity: 1 }} animate={{ opacity: 0 }} transition={{ duration: 0.6, delay: 0.3 }} className="pointer-events-none fixed inset-0 z-30 bg-[#07080c] grid place-items-center"><p className="text-[11px] tracking-[0.3em] text-white/30">EXPERIENCE</p></motion.div>

      {/* floating nav right */}
      <div className="fixed right-3 sm:right-4 top-1/2 -translate-y-1/2 hidden lg:flex flex-col gap-2.5 z-20">
        {navItems.map((n,i)=>(
          <button key={n.label+i} onClick={()=> refs.current[i]?.scrollIntoView({ behavior:"smooth" })} className={`flex items-center gap-2 group ${activeNav===i ? "opacity-100" : "opacity-40 hover:opacity-70"}`}>
            <span className="text-[10px] tracking-widest text-white/60 hidden group-hover:inline">{n.year}</span>
            <span className={`w-2 h-2 rounded-full border ${activeNav===i ? "bg-white border-white shadow-[0_0_10px_rgba(255,255,255,0.5)]" : "bg-transparent border-white/40"}`} />
            <span className={`text-[10px] tracking-[0.15em] font-semibold ${activeNav===i ? "text-white" : "text-white/40"}`}>{n.label}</span>
          </button>
        ))}
        <div className="w-px h-12 bg-gradient-to-b from-white/30 to-transparent ml-[3px] mt-1" />
      </div>
      {/* mobile horizontal progress */}
      <div className="fixed top-[68px] left-0 right-0 z-20 lg:hidden flex gap-1.5 px-4 py-2 bg-[#07080c]/80 backdrop-blur border-b border-white/10 overflow-x-auto">
        {navItems.map((n,i)=><button key={n.label+i} onClick={()=> refs.current[i]?.scrollIntoView({ behavior:"smooth" })} className={`shrink-0 px-3 py-1 rounded-full text-[11px] font-semibold border ${activeNav===i ? "bg-white text-black border-white" : "bg-white/5 border-white/10 text-white/50"}`}>{n.label}</button>)}
      </div>

      {/* 01 HERO */}
      <section ref={heroRef} data-nav={0} className="relative min-h-[100vh] 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.04]" 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-[1100px] mx-auto px-6 sm:px-8 pt-24 pb-10 text-center">
          <p className="text-[11px] tracking-[0.2em] font-semibold text-white/30 uppercase">Experience / Journey</p>
          <h1 className="mt-3 text-[44px] sm:text-[72px] lg:text-[84px] font-[800] tracking-[-0.05em] leading-[0.85] text-white">HOW I GOT HERE.</h1>
          <p className="mt-3 text-[16px] sm:text-[18px] text-white/60">A timeline of building, learning and experimenting.</p>
          <p className="mt-2 text-[13px] leading-relaxed text-white/40 max-w-[640px] mx-auto">From writing my first projects to building infrastructure and running Zyphron Cloud.</p>
        </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>

      {/* 04 BEGINNING */}
      <section ref={el=>{refs.current[1]=el}} data-nav={1} className="py-14 sm:py-20 border-t border-white/10 max-w-[1000px] mx-auto px-6 sm:px-8">
        <motion.p initial={{ opacity:0, scale:0.9, filter:"blur(8px)" }} whileInView={{ opacity:1, scale:1, filter:"blur(0px)" }} viewport={{ once:true }} className="text-[72px] sm:text-[120px] font-[800] tracking-[-0.06em] leading-none text-white/10">2025</motion.p>
        <h2 className="mt-2 text-[28px] sm:text-[40px] font-[800] tracking-[-0.04em] text-white">STARTING TO BUILD.</h2>
        <p className="text-white/60 mt-2 max-w-[640px] leading-relaxed">The beginning of the journey into technology, development and experimentation.</p>
        <div className="mt-6 grid sm:grid-cols-3 gap-3 text-sm">
          {["Learning technology","Building early projects","Experimenting with websites","Exploring servers","Learning how systems work"].map((s,i)=>(
            <motion.div key={s} initial={{ opacity:0, y:12 }} whileInView={{ opacity:1, y:0 }} viewport={{ once:true }} transition={{ delay:i*0.05 }} className="rounded-2xl border border-white/10 bg-white/[0.04] p-4 text-white/70">{s}</motion.div>
          ))}
        </div>
        <p className="text-[11px] text-white/20 mt-3">Editable — no invented events.</p>
      </section>

      {/* 05 horizontal journey */}
      <section id="horiz-journey" className="py-10 border-t border-white/10 overflow-hidden">
        <div className="max-w-[1000px] mx-auto px-6 sm:px-8">
          <div className="flex gap-2 overflow-x-auto pb-2 snap-x">
            {["LEARN","EXPERIMENT","BUILD","BREAK","FIX","IMPROVE"].map((s,i)=>(
              <button key={s} onClick={()=>setJourneyIdx(i)} className={`shrink-0 snap-start px-6 py-4 rounded-2xl border font-bold tracking-widest text-sm transition ${i===journeyIdx ? "bg-white text-black border-white" : i < journeyIdx ? "bg-white/10 border-white/20 text-white/80" : "bg-white/[0.04] border-white/10 text-white/30"}`}>{s}</button>
            ))}
          </div>
          <p className="text-sm text-white/50 mt-3 text-center">{["Learn fundamentals","Try and tinker","Ship something real","Things break — learn","Fix and harden","Iterate forever"][journeyIdx]}</p>
        </div>
      </section>

      {/* 06 early builds */}
      <section className="py-12 border-t border-white/10 max-w-[1000px] mx-auto px-6 sm:px-8">
        <h2 className="text-xl font-bold text-white">EARLY BUILDS.</h2>
        <p className="text-white/40 text-sm">Data-driven — populate later if needed.</p>
        <div className="mt-4 grid sm:grid-cols-3 gap-4">
          {[
            { name:"First website", year:"2025", tech:"HTML/CSS", learn:"Basics of layout" },
            { name:"Server experiment", year:"2025", tech:"Linux", learn:"SSH & logs" },
            { name:"Automation script", year:"2025", tech:"Node.js", learn:"Automate the boring" },
          ].map(p=>(
            <div key={p.name} className="rounded-2xl border border-white/10 bg-white/[0.04] p-5">
              <p className="text-xs tracking-widest text-white/30">{p.year} • {p.tech}</p><p className="font-semibold text-white mt-1">{p.name}</p><p className="text-xs text-white/40 mt-1">What I learned: {p.learn}</p>
            </div>
          ))}
        </div>
      </section>

      {/* 07 tech evolution */}
      <section data-nav={2} ref={el=>{refs.current[2]=el}} className="py-12 border-t border-white/10 max-w-[800px] mx-auto px-6 sm:px-8 text-center">
        <h2 className="text-xl font-bold text-white tracking-tight">TECH EVOLUTION</h2>
        <div className="mt-6 flex flex-col items-center gap-1.5 font-mono text-xs">
          {["WEB","JAVASCRIPT","REACT","NEXT.JS","BACKEND","LINUX","SERVERS","INFRASTRUCTURE","CLOUD"].map((s,i)=>(
            <motion.div key={s} initial={{ opacity:0, y:8 }} whileInView={{ opacity:1, y:0 }} viewport={{ once:true }} transition={{ delay:i*0.04 }} className={`px-4 py-2 rounded-full border ${s==="CLOUD" ? "bg-[#2563eb] text-white border-blue-500" : "bg-white/5 border-white/10 text-white/60"}`}>{s}</motion.div>
          ))}
        </div>
      </section>

      {/* 08 infrastructure turn */}
      <section className="py-16 text-center border-t border-white/10 relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(600px_300px_at_50%_50%,rgba(59,130,246,0.08),transparent_70%)]" />
        <div className="relative max-w-[900px] mx-auto px-6 sm:px-8">
          <h2 className="text-[28px] sm:text-[48px] font-[800] tracking-[-0.04em] text-white">THEN I WENT DEEPER.</h2>
          <p className="mt-2 text-white/60">From websites to servers.</p>
          <div className="mt-6 flex flex-wrap justify-center gap-2 text-xs">
            {["Linux","VPS","VDS","Networking","Server management","Docker","Hosting","Pterodactyl","Infrastructure"].map(s=> <span key={s} className="px-3 py-1.5 rounded-full bg-white/10 border border-white/10 text-white/70">{s}</span>)}
          </div>
        </div>
      </section>

      {/* 09 server viz */}
      <section className="py-8 max-w-[900px] mx-auto px-6 sm:px-8">
        <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-6 sm:p-8">
          <p className="text-[11px] tracking-widest text-white/30 uppercase text-center">Infrastructure — conceptual</p>
          <div className="mt-6 flex flex-col items-center gap-2 font-mono text-xs">
            <span className="px-4 py-2 rounded-full bg-blue-500 text-white">INTERNET</span>
            <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/70">ROUTER</span>
            <span className="w-px h-4 bg-white/20" />
            <div className="flex gap-3"><span className="px-4 py-2 rounded-full bg-white text-black font-semibold">SERVER 01</span><span className="px-4 py-2 rounded-full bg-white/10 border border-white/10 text-white/70">SERVER 02</span></div>
            <div className="flex gap-6 mt-2"><span className="px-3 py-1 rounded-full bg-emerald-500/20 border border-emerald-500/30 text-emerald-300 text-xs">GAME</span><span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">WEB</span><span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">VPS</span><span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">API</span></div>
            <p className="text-[11px] text-white/20 mt-2">Hover nodes for type/purpose/tech • fictional diagram</p>
          </div>
        </div>
      </section>

      {/* 10 zyphron */}
      <section data-nav={4} ref={el=>{refs.current[4]=el}} className="py-12 border-t border-white/10 max-w-[900px] mx-auto px-6 sm:px-8 text-center">
        <motion.p initial={{ scale:0.9, filter:"blur(8px)", opacity:0 }} whileInView={{ scale:1, filter:"blur(0px)", opacity:1 }} viewport={{ once:true }} className="text-[64px] sm:text-[100px] font-[800] tracking-[-0.06em] leading-none text-white/10">2025</motion.p>
        <h2 className="text-[32px] sm:text-[48px] font-[800] tracking-[-0.04em] text-white">ZYPHRON CLOUD</h2>
        <p className="text-white/60 mt-2 max-w-[600px] mx-auto">An idea became a platform. Idea → Infrastructure → Services → Customers → Platform.</p>
        <div className="mt-6 flex flex-wrap justify-center gap-2 text-xs">
          {["Idea","Infrastructure","Services","Customers","Platform"].map((s,i)=>(
            <span key={s} className={`px-4 py-2 rounded-full border ${s==="Platform" ? "bg-[#2563eb] text-white border-blue-500" : "bg-white/5 border-white/10 text-white/60"}`}>{s} {i<4 && "↓"}</span>
          ))}
        </div>
      </section>

      {/* 11 role */}
      <section className="py-8 max-w-[1000px] mx-auto px-6 sm:px-8">
        <h2 className="text-2xl font-bold text-white text-center">FOUNDER</h2>
        <div className="mt-6 grid sm:grid-cols-3 lg:grid-cols-5 gap-3">
          {[
            { t:"PRODUCT", d:"Building products and services." },
            { t:"TECHNOLOGY", d:"Infra + software." },
            { t:"OPERATIONS", d:"Managing systems." },
            { t:"EXPERIENCE", d:"Customer experience." },
            { t:"GROWTH", d:"Developing business." },
          ].map(r=>(
            <div key={r.t} className="rounded-2xl border border-white/10 bg-white/[0.04] p-5 text-center"><p className="text-xs tracking-widest text-blue-300">{r.t}</p><p className="text-sm text-white/60 mt-1">{r.d}</p></div>
          ))}
        </div>
        <p className="text-[11px] text-white/20 text-center mt-3">Editable — no inaccurate claims.</p>
      </section>

      {/* 12 live */}
      <section className="py-8 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-[380px] 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</span><a href="https://zyphron.cloud" target="_blank" rel="noopener noreferrer" className="text-blue-400">Visit Zyphron Cloud →</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>

      {/* 13 experience becomes work */}
      <section className="py-12 border-t border-white/10 max-w-[900px] mx-auto px-6 sm:px-8 text-center">
        <h2 className="text-xl font-bold text-white">EXPERIENCE BECOMES WORK.</h2>
        <div className="mt-6 flex flex-col items-center gap-1.5 text-sm">
          {[
            { label:"Learning", href:"/about" },
            { label:"Skills", href:"/skills" },
            { label:"Experience", href:"/experience" },
            { label:"Projects", href:"/work" },
            { label:"Zyphron Cloud", href:"/zyphron" },
          ].map(s=>(
            <Link key={s.label} href={s.href} className="px-4 py-2 rounded-full bg-white/10 border border-white/10 text-white/70 hover:bg-white hover:text-black transition">{s.label}</Link>
          ))}
        </div>
      </section>

      {/* 14 responsibilities */}
      <section className="py-8 max-w-[900px] mx-auto px-6 sm:px-8">
        <h2 className="text-[11px] tracking-[0.2em] text-white/30 uppercase">Responsibilities</h2>
        <div className="mt-3 grid sm:grid-cols-2 gap-3">
          {[
            { name:"Development", tech:"Next.js / React" },
            { name:"Infrastructure", tech:"Linux / Docker" },
            { name:"Hosting", tech:"Pterodactyl" },
            { name:"Cloud", tech:"VPS / Networking" },
            { name:"Automation", tech:"Node.js / Scripts" },
            { name:"Product", tech:"UX / Billing" },
            { name:"Business", tech:"Ops / Growth" },
            { name:"Customer Experience", tech:"Support / Docs" },
          ].map(r=>(
            <button key={r.name} onClick={()=>setExpanded(expanded===r.name?null:r.name)} className="text-left rounded-2xl border border-white/10 bg-white/[0.04] p-4 hover:bg-white/[0.06] flex justify-between items-center">
              <span><span className="font-semibold text-white text-sm">{r.name}</span><span className="block text-xs text-white/40">{r.tech}</span></span><span className="text-white/30">{expanded===r.name ? "−" : "+"}</span>
            </button>
          ))}
        </div>
      </section>

      {/* 15 challenges */}
      <section className="py-12 text-center border-t border-white/10">
        <h2 className="text-xl font-bold text-white">NOT EVERYTHING WORKED.</h2>
        <div className="mt-3 space-y-1 text-sm text-white/60"><p>Servers fail.</p><p>Deployments break.</p><p>Code needs debugging.</p><p>Plans change.</p><p>Systems need improvement.</p></div>
        <p className="mt-4 font-bold text-white">THAT&apos;S HOW EXPERIENCE IS BUILT.</p>
      </section>

      {/* 16 lessons slider */}
      <section data-nav={5} ref={el=>{refs.current[5]=el}} className="py-8 border-t border-white/10 overflow-hidden">
        <div className="max-w-[1000px] mx-auto px-6 sm:px-8">
          <h2 className="text-xl font-bold text-white">LESSONS</h2>
          <div className="mt-4 flex gap-3 overflow-x-auto snap-x pb-2">
            {["Build before perfect.","Understand the infrastructure.","Keep things simple.","Learn from failures.","Keep improving."].map((l,i)=>(
              <div key={l} className="snap-start shrink-0 w-[280px] rounded-2xl border border-white/10 bg-white/[0.04] p-6">
                <p className="text-xs tracking-widest text-white/30">0{i+1}</p><p className="font-semibold text-white mt-1">{l}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 17 matrix */}
      <section className="py-8 max-w-[900px] mx-auto px-6 sm:px-8">
        <h2 className="text-[11px] tracking-[0.2em] text-white/30 uppercase">Experience Matrix</h2>
        <div className="mt-3 rounded-2xl border border-white/10 overflow-hidden divide-y divide-white/10 bg-white/[0.03]">
          <div className="grid grid-cols-3 gap-2 px-4 py-3 text-[11px] tracking-widest text-white/30 uppercase bg-white/[0.04]"><span>Area</span><span>Projects</span><span>Tech</span></div>
          {[
            { area:"Web Development", proj:"ravneetbrar.in", tech:"Next.js / React" },
            { area:"Infrastructure", proj:"Zyphron Cloud", tech:"Linux / Docker / Pterodactyl" },
            { area:"Backend", proj:"Applications", tech:"Node.js / PHP / Laravel" },
          ].map(r=>(
            <div key={r.area} className="grid grid-cols-3 gap-2 px-4 py-3 text-sm">
              <span className="text-white font-medium">{r.area}</span><span className="text-white/60">{r.proj}</span><span className="text-white/40">{r.tech}</span>
            </div>
          ))}
        </div>
      </section>

      {/* 18 currently */}
      <section data-nav={6} ref={el=>{refs.current[6]=el}} className="py-12 border-t border-white/10 max-w-[800px] mx-auto px-6 sm:px-8 text-center">
        <p className="text-[11px] tracking-[0.2em] text-emerald-400">● BUILDING</p>
        <h2 className="mt-2 text-[32px] font-[800] tracking-[-0.04em] text-white">CURRENTLY</h2>
        <p className="text-white/60 text-sm">Founder / Developer • Zyphron Cloud</p>
        <p className="text-white/40 text-sm mt-2 max-w-[600px] mx-auto">Continuously building, improving infrastructure and exploring new technology.</p>
        <Link href="/zyphron" className="mt-4 inline-flex px-5 py-2 rounded-full bg-white text-black font-semibold text-sm">Explore Zyphron →</Link>
      </section>

      {/* 19 focus */}
      <section className="py-8 border-t border-white/10 flex flex-wrap justify-center gap-3 max-w-[800px] mx-auto px-6">
        {["BUILD","IMPROVE","LEARN","EXPLORE"].map((w,i)=>(
          <motion.span key={w} initial={{ opacity:0, y:12 }} whileInView={{ opacity:1, y:0 }} viewport={{ once:true }} transition={{ delay:i*0.06 }} className="px-6 py-3 rounded-full bg-white text-black font-black tracking-tight">{w}</motion.span>
        ))}
      </section>

      {/* 20 future */}
      <section data-nav={7} ref={el=>{refs.current[7]=el}} className="py-12 border-t border-white/10 max-w-[800px] mx-auto px-6 sm:px-8">
        <h2 className="text-2xl font-bold text-white">WHAT&apos;S NEXT?</h2>
        <div className="mt-4 grid sm:grid-cols-3 gap-3 text-sm">
          <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-5"><p className="font-semibold text-white">Next</p><p className="text-white/60">What Ravneet wants to work on next — editable.</p></div>
          <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-5"><p className="font-semibold text-white">Exploring</p><p className="text-white/60">Technologies or ideas being explored.</p></div>
          <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-5"><p className="font-semibold text-white">Long-term</p><p className="text-white/60">Long-term direction — keep it authentic.</p></div>
        </div>
      </section>

      {/* 21 terminal */}
      <section className="py-8 max-w-[800px] mx-auto px-6 sm:px-8">
        <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@journey:~$</span><span className="text-xs text-emerald-400">●</span></div>
          <div className="p-5 font-mono text-xs leading-relaxed text-white/70">
            <div>$ timeline<br />2025 → Started building<br />2025 → Zyphron Cloud<br />2026 → Infrastructure<br />NOW → Building</div>
            <div className="mt-3">$ status<br /><span className="text-emerald-400">● ACTIVE</span></div>
            <div className="mt-3">$ focus<br />BUILD<br />LEARN<br />IMPROVE</div>
            <p className="text-white/20 mt-3">help • timeline • skills • projects • current • clear</p>
          </div>
        </div>
      </section>

      {/* 22 journey map */}
      <section className="py-8 max-w-[800px] mx-auto px-6 sm:px-8">
        <div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-6 text-center font-mono text-xs">
          <div className="flex flex-col items-center gap-1 text-white/60">
            <span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">DEVELOPMENT</span>
            <span className="w-px h-4 bg-white/20" />
            <div className="flex gap-2 items-center"><span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">LEARNING</span><span className="px-3 py-1 rounded-full bg-white text-black font-bold">RAVNEET</span><span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">BUSINESS</span></div>
            <span className="w-px h-4 bg-white/20" />
            <span className="px-3 py-1 rounded-full bg-white/10 border border-white/10">INFRASTRUCTURE</span>
            <span className="w-px h-4 bg-white/20" />
            <span className="px-4 py-2 rounded-full bg-[#2563eb] text-white font-bold">ZYPHRON CLOUD</span>
          </div>
        </div>
      </section>

      {/* 25 fullscreen story */}
      <section className="relative py-20 border-t border-white/10 overflow-hidden text-center">
        <div className="space-y-2 text-[32px] sm:text-[56px] font-[800] tracking-[-0.04em] leading-none text-white/10">
          <p>2025</p><p className="text-white">BUILDING</p><p>INFRASTRUCTURE</p><p className="bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent">ZYPHRON</p><p>2026</p><p className="text-white">NOW</p>
        </div>
      </section>

      {/* 26 counter + resume */}
      <section className="py-8 max-w-[800px] mx-auto px-6 sm:px-8 flex flex-wrap gap-4 justify-between items-center border-t border-white/10">
        <div className="flex gap-6 text-sm">
          <span className="text-white"><b className="text-xl">2025—</b> Years Building</span>
          <span className="text-white"><b className="text-xl">{String(journey.length).padStart(2,"0")}</b> Milestones</span>
          <span className="text-white"><b className="text-xl">∞</b> Ideas</span>
        </div>
        <div className="flex gap-3">
          <p className="hidden sm:inline text-xs text-white/30 self-center">Want the concise version?</p>
          <Link href="/resume" className="px-5 py-2 rounded-full bg-white text-black font-semibold text-sm">Download Resume ↓</Link>
        </div>
      </section>

      {/* 37 CTA */}
      <section data-nav={8} ref={el=>{refs.current[8]=el}} 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 journey continues</p>
        <h2 className="mt-2 text-[32px] sm:text-[52px] font-[800] tracking-[-0.04em] text-white">I&apos;M JUST GETTING STARTED.</h2>
        <p className="text-white/50 mt-2 max-w-[600px] mx-auto">More things to build. More systems to understand. More problems to solve.</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>
          <Link href="/contact" className="px-6 py-3 rounded-full border border-white/15 text-white font-semibold">Contact Me →</Link>
        </div>
      </section>
    </div>
  );
}