// Uses — Linux DIY page. Hardware, software, terminal setup.

const USES_GROUPS = [
  {
    name: 'machines',
    icon: 'machinesMeta',
    items: [
      { subhead: 'main_machine', model: 'x-kom G4M3R ELITE', icon: 'machinesMain' },
      ['cpu', 'Intel Core i9-14900KF · 24C / 32T'],
      ['ram', '64 GB DDR5'],
      ['gpu', 'NVIDIA GeForce RTX 4090'],
      ['storage', '2 × 2 TB NVMe · 4TB SATA SSD'],
      ['os', 'Fedora 44, KDE Plasma, Wayland'],

      { subhead: 'mobile_machine', model: 'ASUS TUF Gaming F16', icon: 'machinesMobile' },
      ['cpu', 'Intel Core i7-13650HX · 14C / 20T'],
      ['ram', '32 GB DDR5'],
      ['gpu', 'NVIDIA RTX 4060 Max-Q'],
      ['storage', '2 × ~1 TB NVMe'],
      ['os', 'Fedora 44, KDE Plasma, Wayland'],

      { subhead: 'peripherals', icon: 'peripherals' },
      ['keyboard', 'Glove80'],
      ['monitors', 'iiyama G-Master GB3467WQSU-B5 34" UWQHD · 2× ASUS VA24DQSB 23.8" FHD'],
      ['foot pedals', '2× PCsensor FS2020'],
      ['microphone', 'Elgato Wave:3'],
      ['camera', 'Elgato Facecam'],
      ['headphones', 'Logitech G PRO X'],
      ['lighting', '2× Elgato Key Light Air'],
    ],
  },

  {
    name: 'terminal-and-shell',
    icon: 'terminalAndShell',
    items: [
      ['terminal', 'kitty'],
      ['terminal 2', 'Yakuake'],
      ['shell', 'zsh · Oh My Zsh'],
      ['prompt', 'Powerlevel10k'],
      ['multiplexer', 'zellij'],
      ['navigation', 'yazi · zoxide (z & zi)'],
      ['history', 'Atuin · fzf'],
    ],
  },

  {
    name: 'cli-tools',
    icon: 'cliTools',
    items: [
      ['nvim', 'Neovim + LazyVim · currently learning...'],
      ['yazi', 'terminal file manager'],
      ['ls / cat / find / grep', 'eza · bat · fd · ripgrep'],
      ['cd', 'zoxide (z, zi)'],
      ['fuzzy', 'fzf'],
      ['versioning', 'git · lazygit'],
      ['containers', 'docker · lazydocker'],
      ['help', 'tealdeer (tldr) · thefuck (fk)'],
      ['disk', 'dust · duf'],
      ['diff', 'delta'],
      ['benchmark', 'hyperfine'],
      ['code stats', 'tokei'],
    ],
  },

  {
    name: 'dev-stack',
    icon: 'devStack',
    items: [
      ['ide', 'VSCode · nvim'],
      ['python', 'uv'],
      ['lint / type', 'ruff · pyright'],
      ['testing', 'pytest'],
      ['notebooks', 'jupyter'],
      ['package manager', 'dnf · brew'],
      ['env vars', 'direnv'],
    ],
  },

  {
    name: 'ai-stack',
    icon: 'aiStack',
    items: [
      ['agentic development', 'Claude Code · OpenCode · Codex'],
      ['llm orchestration', 'CrewAI · custom python'],
      ['diffusion', 'ComfyUI · Automatic1111 · Diffusers'],
      ['serving', 'Ollama · vLLM · FastAPI'],
      ['gpu compute', 'Runpod · Replicate · GCP'],
      ['vector db', 'ChromaDB'],
    ],
  },

  {
    name: 'miscellaneous',
    icon: 'miscellaneous',
    items: [
      ['browsers', 'Mozilla Firefox · Chromium · Chrome · Brave'],
      ['comms', 'Discord'],
      ['music', 'termusic'],
      ['video', 'VLC'],
      ['notes', 'TBD'],
    ],
  },
];

