<template>
  <div class="club-concept-page">
    <header class="club-concept-hero card">
      <div class="club-concept-meta">
        <span class="club-concept-phase">{{ modulePhase }}</span>
        <span class="club-concept-tag">TT-Verein</span>
      </div>
      <h2>{{ moduleTitle }}</h2>
      <p class="club-concept-summary">{{ moduleSummary }}</p>
    </header>

    <section class="club-concept-grid">
      <article class="card club-concept-card">
        <h3>Enthält</h3>
        <ul>
          <li v-for="item in moduleHighlights" :key="item">{{ item }}</li>
        </ul>
      </article>

      <article class="card club-concept-card">
        <h3>Grundprinzipien</h3>
        <ul>
          <li v-for="item in modulePrinciples" :key="item">{{ item }}</li>
        </ul>
      </article>
    </section>

    <section class="card club-concept-card">
      <h3>Einordnung</h3>
      <p>
        Diese Fläche ist als konzeptioneller Arbeitsbereich für TT-Verein angelegt. Sie markiert
        das Modul in der Produktstruktur und hält die Informationsarchitektur stabil, während die
        konkrete Fachlogik schrittweise umgesetzt wird.
      </p>
    </section>
  </div>
</template>

<script>
export default {
  name: 'ClubConceptModuleView',
  computed: {
    moduleMeta() {
      return this.$route.meta?.moduleMeta || {};
    },
    moduleTitle() {
      return this.moduleMeta.title || 'TT-Verein Modul';
    },
    modulePhase() {
      return this.moduleMeta.phase || 'Phase 1';
    },
    moduleSummary() {
      return this.moduleMeta.summary || '';
    },
    moduleHighlights() {
      return Array.isArray(this.moduleMeta.highlights) ? this.moduleMeta.highlights : [];
    },
    modulePrinciples() {
      return Array.isArray(this.moduleMeta.principles) ? this.moduleMeta.principles : [];
    },
  },
};
</script>

<style scoped>
.club-concept-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1100px;
}

.club-concept-hero {
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(24, 70, 54, 0.08), rgba(47, 122, 95, 0.04));
}

.club-concept-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.club-concept-phase,
.club-concept-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.club-concept-phase {
  background: rgba(47, 122, 95, 0.12);
  color: var(--primary-strong);
}

.club-concept-tag {
  background: rgba(160, 112, 64, 0.12);
  color: #8a5b1d;
}

.club-concept-hero h2 {
  margin: 0 0 0.5rem;
}

.club-concept-summary {
  margin: 0;
  color: var(--text-secondary);
  max-width: 70ch;
}

.club-concept-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.club-concept-card {
  padding: 1.25rem;
}

.club-concept-card h3 {
  margin-top: 0;
}

.club-concept-card ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
}

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