<template>
  <div class="chat-container">
    <header class="header">
      <router-link to="/" class="app-brand app-brand-link">
        <span class="app-brand-mark">S</span>
        <div class="app-brand-copy">
          <span class="app-brand-eyebrow">SingleChat</span>
          <h1>{{ landing.heading }}</h1>
        </div>
      </router-link>
      <HeaderAdBanner />
    </header>

    <main class="content-page">
      <section class="landing-hero">
        <p class="eyebrow">YPChat</p>
        <h2>{{ landing.heading }}</h2>
        <p>{{ landing.intro }}</p>
        <div class="action-row">
          <router-link
            v-for="link in landing.links"
            :key="link.to"
            :to="link.to"
          >
            {{ link.label }}
          </router-link>
        </div>
      </section>

      <section class="topic-grid" aria-label="SingleChat Vorteile">
        <article
          v-for="section in landing.sections"
          :key="section.title"
          class="topic-card"
        >
          <h3>{{ section.title }}</h3>
          <p>{{ section.text }}</p>
        </article>
      </section>

      <section class="support-section">
        <h3>Passende Themen im Single Chat</h3>
        <p>
          Viele Nutzer suchen nach einem kostenlosen Single Chat, einem Chat ohne lange Anmeldung oder einem Single Treff
          fuer neue Kontakte. SingleChat buendelt diese Einstiege auf einer Plattform: schnell starten, privat schreiben,
          respektvoll bleiben.
        </p>
        <ul>
          <li><router-link to="/kostenloser-single-chat">Kostenloser Single Chat</router-link></li>
          <li><router-link to="/single-chat-ohne-anmeldung">Single Chat ohne Anmeldung</router-link></li>
          <li><router-link to="/single-treff-chat">Single Treff Chat</router-link></li>
        </ul>
      </section>
    </main>

    <ImprintContainer />
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import HeaderAdBanner from '../components/HeaderAdBanner.vue';
import ImprintContainer from '../components/ImprintContainer.vue';

const route = useRoute();
const landing = computed(() => route.meta.landing || {
  heading: 'SingleChat',
  intro: 'Kostenloser Single Chat fuer private Gespraeche und neue Kontakte.',
  sections: [],
  links: [{ to: '/', label: 'Chat starten' }]
});
</script>

<style scoped>
.content-page {
  max-width: 1020px;
  margin: 0 auto;
  padding: 20px 14px 36px;
  line-height: 1.6;
  color: #344038;
}

.landing-hero,
.support-section {
  border: 1px solid #d7dfd9;
  border-radius: 12px;
  background: #ffffff;
  padding: 18px;
}

.eyebrow {
  margin: 0 0 6px;
  color: #637067;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.landing-hero h2 {
  margin: 0 0 10px;
  color: #18201b;
}

.landing-hero p {
  max-width: 760px;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.action-row a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  background: #245c3a;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.action-row a:not(:first-child) {
  background: #edf4ef;
  color: #245c3a;
  border: 1px solid #bfd5c4;
}

.topic-grid {
  margin: 16px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.topic-card {
  border: 1px solid #d7dfd9;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px;
}

.topic-card h3,
.support-section h3 {
  margin: 0 0 8px;
  color: #18201b;
}

.topic-card p,
.support-section p {
  margin: 0;
}

.support-section ul {
  margin: 12px 0 0;
  padding-left: 20px;
}

.support-section a {
  color: #245c3a;
}

.app-brand-link {
  text-decoration: none;
}

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