<template>
  <main class="flex-1 px-6 py-24">
    <div class="max-w-3xl mx-auto w-full">
      <NuxtLink
        to="/"
        class="inline-flex items-center gap-2 font-mono text-sm text-white/40 hover:text-white transition-colors duration-200 mb-12"
      >
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
        </svg>
        Back
      </NuxtLink>

      <article class="opacity-0 animate-fade-in prose-legal">
        <h1 class="font-mono font-bold text-3xl sm:text-4xl mb-12">Legal Notice</h1>

        <section class="mb-10">
          <h2 class="font-mono font-medium text-lg mb-3 text-white/80">Information pursuant to § 5 TMG</h2>
          <div class="text-white/60 leading-relaxed space-y-1">
            <p>Bennet Gallein</p>
            <p>Bennet Gallein IT Solutions</p>
            <p>Elbinger Str. 18</p>
            <p>21339 Lüneburg</p>
          </div>
        </section>

        <section class="mb-10">
          <h2 class="font-mono font-medium text-lg mb-3 text-white/80">Contact</h2>
          <div class="text-white/60 leading-relaxed space-y-1">
            <p>Phone: +49 1772489624</p>
            <p>Email: me@bennetgallein.de</p>
          </div>
        </section>

        <section class="mb-10">
          <h2 class="font-mono font-medium text-lg mb-3 text-white/80">VAT ID</h2>
          <div class="text-white/60 leading-relaxed space-y-1">
            <p>
              VAT identification number pursuant to § 27a of the German VAT Act:<br />
              DE320525917
            </p>
          </div>
        </section>

        <section class="mb-10">
          <h2 class="font-mono font-medium text-lg mb-3 text-white/80">Responsible for content pursuant to § 55 para. 2 RStV</h2>
          <div class="text-white/60 leading-relaxed space-y-1">
            <p>Bennet Gallein</p>
            <p>Elbinger Str. 18</p>
            <p>21339 Lüneburg</p>
          </div>
        </section>

        <section class="mb-10">
          <h2 class="font-mono font-medium text-lg mb-3 text-white/80">EU Dispute Resolution</h2>
          <div class="text-white/60 leading-relaxed">
            <p>
              The European Commission provides a platform for online dispute resolution (ODR):
              <a
                href="https://ec.europa.eu/consumers/odr/"
                target="_blank"
                rel="noopener noreferrer"
                class="text-white/80 underline underline-offset-4 hover:text-white transition-colors"
              >https://ec.europa.eu/consumers/odr/</a>.
            </p>
            <p class="mt-2">Our email address can be found above in the legal notice.</p>
          </div>
        </section>

        <section class="mb-10">
          <h2 class="font-mono font-medium text-lg mb-3 text-white/80">Consumer Dispute Resolution</h2>
          <div class="text-white/60 leading-relaxed">
            <p>
              We are not willing or obliged to participate in dispute resolution proceedings
              before a consumer arbitration board.
            </p>
          </div>
        </section>
      </article>
    </div>
  </main>
</template>

<script setup lang="ts">
useHead({
  title: 'Legal Notice – Bennet Gallein IT Solutions',
})
</script>
