<template>
  <div class="page">
    <section class="card hero glass">
      <div>
        <p class="eyebrow">Atlas AI</p>
        <h1>Roadmap</h1>
        <p class="lede">
          Chat is live today. Image generation and speech / translation will roll out next. This page tracks what’s planned and
          what hardware it will land on.
        </p>
      </div>
    </section>

    <section class="card grid">
      <div class="track">
        <div class="pill mono">AI Image</div>
        <h3>Visualization</h3>
        <p class="text">
          Goal: small, fast image generation for diagrams, thumbnails, and mockups. Targeting Jetson nodes once stable. Output
          will be gated to members only.
        </p>
        <ul>
          <li>Models: open-source SD/FLUX variants distilled for 16GB GPUs.</li>
          <li>Pipeline: upload prompt → queued job → signed URL in Nextcloud.</li>
          <li>Status: planned (no UI yet).</li>
        </ul>
      </div>
      <div class="track">
        <div class="pill mono">AI Speech</div>
        <h3>Voice + Translation</h3>
        <p class="text">
          Goal: low-latency ASR + TTS for meetings and media. Results should stream back into apps like Jitsi and Pegasus.
        </p>
        <ul>
          <li>Models: whisper-style ASR, lightweight TTS with multilingual support.</li>
          <li>Targets: titan-20/21 Jetsons for acceleration; fall back to CPU-only if needed.</li>
          <li>Status: planned (no UI yet).</li>
        </ul>
      </div>
    </section>

    <section class="card">
      <h2>What’s live now?</h2>
      <p class="text">
        Atlas AI chat is running on local GPU hardware at <code>chat.ai.bstein.dev</code>. The chat page streams responses and
        reports latency per turn. As larger models come online on the Jetsons, the chat endpoint will be upgraded in-place.
      </p>
      <div class="pill mono">Next step: migrate chat to Jetsons when available</div>
    </section>
  </div>
</template>

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

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

.track {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.text {
  color: var(--text-muted);
}

ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
}

.pill {
  display: inline-block;
}
</style>
