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

    <main class="feedback-page">
      <section class="feedback-copy">
        <h2>Öffentliches Feedback</h2>
        <p>
          Diese Seite ist für Vorschläge, Fehlerberichte und Ideen gedacht. Bitte schreibe nur Inhalte, die du auch
          öffentlich sehen möchtest. Wir moderieren grob (Spam/Beleidigungen/illegaler Inhalt wird entfernt).
        </p>
        <h3>Tipps für gutes Feedback</h3>
        <ul>
          <li>Beschreibe kurz, was du erreichen wolltest und was stattdessen passiert ist.</li>
          <li>Falls möglich: Browser/Device, Zeitpunkt und konkrete Schritte.</li>
          <li>Keine privaten Daten posten (Telefon, Adresse, E‑Mail, Passwörter).</li>
        </ul>
      </section>

      <FeedbackPanel />
    </main>

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

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

<style scoped>
.feedback-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 14px 30px;
}

.feedback-copy {
  background: #ffffff;
  border: 1px solid #d7dfd9;
  border-radius: 14px;
  padding: 16px 16px 12px;
  margin-bottom: 16px;
}

.feedback-copy h2 {
  margin: 0 0 8px;
  color: #18201b;
}

.feedback-copy h3 {
  margin: 14px 0 8px;
  color: #18201b;
}

.feedback-copy p,
.feedback-copy li {
  color: #344038;
  line-height: 1.55;
}

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