<template>
  <div class="service-grid">
    <component
      v-for="svc in services"
      :key="svc.name"
      :is="isInternal(svc.link) ? RouterLink : 'a'"
      class="service card"
      :class="{ muted: svc.status === 'planned' || svc.status === 'degraded' }"
      :to="isInternal(svc.link) ? svc.link : undefined"
      :href="!isInternal(svc.link) ? svc.link || '#' : undefined"
      :title="svc.link"
      :target="isInternal(svc.link) ? undefined : '_blank'"
      rel="noopener noreferrer"
    >
      <div class="service-top">
        <div class="icon">{{ svc.icon || "🛰️" }}</div>
        <div>
          <div class="name">{{ svc.name }}</div>
          <div class="category">{{ svc.category }}</div>
        </div>
      </div>
      <p class="summary">{{ svc.summary }}</p>
      <div v-if="svc.link" class="link mono">{{ svc.host || hostFromLink(svc.link) }}</div>
    </component>
  </div>
</template>

<script setup>
import { RouterLink } from "vue-router";

const props = defineProps({
  services: Array,
});

const hostFromLink = (link) => {
  try {
    const url = new URL(link);
    return url.host;
  } catch (e) {
    return link;
  }
};

const isInternal = (link) => typeof link === "string" && link.startsWith("/");
</script>

<style scoped>
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.service {
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  border-color: rgba(255, 255, 255, 0.08);
  min-height: 108px;
  padding: 12px;
}

.service:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 229, 197, 0.5);
  box-shadow: var(--glow);
}

.service.muted {
  opacity: 0.5;
  border-style: dashed;
}

.service.muted:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.service-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  font-size: 16px;
}

.name {
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.15;
}

.category {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.summary {
  color: var(--text-muted);
  margin: 8px 0 0;
  min-height: 22px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.link {
  margin-top: 6px;
  color: var(--accent-cyan);
  font-size: 12px;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}
</style>
