const QUICK_LINKS = [
  { label: "Home Assistant", icon: "🏠", url: "https://ha.kaleschke.info" },
  { label: "Komodo", icon: "🦎", url: "https://komodo.kaleschke.info" },
  { label: "Uptime Kuma", icon: "📡", url: "https://uptime.kaleschke.info" },
  { label: "Beszel", icon: "📊", url: "https://beszel.kaleschke.info" },
  { label: "Paperless", icon: "📄", url: "https://paperless.kaleschke.info" },
  { label: "Mealie", icon: "🍽️", url: "https://mealie.kaleschke.info" },
  { label: "Immich", icon: "🖼️", url: "https://immich.kaleschke.info" },
  { label: "Gitea", icon: "🐙", url: "https://git.kaleschke.info" },
  { label: "Code Server", icon: "💻", url: "https://code.kaleschke.info" },
  { label: "FileBrowser", icon: "📁", url: "https://files.kaleschke.info" },
  { label: "Backrest", icon: "💾", url: "https://backrest.kaleschke.info" },
  { label: "Vaultwarden", icon: "🔐", url: "https://vault.kaleschke.info" },
  { label: "AdGuard", icon: "🛡️", url: "https://adguard.kaleschke.info" },
  { label: "Traefik", icon: "🔀", url: "https://traefik.kaleschke.info" },
  { label: "Scrutiny", icon: "🔍", url: "https://scrutiny.kaleschke.info" },
];

export function renderQuickAccess() {
  const grid = document.getElementById("quick-access-grid");
  if (!grid) return;
  grid.innerHTML = QUICK_LINKS.map(({ label, icon, url }) => `
    <a class="quick-tile" href="${url}" target="_blank" rel="noopener noreferrer">
      <span class="quick-tile-icon">${icon}</span>
      <span class="quick-tile-label">${label}</span>
    </a>
  `).join("");
}