// ContentDisplay.jsx — center content pane only (name panel moved to left column)

const contentStyles = {
  container: {
    flex: "1",
    height: "100%",
    display: "flex",
    flexDirection: "column",
    overflow: "hidden",
    background: "#0a0a0a",
    minWidth: 0,
  },

  topBar: {
    height: "36px",
    minHeight: "36px",
    borderBottom: "1px solid rgba(255,90,0,0.12)",
    display: "flex",
    alignItems: "center",
    padding: "0 20px",
    gap: "12px",
    background: "rgba(255,90,0,0.015)",
    flexShrink: 0,
  },
  topBarDot: (c) => ({ width: "7px", height: "7px", background: c, borderRadius: "50%" }),
  topBarPath: {
    fontSize: "12px", letterSpacing: "0.1em", color: "#ff5a00",
    fontFamily: "'JetBrains Mono', monospace", opacity: 0.9,
  },
  topBarLabel: {
    marginLeft: "auto", fontSize: "10px", letterSpacing: "0.18em",
    color: "#444", fontFamily: "'JetBrains Mono', monospace",
  },
  contentArea: {
    flex: "1", overflowY: "auto", overflowX: "hidden",
    padding: "32px 44px", position: "relative",
  },
  // Welcome / idle state
  idleBox: {
    padding: "20px 0",
  },
  idlePrompt: {
    fontSize: "14px", color: "#2a2a2a", fontFamily: "'JetBrains Mono', monospace",
    letterSpacing: "0.1em", lineHeight: "2.2",
  },
  sectionTitleRow: {
    fontSize: "13px", letterSpacing: "0.22em", color: "#ff5a00",
    fontFamily: "'JetBrains Mono', monospace",
    marginBottom: "24px", paddingBottom: "12px",
    borderBottom: "1px solid rgba(255,90,0,0.2)",
    display: "flex", alignItems: "center", gap: "12px",
  },
  titleLine: { flex: 1, height: "1px", background: "linear-gradient(90deg, rgba(255,90,0,0.28), transparent)" },
  bodyLine: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: "15px",
    lineHeight: "2", color: "#c8c8c8", marginBottom: "2px", minHeight: "2em",
    whiteSpace: "pre-wrap",
  },
  dimLine: { color: "#666", fontSize: "13px", letterSpacing: "0.1em" },
  blockCursor: {
    display: "inline-block", width: "0.6em", height: "1.15em",
    background: "#ff5a00", animation: "blink-cursor 0.75s step-end infinite",
    verticalAlign: "text-bottom", marginLeft: "2px",
  },
  skillsGrid: {
    display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(210px, 1fr))", gap: "8px",
    alignItems: "start",
  },
  skillBox: {
    border: "1px solid rgba(255,90,0,0.16)", background: "rgba(255,90,0,0.02)", padding: "8px 12px 6px 12px",
  },
  skillBoxLabel: {
    fontSize: "15px", fontWeight: "bold", letterSpacing: "0.25em", color: "#ff5a00",
    fontFamily: "'JetBrains Mono', monospace", marginBottom: "12px",
    paddingBottom: "8px", borderBottom: "1px solid rgba(255,90,0,0.12)",
  },
  skillItem: {
    fontSize: "14px", color: "#ffffff", fontFamily: "'JetBrains Mono', monospace",
    fontWeight: "700", marginBottom: "9px", display: "flex", alignItems: "center", gap: "9px",
  },
  dirHeader: {
    fontSize: "12px", letterSpacing: "0.15em", color: "#555",
    fontFamily: "'JetBrains Mono', monospace", marginBottom: "20px",
  },
  projectRow: {
    borderBottom: "1px solid rgba(255,255,255,0.04)",
    paddingBottom: "20px", marginBottom: "20px",
    opacity: 1, transition: "opacity 0.3s",
  },
  projectRowHeader: {
    display: "flex", alignItems: "flex-start", justifyContent: "space-between",
    marginBottom: "8px", gap: "14px",
  },
  projectFileName: {
    fontSize: "17px", color: "#ff5a00",
    fontFamily: "'JetBrains Mono', monospace", fontWeight: "700",
  },
  projectStatus: (s) => ({
    fontSize: "10px", letterSpacing: "0.12em",
    color: s === "DEPLOYED" ? "#00ff88" : "#ff5a00",
    border: `1px solid ${s === "DEPLOYED" ? "rgba(0,255,136,0.3)" : "rgba(255,90,0,0.3)"}`,
    padding: "3px 8px", flexShrink: 0,
    fontFamily: "'JetBrains Mono', monospace",
  }),
  projectDesc: {
    fontSize: "13px", color: "#ffffff",
    fontFamily: "'JetBrains Mono', monospace", lineHeight: "1.7", marginBottom: "10px",
  },
  techTags: { display: "flex", gap: "7px", flexWrap: "wrap" },
  techTag: {
    fontSize: "10px", color: "#ff5a00", border: "1px solid rgba(255,90,0,0.22)",
    padding: "2px 8px", fontFamily: "'JetBrains Mono', monospace",
    background: "rgba(255,90,0,0.03)",
  },
  contactRow: {
    display: "flex", alignItems: "baseline", gap: "20px",
    marginBottom: "16px", padding: "10px 0",
    borderBottom: "1px solid rgba(255,255,255,0.04)",
  },
  contactFileName: {
    fontSize: "13px", color: "#777",
    fontFamily: "'JetBrains Mono', monospace", minWidth: "130px",
  },
  contactValue: { fontSize: "15px", color: "#ff5a00", fontFamily: "'JetBrains Mono', monospace" },

  // Certifications
  certGrid: {
    display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "24px", marginTop: "10px"
  },
  certCard: {
    background: "rgba(255,90,0,0.02)", border: "1px solid rgba(255,90,0,0.1)",
    padding: "24px 16px", display: "flex", flexDirection: "column", alignItems: "center",
    textAlign: "center", transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
    position: "relative", overflow: "hidden"
  },
  certBadge: {
    width: "100px", height: "100px", objectFit: "contain", marginBottom: "16px",
    filter: "drop-shadow(0 0 10px rgba(255,90,0,0.2))",
  },
  certName: {
    fontSize: "18px", color: "#e0e0e0", fontFamily: "'JetBrains Mono', monospace",
    fontWeight: "700", marginBottom: "12px", minHeight: "2.4em", lineHeight: "1.4",
    letterSpacing: "0.02em"
  },
  certDetailContainer: {
    display: "flex", gap: "24px", alignItems: "flex-start", marginTop: "10px",
    animation: "popup-item 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards",
    width: "calc(100% + 60px)", marginLeft: "-30px"
  },
  certPreviewBox: {
    flex: "1", minWidth: 0, display: "flex", flexDirection: "column"
  },
  certImageWrapper: {
    background: "#000", border: "1px solid rgba(255,90,0,0.3)",
    padding: "0", position: "relative", overflow: "hidden"
  },
  certMetaBox: {
    width: "300px", flexShrink: 0, display: "flex", flexDirection: "column", gap: "20px"
  },
  certMetaRow: {
    display: "flex", borderBottom: "1px solid rgba(255,255,255,0.05)", paddingBottom: "12px"
  },
  certMetaLabel: {
    width: "120px", fontSize: "11px", color: "#666", letterSpacing: "0.15em",
    fontFamily: "'JetBrains Mono', monospace", textTransform: "uppercase"
  },
  certMetaValue: {
    flex: 1, fontSize: "13px", color: "#ff5a00", fontFamily: "'JetBrains Mono', monospace",
    fontWeight: "700"
  },
  viewCertBtn: {
    background: "transparent",
    border: "1px solid #ff5a00",
    color: "#ff5a00",
    padding: "8px 16px",
    fontSize: "11px",
    fontFamily: "'JetBrains Mono', monospace",
    cursor: "pointer",
    letterSpacing: "0.1em",
    transition: "all 0.2s",
  },

};


