<template>
  <section class="max-w-[960px] mx-auto px-6 pt-24 pb-16">
    <h1 class="text-2xl text-olive leading-[2] mb-4 font-pixel">{{ t('impressum.title') }}</h1>
    <div class="section max-w-2xl">
      <h2 class="text-[10px] text-olive font-pixel mb-4">{{ t('impressum.info.title') }}</h2>
      <div class="space-y-3 text-sm text-beige-dark leading-[2]">
        <p><strong class="text-olive">{{ t('impressum.name') }}</strong></p>
        <p>{{ t('impressum.company') }}</p>
        <p>{{ t('impressum.email') }}</p>
      </div>

      <h3 class="text-[8px] text-olive font-pixel mt-8 mb-3">Online-Streitbeilegung</h3>
      <p class="text-sm text-beige-dark leading-[2]">
        Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung bereit:
        <a href="https://ec.europa.eu/consumers/odr" class="text-orange underline" target="_blank" rel="noopener">https://ec.europa.eu/consumers/odr</a>
      </p>
      <p class="text-sm text-beige-dark leading-[2]">
        Wir sind nicht verpflichtet und nicht bereit, an einem Streitbeteiligungsverfahren vor einer
        Verbraucherschlichtungsstelle teilzunehmen.
      </p>
    </div>
  </section>
</template>

<script setup lang="ts">
import { t } from '../i18n'
</script>

<style scoped>
.section {
  border: 4px solid var(--color-olive);
  padding: 2rem;
  background: var(--color-beige);
}
[data-theme="dark"] .section { background: var(--color-beige-dark); }
</style>
