<script setup lang="ts">
const companyDetails = [
  { label: 'Anbieter', value: 'Hoard Labs GmbH (Testdaten)' },
  { label: 'Vertreten durch', value: 'Max Mustermann, Geschäftsführer' },
  { label: 'Adresse', value: 'Musterstraße 42, 12345 Musterstadt, Deutschland' },
]

const registerDetails = [
  { label: 'Handelsregister', value: 'HRB 123456' },
  { label: 'Registergericht', value: 'Amtsgericht Musterstadt' },
  { label: 'Umsatzsteuer-ID', value: 'DE123456789' },
]

const contactDetails = [
  { label: 'Telefon', value: '+49 30 1234567-0', href: 'tel:+493012345670' },
  { label: 'E-Mail', value: 'kontakt@hoard-demo.de', href: 'mailto:kontakt@hoard-demo.de' },
  { label: 'Support', value: 'support@hoard-demo.de', href: 'mailto:support@hoard-demo.de' },
]

const legalNotes = [
  {
    title: 'Verantwortlich für den Inhalt',
    text: 'Julia Beispiel, Musterstraße 42, 12345 Musterstadt, Deutschland (Testdaten).',
  },
  {
    title: 'EU-Streitbeilegung',
    text: 'Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung bereit: https://ec.europa.eu/consumers/odr/. Wir sind nicht verpflichtet und nicht bereit, an einem Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.',
  },
  {
    title: 'Haftung für Inhalte',
    text: 'Als Diensteanbieter sind wir für eigene Inhalte nach den allgemeinen Gesetzen verantwortlich. Für fremde Inhalte, auf die wir verweisen, übernehmen wir keine Gewähr. Dieses Impressum enthält ausschließlich Demo-Angaben.',
  },
  {
    title: 'Haftung für Links',
    text: 'Unsere Seiten enthalten Links zu externen Webseiten Dritter. Für deren Inhalte ist stets der jeweilige Anbieter verantwortlich. Bei Bekanntwerden von Rechtsverletzungen werden derartige Links umgehend entfernt.',
  },
]
</script>

<template>
  <v-container fluid class="impressum-page hoard-page">
    <section class="impressum-hero hoard-panel hoard-panel-gradient">
      <div class="hero-copy">
        <p class="hero-kicker hoard-kicker">Rechtliche Angaben</p>
        <h1>Impressum</h1>
        <p class="hero-lead">
          Diese Seite ist im Hoard-Design aufgebaut und mit Testdaten gefüllt. Ersetze die Angaben
          vor einem produktiven Einsatz mit deinen echten Unternehmensdaten.
        </p>

        <div class="hero-meta">
          <span class="meta-pill">Testdaten</span>
          <span class="meta-text">Stand: 17. April 2026</span>
        </div>
      </div>

      <div class="hero-actions hoard-action-row">
        <v-btn color="primary" prepend-icon="mdi-home" to="/welcome">Zur Startseite</v-btn>
        <v-btn variant="outlined" prepend-icon="mdi-login" to="/login">Zum Login</v-btn>
      </div>
    </section>

    <section class="details-grid">
      <article class="detail-card hoard-panel">
        <h2>Anbieterangaben</h2>
        <dl class="detail-list">
          <div v-for="entry in companyDetails" :key="entry.label" class="detail-item">
            <dt>{{ entry.label }}</dt>
            <dd>{{ entry.value }}</dd>
          </div>
        </dl>
      </article>

      <article class="detail-card hoard-panel">
        <h2>Kontakt</h2>
        <dl class="detail-list">
          <div v-for="entry in contactDetails" :key="entry.label" class="detail-item">
            <dt>{{ entry.label }}</dt>
            <dd>
              <a :href="entry.href">{{ entry.value }}</a>
            </dd>
          </div>
        </dl>
      </article>

      <article class="detail-card hoard-panel">
        <h2>Register und Steuer</h2>
        <dl class="detail-list">
          <div v-for="entry in registerDetails" :key="entry.label" class="detail-item">
            <dt>{{ entry.label }}</dt>
            <dd>{{ entry.value }}</dd>
          </div>
        </dl>
      </article>
    </section>

    <section class="notes-section hoard-panel">
      <header class="notes-head">
        <p class="notes-kicker hoard-kicker">Rechtliche Hinweise</p>
        <h2>Wichtige Zusatzinformationen</h2>
      </header>

      <div class="notes-grid">
        <article v-for="note in legalNotes" :key="note.title" class="note-card">
          <h3>{{ note.title }}</h3>
          <p>{{ note.text }}</p>
        </article>
      </div>
    </section>
  </v-container>