// Typing animation hook — stable lines ref to prevent infinite re-render
function useTypingAnimation(lines, isActive, speed = 16) {
  const { useState, useEffect, useRef } = React;
  const [displayedLines, setDisplayedLines] = useState([]);
  const [lineIdx, setLineIdx] = useState(0);
  const [charIdx, setCharIdx] = useState(0);
  const [done, setDone] = useState(false);
  const timerRef = useRef(null);
  const linesRef = useRef(lines);

  useEffect(() => {
    if (!isActive) return;
    linesRef.current = lines;
    setDisplayedLines([]);
    setLineIdx(0);
    setCharIdx(0);
    setDone(false);
  }, [isActive]); // eslint-disable-line

  useEffect(() => {
    if (!isActive || done) return;
    const flat = linesRef.current;
    if (!flat || flat.length === 0) return;
    if (lineIdx >= flat.length) { setDone(true); return; }
    const curLine = flat[lineIdx];
    if (charIdx <= curLine.length) {
      timerRef.current = setTimeout(() => {
        setDisplayedLines((prev) => {
          const u = [...prev];
          u[lineIdx] = curLine.substring(0, charIdx);
          return u;
        });
        setCharIdx((c) => c + 1);
      }, speed);
    } else {
      timerRef.current = setTimeout(() => { setLineIdx((l) => l + 1); setCharIdx(0); }, speed * 1.5);
    }
    return () => clearTimeout(timerRef.current);
  }, [isActive, lineIdx, charIdx, done, speed]);

  return { displayedLines, done };
}

function RotatingSpinner({ color = "#00ff88" }) {
  const { useState, useEffect } = React;
  const frames = ['|', '/', '-', '\\'];
  const [frame, setFrame] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setFrame((f) => (f + 1) % frames.length);
    }, 150);
    return () => clearInterval(interval);
  }, []);

  return (
    <span style={{
      color,
      fontWeight: "bold",
      fontFamily: "'JetBrains Mono', monospace",
      fontKerning: "none",
      fontVariantLigatures: "none",
      whiteSpace: "pre"
    }}>
      <span>[</span>
      <span style={{ display: "inline-block", minWidth: "1ch", textAlign: "center" }}>{frames[frame]}</span>
      <span>]</span>
    </span>
  );
}

// ── Section Views ──

function IdleView() {
  return (
    <div style={contentStyles.idleBox}>
      {["$ ls -la ~/", "$ # Use the left panel or terminal to navigate.", "$ # Try: cat about.txt  |  cd projects  |  help"].map((l, i) => (
        <div key={i} style={contentStyles.idlePrompt}>{l}</div>
      ))}
      <div style={{ ...contentStyles.idlePrompt, marginTop: "20px", display: "flex", alignItems: "center", gap: "10px" }}>
        <RotatingSpinner />
        <span style={{ color: "#ff5a00", fontWeight: "bold", textShadow: "0 0 5px rgba(255,90,0,0.5)" }}>/root</span>
        <span style={{ color: "#666" }}>You surely know your stuff, but there's nothing here, yet.</span>
      </div>
    </div>
  );
}

