<template>
  <header class="hero card glass">
    <div class="eyebrow">
      <span class="pill">Titan Lab</span>
      <span class="mono accent">atlas · member services · nextcloud-ready</span>
    </div>
    <h1>{{ title }}</h1>
    <p class="lede">{{ subtitle }}</p>
    <div class="cta">
      <a v-for="link in links" :key="link.label" class="btn" :href="link.href" target="_blank" rel="noopener noreferrer">
        {{ link.label }}
      </a>
    </div>
    <div class="inline-status">
      <span v-if="loading" class="pill mono">Loading live data…</span>
      <span v-else-if="error" class="pill mono">{{ error }}</span>
      <span v-else class="pill mono">Live data connected</span>
    </div>
    <div class="hero-grid">
      <div class="mini-card">
        <div class="label">Atlas</div>
        <div class="value">pi + jetson + gpu mesh</div>
        <small>Flux + Longhorn + Traefik</small>
      </div>
      <div class="mini-card">
        <div class="label">Member services</div>
        <div class="value">identity + apps</div>
        <small>Request access · onboarding · approved services</small>
      </div>
      <div class="mini-card">
        <div class="label">Ingress</div>
        <div class="value">Traefik + oauth2-proxy</div>
        <small>Keycloak SSO · secure headers</small>
      </div>
    </div>
  </header>
</template>

<script setup>
defineProps({
  title: String,
  subtitle: String,
  links: Array,
  loading: Boolean,
  error: String,
});
</script>

<style scoped>
.hero {
  padding: 32px 28px;
  background: linear-gradient(135deg, rgba(0, 229, 197, 0.12), rgba(127, 124, 255, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

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

.lede {
  margin: 0 0 16px;
  max-width: 720px;
  color: var(--text-muted);
}

.cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.inline-status {
  margin: 12px 0 8px;
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.mini-card {
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.label {
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.value {
  color: var(--text-strong);
  font-weight: 700;
  margin: 4px 0;
}

small {
  color: var(--text-muted);
}
</style>
