import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import DocsLayout from '@/components/docs/DocsLayout';

export const metadata = {
  title: 'App Catalog — DashCaddy Docs',
  description: 'Browse all 77 one-click installable apps supported by DashCaddy, organized by category with install instructions for each.',
};

export default function DocsCatalogPage() {
  return (
    <div className="flex min-h-screen flex-col bg-surface-950 text-surface-50">
      <Navbar />
      <DocsLayout
        title="App Catalog"
        intro="DashCaddy ships with 77 pre-configured application templates. Every template can be deployed from the dashboard, called via the REST API, or invoked through the MCP server. This page is the index — click any app for its dedicated install guide with prerequisites, the exact API payload shape, and post-install verification steps."
      >
        <div className="mb-8 rounded-xl border border-brand-500/30 bg-brand-500/5 p-5">
          <p className="text-sm text-surface-200">
            <strong className="text-brand-400">77 apps</strong> across <strong>17 categories</strong>. The canonical source is <code>dashcaddy-api/src/docker/app-templates.js</code>; regenerate these pages with <code>scripts/regenerate-catalog-docs.sh</code> after editing.
          </p>
        </div>

        <h2>Media</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/plex" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Plex</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Stream your personal media collection anywhere</p>
          </a>
          <a href="/docs/catalog/jellyfin" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Jellyfin</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Free software media system - alternative to Plex</p>
          </a>
          <a href="/docs/catalog/emby" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Emby</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Personal media server with apps for all devices</p>
          </a>
          <a href="/docs/catalog/audiobookshelf" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Audiobookshelf</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Self-hosted audiobook and podcast server</p>
          </a>
          <a href="/docs/catalog/navidrome" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Navidrome</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Modern music server and streamer</p>
          </a>
          <a href="/docs/catalog/calibre-web" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Calibre-Web</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Web-based ebook manager and reader</p>
          </a>
          <a href="/docs/catalog/kavita" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Kavita</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Digital reading platform for manga, comics, and books</p>
          </a>
          <a href="/docs/catalog/vintage-radio" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Vintage Stereo</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Glass-front console stereo that tunes curated real internet stations (SomaFM, KEXP, Radio Paradise, and more) through a beautiful analog UI</p>
          </a>
          <a href="/docs/catalog/komga" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Komga</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Comic and manga media server with web reader</p>
          </a>
          <a href="/docs/catalog/airsonic" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Airsonic Advanced</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Free web-based media streamer</p>
          </a>
        </div>

        <h2>Media Management</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/seerr" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Seerr</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Media request and discovery manager for Plex, Jellyfin, and Emby</p>
          </a>
          <a href="/docs/catalog/sonarr" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Sonarr</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Smart PVR for newsgroup and bittorrent users</p>
          </a>
          <a href="/docs/catalog/radarr" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Radarr</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Movie collection manager for Usenet and BitTorrent</p>
          </a>
          <a href="/docs/catalog/tautulli" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Tautulli</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Plex media server monitoring and statistics</p>
          </a>
          <a href="/docs/catalog/prowlarr" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Prowlarr</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#f5a62322', color: '#f5a623' }}>Advanced</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Indexer manager/proxy for *arr applications</p>
          </a>
          <a href="/docs/catalog/bazarr" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Bazarr</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Automatic subtitle downloader for Sonarr and Radarr</p>
          </a>
          <a href="/docs/catalog/lidarr" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Lidarr</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Music collection manager for Usenet and BitTorrent</p>
          </a>
          <a href="/docs/catalog/readarr" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Readarr</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Book and audiobook collection manager</p>
          </a>
        </div>

        <h2>Downloads</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/qbittorrent" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">qBittorrent</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Lightweight BitTorrent client with web UI</p>
          </a>
          <a href="/docs/catalog/transmission" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Transmission</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Lightweight BitTorrent client</p>
          </a>
          <a href="/docs/catalog/sabnzbd" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">SABnzbd</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Binary newsreader for Usenet downloads</p>
          </a>
          <a href="/docs/catalog/jdownloader" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">JDownloader 2</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Download manager for file hosting sites</p>
          </a>
          <a href="/docs/catalog/nzbget" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">NZBGet</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Efficient Usenet downloader</p>
          </a>
        </div>

        <h2>Productivity</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/nextcloud" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Nextcloud</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Self-hosted productivity platform and file sync</p>
          </a>
          <a href="/docs/catalog/paperless-ngx" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Paperless-ngx</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Document management system - scan, organize, and search documents</p>
          </a>
          <a href="/docs/catalog/bookstack" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">BookStack</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Simple wiki and documentation platform</p>
          </a>
          <a href="/docs/catalog/actual-budget" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Actual Budget</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Privacy-focused budgeting app with envelope budgeting</p>
          </a>
          <a href="/docs/catalog/mealie" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Mealie</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Recipe manager and meal planner with grocery lists</p>
          </a>
          <a href="/docs/catalog/outline" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Outline</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#f5a62322', color: '#f5a623' }}>Advanced</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Modern team knowledge base and wiki</p>
          </a>
          <a href="/docs/catalog/trilium" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Trilium Notes</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Hierarchical knowledge base and note-taking app</p>
          </a>
          <a href="/docs/catalog/excalidraw" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Excalidraw</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Collaborative virtual whiteboard for sketching and diagrams</p>
          </a>
          <a href="/docs/catalog/standardnotes" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Standard Notes</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">End-to-end encrypted notes app</p>
          </a>
        </div>

        <h2>Development</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/gitea" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Gitea</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Lightweight self-hosted Git service</p>
          </a>
          <a href="/docs/catalog/vscode-server" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">VS Code Server</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Visual Studio Code in your browser</p>
          </a>
          <a href="/docs/catalog/jenkins" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Jenkins</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#f5a62322', color: '#f5a623' }}>Advanced</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Automation server for CI/CD pipelines</p>
          </a>
          <a href="/docs/catalog/drone" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Drone CI</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Container-native continuous delivery platform</p>
          </a>
        </div>

        <h2>Management</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/portainer" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Portainer</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Docker container management UI</p>
          </a>
          <a href="/docs/catalog/watchtower" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Watchtower</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Automatic Docker container image updates</p>
          </a>
        </div>

        <h2>Monitoring</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/uptime-kuma" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Uptime Kuma</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Self-hosted monitoring tool like Uptime Robot</p>
          </a>
          <a href="/docs/catalog/grafana" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Grafana</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#f5a62322', color: '#f5a623' }}>Advanced</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Analytics and interactive visualization platform</p>
          </a>
          <a href="/docs/catalog/dozzle" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Dozzle</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Real-time Docker container log viewer</p>
          </a>
          <a href="/docs/catalog/speedtest" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Speedtest Tracker</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Internet speed monitoring over time</p>
          </a>
        </div>

        <h2>Networking</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/pihole" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Pi-hole</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Network-wide ad blocker and DNS sinkhole</p>
          </a>
          <a href="/docs/catalog/wireguard" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">WireGuard VPN</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#f5a62322', color: '#f5a623' }}>Advanced</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Fast, modern, secure VPN tunnel</p>
          </a>
        </div>

        <h2>DNS</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/technitium" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Technitium DNS Server</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Modern DNS server with web UI for managing private zones</p>
          </a>
          <a href="/docs/catalog/bind9" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">BIND9 DNS Server</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#f5a62322', color: '#f5a623' }}>Advanced</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Industry-standard DNS server - powerful and flexible</p>
          </a>
          <a href="/docs/catalog/powerdns" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">PowerDNS</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">High-performance DNS server with SQL backend</p>
          </a>
          <a href="/docs/catalog/coredns" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">CoreDNS</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Cloud-native DNS server - lightweight and flexible</p>
          </a>
        </div>

        <h2>Files</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/filebrowser" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">FileBrowser</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Web-based file manager with sharing capabilities</p>
          </a>
          <a href="/docs/catalog/syncthing" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Syncthing</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Continuous file synchronization between devices</p>
          </a>
          <a href="/docs/catalog/sami-files" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Sami Files</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Multi-server SSH file manager — browse, edit, upload, and exec across all your machines from one browser tab</p>
          </a>
        </div>

        <h2>Communication</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/rocketchat" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Rocket.Chat</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Team collaboration platform like Slack</p>
          </a>
          <a href="/docs/catalog/matrix" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Matrix Synapse</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#f5a62322', color: '#f5a623' }}>Advanced</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Decentralized, secure messaging and collaboration</p>
          </a>
          <a href="/docs/catalog/roundcube" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Roundcube</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Modern webmail client with rich features</p>
          </a>
          <a href="/docs/catalog/mailserver" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Docker Mailserver</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#f5a62322', color: '#f5a623' }}>Advanced</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Full-featured email server with SMTP, IMAP, spam filtering</p>
          </a>
        </div>

        <h2>Home Automation</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/homeassistant" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Home Assistant</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Open source home automation platform</p>
          </a>
          <a href="/docs/catalog/nodered" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Node-RED</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Flow-based programming for IoT and automation</p>
          </a>
        </div>

        <h2>Database</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/postgres" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">PostgreSQL</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Advanced open-source relational database</p>
          </a>
          <a href="/docs/catalog/redis" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Redis</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">In-memory data structure store and cache</p>
          </a>
          <a href="/docs/catalog/mongodb" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">MongoDB</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Document-oriented NoSQL database</p>
          </a>
          <a href="/docs/catalog/adminer" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Adminer</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Lightweight database management in single PHP file</p>
          </a>
        </div>

        <h2>Security</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/dashca" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">DashCA</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">One-click root CA certificate installer for your network</p>
          </a>
          <a href="/docs/catalog/vaultwarden" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Vaultwarden</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Lightweight Bitwarden-compatible password manager</p>
          </a>
          <a href="/docs/catalog/authentik" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Authentik</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#f5a62322', color: '#f5a623' }}>Advanced</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Identity provider and single sign-on platform</p>
          </a>
          <a href="/docs/catalog/crowdsec" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">CrowdSec</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Collaborative intrusion prevention system</p>
          </a>
        </div>

        <h2>Photos</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/immich" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Immich</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Self-hosted Google Photos alternative</p>
          </a>
          <a href="/docs/catalog/photoprism" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">PhotoPrism</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#68a4ff22', color: '#68a4ff' }}>Intermediate</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">AI-powered photo management</p>
          </a>
        </div>

        <h2>Utilities</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/homepage" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Homepage</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Highly customizable application dashboard</p>
          </a>
          <a href="/docs/catalog/stirling-pdf" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Stirling PDF</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Self-hosted PDF manipulation tool - merge, split, convert, and more</p>
          </a>
          <a href="/docs/catalog/weather" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Weather</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Live weather widget with temperature, conditions, and wind</p>
          </a>
          <a href="/docs/catalog/homarr" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Homarr</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Sleek dashboard for all your services</p>
          </a>
          <a href="/docs/catalog/digital-clock" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Digital Clock</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Live digital clock with time, date, and day of week</p>
          </a>
          <a href="/docs/catalog/it-tools" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">IT Tools</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Collection of handy developer and IT tools in one place</p>
          </a>
          <a href="/docs/catalog/changedetection" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Change Detection</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Monitor websites for changes</p>
          </a>
          <a href="/docs/catalog/whoami" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Whoami</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Simple HTTP request debugging service</p>
          </a>
        </div>

        <h2>Gaming</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <a href="/docs/catalog/minecraft" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Minecraft Server</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Minecraft Java Edition dedicated server</p>
          </a>
          <a href="/docs/catalog/valheim" className="block rounded-xl border border-surface-700/50 bg-surface-900/40 p-4 transition-colors hover:border-brand-500/50 hover:bg-surface-800/50">
            <div className="flex items-start justify-between gap-2">
              <h3 className="text-base font-semibold text-surface-50">Valheim Server</h3>
              <span className="shrink-0 rounded-full px-2 py-0.5 text-xs font-medium" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Easy</span>
            </div>
            <p className="mt-1 text-sm text-surface-300">Valheim dedicated server for multiplayer Viking adventures</p>
          </a>
        </div>

        <hr className="my-10 border-surface-700" />
        <h2>Adding your own template</h2>
        <p>Add an entry to <code>APP_TEMPLATES</code> in <code>dashcaddy-api/src/docker/app-templates.js</code> with the required fields (name, description, category, docker.image, ports, volumes), then re-run <code>scripts/regenerate-catalog-docs.sh</code>. The template will appear in the dashboard App Selector automatically.</p>
      </DocsLayout>
      <Footer />
    </div>
  );
}