function TextFileView({ lines, isActive }) {
  const { useState, useEffect, useRef } = React;
  const [displayedLines, setDisplayedLines] = useState([]);
  const [activeLineIdx, setActiveLineIdx] = useState(0);
  const [charIdx, setCharIdx] = useState(0);
  const [done, setDone] = useState(false);

  useEffect(() => {
    if (!isActive) {
      setDisplayedLines([]);
      setActiveLineIdx(0);
      setCharIdx(0);
      setDone(false);
      return;
    }
    setDisplayedLines(lines.map(() => ""));
    setActiveLineIdx(0);
    setCharIdx(0);
    setDone(false);
  }, [isActive, lines]);

  useEffect(() => {
    if (!isActive || done || activeLineIdx >= lines.length) {
      if (activeLineIdx >= lines.length) setDone(true);
      return;
    }

    const curLine = lines[activeLineIdx];
    const isOrange = curLine.startsWith(">");
    const isEmpty = curLine.trim() === "";

    if (isEmpty) {
      setDisplayedLines((prev) => {
        const u = [...prev];
        u[activeLineIdx] = curLine;
        return u;
      });
      setActiveLineIdx((prev) => prev + 1);
      return;
    }

    if (isOrange) {
      if (charIdx <= curLine.length) {
        const timer = setTimeout(() => {
          setDisplayedLines((prev) => {
            const u = [...prev];
            u[activeLineIdx] = curLine.substring(0, charIdx);
            return u;
          });
          setCharIdx((c) => c + 1);
        }, 9);
        return () => clearTimeout(timer);
      } else {
        setCharIdx(0);
        setActiveLineIdx((prev) => prev + 1);
      }
    } else {
      setDisplayedLines((prev) => {
        const u = [...prev];
        let idx = activeLineIdx;
        while (idx < lines.length && !lines[idx].startsWith(">")) {
          u[idx] = lines[idx];
          idx++;
        }
        return u;
      });
      setCharIdx(0);
      setActiveLineIdx((prev) => {
        let idx = prev;
        while (idx < lines.length && !lines[idx].startsWith(">")) {
          idx++;
        }
        return idx;
      });
    }
  }, [isActive, activeLineIdx, charIdx, done, lines]);

  return (
    <>
      {displayedLines.map((line, i) => {
        const isDim = line.startsWith("LOCATION") || line.startsWith("CLEARANCE") || line.startsWith("STATUS") || line.startsWith("UPDATED") || line.startsWith("SENIOR") && line.includes("ENGINEER") && !line.includes("  →");
        const isPromo = line.startsWith(">");
        const isCompany = line.trim().startsWith("@");
        const isIndented = line.startsWith("  ");
        const isEmpty = line.trim() === "";
        const hasText = line.length > 0;
        const shouldPopup = !isPromo && !isEmpty && hasText;

        return (
          <div key={i} style={{
            ...contentStyles.bodyLine,
            ...(isDim ? contentStyles.dimLine : {}),
            ...(isPromo ? { color: "#ff5a00", fontWeight: "700" } : {}),
            ...(isCompany ? { color: "#ffffff", fontWeight: "bold" } : {}),
            ...(isIndented ? { paddingLeft: "1.5rem" } : {}),
            ...(shouldPopup ? {
              opacity: 1, transform: "scale(1)",
              animation: "popup-item 0.2s ease-out forwards",
              transformOrigin: "left center"
            } : {}),
            minHeight: isEmpty ? "1.2em" : undefined
          }}>
            {isCompany ? line.replace("@ ", "") : (isIndented ? line.slice(2) : (line || "\u00a0"))}
            {!done && i === activeLineIdx && (
              <span style={contentStyles.blockCursor} />
            )}
          </div>
        );
      })}
    </>
  );
}

