<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>Ratgeber</h1>
        </div>
      </router-link>
      <HeaderAdBanner />
    </header>

    <main class="content-page">
      <h2>Ratgeber: Sicher und entspannt chatten</h2>
      <p>
        In unserem Ratgeber findest du praxisnahe Tipps rund um privaten Chat, Profilgestaltung und digitale Sicherheit.
        Alle Inhalte sind speziell fuer SingleChat-Nutzer geschrieben und werden laufend erweitert.
      </p>
      <p>
        Wenn du neu im Chat bist, starte am besten mit dem Leitfaden zur ersten Unterhaltung und arbeite dich dann zu
        den Themen Datenschutz, Profilqualitaet und respektvolle Kommunikation vor.
      </p>
      <p>
        Ziel dieser Artikel ist nicht, moeglichst viele Nachrichten zu erzeugen, sondern bessere Gespraeche mit
        gegenseitigem Respekt. Deshalb kombinieren wir konkrete Formulierungsbeispiele mit Sicherheitsregeln und klaren
        Handlungsempfehlungen fuer schwierige Situationen.
      </p>

      <section class="editor-note">
        <h3>Wie dieser Ratgeber aufgebaut ist</h3>
        <ul>
          <li>Praxisnahe Schritt-fuer-Schritt-Anleitungen statt allgemeiner Floskeln.</li>
          <li>Konkrete Beispiele fuer gute und schlechte Chat-Situationen.</li>
          <li>Sicherheitsfokus: Datenschutz, Grenzsetzung und Verhalten bei Red Flags.</li>
          <li>Regelmaessige Aktualisierung bei neuen Funktionen oder Moderationsregeln.</li>
        </ul>
      </section>

      <section class="guide-grid">
        <article class="guide-card">
          <h3><router-link to="/ratgeber/erste-nachricht">Die erste Nachricht im Chat</router-link></h3>
          <p>
            Konkrete Formulierungen, typische Fehler und ein einfacher Aufbau, mit dem du natuerlich ins Gespraech
            kommst.
          </p>
        </article>
        <article class="guide-card">
          <h3><router-link to="/ratgeber/profil-tipps">Profil verbessern in 10 Minuten</router-link></h3>
          <p>
            So waehlen Nutzer Nickname, Alter und Selbstbeschreibung so, dass sie passende Kontakte statt Zufallstreffer
            erhalten.
          </p>
        </article>
        <article class="guide-card">
          <h3><router-link to="/ratgeber/sicher-chatten">Sicher chatten und Daten schuetzen</router-link></h3>
          <p>
            Datenschutz im Alltag: welche Informationen du teilen kannst und was du besser nie im Chat schreiben solltest.
          </p>
        </article>
        <article class="guide-card">
          <h3><router-link to="/ratgeber/red-flags">Red Flags im Online-Chat erkennen</router-link></h3>
          <p>
            Fruehe Warnzeichen bei Spam, Manipulation und Betrugsversuchen inklusive klarer Reaktionsempfehlungen.
          </p>
        </article>
      </section>

      <section class="next-steps">
        <h3>Empfohlene Lesereihenfolge</h3>
        <ol>
          <li><router-link to="/ratgeber/erste-nachricht">Die erste Nachricht im Chat</router-link></li>
          <li><router-link to="/ratgeber/profil-tipps">Profil verbessern in 10 Minuten</router-link></li>
          <li><router-link to="/ratgeber/sicher-chatten">Sicher chatten und Daten schuetzen</router-link></li>
          <li><router-link to="/ratgeber/red-flags">Red Flags im Online-Chat erkennen</router-link></li>
        </ol>
      </section>

      <p class="content-meta">
        Redaktion: SingleChat Team · Zuletzt aktualisiert: 07.05.2026
      </p>
    </main>

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

<script setup>
import HeaderAdBanner from '../components/HeaderAdBanner.vue';
import ImprintContainer from '../components/ImprintContainer.vue';
</script>

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

.content-page h2 {
  margin: 0 0 10px;
  color: #18201b;
}

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

.editor-note,
.next-steps {
  margin-top: 18px;
  border: 1px solid #d7dfd9;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px;
}

.editor-note h3,
.next-steps h3 {
  margin: 0 0 8px;
  color: #18201b;
}

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

.guide-card h3 {
  margin: 0 0 6px;
}

.guide-card p {
  margin: 0;
}

.guide-card a {
  color: #1f6e43;
  text-decoration: none;
}

.guide-card a:hover {
  text-decoration: underline;
}

.content-meta {
  margin-top: 18px;
  font-size: 12px;
  color: #637067;
}

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

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