<template>
  <div class="imprint-container">
    <a href="/partners">Partner</a>
    <a href="/ratgeber">Ratgeber</a>
    <a href="/faq">FAQ</a>
    <a href="/regeln">Regeln</a>
    <a href="/sicherheit">Sicherheit</a>
    <a href="/datenschutz">Datenschutz</a>
    <a href="#" @click.prevent="showFeedback = true">Feedback</a>
    <a href="#" @click.prevent="showImprint = true">Impressum</a>
    
    <div v-if="showFeedback" class="imprint-dialog" @click.self="showFeedback = false">
      <div class="feedback-dialog-content">
        <button class="close-button" @click="showFeedback = false">×</button>
        <FeedbackPanel :show-hero="false" :embedded="true" />
      </div>
    </div>

    <div v-if="showImprint" class="imprint-dialog" @click.self="showImprint = false">
      <div class="imprint-content">
        <button class="close-button" @click="showImprint = false">×</button>
        <div v-html="imprintText"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import FeedbackPanel from './FeedbackPanel.vue';

const showImprint = ref(false);
const showFeedback = ref(false);

const imprintText = `
<h1>Imprint</h1>
<p><strong>Information according to § 5 TMG</strong></p>
<p>
Torsten Schulz<br>
Friedrich-Stampfer-Str. 21<br>
60437 Frankfurt
</p>
<p><strong>Represented by:</strong><br>
Torsten Schulz
</p>
<p><strong>Contact:</strong><br>
Phone: 069-95 64 17 10<br>
Email: <a href="mailto:tsschulz@tsschulz.de">tsschulz@tsschulz.de</a>
</p>
<p>
Our offer contains links to external websites of third parties, on whose contents we have no influence. Therefore, we cannot assume any liability for these external contents. The respective provider or operator of the pages is always responsible for the contents of the linked pages. The linked pages were checked for possible legal violations at the time of linking. Illegal contents were not recognizable at the time of linking. However, permanent monitoring of the content of the linked pages is not reasonable without concrete evidence of a violation of the law. If we become aware of any infringements, we will remove such links immediately.<br><br>
<strong>Data Protection</strong><br><br>
The use of our website is usually possible without providing personal data. As far as personal data (e.g., name, address, or email addresses) is collected on our website, this is always done on a voluntary basis as far as possible. This data will not be passed on to third parties without your express consent.<br>
We would like to point out that data transmission over the Internet (e.g., communication by email) can have security gaps. A complete protection of data against access by third parties is not possible.<br>
The use of contact data published within the scope of the imprint obligation by third parties for sending unsolicited advertising and information materials is hereby expressly prohibited. The operators of these pages expressly reserve the right to take legal action in the event of unsolicited sending of advertising information, such as spam emails.
</p>
<p>
Imprint from <a href="https://www.impressum-generator.de">Imprint Generator</a> of <a href="https://www.kanzlei-hasselbach.de/">Kanzlei Hasselbach, Lawyers for Labor Law and Family Law</a>
</p>
<p>
Thanks for the flag icons to <a href="https://flagpedia.net">flagpedia.net</a>
</p>
`;
</script>

<style scoped>
.imprint-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(18, 26, 21, 0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 20px;
}

.imprint-content {
  background: #ffffff;
  border: 1px solid #d7dfd9;
  border-radius: 14px;
  padding: 24px 20px 20px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 60px rgba(18, 26, 21, 0.18);
}

.feedback-dialog-content {
  width: min(1100px, 96vw);
  max-height: 88vh;
  overflow: auto;
  background: #f4f7f5;
  border: 1px solid #d7dfd9;
  border-radius: 16px;
  padding: 20px;
  position: relative;
  box-shadow: 0 24px 60px rgba(18, 26, 21, 0.18);
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: #f6f9f7;
  border: 1px solid #d7dfd9;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.imprint-content :deep(h1) {
  margin-bottom: 12px;
  font-size: 20px;
  color: #18201b;
}

.imprint-content :deep(p) {
  margin-bottom: 12px;
  color: #344038;
  line-height: 1.5;
}

.imprint-content :deep(a) {
  color: #245c3a;
}
</style>