const SKILL_LOGOS = {
  "Java": "https://api.iconify.design/logos:java.svg",
  "C++": "https://api.iconify.design/logos:c-plusplus.svg",
  "Python": "https://api.iconify.design/logos:python.svg",
  "SQL": "https://api.iconify.design/vscode-icons:file-type-sql.svg",
  "Spring Boot": "https://api.iconify.design/logos:spring-icon.svg",
  "Spring Data JPA": "https://api.iconify.design/logos:spring-icon.svg",
  "REST API": "https://api.iconify.design/logos:postman-icon.svg",
  "Microservice architecture": "https://api.iconify.design/carbon:cloud-service-management.svg?color=%2300ff88",
  "Git": "https://api.iconify.design/logos:git-icon.svg",
  "GitHub": "https://api.iconify.design/logos:github-icon.svg",
  "Azure DevOps": "./src/assets/icons/Azure_DevOps.svg",
  "Docker": "https://api.iconify.design/logos:docker-icon.svg",
  "Azure App Service": "./src/assets/icons/Azure_App_Service.svg",
  "Azure Service Bus": "./src/assets/icons/Azure_Service_Bus.svg",
  "Azure Storage": "./src/assets/icons/Azure_Storage.svg",
  "Azure Functions": "./src/assets/icons/Azure_Functions.svg",
  "Azure App Insights": "./src/assets/icons/Azure_App_Insights.svg",
  "PostgreSQL": "https://api.iconify.design/logos:postgresql.svg",
  "MySQL": "https://api.iconify.design/logos:mysql-icon.svg",
  "Azure SQL Server": "./src/assets/icons/Azure_SQL_Server.svg",
  "Azure Cosmos DB": "./src/assets/icons/Azure_Cosmos_DB.svg",
  "JUnit": "./src/assets/icons/JUnit.svg",
  "Java Threads": "https://api.iconify.design/logos:java.svg",
  "Executor Service": "https://api.iconify.design/logos:java.svg",
  "Kafka": "./src/assets/icons/Kafka.svg",
  "Jenkins": "https://api.iconify.design/logos:jenkins.svg",
  "Azure": "https://api.iconify.design/logos:microsoft-azure.svg",
  "Bash": "https://api.iconify.design/logos:bash-icon.svg",
  "systemd": "https://api.iconify.design/skill-icons:linux-dark.svg",
  "Node.js": "https://api.iconify.design/logos:nodejs-icon.svg",
  "Redis": "https://api.iconify.design/logos:redis.svg",
  "Next.js": "https://api.iconify.design/logos:nextjs-icon.svg",
  "Prisma": "https://api.iconify.design/logos:prisma.svg",
  "Stripe": "https://api.iconify.design/logos:stripe.svg",
  "React": "https://api.iconify.design/logos:react.svg",
  "WebSocket": "https://api.iconify.design/logos:websocket.svg",
  "D3.js": "https://api.iconify.design/logos:d3.svg",
  "Commander.js": "https://api.iconify.design/logos:javascript.svg",
  "Shell": "https://api.iconify.design/vscode-icons:file-type-shell.svg",
  "MongoDB": "https://api.iconify.design/logos:mongodb-icon.svg",
  "AWS S3": "https://api.iconify.design/logos:aws-s3.svg",
  "Azure DevOps API": "./src/assets/icons/Azure_DevOps.svg",
  "Git API": "https://api.iconify.design/logos:git-icon.svg",
  "Multithreading": "https://api.iconify.design/logos:java.svg",
  "JavaScript": "https://api.iconify.design/logos:javascript.svg",
  "CSS3": "https://api.iconify.design/logos:css-3.svg",
  "HTML5": "https://api.iconify.design/logos:html-5.svg",
  "Babel": "https://api.iconify.design/logos:babel.svg"
};

function SkillCard({ cat, ci, isActive }) {
  const { useState, useEffect, useRef } = React;
  const [typedHeading, setTypedHeading] = useState("");
  const [typingDone, setTypingDone] = useState(false);
  const [cardVisible, setCardVisible] = useState(false);

  useEffect(() => {
    if (!isActive) {
      setTypedHeading("");
      setTypingDone(false);
      setCardVisible(false);
      return;
    }

    const cardTimer = setTimeout(() => {
      setCardVisible(true);
    }, ci * 150);

    return () => clearTimeout(cardTimer);
  }, [isActive, ci]);

  useEffect(() => {
    if (!cardVisible) return;

    const fullText = "> " + cat.label;
    let charIdx = 0;
    const timer = setInterval(() => {
      if (charIdx <= fullText.length) {
        setTypedHeading(fullText.substring(0, charIdx));
        charIdx++;
      } else {
        clearInterval(timer);
        setTypingDone(true);
      }
    }, 13);

    return () => clearInterval(timer);
  }, [cardVisible, cat.label]);

  return (
    <div style={{
      ...contentStyles.skillBox,
      opacity: cardVisible ? 1 : 0,
      transform: cardVisible ? "translateY(0)" : "translateY(6px)",
      transition: "opacity 0.3s, transform 0.3s"
    }}>
      <div style={contentStyles.skillBoxLabel}>
        {typedHeading}
        {!typingDone && <span style={{ ...contentStyles.blockCursor, width: "0.5em", height: "1.1em", marginLeft: "4px" }} />}
      </div>
      {cat.items.map((item, ii) => {
        const logoUrl = SKILL_LOGOS[item] || `https://api.iconify.design/logos:git-icon.svg`;
        return (
          <div
            key={item}
            style={{
              ...contentStyles.skillItem,
              opacity: typingDone ? 1 : 0,
              transform: typingDone ? "scale(1)" : "scale(0.8)",
              transition: `opacity 0.2s ease-out ${ii * 0.05}s, transform 0.2s ease-out ${ii * 0.05}s`
            }}
          >
            <img
              src={logoUrl}
              alt=""
              style={{ width: "20px", height: "20px", flexShrink: 0 }}
            />
            {item}
          </div>
        );
      })}
    </div>
  );
}

function SkillsView({ data, isActive }) {
  return (
    <div style={contentStyles.skillsGrid}>
      {data.categories.map((cat, ci) => (
        <SkillCard key={cat.label} cat={cat} ci={ci} isActive={isActive} />
      ))}
    </div>
  );
}

