function StatusRail() {
  const fastfetch = [
    { k: "os", v: "Arch Linux" },
    { k: "kernel", v: "Linux 7.0.3-arch1-2" },
    { k: "wm", v: "hyprland" },
    { k: "term", v: "kitty" },
    { k: "shell", v: "fish" },
    { k: "editor", v: "vscode" },
    { k: "pkgs", v: "1861 (pacman)" },
  ];

  return (
    <aside style={{
      position: "sticky", top: 0, height: "100vh",
      padding: "30px 22px",
      display: "flex", flexDirection: "column",
      borderRight: "1px solid var(--line)",
      background: "color-mix(in oklch, var(--bg-2) 50%, transparent)",
      backdropFilter: "blur(4px)",
      fontSize: 12,
      flexShrink: 0,
    }}>

      {/* name + status dot */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 24 }}>
        <span style={{
          width: 8, height: 8, borderRadius: "50%",
          background: "var(--accent)",
          boxShadow: "0 0 10px var(--accent)",
          animation: "pulse-glow 2s ease-in-out infinite",
          flexShrink: 0,
        }} />
        <span className="accent" style={{ fontWeight: 700, letterSpacing: 1 }}>CLICKY</span>
        <span className="dimmer">v1.0.0</span>
      </div>

      {/* live clock */}
      <div style={{ marginBottom: 22 }}>
        <Clock />
      </div>

      {/* live bars */}
      <div style={{ marginBottom: 22, display: "grid", gap: 8 }}>
        <LiveBar label="cpu" min={12} max={68} />
        <LiveBar label="mem" min={40} max={82} color="var(--warn)" />
        <LiveBar label="net" min={4}  max={45} color="#9aa3ff" />
      </div>

      {/* fastfetch */}
      <div style={{ marginBottom: 22 }}>
        <div className="dimmer" style={{ fontSize: 10, letterSpacing: 1.2, textTransform: "uppercase", marginBottom: 8 }}>
          fastfetch
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "3px 10px" }}>
          {fastfetch.map((item) => (
            <React.Fragment key={item.k}>
              <span className="dimmer">{item.k}</span>
              <span style={{ color: "var(--text)" }}>{item.v}</span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* footer */}
      <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 4 }} className="dimmer">
        <span>stress level: 75%</span>
        <span>sleep deprivation: 88%</span>
      </div>

    </aside>
  );
}

// CommandBar just a litle fun thing with a bunch of commands
function CommandBar() {
  const ribbon = [
    "sudo pacman -Syu",
    "hyprctl reload",
    "// TODO: sleep",
    "code ~/.config/hypr/hyprland.conf",
    "while(true) { stress++; }",
    "git commit -m 'fix num smthn'",
    "systemctl --user status",
    "// it works on my machine tho",
    "yay -S neovim",
    "tail -f ~/.thoughts.log",
    "// why doesn't this work?",
    "hyprctl dispatch workspace 2",
    "pacman -Q | wc -l",
    "// why does this work?",
    "rm -rf ~/projects",
    "// sleep is for the weak (i am weak)",
  ];

  return (
    <footer style={{
      position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 10,
      display: "flex", alignItems: "center",
      height: 28,
      padding: "0 16px",
      background: "var(--bg-2)",
      borderTop: "1px solid var(--line-2)",
      fontSize: 11,
      gap: 14,
      overflow: "hidden",
    }}>
      {/* status */}
      <span style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)", boxShadow: "0 0 6px var(--accent)" }} />
        <span className="accent" style={{ fontWeight: 700, letterSpacing: 1 }}>READY</span>
      </span>

      <span className="dimmer" style={{ flexShrink: 0 }}>normal · workin smoothly</span>

      {/* scrolling ribbon */}
      <div style={{
        flex: 1, overflow: "hidden", whiteSpace: "nowrap",
        maskImage: "linear-gradient(to right, transparent, black 15%, black 85%, transparent)",
      }}>
        <div style={{
          display: "inline-flex", gap: 32,
          animation: "scroll-x 60s linear infinite",
        }}>
          {[...ribbon, ...ribbon, ...ribbon].map((s, i) => (
            <span key={i} className="dimmer">{s}</span>
          ))}
        </div>
      </div>

      <span className="dimmer" style={{ flexShrink: 0 }}>git:main</span>
    </footer>
  );
}

function App() {
  const jumpTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "260px 1fr",
      minHeight: "100vh",
    }}>
      <StatusRail />

      <main style={{
        padding: "30px clamp(20px, 4vw, 60px) 60px",
        maxWidth: 860,
        width: "100%",
      }}>
        <Hero onJump={jumpTo} />
        <AboutSection />
        <ProjectsSection />
        <NowSection />
        <ContactSection />
        <ShellSection />
      </main>

      <CommandBar />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);