import React, { useState, useEffect, useRef } from "react";
import {
  Github, Linkedin, Facebook, Twitter, Mail, Phone, MapPin, 
  ArrowUpRight, ArrowUp, Moon, Sun, Menu, X, Sparkles, Code2, Server,
  Cloud, Database, Wrench, Cpu, Search, Send, GraduationCap, Award,
  ChevronDown, Bot, Building2, TrendingUp, Rocket, Landmark, ExternalLink,
  Briefcase, Headphones, Users
} from "lucide-react";

/* ------------------------------------------------------------------ */
/*  Jiwan Pokhrel — portfolio (light-first)                            */
/*  Display: Space Grotesk · Body: Inter · Mono: JetBrains Mono        */
/*  Accent: violet #7C5CFF → teal #14B8A6                              */
/* ------------------------------------------------------------------ */

const FONTS =
  "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";

const THEMES = {
  light: {
    bg: "#F6F7FB", bgSoft: "#FFFFFF", text: "#111327", sub: "#535A72",
    glass: "rgba(255,255,255,0.72)", glassBorder: "rgba(17,19,39,0.09)",
    navBg: "rgba(246,247,251,0.8)", chip: "rgba(17,19,39,0.05)",
    shadow: "0 22px 55px rgba(17,19,39,0.12)", blobOp: 0.4,
  },
  dark: {
    bg: "#070B14", bgSoft: "#0B1120", text: "#E8EAF2", sub: "#9AA3B8",
    glass: "rgba(255,255,255,0.045)", glassBorder: "rgba(255,255,255,0.09)",
    navBg: "rgba(7,11,20,0.72)", chip: "rgba(255,255,255,0.06)",
    shadow: "0 20px 60px rgba(0,0,0,0.45)", blobOp: 0.55,
  },
};
const ACCENT_A = "#7C5CFF";
const ACCENT_B = "#14B8A6";
const GRAD = `linear-gradient(100deg, ${ACCENT_A}, ${ACCENT_B})`;

/* ----------------------------- data ------------------------------- */

const CONTACT = {
  name: "Jiwan Pokhrel",
  emails: ["jiwanpokhrel143@gmail.com", "info@techolation.com"],
  phones: [
    { label: "+61 0406 688 975 (AU)", tel: "+610406688975" },
    { label: "+977 984 674 2075 (NP)", tel: "+9779846742075" },
  ],
  address: "Manly Vale, Sydney NSW 2093, Australia",
  socials: [
    { icon: Linkedin, href: "https://www.linkedin.com/in/jiwan-pokh/", label: "LinkedIn" },
    { icon: Github, href: "https://github.com/jiwanpokh", label: "GitHub" },
    { icon: Facebook, href: "https://www.facebook.com/jiwan.pokh/", label: "Facebook" },
    { icon: Twitter, href: "https://x.com/jiwanpokh", label: "X (Twitter)" },
  ],
};

const TYPED_ROLES = [
  "Software Developer", "Laravel Developer", "React Developer",
  "AI Solutions Developer", "IT Support Engineer", "SEO Executive", "Problem Solver",
];

const SUMMARY =
  "Software developer with 3+ years of hands-on experience building production web applications with object-oriented programming, REST APIs, SQL databases and Git — complemented by ongoing IT support experience across Microsoft Azure and Office 365. Comfortable across the full SDLC in Agile teams, with a strong OOP and MVC foundation that transfers to modern frameworks, and an enthusiast of AI-assisted development to accelerate coding, testing and documentation.";

const STATS = [
  { value: 3, suffix: "+", label: "Years production experience" },
  { value: 4, suffix: "", label: "Companies across AU, US & NP" },
  { value: 3, suffix: "", label: "Live products shipped" },
  { value: 20, suffix: "+", label: "Technologies used" },
];

const SKILLS = [
  { cat: "Core Development", icon: Code2, items: ["OOP", "MVC & Design Patterns", "REST APIs", "SDLC", "Agile / Scrum", "JIRA"] },
  { cat: "Languages & Frameworks", icon: Server, items: ["PHP (Laravel)", "JavaScript", "React", "Vue.js", "C / C++", "Java", "HTML5 / CSS3", "Bootstrap", "Tailwind", "jQuery"] },
  { cat: "Databases", icon: Database, items: ["MySQL", "Oracle Database", "SQL Server", "Relational DB design"] },
  { cat: "Cloud & IT", icon: Cloud, items: ["Microsoft Azure", "Office 365", "Active Directory", "VMware / Hyper-V", "Network Administration"] },
  { cat: "Version Control & Tools", icon: Wrench, items: ["Git / GitHub", "VS Code", "cPanel", "GitHub Copilot", "Claude"] },
  { cat: "SEO & Analytics", icon: Search, items: ["Google Analytics", "Search Console", "SEMrush", "Ahrefs", "AdWords"] },
];