function ProjectRow({ p, i, isActive, onSubFileOpen }) {
  const { useState, useEffect } = React;
  const [typedTitle, setTypedTitle] = useState("");
  const [typingDone, setTypingDone] = useState(false);
  const [rowVisible, setRowVisible] = useState(false);
  const [hovered, setHovered] = useState(false);

  useEffect(() => {
    if (!isActive) {
      setTypedTitle("");
      setTypingDone(false);
      setRowVisible(false);
      return;
    }

    const timer = setTimeout(() => {
      setRowVisible(true);
    }, i * 120);

    return () => clearTimeout(timer);
  }, [isActive, i]);

  useEffect(() => {
    if (!rowVisible) return;

    const fullText = "> " + p.name;
    let charIdx = 0;
    const interval = setInterval(() => {
      if (charIdx <= fullText.length) {
        setTypedTitle(fullText.substring(0, charIdx));
        charIdx++;
      } else {
        clearInterval(interval);
        setTypingDone(true);
      }
    }, 11);

    return () => clearInterval(interval);
  }, [rowVisible, p.name]);

  return (
    <div
      onClick={() => onSubFileOpen && onSubFileOpen(i, "project")}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        ...contentStyles.projectRow,
        opacity: rowVisible ? 1 : 0,
        transform: rowVisible ? "translateX(0)" : "translateX(-6px)",
        transition: "opacity 0.25s, transform 0.25s, background 0.2s, border-color 0.2s",
        cursor: "pointer",
        background: hovered ? "rgba(255,90,0,0.05)" : "rgba(255,90,0,0.015)",
        borderColor: hovered ? "rgba(255,90,0,0.4)" : "rgba(255,90,0,0.1)",
      }}
    >
      <div style={contentStyles.projectRowHeader}>
        <span style={contentStyles.projectFileName}>
          {typedTitle}
          {!typingDone && <span style={{ ...contentStyles.blockCursor, width: "0.5em", height: "1.1em", marginLeft: "4px" }} />}
        </span>
        <span style={{
          ...contentStyles.projectStatus(p.status),
          opacity: typingDone ? 1 : 0,
          transform: typingDone ? "scale(1)" : "scale(0.8)",
          transition: "opacity 0.2s ease-out, transform 0.2s ease-out"
        }}>{p.status}</span>
      </div>
      <div style={{
        color: "#ffffff", fontWeight: "bold", fontSize: "13px", marginBottom: "8px",
        fontFamily: "'JetBrains Mono', monospace", lineHeight: "1.6",
        opacity: typingDone ? 1 : 0,
        transform: typingDone ? "translateY(0)" : "translateY(4px)",
        transition: "opacity 0.25s ease-out, transform 0.25s ease-out"
      }}>{p.label}</div>
      <div style={{
        ...contentStyles.projectDesc,
        opacity: typingDone ? 1 : 0,
        transform: typingDone ? "translateY(0)" : "translateY(4px)",
        transition: "opacity 0.25s ease-out 0.05s, transform 0.25s ease-out 0.05s"
      }}>{p.desc}</div>
      <div style={{
        ...contentStyles.techTags,
        opacity: typingDone ? 1 : 0,
        transform: typingDone ? "translateY(0)" : "translateY(4px)",
        transition: "opacity 0.25s ease-out 0.1s, transform 0.25s ease-out 0.1s"
      }}>
        {p.tech.map((t) => <span key={t} style={contentStyles.techTag}>{t}</span>)}
        <span style={{ ...contentStyles.techTag, color: "#333", borderColor: "rgba(255,255,255,0.04)", marginLeft: "auto" }}>{p.year}</span>
      </div>
    </div>
  );
}

function ProjectsDirView({ data, isActive, onSubFileOpen }) {
  return (
    <>
      <div style={contentStyles.dirHeader}>drwxr-xr-x  projects/  [{data.items.length} files]</div>
      {data.items.map((p, i) => (
        <ProjectRow key={p.name} p={p} i={i} isActive={isActive} onSubFileOpen={onSubFileOpen} />
      ))}
    </>
  );
}

function ContactRow({ item, i, isActive }) {
  const { useState, useEffect } = React;
  const [rowVisible, setRowVisible] = useState(false);
  const [typedLabel, setTypedLabel] = useState("");
  const [typingDone, setTypingDone] = useState(false);
  const [hovered, setHovered] = useState(false);

  useEffect(() => {
    if (!isActive) {
      setRowVisible(false);
      setTypedLabel("");
      setTypingDone(false);
      return;
    }
    const timer = setTimeout(() => {
      setRowVisible(true);
    }, i * 120);
    return () => clearTimeout(timer);
  }, [isActive, i]);

  useEffect(() => {
    if (!rowVisible) return;
    const fullText = "> " + item.label.toLowerCase() + ": ";
    let charIdx = 0;
    const interval = setInterval(() => {
      if (charIdx <= fullText.length) {
        setTypedLabel(fullText.substring(0, charIdx));
        charIdx++;
      } else {
        clearInterval(interval);
        setTypingDone(true);
      }
    }, 9);
    return () => clearInterval(interval);
  }, [rowVisible, item.label]);

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        ...contentStyles.contactRow,
        opacity: rowVisible ? 1 : 0,
        transform: rowVisible ? "translateX(0)" : "translateX(-6px)",
        transition: "opacity 0.25s, transform 0.25s, background 0.2s, border-color 0.2s",
        cursor: "pointer",
        background: hovered ? "rgba(255,90,0,0.05)" : "rgba(255,90,0,0.015)",
        borderColor: hovered ? "rgba(255,90,0,0.4)" : "rgba(255,90,0,0.1)",
      }}
    >
      <span style={{
        color: "#ff5a00",
        fontWeight: "bold",
        fontSize: "15px",
        fontFamily: "'JetBrains Mono', monospace",
        minWidth: "140px",
      }}>
        {typedLabel}
        {!typingDone && <span style={{ ...contentStyles.blockCursor, width: "0.5em", height: "1.1em", marginLeft: "4px" }} />}
      </span>
      <a
        href={item.name === "email.md" ? `mailto:${item.value}` : item.value}
        target="_blank"
        rel="noopener noreferrer"
        onClick={(e) => e.stopPropagation()}
        style={{
          color: "#ffffff",
          fontWeight: "bold",
          fontSize: "15px",
          fontFamily: "'JetBrains Mono', monospace",
          textDecoration: "none",
          opacity: typingDone ? 1 : 0,
          transform: typingDone ? "scale(1)" : "scale(0.8)",
          animation: typingDone ? "popup-item 0.2s ease-out forwards" : "none",
          transformOrigin: "left center"
        }}
        onMouseEnter={(e) => e.target.style.textDecoration = "underline"}
        onMouseLeave={(e) => e.target.style.textDecoration = "none"}
      >
        {item.value}
      </a>
    </div>
  );
}

