<template>
  <div class="page">
    <section class="card hero glass">
      <div>
        <p class="eyebrow">Atlas</p>
        <h1>Apps</h1>
        <p class="lede">Quick links to the lab services. Some apps open in a new tab for security reasons.</p>
      </div>
      <div class="hero-actions">
        <a class="pill mono" href="https://cloud.bstein.dev" target="_blank" rel="noreferrer">Open Nextcloud</a>
        <a class="pill mono" href="https://sso.bstein.dev" target="_blank" rel="noreferrer">Open Keycloak</a>
      </div>
    </section>

    <section class="card">
      <div class="section-head">
        <h2>Service Grid</h2>
        <span class="pill mono">apps + pipelines + observability</span>
      </div>
      <ServiceGrid :services="displayServices" />
    </section>
  </div>
</template>

<script setup>
import { computed } from "vue";
import ServiceGrid from "../components/ServiceGrid.vue";
import { fallbackServices } from "../data/sample.js";

const props = defineProps({
  serviceData: Object,
});

const displayServices = computed(() => props.serviceData?.services || fallbackServices().services);
</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;
}

.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;
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
</style>
