<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">YpChat</span>
          <h1>FAQ</h1>
        </div>
      </router-link>
      <HeaderAdBanner />
    </header>

    <main class="content-page">
      <h2>Häufige Fragen (FAQ)</h2>
      <p>
        Hier beantworten wir die häufigsten Fragen zum kostenlosen Single Chat. Wenn dir etwas fehlt, nutze bitte die
        <router-link to="/feedback">Feedback-Seite</router-link>.
      </p>
      <p>
        Unser Fokus liegt auf privatem und anonymem Chatten mit klaren Regeln. Mehr dazu findest du auch unter
        <router-link to="/sicherheit">Sicherheit</router-link> und <router-link to="/regeln">Regeln</router-link>.
      </p>

      <h3>Wie starte ich?</h3>
      <p>
        Wähle einen Nicknamen, gib Alter, Geschlecht und Land an und starte den Chat kostenlos. Du kannst danach Benutzer suchen
        und Unterhaltungen beginnen.
      </p>

      <h3>Welche Daten sollte ich nicht teilen?</h3>
      <p>
        Bitte teile keine sensiblen Daten wie Telefonnummer, Adresse, E‑Mail, Passwörter oder Zahlungsinformationen im
        Chat. Auch wenn du anonym bleiben möchtest: Nutze einen Nickname, der keine Rückschlüsse auf deine Identität
        zulässt.
      </p>

      <h3>Wie funktioniert der Bildaustausch?</h3>
      <p>
        Du kannst im Chat ein Bild senden. Bitte sende nur Inhalte, für die du die Rechte hast, und vermeide Inhalte,
        die andere belästigen oder gegen unsere Regeln verstoßen.
      </p>

      <h3>Was kann ich bei Belästigung tun?</h3>
      <p>
        Blockiere den Benutzer und beende die Unterhaltung. Wenn es schwerwiegende Fälle sind (Spam, Drohungen,
        strafbare Inhalte), melde es über Feedback mit möglichst genauen Angaben.
      </p>

      <h3>Warum sehe ich manchmal keine Anzeigen?</h3>
      <p>
        Anzeigen werden nur auf Inhaltsseiten eingeblendet, nicht im eigentlichen Chat. Zusätzlich kann es je nach
        Region, Browser-Einstellungen oder Ad-Blockern sein, dass keine Anzeige ausgeliefert wird.
      </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>