function ContactDirView({ data, isActive }) {
  return (
    <>
      <div style={contentStyles.dirHeader}>drwxr-xr-x  contact/  [{data.items.length} files]</div>
      {data.items.map((item, i) => (
        <ContactRow key={item.name} item={item} i={i} isActive={isActive} />
      ))}
    </>
  );
}

function ProjectDetailView({ p, isActive }) {
  const { useState, useEffect } = React;
  const [typedTitle, setTypedTitle] = useState("");
  const [typingDone, setTypingDone] = useState(false);

  useEffect(() => {
    if (!isActive) {
      setTypedTitle("");
      setTypingDone(false);
      return;
    }

    const fullText = "> " + p.name;
    let charIdx = 0;
    const interval = setInterval(() => {
      if (charIdx <= fullText.length) {
        setTypedTitle(fullText.substring(0, charIdx));
        charIdx++;
      } else {
        clearInterval(interval);
        setTypingDone(true);
      }
    }, 15);

    return () => clearInterval(interval);
  }, [isActive, p.name]);

  return (
    <div style={{ ...contentStyles.projectRow, borderLeft: "2px solid rgba(255,90,0,0.4)", paddingLeft: "16px", paddingBottom: "16px" }}>
      <div style={contentStyles.projectRowHeader}>
        <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
          <RotatingSpinner />
          <span style={contentStyles.projectFileName}>
            {typedTitle}
            {!typingDone && <span style={{ ...contentStyles.blockCursor, width: "0.5em", height: "1.1em", marginLeft: "4px" }} />}
          </span>
        </div>
        <span style={{
          ...contentStyles.projectStatus(p.status),
          opacity: typingDone ? 1 : 0,
          transform: typingDone ? "scale(1)" : "scale(0.8)",
          transition: "opacity 0.2s ease-out, transform 0.2s ease-out"
        }}>{p.status}</span>
      </div>
      <div style={{
        opacity: typingDone ? 1 : 0,
        transform: typingDone ? "translateY(0)" : "translateY(8px)",
        transition: "opacity 0.3s ease-out, transform 0.3s ease-out"
      }}>
        <div style={{ color: "#ffffff", fontWeight: "bold", fontSize: "14px", marginBottom: "12px", fontFamily: "'JetBrains Mono', monospace", lineHeight: "1.6" }}>{p.label}</div>
        <div style={{ ...contentStyles.techTags, marginTop: "0px", marginBottom: "20px", display: "flex", gap: "12px", flexWrap: "wrap", alignItems: "center" }}>
          {p.tech.map((t) => (
            <span key={t} style={{ ...contentStyles.techTag, display: "flex", alignItems: "center", gap: "6px", fontSize: "11px", padding: "4px 10px" }}>
              <img src={SKILL_LOGOS[t] || `https://api.iconify.design/logos:git-icon.svg`} alt={t} style={{ width: "16px", height: "16px" }} />
              {t}
            </span>
          ))}
        </div>
        <div style={{ ...contentStyles.bodyLine, marginBottom: "24px", whiteSpace: "pre-wrap", color: "#ddd", lineHeight: "1.8" }}>{p.fullDesc || p.desc}</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginTop: "10px" }}>
          {p.github ? (
            <a href={p.github} target="_blank" rel="noopener noreferrer" style={{
              display: "inline-flex", alignItems: "center", gap: "8px", padding: "8px 16px",
              backgroundColor: "rgba(255,90,0,0.1)", border: "1px solid rgba(255,90,0,0.4)",
              color: "#ff5a00", textDecoration: "none", fontSize: "12px", fontFamily: "'JetBrains Mono', monospace",
              cursor: "pointer", fontWeight: "bold", transition: "all 0.2s"
            }}>
              <img src={`https://api.iconify.design/mdi:github.svg?color=%23ff5a00`} alt="GitHub" style={{ width: "16px", height: "16px" }} />
              VIEW ON GITHUB
            </a>
          ) : <div />}
          <span style={{ ...contentStyles.techTag, color: "#333", borderColor: "rgba(255,255,255,0.04)", padding: "4px 10px", fontSize: "11px" }}>{p.year}</span>
        </div>
      </div>
    </div>
  );
}

