<template>
  <div class="page">
    <section class="card hero glass">
      <div>
        <p class="eyebrow">Atlas</p>
        <h1>Apps</h1>
        <p class="lede">
          Service shortcuts for Atlas. Nextcloud is the hub, but everything is available directly too.
        </p>
      </div>
    </section>

    <section v-for="category in categories" :key="category.title" class="card category">
      <div class="section-head">
        <div>
          <h2>{{ category.title }}</h2>
          <p class="muted">{{ category.description }}</p>
        </div>
      </div>

      <div class="tiles">
        <a
          v-for="app in category.apps"
          :key="app.name"
          class="tile"
          :href="app.url"
          :target="app.target"
          rel="noreferrer"
        >
          <div class="tile-title">{{ app.name }}</div>
          <div class="tile-desc">{{ app.description }}</div>
        </a>
      </div>
    </section>
  </div>
</template>

<script setup>
const categories = [
  {
    title: "Cloud",
    description: "Files, photos, mail, calendars, and documents — the primary hub for Atlas users.",
    apps: [
      {
        name: "Nextcloud",
        url: "https://cloud.bstein.dev",
        target: "_blank",
        description: "Your personal cloud storage and productivity suite.",
      },
    ],
  },
  {
    title: "Security",
    description: "Modern password security and secrets tooling.",
    apps: [
      {
        name: "Vaultwarden",
        url: "https://vault.bstein.dev",
        target: "_blank",
        description: "Password manager (Bitwarden-compatible).",
      },
      {
        name: "Vault",
        url: "https://secret.bstein.dev",
        target: "_blank",
        description: "Secrets management for infrastructure and apps.",
      },
    ],
  },
  {
    title: "Communications",
    description: "Chat and meetings.",
    apps: [
      {
        name: "AI Chat",
        url: "/ai/chat",
        target: "_self",
        description: "Chat with Atlas AI (GPU-accelerated).",
      },
      {
        name: "Meet",
        url: "https://meet.bstein.dev",
        target: "_blank",
        description: "Video meetings (Jitsi).",
      },
    ],
  },
  {
    title: "Streaming",
    description: "Family media streaming and upload workflows.",
    apps: [
      {
        name: "Jellyfin",
        url: "https://stream.bstein.dev",
        target: "_blank",
        description: "Stream videos to desktop, mobile, and TV.",
      },
      {
        name: "Pegasus",
        url: "https://pegasus.bstein.dev",
        target: "_blank",
        description: "Mobile-friendly upload/publish into Jellyfin.",
      },
    ],
  },
  {
    title: "Dev",
    description: "Source control, CI, registry, GitOps, and observability.",
    apps: [
      { name: "Gitea", url: "https://scm.bstein.dev", target: "_blank", description: "Git hosting and collaboration." },
      { name: "Jenkins", url: "https://ci.bstein.dev", target: "_blank", description: "CI pipelines and automation." },
      { name: "Harbor", url: "https://registry.bstein.dev", target: "_blank", description: "Artifact registry." },
      { name: "GitOps", url: "https://cd.bstein.dev", target: "_blank", description: "GitOps UI for Flux." },
      { name: "Grafana", url: "https://metrics.bstein.dev", target: "_blank", description: "Dashboards and monitoring." },
    ],
  },
  {
    title: "Crypto",
    description: "Local infrastructure for crypto workloads.",
    apps: [
      {
        name: "Monero Node",
        url: "https://monero.bstein.dev",
        target: "_blank",
        description: "Faster sync using the Atlas Monero node.",
      },
    ],
  },
];
</script>

<style scoped>
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 22px 72px;
}

.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.category {
  padding: 18px;
  margin-top: 12px;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.muted {
  margin: 6px 0 0;
  color: var(--text-muted);
  max-width: 820px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.tile {
  display: block;
  text-decoration: none;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 160ms ease, transform 160ms ease;
}

.tile:hover {
  border-color: rgba(120, 180, 255, 0.35);
  transform: translateY(-1px);
}

.tile-title {
  font-weight: 750;
  color: var(--text-strong);
}

.tile-desc {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.4;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 6px;
  font-size: 13px;
}

h1 {
  margin: 0 0 6px;
  font-size: 32px;
}

.lede {
  margin: 0;
  color: var(--text-muted);
  max-width: 640px;
}
</style>