const PROJECTS = [
  {
    title: "AI Receptionist",
    cat: "AI",
    icon: Bot,
    status: "In development · 2026",
    blurb: "AI-powered phone answering system integrating Twilio for call handling with an LLM for natural conversation — automatically takes customer orders and answers FAQs in real time.",
    stack: ["Twilio", "LLM", "Laravel", "Voice AI"],
    link: null,
  },
  {
    title: "Investnestly",
    cat: "Web",
    icon: TrendingUp,
    status: "Live",
    blurb: "Investment syndicate platform for collecting monthly investor contributions, tracking project profit & loss, and managing multiple concurrent projects and new concept submissions. Multi-role investor/admin login with OAuth-based authentication.",
    stack: ["Laravel", "OAuth", "MySQL", "Multi-role Auth"],
    link: "https://investnestly.com",
  },
  {
    title: "Topifyglobe",
    cat: "Web",
    icon: Rocket,
    status: "Live",
    blurb: "Vite + React web application deployed to cPanel hosting with a custom GitHub-webhook CI/CD pipeline that builds and deploys automatically on every push.",
    stack: ["Vite", "React", "CI/CD", "cPanel"],
    link: "https://topifyglobe.com",
  },
  {
    title: "Ward Office Web App",
    cat: "Web",
    icon: Landmark,
    status: "Delivered",
    blurb: "Laravel-based web application built for a local ward office in Pokhara, alongside responsive websites for local organisations — with accessibility and cross-browser improvements.",
    stack: ["Laravel", "Bootstrap", "Accessibility"],
    link: null,
  },
];

const EXPERIENCE = [
  {
    role: "Website Developer & Administrator",
    org: "Totteri LLC — Texas, USA (Remote)",
    period: "May 2024 – Present",
    icon: Briefcase,
    points: [
      "Develop and maintain multiple Laravel, WordPress and Drupal web applications, including database design and REST API integrations with backend services.",
      "Build UI pages with Vue.js, HTML5, CSS3, JavaScript and Bootstrap; created admin tools that streamline content add/update/delete workflows.",
      "Manage content migration and SEO/metadata optimisation for global client websites; migrate and maintain Laravel apps on cPanel with QA and deployment support.",
    ],
    stack: ["Laravel", "Vue.js", "WordPress", "Drupal", "REST APIs"],
  },
  {
    role: "IT Support (Part-Time)",
    org: "Ricoh — Sydney, Australia",
    period: "Mar 2023 – Present",
    icon: Headphones,
    points: [
      "Provide technical support for Office 365, Active Directory and Azure cloud services — deployment, monitoring and troubleshooting.",
      "Resolve end-user tickets and hardware/software issues across desktops, laptops and mobile devices via ticketing systems.",
      "Support network administration (router/switch config), VMware/Hyper-V virtualisation, backup & disaster recovery, and system security audits.",
    ],
    stack: ["Azure", "Office 365", "Active Directory", "VMware"],
  },
  {
    role: "Web Developer & SEO Executive",
    org: "Swayanj Solution — Kathmandu, Nepal",
    period: "Feb 2021 – Apr 2022",
    icon: Search,
    points: [
      "Developed and maintained responsive websites with HTML, CSS, JavaScript and PHP; built an internal reporting web app for weekly departmental performance reports.",
      "Customised WordPress themes and plugins; managed Google Analytics/AdWords campaigns to grow traffic and conversions.",
      "Ran keyword research and on/off-page SEO, monitored performance via SEMrush and built quality backlinks.",
    ],
    stack: ["PHP", "WordPress", "SEO", "Google Analytics"],
  },
  {
    role: "Web Developer Intern",
    org: "CodeSastra Pvt. Ltd. — Pokhara, Nepal",
    period: "Sep 2017 – Oct 2020",
    icon: Code2,
    points: [
      "Built responsive websites for local organisations using WordPress, Bootstrap, HTML, CSS and JavaScript, plus a Laravel web app for a local ward office.",
      "Assisted senior developers with coding, testing and debugging; contributed to UAT, accessibility improvements and cross-browser compatibility.",
    ],
    stack: ["WordPress", "Laravel", "Bootstrap"],
  },
  {
    role: "Customer Service Representative",
    org: "Woolworths, Warringah Mall · Valentine Woodfire Pizzeria, Narrabeen",
    period: "Dec 2022 – May 2023",
    icon: Users,
    points: [
      "Delivered frontline customer service, resolved complaints and managed high volumes of phone, email and in-person enquiries.",
    ],
    stack: ["Communication", "Customer Service"],
  },
];

const EDUCATION = [
  {
    title: "Bachelor of Software Engineering — 2019, Nepal",
    org: "Coursework: Data Structures & Algorithms, DBMS, OOP & UML Design, Software Testing & QA, Cloud Computing, Enterprise Application Development.",
    extra: "Capstone: led a 3-person team building a student enrollment web app with online payment and admin document verification.",
    icon: GraduationCap,
  },
  {
    title: "Core Strengths",
    org: "Teamwork & collaboration across cross-functional, cross-cultural teams · Problem-solving with practical, efficient solutions · Leadership & clear communication with technical and non-technical stakeholders.",
    extra: null,
    icon: Award,
  },
];