function CertItem({ item, i, isActive, onSubFileOpen }) {
  const { useState } = React;
  const [hovered, setHovered] = useState(false);
  const btnText = "VIEW CERTIFICATE";
  const { displayedLines } = useTypingAnimation([btnText], isActive, 30);
  const typedBtnText = displayedLines[0] || "";

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onClick={() => onSubFileOpen && onSubFileOpen(i, "certificate")}
      style={{
        ...contentStyles.certCard,
        opacity: isActive ? 1 : 0,
        transform: isActive ? "translateY(0)" : "translateY(15px)",
        borderColor: hovered ? "rgba(255,90,0,0.4)" : "rgba(255,90,0,0.1)",
        background: hovered ? "rgba(255,90,0,0.05)" : "rgba(255,90,0,0.02)",
        transition: "all 0.3s ease",
        cursor: "pointer"
      }}
    >
      <div style={{ position: "absolute", top: 0, left: 0, padding: "8px", fontSize: "9px", color: "#333", fontFamily: "'JetBrains Mono', monospace" }}>
        0{i + 1}.EXE
      </div>
      <img src={item.badgeUrl} alt={item.label} style={contentStyles.certBadge} />
      <div style={contentStyles.certName}>{item.label}</div>
      <button
        style={{
          ...contentStyles.viewCertBtn,
          background: hovered ? "#ff5a00" : "transparent",
          color: hovered ? "#000" : "#ff5a00",
          pointerEvents: "none",
          minWidth: "160px" // Prevent jumping during typing
        }}
      >
        {typedBtnText}
        {isActive && typedBtnText.length < btnText.length && (
          <span style={{ ...contentStyles.blockCursor, width: "0.5em", height: "1.1em", marginLeft: "2px" }} />
        )}
      </button>
    </div>
  );
}

function CertificationsDirView({ data, isActive, onSubFileOpen }) {
  const { useState, useEffect } = React;
  const [visibleItems, setVisibleItems] = useState([]);

  useEffect(() => {
    if (!isActive) { setVisibleItems([]); return; }
    data.items.forEach((_, i) => {
      setTimeout(() => setVisibleItems(prev => [...prev, i]), i * 150 + 100);
    });
  }, [isActive, data.items]);

  return (
    <>
      <div style={contentStyles.dirHeader}>drwxr-xr-x  certifications/  [{data.items.length} entries]</div>
      <div style={contentStyles.certGrid}>
        {data.items.map((item, i) => (
          <CertItem
            key={item.name}
            item={item}
            i={i}
            isActive={visibleItems.includes(i)}
            onSubFileOpen={onSubFileOpen}
          />
        ))}
      </div>
    </>
  );
}

function TypingValue({ value, style, isActive }) {
  const { displayedLines } = useTypingAnimation([value], isActive, 25);
  return (
    <div style={style}>
      {displayedLines[0] || ""}
      {isActive && (displayedLines[0]?.length || 0) < value.length && (
        <span style={{ ...contentStyles.blockCursor, width: "0.5em", height: "1.1em", marginLeft: "2px" }} />
      )}
    </div>
  );
}

function TypingTag({ value, style, isActive, delay = 0 }) {
  const [start, setStart] = React.useState(false);
  React.useEffect(() => {
    if (isActive) {
      const t = setTimeout(() => setStart(true), delay);
      return () => clearTimeout(t);
    }
  }, [isActive, delay]);

  const { displayedLines } = useTypingAnimation([value], start, 20);
  const text = displayedLines[0] || "";

  return (
    <span style={style}>
      {text}
      {start && text.length < value.length && (
        <span style={{ ...contentStyles.blockCursor, width: "0.4em", height: "0.9em", marginLeft: "2px" }} />
      )}
    </span>
  );
}

