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

    <main class="content-page">
      <h2>Sicherheit &amp; Privatsphäre</h2>
      <p>
        SingleChat ist auf schnellen Einstieg ausgelegt – trotzdem ist uns Sicherheit wichtig. Diese Hinweise helfen dir,
        im privaten und anonymen Chat deine Privatsphäre zu schützen und gute Entscheidungen zu treffen.
      </p>

      <h3>Empfehlungen für sichere Nutzung</h3>
      <ul>
        <li>Nutze einen Nickname, der dich nicht identifiziert.</li>
        <li>Teile keine Kontakt- oder Zahlungsdaten.</li>
        <li>Sei vorsichtig bei Links/Dateien von unbekannten Personen.</li>
        <li>Beende Gespräche, die dir unangenehm sind.</li>
      </ul>

      <h3>Blockieren und melden</h3>
      <p>
        Du kannst Benutzer blockieren. Für harte Fälle (Spam, Belästigung, strafbare Inhalte) nutze bitte die
        <router-link to="/feedback">Feedback-Seite</router-link> und gib Zeitpunkt, Nickname und eine kurze Beschreibung
        an.
      </p>

      <h3>Datenschutz</h3>
      <p>
        Details findest du auf der Seite <router-link to="/datenschutz">Datenschutz</router-link>. Wenn du Fragen hast,
        kontaktiere uns gern über Feedback. Für den respektvollen Umgang im Chat beachte zusätzlich unsere
        <router-link to="/regeln">Chat-Regeln</router-link>.
      </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: 980px;
  margin: 0 auto;
  padding: 20px 14px 36px;
  line-height: 1.6;
  color: #344038;
}

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

.content-page h3 {
  margin: 18px 0 6px;
  color: #18201b;
}

.content-page a {
  color: #245c3a;
}

.app-brand-link {
  text-decoration: none;
}
</style>