const NAV = ["About", "Skills", "Experience", "Projects", "Contact"];

/* Formspree — submissions are emailed to you and stored in your
   Formspree dashboard (https://formspree.io/forms). */
const FORMSPREE_URL = "https://formspree.io/f/mykryrov";

/* ----------------------------- hooks ------------------------------- */

function useTyping(words, speed = 70, pause = 1600) {
  const [text, setText] = useState("");
  const [i, setI] = useState(0);
  const [del, setDel] = useState(false);
  useEffect(() => {
    const word = words[i % words.length];
    let t;
    if (!del && text === word) t = setTimeout(() => setDel(true), pause);
    else if (del && text === "") { setDel(false); setI(v => v + 1); }
    else t = setTimeout(() => {
      setText(word.slice(0, text.length + (del ? -1 : 1)));
    }, del ? speed / 2 : speed);
    return () => clearTimeout(t);
  }, [text, del, i, words, speed, pause]);
  return text;
}

function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver(
      es => es.forEach(e => e.isIntersecting && e.target.classList.add("in")),
      { threshold: 0.1 }
    );
    document.querySelectorAll(".rv").forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function useScrollSpy(ids) {
  const [active, setActive] = useState("");
  useEffect(() => {
    const io = new IntersectionObserver(
      es => es.forEach(e => e.isIntersecting && setActive(e.target.id)),
      { rootMargin: "-40% 0px -55% 0px" }
    );
    ids.forEach(id => {
      const el = document.getElementById(id);
      if (el) io.observe(el);
    });
    return () => io.disconnect();
  }, [ids]);
  return active;
}