function CertificateDetailView({ cert }) {
  const [active, setActive] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setActive(true), 300);
    return () => clearTimeout(t);
  }, []);

  return (
    <div style={contentStyles.certDetailContainer}>
      <div style={contentStyles.certPreviewBox}>
        <div style={{ fontSize: "10px", color: "#555", marginBottom: "14px", letterSpacing: "0.2em", fontFamily: "'JetBrains Mono', monospace" }}>
          PREVIEW.SYS // {cert.name.toUpperCase()}
        </div>

        <div style={contentStyles.certImageWrapper}>
          <img
            src={cert.certUrl}
            alt={cert.label}
            style={{ width: "100%", height: "auto", display: "block" }}
          />
        </div>

        <div style={{ marginTop: "16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span style={{ fontSize: "10px", color: "#444", fontFamily: "'JetBrains Mono', monospace" }}>FILE: {cert.name}</span>
          <TypingValue
            value="[ VERIFIED ]"
            style={{ fontSize: "11px", color: "#00ff88", fontFamily: "'JetBrains Mono', monospace", fontWeight: "bold", letterSpacing: "0.1em" }}
            isActive={active}
          />
        </div>
      </div>

      <div style={contentStyles.certMetaBox}>
        <div style={{ ...contentStyles.sectionTitleRow, borderBottom: "1px solid rgba(255,90,0,0.3)", marginBottom: "15px", display: "flex", alignItems: "center" }}>
          <RotatingSpinner />
          CERTIFICATE.META
        </div>

        <div style={{ fontSize: "18px", color: "#ffffff", fontWeight: "bold", fontFamily: "'JetBrains Mono', monospace", marginBottom: "25px", lineHeight: "1.2" }}>
          {cert.label.toUpperCase()}
        </div>

        <div style={contentStyles.certMetaRow}>
          <div style={contentStyles.certMetaLabel}>ISSUED BY</div>
          <TypingValue value={cert.issuedBy} style={contentStyles.certMetaValue} isActive={active} />
        </div>
        <div style={contentStyles.certMetaRow}>
          <div style={contentStyles.certMetaLabel}>ISSUE DATE</div>
          <TypingValue value={cert.issueDate} style={contentStyles.certMetaValue} isActive={active} />
        </div>
        <div style={contentStyles.certMetaRow}>
          <div style={contentStyles.certMetaLabel}>CREDENTIAL ID</div>
          <TypingValue value={cert.credentialId} style={contentStyles.certMetaValue} isActive={active} />
        </div>
        <div style={contentStyles.certMetaRow}>
          <div style={contentStyles.certMetaLabel}>STATUS</div>
          <TypingValue value={cert.status} style={{ ...contentStyles.certMetaValue, color: "#00ff88" }} isActive={active} />
        </div>

        <div style={{ marginTop: "10px" }}>
          <div style={{ ...contentStyles.certMetaLabel, marginBottom: "12px" }}>SKILLS VALIDATED</div>
          <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
            {cert.skills.map((s, idx) => (
              <TypingTag
                key={s}
                value={s}
                style={{ ...contentStyles.techTag, fontSize: "9px", padding: "3px 8px" }}
                isActive={active}
                delay={idx * 200 + 500}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Main ContentDisplay ──

function ContentDisplay({ displayContent, currentDir, data, activeSubFile, onSubFileOpen, onSubFileBack }) {
  const currentPath = activeSubFile
    ? `~/${currentDir}/${activeSubFile.name}`
    : currentDir
      ? `~/${currentDir}/`
      : displayContent
        ? `~/${displayContent === "about" ? "about-me.md" : displayContent === "skills" ? "skills.md" : displayContent === "experience" ? "experience.md" : displayContent}/`
        : "~/";

  // Sub-file: single project card
  const renderSubFile = () => {
    if (!activeSubFile) return null;
    if (activeSubFile.type === "project") {
      return <ProjectDetailView p={activeSubFile.item} isActive={true} />;
    }
    if (activeSubFile.type === "certificate") {
      return <CertificateDetailView cert={activeSubFile.item} />;
    }
    if (activeSubFile.type === "contact") {
      const item = activeSubFile.item;
      return (
        <div style={{ ...contentStyles.contactRow, borderLeft: "2px solid rgba(255,90,0,0.4)", paddingLeft: "16px", flexDirection: "column", gap: "8px" }}>
          <div style={contentStyles.dimLine}>{item.name}</div>
          <div style={{ ...contentStyles.contactValue, fontSize: "18px" }}>{item.value}</div>
        </div>
      );
    }
    return null;
  };

  const renderContent = () => {
    if (activeSubFile) return renderSubFile();
    if (!displayContent) return <IdleView />;
    switch (displayContent) {
      case "about": {
        const lines = [...data.about.body, "", ...data.about.meta];
        return <TextFileView key="about" lines={lines} isActive={true} />;
      }
      case "skills":
        return <SkillsView key="skills" data={data.skills} isActive={true} />;
      case "experience":
        return <TextFileView key="experience" lines={data.experience.body} isActive={true} />;
      case "projects":
        return <ProjectsDirView key="projects" data={data.projects} isActive={true} onSubFileOpen={onSubFileOpen} />;
      case "certifications":
        return <CertificationsDirView key="certifications" data={data.certifications} isActive={true} onSubFileOpen={onSubFileOpen} />;
      case "contact":
        return <ContactDirView key="contact" data={data.contact} isActive={true} onSubFileOpen={onSubFileOpen} />;
      default:
        return <IdleView />;
    }
  };

  const sectionTitle = activeSubFile
    ? null
    : displayContent
      ? (displayContent === "about" ? "about-me.md" : displayContent === "skills" ? "skills.md" : displayContent === "experience" ? "experience.md" : displayContent === "certifications" ? "certifications/" : displayContent + "/")
      : null;

  return (
    <div style={contentStyles.container}>
      <div style={contentStyles.topBar}>
        <span style={contentStyles.topBarDot("#ff5a00")} />
        <span style={contentStyles.topBarDot("rgba(255,90,0,0.35)")} />
        <span style={contentStyles.topBarDot("rgba(255,90,0,0.12)")} />
        <span style={contentStyles.topBarPath}>{currentPath}</span>
        <span style={contentStyles.topBarLabel}>CONTENT // MAIN</span>
      </div>
      <div style={contentStyles.contentArea}>
        {/* Back arrow — only when viewing a sub-file */}
        {activeSubFile && onSubFileBack && (
          <div
            onClick={onSubFileBack}
            style={{
              display: "flex", alignItems: "center", gap: "8px", cursor: "pointer",
              fontSize: "12px", color: "#ff5a00", fontFamily: "'JetBrains Mono',monospace",
              marginBottom: "20px", opacity: 0.8,
              letterSpacing: "0.1em"
            }}
          >
            ← back to {currentDir}/
          </div>
        )}
        {sectionTitle && (
          <div style={contentStyles.sectionTitleRow}>
            <RotatingSpinner />
            {sectionTitle.toUpperCase()}
            <div style={contentStyles.titleLine} />
          </div>
        )}
        {renderContent()}
      </div>
    </div>
  );
}

Object.assign(window, { ContentDisplay, TextFileView, SkillsView, ProjectsDirView, CertificationsDirView, ContactDirView });