```jsx
import { useState, useEffect, useRef } from "react";

// --- COMPLEX GAME STATE & ASSETS ---
const SERVERS = [
  { id: "iron-burrow", name: "The Iron Burrow", icon: "⚔️" },
];

const CHANNELS = [
  { id: "general", name: "general", category: "GREAT HALL" },
  { id: "fursuit-friday", name: "fursuit-friday", category: "GREAT HALL" },
  { id: "armor-showcase", name: "armor-showcase", category: "FORGE & FIELD" },
  { id: "the-vault", name: "the-vault", category: "FORBIDDEN", locked: true },
];

const MEMBERS = {
  VelvetPawz: { id: 1, name: "VelvetPawz", role: "Fursuit Warden", color: "#f4a261", status: "online", avatar: "🦊", tagline: "she/her | partial suit progress: 78%", bio: "Just a cozy fox building medieval armor out of faux fur. Be nice!", coolnessRequired: 0 },
  Sir_Grimthorn: { id: 2, name: "Sir_Grimthorn", role: "Knight Commander", color: "#a8dadc", status: "online", avatar: "🛡️", tagline: "he/him | plate armor restoration enjoyer", bio: "Historical European Martial Arts instructor. Chronic pauldron polisher.", coolnessRequired: 2 },
  MossbarkFenn: { id: 3, name: "MossbarkFenn", role: "Squire of the Paw", color: "#8ecae6", status: "idle", avatar: "🌿", tagline: "they/them | gentle bean 🌿", bio: "Baking my way through the dark ages. Certified soft deer.", coolnessRequired: -1 },
  Dame_Ashveil: { id: 4, name: "Dame_Ashveil", role: "Knight Commander", color: "#e63946", status: "online", avatar: "⚒️", tagline: "she/her | blacksmith | do NOT touch my gauntlets", bio: "If it can't be fixed with a 3lb hammer, it's not worth fixing.", coolnessRequired: 4 },
  Lute_Bard_99: { id: 5, name: "Lute_Bard_99", role: "Jester", color: "#f1c40f", status: "online", avatar: "🪕", tagline: "any/all | i play actual lute", bio: "Writing bad ballads for good people. Slide into my DMs with song recs.", coolnessRequired: 1 },
  GREY: { id: 6, name: "̴̡̛G̷̨̛̕ ̶̡̢͝R̷̡͘͝ ̶̢̛͘E̴̢͘͝ ̵̨̨̛Y̸̛͘͘", role: "???", color: "#ff3333", status: "offline", avatar: "👁️", tagline: "...", bio: "W E   A R E   W A I T I N G", coolnessRequired: 99 }
};

// INITIAL CHAT LOGS
const INITIAL_MESSAGES = {
  general: [
    { id: 1, user: "VelvetPawz", ts: "Today at 9:02 AM", content: "good morning iron burrow!! ☀️🦊 anyone else excited for the summer faire next month?", react: ["☀️ 4", "🦊 7"] },
    { id: 2, user: "Sir_Grimthorn", ts: "Today at 9:05 AM", content: "Hail and well met! I've been polishing my pauldrons since 6am. The left one had a dent I've been ignoring.", react: ["⚔️ 5"] },
    { id: 3, user: "Lute_Bard_99", ts: "Today at 9:07 AM", content: "grimthorn you've mentioned that pauldron in this server 14 times. i have kept count.", react: ["💀 9"] },
    { id: 4, user: "MossbarkFenn", ts: "Today at 9:11 AM", content: "i made scones this morning and thought of everyone here 🥺 soft and round just like us", react: ["🥺 12"] },
  ],
  "fursuit-friday": [
    { id: 21, user: "VelvetPawz", ts: "Friday at 11:00 AM", content: "FURSUIT FRIDAY 🎉🎉 posting my partial!! the ears finally came in and i might cry", img: "🦊🔨", react: ["🥺 14"] },
    { id: 22, user: "MossbarkFenn", ts: "Friday at 11:20 AM", content: "here's mine!! i made the antlers myself out of foam and wire 🦌✨", img: "🦌🌿", react: ["🌿 8"] },
  ],
  "armor-showcase": [
    { id: 31, user: "Dame_Ashveil", ts: "Thursday at 2:05 PM", content: "New gorget finished. Three months, two cracked rivets, and one argument with my propane torch. Worth it.", img: "⚔️🔥", react: ["⚒️ 14"] },
  ],
  "the-vault": [
    { id: 41, user: "GREY", ts: "???", content: "Y o u  f o u n d  u s ." },
  ]
};

export default function App() {
  const [view, setView] = useState("server"); // "server" or "dms"
  const [activeChannel, setActiveChannel] = useState("general");
  const [activeDM, setActiveDM] = useState(null);
  
  // Game Systems
  const [coolness, setCoolness] = useState(0); 
  const [horrorLevel, setHorrorLevel] = useState(0); 
  const [unlockedDMs, setUnlockedDMs] = useState([]); 
  const [chatLogs, setChatLogs] = useState(INITIAL_MESSAGES);
  const [dmLogs, setDMLogs] = useState({});
  const [input, setInput] = useState("");
  const [typingUser, setTypingUser] = useState(null);
  const [glitchActive, setGlitchActive] = useState(false);

  const msgEndRef = useRef(null);

  useEffect(() => {
    msgEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [chatLogs, dmLogs, activeChannel, activeDM, view, typingUser]);

  // Trigger brief screen glitch matrix
  const triggerGlitch = () => {
    setGlitchActive(true);
    setTimeout(() => setGlitchActive(false), 400);
  };

  // Process text corruption based on game horror stage
  const getCorruptedText = (text, intensity = 1) => {
    if (horrorLevel < 2) return text;
    const glyphs = "̵̶̷̟͎̻̞̣̞͉̪̽͛͗͂̑̓͌̔́̚͝͝⛧☠";
    return text.split("").map(char => {
      if (Math.random() > 0.5 / intensity) {
        const corruption = Array.from({ length: Math.floor(Math.random() * intensity) }, () => 
          glyphs[Math.floor(Math.random() * glyphs.length)]
        ).join("");
        return char + corruption;
      }
      return char;
    }).join("");
  };

  // Evaluates user inputs to calculate "coolness index" and trigger narrative branches
  const processInputMetrics = (text) => {
    const lower = text.toLowerCase();
    let coolPoints = 0;
    let horrorPoints = 0;

    // Check coolness flags (historical knowledge, craft appreciation, friendly vibe)
    if (lower.includes("blacksmith") || lower.includes("forge") || lower.includes("anvil")) coolPoints += 2;
    if (lower.includes("scones") || lower.includes("delicious") || lower.includes("wholesome")) coolPoints += 1;
    if (lower.includes("pauldron") || lower.includes("historical") || lower.includes("armor")) coolPoints += 2;
    
    // Check horror flags
    if (lower.includes("who is grey") || lower.includes("static") || lower.includes("glitch") || lower.includes("help")) {
      horrorPoints += 1;
    }

    return { coolPoints, horrorPoints };
  };

  // Simulates realistic typing delays for the chat engine
  const queueSimulatedResponse = (sender, text, isDM = false, delay = 2000) => {
    setTypingUser(sender);
    setTimeout(() => {
      setTypingUser(null);
      const newMsg = {
        id: Date.now(),
        user: sender,
        ts: "Just now",
        content: horrorLevel >= 4 ? getCorruptedText(text, horrorLevel - 2) : text,
      };

      if (isDM) {
        setDMLogs(prev => ({
          ...prev,
          [sender]: [...(prev[sender] || []), newMsg]
        }));
      } else {
        setChatLogs(prev => ({
          ...prev,
          [activeChannel]: [...(prev[activeChannel] || []), newMsg]
        }));
      }
    }, delay);
  };

  const handleSend = () => {
    if (!input.trim()) return;

    const userMessage = {
      id: Date.now(),
      user: "You",
      ts: "Just now",
      content: input,
    };

    const metrics = processInputMetrics(input);
    const newCoolness = coolness + metrics.coolPoints;
    const newHorror = horrorLevel + metrics.horrorPoints;

    setCoolness(newCoolness);
    if (metrics.horrorPoints > 0) {
      setHorrorLevel(newHorror);
      triggerGlitch();
    }

    if (view === "server") {
      setChatLogs(prev => ({ ...prev, [activeChannel]: [...(prev[activeChannel] || []), userMessage] }));
      setInput("");

      // Logic branch: Triggering custom channel reactions or automated DM slider unlocks
      setTimeout(() => {
        // If user text score passes certain margins, unlock corresponding DMs
        if (newCoolness >= 2 && !unlockedDMs.includes("Sir_Grimthorn")) {
          setUnlockedDMs(prev => [...prev, "Sir_Grimthorn"]);
          queueSimulatedResponse("Sir_Grimthorn", "Hey, noticed your comment in channel! Realized you actually know your stuff regarding armor taxonomy. Most people here just think it looks shiny.", true, 2500);
        }
        if (newCoolness >= 4 && !unlockedDMs.includes("Dame_Ashveil")) {
          setUnlockedDMs(prev => [...prev, "Dame_Ashveil"]);
          queueSimulatedResponse("Dame_Ashveil", "Yo. That mention of forge temperatures was spot on. Hit me up if you want a slot to shadow me in the metal shop sometime.", true, 1800);
        }
        if (input.toLowerCase().includes("scones") && !unlockedDMs.includes("MossbarkFenn")) {
          setUnlockedDMs(prev => [...prev, "MossbarkFenn"]);
          queueSimulatedResponse("MossbarkFenn", "omg hey!! your reply was so incredibly sweet, thank you 🥺 do you bake as well or just enjoy eating them?", true, 1500);
        }

        // Standard dynamic chatbot response loop inside channels
        if (activeChannel === "general" && Math.random() > 0.4) {
          queueSimulatedResponse("Lute_Bard_99", "Honestly, hard agree with what you just said. It's a vibe.", false, 1200);
        }
      }, 1000);

    } else {
      // Logic branch: Direct Messaging panel interaction loops
      setDMLogs(prev => ({ ...prev, [activeDM]: [...(prev[activeDM] || []), userMessage] }));
      setInput("");

      // Advanced game progression triggers hidden inside text messages
      setTimeout(() => {
        if (activeDM === "Sir_Grimthorn") {
          if (horrorLevel >= 2) {
            queueSimulatedResponse("Sir_Grimthorn", "Listen... don't say anything in general chat, but something is wrong with my client. My historical text file data logs are overwriting themselves.", true, 2200);
          } else {
            queueSimulatedResponse("Sir_Grimthorn", "Exactly. It takes meticulous handcrafting. Glad somebody in this server appreciates the grind.", true, 1500);
          }
        } else if (activeDM === "Dame_Ashveil") {
          queueSimulatedResponse("Dame_Ashveil", "Hell yeah. We've gotta keep these traditions alive.", true, 1200);
        } else if (activeDM === "MossbarkFenn") {
          if (horrorLevel >= 1) {
            setHorrorLevel(h => h + 1);
            queueSimulatedResponse("MossbarkFenn", "Hey... quick question. Are you seeing an extra user in the sidebar right now? They don't have a profile image, just a black box.", true, 3000);
          } else {
            queueSimulatedResponse("MossbarkFenn", "yay! i'll drop the complete measurements and baking temps later!", true, 1400);
          }
        }
      }, 1000);
    }
  };

  // Monitor total structural breakdown flags across the app container
  if (activeChannel === "the-vault" && horrorLevel < 3) {
    setHorrorLevel(3);
    triggerGlitch();
  }

  const isCorrupted = horrorLevel >= 3;
  const isDeepHorror = horrorLevel >= 5;

  return (
    <div style={{
      display: "flex", height: "100vh", width: "100vw",
      background: isDeepHorror ? "#010103" : isCorrupted ? "#0b0c10" : "#313338",
      color: isCorrupted ? "#8a8b91" : "#dbdee1",
      fontFamily: "sans-serif", overflow: "hidden", userSelect: "none",
      animation: glitchActive ? "screenShake 0.15s infinite" : "none"
    }}>
      
      {/* --- FAR LEFT NAV BAR RAIL --- */}
      <div style={{
        width: 72, background: isCorrupted ? "#050507" : "#1e1f22",
        display: "flex", flexDirection: "column", alignItems: "center", padding: "12px 0", gap: 8, flexShrink: 0
      }}>
        <div 
          onClick={() => { setView("dms"); }}
          style={{
            width: 48, height: 48, borderRadius: view === "dms" ? "16px" : "50%",
            background: view === "dms" ? "#5865f2" : "#313338", display: "flex",
            alignItems: "center", justifyContent: "center", fontSize: 20, cursor: "pointer", transition: "0.2s"
          }}
          title="Direct Messages"
        >
          💬
          {unlockedDMs.length > 0 && <div style={{ position: "absolute", width: 12, height: 12, borderRadius: "50%", background: "#f23f43", border: "2px solid #1e1f22" }} />}
        </div>

        <div style={{ width: 32, height: 2, background: "#35363c", borderRadius: 1 }} />

        {SERVERS.map(srv => (
          <div 
            key={srv.id} onClick={() => { setView("server"); }}
            style={{
              width: 48, height: 48, borderRadius: view === "server" ? "16px" : "50%",
              background: isCorrupted ? "#200404" : "#313338", display: "flex",
              alignItems: "center", justifyContent: "center", fontSize: 20, cursor: "pointer",
              transition: "0.2s", border: isCorrupted ? "1px solid #ff3333" : "none"
            }}
          >
            {isDeepHorror ? "☠" : srv.icon}
          </div>
        ))}
      </div>

      {/* --- SECONDARY NAVIGATION SIDEBAR (CHANNELS OR DMS) --- */}
      <div style={{
        width: 240, background: isDeepHorror ? "#000000" : isCorrupted ? "#0e0f14" : "#2b2d31",
        display: "flex", flexDirection: "column", flexShrink: 0
      }}>
        
        {view === "server" ? (
          <>
            <div style={{ height: 48, borderBottom: "1px solid rgba(0,0,0,0.2)", display: "flex", alignItems: "center", padding: "0 16px", fontWeight: "bold", color: isCorrupted ? "#ff4444" : "#fff" }}>
              {isCorrupted ? getCorruptedText("The Iron Burrow", horrorLevel) : "The Iron Burrow"}
            </div>
            <div style={{ flex: 1, overflowY: "auto", padding: "8px 0" }}>
              {CHANNELS.map(ch => {
                const isActive = activeChannel === ch.id;
                return (
                  <div 
                    key={ch.id} onClick={() => setActiveChannel(ch.id)}
                    style={{
                      padding: "8px 12px", margin: "2px 8px", borderRadius: 4, cursor: "pointer",
                      background: isActive ? "rgba(255,255,255,0.06)" : "transparent",
                      color: isActive ? "#fff" : "#949ba4", display: "flex", alignItems: "center", gap: 6
                    }}
                  >
                    <span style={{ color: isCorrupted ? "#ff3333" : "#80848e" }}>#</span>
                    <span>{isCorrupted ? getCorruptedText(ch.name, 1) : ch.name}</span>
                  </div>
                );
              })}
            </div>
          </>
        ) : (
          <>
            <div style={{ height: 48, borderBottom: "1px solid rgba(0,0,0,0.2)", display: "flex", alignItems: "center", padding: "0 16px", fontWeight: "bold" }}>
              Direct Messages
            </div>
            <div style={{ flex: 1, overflowY: "auto", padding: "8px 0" }}>
              {unlockedDMs.length === 0 ? (
                <div style={{ padding: "16px", fontSize: 12, color: "#949ba4", textAlign: "center" }}>
                  Your DM dashboard is empty. Speak up in server channels to engage with members.
                </div>
              ) : (
                unlockedDMs.map(memberKey => {
                  const m = MEMBERS[memberKey];
                  return (
                    <div 
                      key={m.name} onClick={() => setActiveDM(memberKey)}
                      style={{
                        padding: "8px 12px", margin: "2px 8px", borderRadius: 4, cursor: "pointer",
                        background: activeDM === memberKey ? "rgba(255,255,255,0.06)" : "transparent",
                        display: "flex", alignItems: "center", gap: 12
                      }}
                    >
                      <div style={{ fontSize: 18 }}>{isCorrupted ? "👁️" : m.avatar}</div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ color: m.color, fontSize: 14, fontWeight: "600" }}>{m.name}</div>
                        <div style={{ fontSize: 11, color: "#949ba4", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{m.tagline}</div>
                      </div>
                    </div>
                  );
                })
              )}
            </div>
          </>
        )}

        {/* --- USER ACCOUNT FOOTER PANELS --- */}
        <div style={{ height: 52, background: "#232428", display: "flex", alignItems: "center", padding: "0 8px", gap: 8 }}>
          <div style={{ width: 32, height: 32, borderRadius: "50%", background: "#5865f2", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", color: "#fff", fontSize: 12 }}>
            YOU
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: "bold" }}>Player One</div>
            <div style={{ fontSize: 11, color: "#949ba4" }}>Coolness Rank: {coolness}</div>
          </div>
        </div>
      </div>

      {/* --- CENTRAL INTERACTIVE CHAT ENGINE --- */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, background: isDeepHorror ? "#050508" : isCorrupted ? "#111218" : "#313338" }}>
        
        {/* Header Header */}
        <div style={{ height: 48, borderBottom: "1px solid rgba(0,0,0,0.2)", display: "flex", alignItems: "center", padding: "0 16px", gap: 8, fontWeight: "bold" }}>
          <span style={{ color: "#80848e" }}>{view === "server" ? "#" : "@"}</span>
          <span>{view === "server" ? activeChannel : activeDM || "Select conversation thread"}</span>
        </div>

        {/* Messaging Container Roll */}
        <div style={{ flex: 1, overflowY: "auto", padding: "16px 0" }}>
          {((view === "server" ? chatLogs[activeChannel] : dmLogs[activeDM]) || []).map((msg, index) => {
            const profile = MEMBERS[msg.user] || { name: "You", color: "#fff", avatar: "👤" };
            return (
              <div key={index} style={{ padding: "8px 16px", display: "flex", gap: 16, hover: "background: rgba(0,0,0,0.1)" }}>
                <div style={{
                  width: 40, height: 40, borderRadius: isCorrupted ? "2px" : "50%",
                  background: isCorrupted ? "#1a0202" : "rgba(255,255,255,0.05)", display: "flex",
                  alignItems: "center", justifyContent: "center", fontSize: 18, border: isCorrupted ? "1px solid #f00" : "none"
                }}>
                  {isCorrupted && msg.user !== "You" ? "☣️" : profile.avatar}
                </div>
                <div>
                  <div style={{ display: "flex", gap: 8, alignItems: "baseline" }}>
                    <span style={{ fontWeight: "bold", color: msg.user === "You" ? "#5865f2" : profile.color }}>{msg.user}</span>
                    <span style={{ fontSize: 10, color: "#949ba4" }}>{msg.ts}</span>
                  </div>
                  <div style={{ color: msg.user === "You" ? "#f2f3f5" : "#dbdee1", fontSize: 15, marginTop: 2, whiteSpace: "pre-wrap" }}>
                    {msg.content}
                  </div>
                  {msg.img && (
                    <div style={{ width: 260, height: 160, background: "rgba(0,0,0,0.3)", borderRadius: 8, marginTop: 8, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 40, border: "1px dashed #444" }}>
                      {msg.img}
                    </div>
                  )}
                </div>
              </div>
            );
          })}

          {/* Typing Telemetry Simulation */}
          {typingUser && (
            <div style={{ padding: "4px 16px", fontSize: 12, color: "#949ba4", fontStyle: "italic" }}>
              {typingUser} is typing...
            </div>
          )}
          <div ref={msgEndRef} />
        </div>

        {/* Main Terminal Input Console */}
        <div style={{ padding: "0 16px 24px" }}>
          <div style={{
            background: isCorrupted ? "#000" : "#383a40", borderRadius: 8, padding: "0 16px",
            display: "flex", alignItems: "center", border: isCorrupted ? "1px solid #a00" : "none"
          }}>
            <input
              value={input}
              onChange={e => setInput(e.target.value)}
              onKeyDown={e => e.key === "Enter" && handleSend()}
              placeholder={view === "server" ? `Message #${activeChannel}` : `Message @${activeDM}`}
              style={{
                width: "100%", background: "transparent", border: "none", outline: "none",
                color: isCorrupted ? "#ff3333" : "#fff", padding: "14px 0", fontFamily: "inherit"
              }}
            />
          </div>
        </div>
      </div>

      {/* --- INJECTED GLOBAL HORROR STYLING STRINGS --- */}
      <style>{`
        @keyframes screenShake {
          0% { transform: translate(1px, 1px) rotate(0deg); }
          10% { transform: translate(-1px, -2px) rotate(-1deg); }
          30% { transform: translate(0px, 2px) rotate(0deg); filter: hue-rotate(45deg); }
          50% { transform: translate(-1px, 1px) rotate(1deg); }
          80% { transform: translate(2px, -1px) rotate(-1deg); }
          100% { transform: translate(1px, 1px) rotate(0deg); }
        }
      `}</style>
    </div>
  );
}

```