function Counter({ value, suffix }) {
  const [n, setN] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    const io = new IntersectionObserver(es => {
      if (es[0].isIntersecting && !started.current) {
        started.current = true;
        const t0 = performance.now();
        const tick = now => {
          const p = Math.min((now - t0) / 1200, 1);
          setN(Math.round(value * (1 - Math.pow(1 - p, 3))));
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.5 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [value]);
  return <span ref={ref}>{n}{suffix}</span>;
}

/* --------------------------- components --------------------------- */

/* 3D tilt wrapper — cards lean toward the cursor */
function Tilt({ children, max = 7, style }) {
  const ref = useRef(null);
  const onMove = e => {
    const el = ref.current;
    if (!el || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform = `perspective(800px) rotateY(${x * max}deg) rotateX(${-y * max}deg) translateY(-4px)`;
    el.style.setProperty("--mx", `${(x + 0.5) * 100}%`);
    el.style.setProperty("--my", `${(y + 0.5) * 100}%`);
  };
  const onLeave = () => {
    if (ref.current) ref.current.style.transform = "";
  };
  return (
    <div ref={ref} onPointerMove={onMove} onPointerLeave={onLeave}
      style={{ transition: "transform .3s cubic-bezier(.2,.8,.2,1)", willChange: "transform", ...style }}>
      {children}
    </div>
  );
}

/* Magnetic button — nudges toward the cursor */
function Magnetic({ children }) {
  const ref = useRef(null);
  const onMove = e => {
    const el = ref.current;
    if (!el || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const r = el.getBoundingClientRect();
    const x = e.clientX - r.left - r.width / 2;
    const y = e.clientY - r.top - r.height / 2;
    el.style.transform = `translate(${x * 0.18}px, ${y * 0.18}px)`;
  };
  const onLeave = () => { if (ref.current) ref.current.style.transform = ""; };
  return (
    <span ref={ref} onPointerMove={onMove} onPointerLeave={onLeave}
      style={{ display: "inline-block", transition: "transform .35s cubic-bezier(.2,.8,.2,1)" }}>
      {children}
    </span>
  );
}

/* Cursor spotlight that follows the pointer across the whole page */
function Spotlight({ dark }) {
  const ref = useRef(null);
  useEffect(() => {
    const move = e => {
      if (ref.current)
        ref.current.style.background = `radial-gradient(560px circle at ${e.clientX}px ${e.clientY}px, ${dark ? "rgba(124,92,255,0.10)" : "rgba(124,92,255,0.08)"}, transparent 70%)`;
    };
    window.addEventListener("pointermove", move);
    return () => window.removeEventListener("pointermove", move);
  }, [dark]);
  return <div ref={ref} aria-hidden style={{ position: "fixed", inset: 0, zIndex: 1, pointerEvents: "none" }} />;
}

function Aurora({ T }) {
  const a = useRef(null), b = useRef(null), c = useRef(null);
  useEffect(() => {
    const move = e => {
      const x = e.clientX / window.innerWidth - 0.5;
      const y = e.clientY / window.innerHeight - 0.5;
      if (a.current) a.current.style.transform = `translate(${x * 60}px, ${y * 60}px)`;
      if (b.current) b.current.style.transform = `translate(${x * -45}px, ${y * -45}px)`;
      if (c.current) c.current.style.transform = `translate(${x * 25}px, ${y * -25}px)`;
    };
    window.addEventListener("pointermove", move);
    return () => window.removeEventListener("pointermove", move);
  }, []);
  return (
    <div aria-hidden style={{ position: "fixed", inset: 0, overflow: "hidden", zIndex: 0, pointerEvents: "none" }}>
      <div ref={a} className="blob" style={{
        position: "absolute", width: "44vmax", height: "44vmax", top: "-12vmax", right: "-10vmax",
        background: `radial-gradient(circle at 30% 30%, ${ACCENT_A}, transparent 65%)`,
        filter: "blur(75px)", opacity: T.blobOp, transition: "transform .6s cubic-bezier(.2,.8,.2,1)",
      }} />
      <div ref={b} className="blob slow" style={{
        position: "absolute", width: "40vmax", height: "40vmax", bottom: "-14vmax", left: "-8vmax",
        background: `radial-gradient(circle at 60% 60%, ${ACCENT_B}, transparent 65%)`,
        filter: "blur(85px)", opacity: T.blobOp * 0.85, transition: "transform .8s cubic-bezier(.2,.8,.2,1)",
      }} />
      <div ref={c} className="blob" style={{
        position: "absolute", width: "26vmax", height: "26vmax", top: "38%", left: "40%",
        background: `radial-gradient(circle, #F59E0B, transparent 65%)`,
        filter: "blur(90px)", opacity: T.blobOp * 0.35, transition: "transform 1s cubic-bezier(.2,.8,.2,1)",
      }} />
    </div>
  );
}

function Eyebrow({ children }) {
  return (
    <div style={{
      fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: "0.18em",
      textTransform: "uppercase", color: ACCENT_B, marginBottom: 14, display: "flex",
      alignItems: "center", gap: 10, fontWeight: 500,
    }}>
      <span style={{ width: 28, height: 2, background: GRAD, display: "inline-block", borderRadius: 2 }} />
      {children}
    </div>
  );
}

function H2({ children, T }) {
  return (
    <h2 style={{
      fontFamily: "'Space Grotesk', sans-serif", fontSize: "clamp(1.7rem, 3.6vw, 2.6rem)",
      fontWeight: 700, lineHeight: 1.15, margin: "0 0 14px", color: T.text, letterSpacing: "-0.02em",
    }}>{children}</h2>
  );
}

function Card({ children, T, style, glow = true }) {
  return (
    <div className={glow ? "card glowcard" : "card"} style={{
      background: T.glass, border: `1px solid ${T.glassBorder}`, borderRadius: 20,
      padding: 24, backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)",
      transition: "border-color .35s, box-shadow .35s", position: "relative", overflow: "hidden",
      height: "100%", ...style,
    }}>{children}</div>
  );
}

/* ------------------------------ app ------------------------------- */

export default function App() {
  const [dark, setDark] = useState(false); // light mode first
  const [menu, setMenu] = useState(false);
  const [filter, setFilter] = useState("All");
  const [form, setForm] = useState({ name: "", email: "", msg: "" });
  const [status, setStatus] = useState("idle"); // idle | sending | sent | error
  const T = dark ? THEMES.dark : THEMES.light;
  const typed = useTyping(TYPED_ROLES);
  const active = useScrollSpy(NAV.map(n => n.toLowerCase()));
  useReveal();

  useEffect(() => {
    if (!document.getElementById("gf")) {
      const l = document.createElement("link");
      l.id = "gf"; l.rel = "stylesheet"; l.href = FONTS;
      document.head.appendChild(l);
    }
  }, []);

  const go = id => {
    setMenu(false);
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  };

  const cats = ["All", "AI", "Web"];
  const shown = PROJECTS.filter(p => filter === "All" || p.cat === filter);

  const submitForm = async () => {
    if (!form.name || !form.email || !form.msg || status === "sending") return;
    setStatus("sending");
    try {
      const res = await fetch(FORMSPREE_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          message: form.msg,
          _subject: `Portfolio enquiry from ${form.name}`,
        }),
      });
      if (res.ok) {
        setStatus("sent");
        setForm({ name: "", email: "", msg: "" });
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  };

  return (
    <div style={{
      minHeight: "100vh", background: T.bg, color: T.text,
      fontFamily: "'Inter', sans-serif", position: "relative",
      transition: "background .4s, color .4s",
    }}>
      <style>{`
        html { scroll-behavior: smooth; }
        * { box-sizing: border-box; }
        ::selection { background: ${ACCENT_A}44; }
        .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
        .rv.in { opacity: 1; transform: none; }
        .glowcard::before { content: ""; position: absolute; inset: 0; border-radius: 20px; opacity: 0;
          background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), ${ACCENT_A}1f, transparent 65%);
          transition: opacity .35s; pointer-events: none; }
        .card:hover.glowcard::before, [style*="perspective"] .glowcard::before { opacity: 1; }
        .card:hover { border-color: ${ACCENT_A}55; box-shadow: ${T.shadow}; }
        .navlink { position: relative; background: none; border: 0; cursor: pointer; padding: 8px 2px; font: 500 14px 'Inter', sans-serif; color: ${T.sub}; transition: color .25s; }
        .navlink:hover, .navlink.on { color: ${T.text}; }
        .navlink::after { content: ""; position: absolute; left: 0; bottom: 2px; height: 2px; width: 0; background: ${GRAD}; border-radius: 2px; transition: width .3s cubic-bezier(.2,.8,.2,1); }
        .navlink.on::after, .navlink:hover::after { width: 100%; }
        .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 14px; font: 600 15px 'Inter', sans-serif; cursor: pointer; border: 0; transition: transform .25s, box-shadow .25s, background .25s; text-decoration: none; }
        .btn:hover { transform: translateY(-2px); }
        .btn:focus-visible, .navlink:focus-visible, .icobtn:focus-visible { outline: 2px solid ${ACCENT_B}; outline-offset: 3px; }
        .btn-primary { background: ${GRAD}; background-size: 200% 200%; color: #fff; box-shadow: 0 8px 26px ${ACCENT_A}44; animation: gradmove 5s ease infinite; }
        .btn-ghost { background: ${T.chip}; color: ${T.text}; border: 1px solid ${T.glassBorder}; }
        .icobtn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: ${T.chip}; border: 1px solid ${T.glassBorder}; color: ${T.sub}; cursor: pointer; transition: all .25s; text-decoration: none; }
        .icobtn:hover { color: ${ACCENT_A}; border-color: ${ACCENT_A}77; transform: translateY(-3px) rotate(-4deg); }
        .chip { font: 500 12px 'JetBrains Mono', monospace; padding: 5px 10px; border-radius: 999px; background: ${T.chip}; border: 1px solid ${T.glassBorder}; color: ${T.sub}; transition: all .25s; }
        .card:hover .chip { border-color: ${ACCENT_B}66; }
        .gradtext { background: ${GRAD}; background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradmove 6s ease infinite; }
        .blob { animation: drift 16s ease-in-out infinite alternate; }
        .blob.slow { animation-duration: 22s; }
        @keyframes drift { from { translate: 0 0; } to { translate: 3vmax 4vmax; } }
        @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
        @keyframes gradmove { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
        @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
        input, textarea { width: 100%; padding: 13px 16px; border-radius: 14px; background: ${T.chip}; border: 1px solid ${T.glassBorder}; color: ${T.text}; font: 400 15px 'Inter', sans-serif; transition: border-color .25s, box-shadow .25s; }
        input:focus, textarea:focus { outline: none; border-color: ${ACCENT_A}; box-shadow: 0 0 0 4px ${ACCENT_A}22; }
        @media (prefers-reduced-motion: reduce) { .rv, .blob, .card, .btn, .gradtext, .btn-primary { transition: none !important; animation: none !important; } }
        @media (max-width: 760px) { .desktopnav { display: none !important; } .grid2 { grid-template-columns: 1fr !important; } }
        @media (min-width: 761px) { .mobilebtn { display: none !important; } }
      `}</style>

      <Aurora T={T} />
      <Spotlight dark={dark} />

      {/* NAV */}
      <header style={{
        position: "sticky", top: 0, zIndex: 50, backdropFilter: "blur(16px)",
        WebkitBackdropFilter: "blur(16px)", background: T.navBg,
        borderBottom: `1px solid ${T.glassBorder}`,
      }}>
        <nav aria-label="Main" style={{
          maxWidth: 1120, margin: "0 auto", padding: "14px 24px",
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16,
        }}>
          <button onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} style={{
            background: "none", border: 0, cursor: "pointer",
            fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 18, color: T.text,
          }}>
            jiwan<span className="gradtext">pokh</span>
          </button>
          <div className="desktopnav" style={{ display: "flex", gap: 22, alignItems: "center" }}>
            {NAV.map(n => (
              <button key={n} className={`navlink ${active === n.toLowerCase() ? "on" : ""}`}
                onClick={() => go(n.toLowerCase())}>{n}</button>
            ))}
          </div>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <button className="icobtn" aria-label="Toggle theme" onClick={() => setDark(d => !d)}>
              {dark ? <Sun size={18} /> : <Moon size={18} />}
            </button>
            <button className="icobtn mobilebtn" aria-label="Menu" onClick={() => setMenu(m => !m)}>
              {menu ? <X size={18} /> : <Menu size={18} />}
            </button>
          </div>
        </nav>
        {menu && (
          <div style={{ padding: "6px 24px 18px", display: "flex", flexDirection: "column", gap: 4 }}>
            {NAV.map(n => (
              <button key={n} className="navlink" style={{ textAlign: "left", fontSize: 16 }}
                onClick={() => go(n.toLowerCase())}>{n}</button>
            ))}
          </div>
        )}
      </header>

      <main style={{ position: "relative", zIndex: 2, maxWidth: 1120, margin: "0 auto", padding: "0 24px" }}>

        {/* HERO */}
        <section style={{ minHeight: "88vh", display: "flex", flexDirection: "column", justifyContent: "center", padding: "70px 0 40px" }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", color: ACCENT_B, fontSize: 14, marginBottom: 18, fontWeight: 500 }}>
            ~ manly vale, sydney · open to opportunities
          </div>
          <h1 style={{
            fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, letterSpacing: "-0.03em",
            fontSize: "clamp(2.5rem, 7vw, 4.6rem)", lineHeight: 1.05, margin: 0,
          }}>
            Hi, I'm <span className="gradtext">Jiwan Pokhrel</span>.
          </h1>
          <div aria-live="polite" style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: "clamp(1.1rem, 3vw, 1.7rem)",
            marginTop: 18, minHeight: "1.6em",
          }}>
            <span style={{ color: T.sub }}>&gt; </span>{typed}
            <span style={{ borderLeft: `2px solid ${ACCENT_B}`, marginLeft: 3, animation: "blink 1s infinite" }} />
          </div>
          <p style={{ maxWidth: 620, color: T.sub, fontSize: 17, lineHeight: 1.75, marginTop: 22 }}>{SUMMARY}</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 30 }}>
            <Magnetic><button className="btn btn-primary" onClick={() => go("projects")}>View projects <ArrowUpRight size={17} /></button></Magnetic>
            <Magnetic><button className="btn btn-ghost" onClick={() => go("contact")}>Hire me</button></Magnetic>
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 34 }}>
            {CONTACT.socials.map(s => (
              <a key={s.label} className="icobtn" href={s.href} target="_blank" rel="noreferrer" aria-label={s.label}>
                <s.icon size={18} />
              </a>
            ))}
          </div>
          <button onClick={() => go("about")} aria-label="Scroll to about" style={{
            background: "none", border: 0, color: T.sub, cursor: "pointer",
            marginTop: 48, alignSelf: "flex-start", display: "flex", alignItems: "center", gap: 8,
            font: "500 13px 'JetBrains Mono', monospace", animation: "floaty 3s ease-in-out infinite",
          }}>
            scroll <ChevronDown size={16} />
          </button>
        </section>

        {/* ABOUT */}
        <section id="about" style={{ padding: "70px 0" }}>
          <div className="rv"><Eyebrow>about me</Eyebrow>
          <H2 T={T}>Building for the web,<br />learning for the future.</H2></div>
          <div className="grid2 rv" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 28, marginTop: 20 }}>
            <Tilt max={3}><Card T={T}>
              <p style={{ color: T.sub, lineHeight: 1.85, margin: 0, fontSize: 16 }}>
                I'm a software developer based in Sydney, working remotely with{" "}
                <strong style={{ color: T.text }}>Totteri LLC</strong> (Texas, USA) on Laravel,
                WordPress and Drupal applications, while providing part-time IT support at{" "}
                <strong style={{ color: T.text }}>Ricoh</strong> across Azure, Office 365 and
                Active Directory. Before Australia, I built websites and ran SEO campaigns in
                Nepal — from an internship in Pokhara to an SEO executive role in Kathmandu.
                <br /><br />
                I'm comfortable across the full software development lifecycle in Agile teams,
                and genuinely enthusiastic about AI-assisted development — I use tools like
                GitHub Copilot and Claude daily to move faster on coding, testing and
                documentation. My goal: keep learning and grow into a SaaS engineering team.
              </p>
            </Card></Tilt>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              {STATS.map(s => (
                <Tilt key={s.label}><Card T={T} style={{ textAlign: "center", padding: 18 }}>
                  <div className="gradtext" style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 32, fontWeight: 700 }}>
                    <Counter value={s.value} suffix={s.suffix} />
                  </div>
                  <div style={{ color: T.sub, fontSize: 12.5, marginTop: 4 }}>{s.label}</div>
                </Card></Tilt>
              ))}
            </div>
          </div>
        </section>

        {/* SKILLS */}
        <section id="skills" style={{ padding: "70px 0" }}>
          <div className="rv"><Eyebrow>technical skills</Eyebrow>
          <H2 T={T}>What my toolbox includes</H2>
          <p style={{ color: T.sub, maxWidth: 620, lineHeight: 1.7 }}>
            A strong OOP and MVC foundation, production frameworks, and the cloud & IT
            skills to keep everything running — plus the SEO know-how to make it visible.
          </p></div>
          <div className="rv" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 16, marginTop: 26 }}>
            {SKILLS.map(g => (
              <Tilt key={g.cat}><Card T={T}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
                  <span style={{ display: "inline-flex", padding: 9, borderRadius: 12, background: `${ACCENT_A}1a`, color: ACCENT_A }}>
                    <g.icon size={18} />
                  </span>
                  <strong style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 16 }}>{g.cat}</strong>
                </div>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
                  {g.items.map(i => <span key={i} className="chip">{i}</span>)}
                </div>
              </Card></Tilt>
            ))}
          </div>
        </section>

        {/* EXPERIENCE */}
        <section id="experience" style={{ padding: "70px 0" }}>
          <div className="rv"><Eyebrow>experience</Eyebrow>
          <H2 T={T}>Where I've worked</H2></div>
          <div style={{ position: "relative", marginTop: 26, paddingLeft: 26 }}>
            <div aria-hidden style={{ position: "absolute", left: 6, top: 8, bottom: 8, width: 2, background: GRAD, opacity: 0.45, borderRadius: 2 }} />
            {EXPERIENCE.map(e => (
              <div key={e.role + e.org} className="rv" style={{ position: "relative", marginBottom: 26 }}>
                <span aria-hidden style={{
                  position: "absolute", left: -26, top: 10, width: 14, height: 14, borderRadius: "50%",
                  background: GRAD, boxShadow: `0 0 0 4px ${T.bg}`,
                }} />
                <Tilt max={2}><Card T={T}>
                  <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
                    <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                      <span style={{ display: "inline-flex", padding: 9, borderRadius: 12, background: `${ACCENT_B}1a`, color: ACCENT_B, marginTop: 2 }}>
                        <e.icon size={17} />
                      </span>
                      <div>
                        <strong style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 17 }}>{e.role}</strong>
                        <div style={{ color: ACCENT_A, fontSize: 14, marginTop: 3, fontWeight: 500 }}>{e.org}</div>
                      </div>
                    </div>
                    <span className="chip">{e.period}</span>
                  </div>
                  <ul style={{ color: T.sub, lineHeight: 1.7, fontSize: 14.5, margin: "12px 0 14px", paddingLeft: 18 }}>
                    {e.points.map(p => <li key={p} style={{ marginBottom: 4 }}>{p}</li>)}
                  </ul>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
                    {e.stack.map(s => <span key={s} className="chip">{s}</span>)}
                  </div>
                </Card></Tilt>
              </div>
            ))}
            {EDUCATION.map(e => (
              <div key={e.title} className="rv" style={{ position: "relative", marginBottom: 26 }}>
                <span aria-hidden style={{
                  position: "absolute", left: -26, top: 10, width: 14, height: 14, borderRadius: "50%",
                  background: T.bg, border: `2px solid ${ACCENT_B}`, boxShadow: `0 0 0 4px ${T.bg}`,
                }} />
                <Tilt max={2}><Card T={T}>
                  <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                    <span style={{ display: "inline-flex", padding: 10, borderRadius: 12, background: `${ACCENT_B}1a`, color: ACCENT_B }}>
                      <e.icon size={20} />
                    </span>
                    <div>
                      <strong style={{ fontFamily: "'Space Grotesk', sans-serif" }}>{e.title}</strong>
                      <div style={{ color: T.sub, fontSize: 14, marginTop: 5, lineHeight: 1.65 }}>{e.org}</div>
                      {e.extra && <div style={{ color: T.sub, fontSize: 14, marginTop: 6, lineHeight: 1.65 }}>
                        <span style={{ color: ACCENT_B }}>→</span> {e.extra}
                      </div>}
                    </div>
                  </div>
                </Card></Tilt>
              </div>
            ))}
          </div>
        </section>

        {/* PROJECTS */}
        <section id="projects" style={{ padding: "70px 0" }}>
          <div className="rv"><Eyebrow>key projects</Eyebrow>
          <H2 T={T}>Things I've shipped (and am shipping)</H2></div>
          <div className="rv" style={{ display: "flex", gap: 8, marginTop: 8, marginBottom: 24 }}>
            {cats.map(c => (
              <button key={c} className="btn" onClick={() => setFilter(c)} style={{
                padding: "9px 18px", fontSize: 13.5,
                background: filter === c ? GRAD : T.chip,
                color: filter === c ? "#fff" : T.sub,
                border: `1px solid ${filter === c ? "transparent" : T.glassBorder}`,
              }}>{c}</button>
            ))}
          </div>
          <div className="rv" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 18 }}>
            {shown.map(p => (
              <Tilt key={p.title}><Card T={T} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                <div style={{
                  height: 110, borderRadius: 14, display: "flex", alignItems: "center", justifyContent: "center",
                  background: `linear-gradient(135deg, ${ACCENT_A}22, ${ACCENT_B}1e)`,
                  border: `1px solid ${T.glassBorder}`,
                }}>
                  <p.icon size={38} style={{ color: ACCENT_A }} />
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
                  <strong style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 17 }}>{p.title}</strong>
                  <span className="chip" style={{ color: p.status === "Live" ? ACCENT_B : undefined }}>{p.status}</span>
                </div>
                <p style={{ color: T.sub, fontSize: 14.5, lineHeight: 1.65, margin: 0, flex: 1 }}>{p.blurb}</p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
                  {p.stack.map(s => <span key={s} className="chip">{s}</span>)}
                </div>
                {p.link && (
                  <a href={p.link} target="_blank" rel="noreferrer" style={{
                    display: "inline-flex", alignItems: "center", gap: 6, color: ACCENT_A,
                    fontWeight: 600, fontSize: 14, textDecoration: "none",
                  }}>
                    Visit site <ExternalLink size={14} />
                  </a>
                )}
              </Card></Tilt>
            ))}
          </div>
        </section>

        {/* CONTACT */}
        <section id="contact" style={{ padding: "70px 0 90px" }}>
          <div className="rv"><Eyebrow>contact</Eyebrow>
          <H2 T={T}>Have a project or a role in mind?<br />Please drop a message.</H2>
          <p style={{ color: T.sub, maxWidth: 560, lineHeight: 1.7 }}>
            Get in touch and let me know how I can help — I'll be in touch as soon as possible.
          </p></div>
          <div className="grid2 rv" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 24, marginTop: 26 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <Tilt max={3}><Card T={T} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                <MapPin size={20} style={{ color: ACCENT_B, flexShrink: 0, marginTop: 2 }} />
                <div><strong>Address</strong><div style={{ color: T.sub, fontSize: 14.5, marginTop: 3 }}>{CONTACT.address}</div></div>
              </Card></Tilt>
              <Tilt max={3}><Card T={T} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                <Phone size={20} style={{ color: ACCENT_B, flexShrink: 0, marginTop: 2 }} />
                <div><strong>Phone</strong>
                  {CONTACT.phones.map(p => (
                    <div key={p.tel}><a href={`tel:${p.tel}`} style={{ color: T.sub, fontSize: 14.5, textDecoration: "none" }}>{p.label}</a></div>
                  ))}
                </div>
              </Card></Tilt>
              <Tilt max={3}><Card T={T} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                <Mail size={20} style={{ color: ACCENT_B, flexShrink: 0, marginTop: 2 }} />
                <div><strong>Email</strong>
                  {CONTACT.emails.map(e => (
                    <div key={e}><a href={`mailto:${e}`} style={{ color: T.sub, fontSize: 14.5, textDecoration: "none" }}>{e}</a></div>
                  ))}
                </div>
              </Card></Tilt>
            </div>
            <Card T={T}>
              {status === "sent" ? (
                <div style={{ textAlign: "center", padding: "40px 10px" }}>
                  <Sparkles size={34} style={{ color: ACCENT_B }} />
                  <h3 style={{ fontFamily: "'Space Grotesk', sans-serif", margin: "14px 0 6px" }}>Message sent!</h3>
                  <p style={{ color: T.sub, fontSize: 14.5 }}>Thanks for reaching out — I'll get back to you as soon as possible.</p>
                  <button className="btn btn-ghost" style={{ marginTop: 14 }} onClick={() => setStatus("idle")}>
                    Send another message
                  </button>
                </div>
              ) : (
                <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                  <label style={{ fontSize: 13.5, color: T.sub }}>Name
                    <input style={{ marginTop: 6 }} value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Your name" />
                  </label>
                  <label style={{ fontSize: 13.5, color: T.sub }}>Email
                    <input style={{ marginTop: 6 }} type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} placeholder="you@example.com" />
                  </label>
                  <label style={{ fontSize: 13.5, color: T.sub }}>Message
                    <textarea style={{ marginTop: 6 }} rows={5} value={form.msg} onChange={e => setForm({ ...form, msg: e.target.value })} placeholder="Tell me about your project or role…" />
                  </label>
                  {status === "error" && (
                    <div role="alert" style={{
                      padding: "12px 16px", borderRadius: 14, fontSize: 14,
                      background: "rgba(239,68,68,0.1)", border: "1px solid rgba(239,68,68,0.35)", color: "#EF4444",
                    }}>
                      The message couldn't be sent. Check your connection and try again, or email me directly at {CONTACT.emails[0]}.
                    </div>
                  )}
                  <Magnetic>
                    <button className="btn btn-primary" onClick={submitForm}
                      disabled={status === "sending"}
                      style={{
                        justifyContent: "center", width: "100%",
                        opacity: form.name && form.email && form.msg && status !== "sending" ? 1 : 0.55,
                        pointerEvents: form.name && form.email && form.msg ? "auto" : "none",
                      }}>
                      {status === "sending" ? "Sending…" : <>Send message <Send size={16} /></>}
                    </button>
                  </Magnetic>
                </div>
              )}
            </Card>
          </div>
        </section>
      </main>

      {/* FOOTER */}
      <footer style={{ position: "relative", zIndex: 2, borderTop: `1px solid ${T.glassBorder}`, background: T.navBg, backdropFilter: "blur(14px)" }}>
        <div style={{ maxWidth: 1120, margin: "0 auto", padding: "34px 24px", display: "flex", flexWrap: "wrap", gap: 20, alignItems: "center", justifyContent: "space-between" }}>
          <div>
            <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 17 }}>Jiwan Pokhrel</div>
            <div style={{ color: T.sub, fontSize: 13, marginTop: 4 }}>
              © {new Date().getFullYear()} · Built with React & a lot of coffee
            </div>
          </div>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            {CONTACT.socials.map(s => (
              <a key={s.label} className="icobtn" href={s.href} target="_blank" rel="noreferrer" aria-label={s.label}>
                <s.icon size={17} />
              </a>
            ))}
            <button className="icobtn" aria-label="Back to top" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}>
              <ArrowUp size={17} />
            </button>
          </div>
        </div>
      </footer>
    </div>
  );
}