</template>

<style scoped>
.impressum-page {
  --hoard-page-width: 1120px;
}

.impressum-hero {
  --hoard-gradient-angle: 125deg;
  --hoard-gradient-start: color-mix(in srgb, var(--color-primary-100) 40%, var(--color-surface) 60%);
  --hoard-gradient-end: var(--color-surface);
  --hoard-gradient-end-stop: 56%;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: end;
  padding: var(--space-8);
}

.hero-lead,
.meta-text {
  margin: 0;
}

h1 {
  margin-bottom: var(--space-3);
  font-size: 2.45rem;
}

.hero-lead {
  max-width: 64ch;
  color: var(--color-text-secondary);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-primary-300) 60%, var(--color-border) 40%);
  border-radius: 999px;
  color: var(--color-primary-700);
  font-size: var(--font-size-sm);
  font-weight: 600;
  background-color: color-mix(in srgb, var(--color-primary-100) 82%, var(--color-surface) 18%);
}

.meta-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.hero-actions {
  justify-content: flex-end;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.detail-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

h2 {
  margin: 0;
  font-size: 1.45rem;
}

.detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.detail-item {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 75%, var(--color-surface) 25%);
}

.detail-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

dt {
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

dd {
  margin: 0;
  color: var(--color-text);
}

.notes-section {
  padding: var(--space-6);
}

.notes-head {
  margin-bottom: var(--space-5);
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.note-card {
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-border) 76%, var(--color-surface) 24%);
  border-radius: var(--radius-md);
  background-color: color-mix(in srgb, var(--color-surface-alt) 72%, var(--color-surface) 28%);
}

h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.03rem;
}

.note-card p {
  margin: 0;
  color: var(--color-text-secondary);
}

.detail-card,
.note-card {
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.detail-card:hover,
.note-card:hover {
  border-color: color-mix(in srgb, var(--color-primary-300) 46%, var(--color-border) 54%);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: no-preference) {
  .impressum-hero,
  .detail-card,
  .notes-section {
    animation: hoard-soft-enter 260ms both;
  }

  .detail-card:nth-child(2) {
    animation-delay: 80ms;
  }

  .detail-card:nth-child(3),
  .notes-section {
    animation-delay: 120ms;
  }
}

@media (width <= 1080px) {
  .details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 960px) {
  .impressum-hero,
  .notes-section {
    padding: var(--space-5);
  }

  .impressum-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hero-actions {
    justify-content: flex-start;
    gap: var(--space-2);
  }

  .details-grid,
  .notes-grid {
    grid-template-columns: 1fr;
  }

  :deep(.hero-actions .v-btn) {
    min-height: 44px;
  }
}

@media (width <= 600px) {
  .impressum-hero,
  .notes-section {
    padding: var(--space-4);
  }

  h1 {
    font-size: 1.9rem;
  }

  .hero-meta {
    margin-top: var(--space-4);
    gap: var(--space-2);
  }

  .hero-actions {
    width: 100%;
  }

  :deep(.hero-actions .v-btn) {
    width: 100%;
  }

  .detail-card {
    padding: var(--space-4);
  }

  .note-card {
    padding: var(--space-3);
  }
}
</style>
