<script setup>
import { computed, ref } from 'vue'

// Geschäftsführungs-Sicht: WAS das Projekt kann — keine Einheiten, kein Code.
// EIN durchgehendes Karten-Raster über die volle Breite; der Bereich steht als
// Label auf der Karte. Klick vergrößert die Karte und zeigt alle Fähigkeiten.
const props = defineProps({ projekt: { type: Object, required: true } })

const karten = computed(() =>
  props.projekt.bereiche.flatMap((b) =>
    b.features.map((f) => ({ ...f, bereich: b.name, schluessel: b.name + f.titel }))))

const offen = ref(new Set())
function toggle(schluessel) {
  offen.value.has(schluessel) ? offen.value.delete(schluessel) : offen.value.add(schluessel)
  offen.value = new Set(offen.value)
}
</script>

<template>
  <div class="raster">
    <div v-for="f in karten" :key="f.schluessel" class="karte feature"
         :class="{ offen: offen.has(f.schluessel) }" @click="toggle(f.schluessel)">
      <span class="bereich">{{ f.bereich }}</span>
      <div class="kopf">
        <strong>{{ f.titel }}</strong>
      </div>
      <p class="besch">{{ f.beschreibung }}</p>
      <ul v-if="offen.has(f.schluessel)" class="faehigkeiten">
        <li v-for="tf in f.teilfeatures" :key="tf.titel">{{ tf.titel }}</li>
      </ul>
      <span v-else class="mehr">{{ f.teilfeatures.length }} Fähigkeiten ▸</span>
    </div>
  </div>
</template>

<style scoped>
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.9rem;
  align-items: start;
}
.feature { cursor: pointer; transition: border-color 0.1s; }
.feature:hover { border-color: var(--akzent); }
.feature.offen {
  grid-column: span 2;
  border-color: var(--akzent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}
.bereich {
  display: block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--dezent); margin-bottom: 0.25rem;
}
.kopf { display: flex; align-items: baseline; gap: 0.6rem; }
.besch { color: var(--dezent); font-size: 0.9rem; margin: 0.3rem 0 0; }
.faehigkeiten { margin: 0.6rem 0 0; padding-left: 1.3rem; }
.faehigkeiten li { margin: 0.25rem 0; }
.mehr { display: block; margin-top: 0.5rem; color: var(--akzent); font-size: 0.82rem; }
</style>