const UsesPage = () => {
  const T = window.TOKENS;
  const [open, setOpen] = React.useState(USES_GROUPS.map(g => g.name)); // all open

  const toggle = (name) => {
    setOpen(o => o.includes(name) ? o.filter(n => n !== name) : [...o, name]);
  };

  // count only data rows (arrays), not subheads (objects)
  const countItems = (items) => items.filter(it => Array.isArray(it)).length;

  return (
    <div style={{
      minHeight: '100vh', position: 'relative', zIndex: 1,
      padding: '140px 40px 160px', maxWidth: 1200, margin: '0 auto',
      fontFamily: T.mono, color: T.fg,
    }}>
      <div style={{ fontSize: 11, letterSpacing: '0.4em', color: T.accent, marginBottom: 24 }}>
        ━━ INDEX / USES
      </div>

      <window.GlitchTitle lines={[{ text: 'THE' }, { text: 'SETUP.', accent: true }]} />

      <div style={{
        marginTop: 24, fontSize: 14, color: T.fgMid, maxWidth: 600, lineHeight: 1.6, fontFamily: T.sans,
      }}>
        Hardware, software, and CLI tooling I actually use day-to-day. Updated whenever something changes and I actually remember about it.
        Inspired by <a
          href="https://uses.tech" target="_blank" rel="noopener noreferrer"
          style={{ color: T.fg, textDecoration: 'underline', textDecorationColor: T.fgFaint, textUnderlineOffset: 3 }}
        >uses.tech</a>.
      </div>

      {/* groups */}
      <div style={{ marginTop: 64 }}>
        {USES_GROUPS.map(g => {
          const isOpen = open.includes(g.name);
          return (
            <div key={g.name} style={{ borderTop: `1px solid ${T.fgFaint}` }}>
              <div
                onClick={() => toggle(g.name)}
                style={{
                  padding: '20px 0', cursor: 'pointer',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                  <span style={{ fontSize: 11, color: T.accent, letterSpacing: '0.2em' }}>
                    {isOpen ? '▼' : '▶'}
                  </span>
                  <span style={{
                    width: 96, height: 96, flex: '0 0 auto',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    opacity: isOpen ? 1 : 0.5,
                    transition: 'opacity 0.2s',
                  }}>
                    {g.icon && window.UsesIcons && window.UsesIcons[g.icon]
                      ? React.createElement(window.UsesIcons[g.icon], { size: 96 })
                      : null}
                  </span>
                  <span style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em' }}>
                    /{g.name}
                  </span>
                </div>
                <span style={{ fontSize: 11, color: T.fgGhost, letterSpacing: '0.2em' }}>
                  {countItems(g.items)} ENTRIES
                </span>
              </div>
              {isOpen && (
                <div style={{ paddingBottom: 32 }}>
                  {g.items.map((item, i) => {
                    if (!Array.isArray(item)) {
                      // subhead row
                      return (
                        <div key={i} style={{
                          marginTop: i === 0 ? 0 : 24, marginBottom: 4,
                          padding: '12px 0',
                          borderTop: `1px solid ${T.fgFaint}`,
                          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                          gap: 16, flexWrap: 'wrap',
                        }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                            <span style={{
                              width: 64, height: 64, flex: '0 0 auto',
                              display: 'flex', alignItems: 'center', justifyContent: 'center',
                            }}>
                              {item.icon && window.UsesIcons && window.UsesIcons[item.icon]
                                ? React.createElement(window.UsesIcons[item.icon], { size: 64 })
                                : null}
                            </span>
                            <span style={{ fontSize: 13, fontWeight: 700, color: T.accent, letterSpacing: '0.04em' }}>
                              /{item.subhead}
                            </span>
                          </div>
                          {item.model && (
                            <span style={{
                              fontSize: 12, color: T.fgDim, fontFamily: T.sans,
                              letterSpacing: '0.02em', fontStyle: 'italic',
                            }}>
                              {item.model}
                            </span>
                          )}
                          {item.note && !item.model && (
                            <span style={{ fontSize: 11, color: T.fgGhost, letterSpacing: '0.05em', fontFamily: T.sans, fontStyle: 'italic' }}>
                              {item.note}
                            </span>
                          )}
                        </div>
                      );
                    }
                    const [k, v] = item;
                    return (
                      <div key={i} style={{
                        display: 'grid', gridTemplateColumns: '180px 1fr',
                        gap: 24, padding: '6px 0',
                      }}>
                        <span style={{ fontSize: 12, color: T.fgDim, letterSpacing: '0.05em' }}>
                          {k}
                        </span>
                        <span style={{ fontSize: 14, color: T.fg, lineHeight: 1.5 }}>
                          {v}
                        </span>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          );
        })}
        <div style={{ borderTop: `1px solid ${T.fgFaint}`, marginBottom: 64 }} />
      </div>

      <div style={{ fontSize: 12, color: T.fgGhost, fontFamily: T.mono, letterSpacing: '0.1em' }}>
        // last updated 2026.05.07 — questions? <span
          onClick={() => window.navigate('/connect')}
          style={{ color: T.accent, cursor: 'pointer' }}
        >get in touch →</span>
      </div>
    </div>
  );
};

window.UsesPage = UsesPage;