<template>
  <div class="min-h-screen bg-background flex flex-col">
    <Header />
    <main class="flex-grow pt-24 pb-20">
    <div class="container mx-auto px-4 py-12">
      <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="mb-12">
          <h1 class="text-4xl md:text-5xl font-display font-bold text-foreground mb-4">
            {{ t("footer.terms") }}
          </h1>
          <p class="text-lg text-foreground/60">
            {{ t("terms.subtitle") }}
          </p>
        </div>

        <!-- Content -->
        <div class="space-y-12">
          <!-- Introduction -->
          <section>
            <h2 class="text-2xl font-display font-bold text-foreground mb-6">
              {{ t("terms.introduction.title") }}
            </h2>
            <div class="prose prose-lg max-w-none text-foreground/70">
              <p>
                {{ t("terms.introduction.content") }}
              </p>
            </div>
          </section>

          <!-- Services -->
          <section>
            <h2 class="text-2xl font-display font-bold text-foreground mb-6">
              {{ t("terms.services.title") }}
            </h2>
            <div class="space-y-4 text-foreground/70">
              <p>
                {{ t("terms.services.description") }}
              </p>
              <ul class="space-y-2 pl-5">
                <li class="list-disc">
                  {{ t("terms.services.point1") }}
                </li>
                <li class="list-disc">
                  {{ t("terms.services.point2") }}
                </li>
                <li class="list-disc">
                  {{ t("terms.services.point3") }}
                </li>
                <li class="list-disc">
                  {{ t("terms.services.point4") }}
                </li>
              </ul>
            </div>
          </section>

          <!-- User Responsibilities -->
          <section>
            <h2 class="text-2xl font-display font-bold text-foreground mb-6">
              {{ t("terms.userResponsibilities.title") }}
            </h2>
            <div class="space-y-4 text-foreground/70">
              <p>
                {{ t("terms.userResponsibilities.description") }}
              </p>
              <div class="bg-gray-50 rounded-xl p-6">
                <h3 class="font-display font-bold text-foreground mb-3">
                  {{ t("terms.userResponsibilities.prohibited.title") }}
                </h3>
                <ul class="space-y-2">
                  <li class="flex items-start gap-2">
                    <span class="text-primary font-bold">•</span>
                    {{ t("terms.userResponsibilities.prohibited.point1") }}
                  </li>
                  <li class="flex items-start gap-2">
                    <span class="text-primary font-bold">•</span>
                    {{ t("terms.userResponsibilities.prohibited.point2") }}
                  </li>
                  <li class="flex items-start gap-2">
                    <span class="text-primary font-bold">•</span>
                    {{ t("terms.userResponsibilities.prohibited.point3") }}
                  </li>
                  <li class="flex items-start gap-2">
                    <span class="text-primary font-bold">•</span>
                    {{ t("terms.userResponsibilities.prohibited.point4") }}
                  </li>
                  <li class="flex items-start gap-2">
                    <span class="text-primary font-bold">•</span>
                    {{ t("terms.userResponsibilities.prohibited.point5") }}
                  </li>
                </ul>
              </div>
            </div>
          </section>

          <!-- Intellectual Property -->
          <section>
            <h2 class="text-2xl font-display font-bold text-foreground mb-6">
              {{ t("terms.intellectualProperty.title") }}
            </h2>
            <div class="space-y-4 text-foreground/70">
              <p>
                {{ t("terms.intellectualProperty.description") }}
              </p>
              <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-gray-50 rounded-xl p-6">
                  <h3 class="font-display font-bold text-foreground mb-3">
                    {{ t("terms.intellectualProperty.userRights.title") }}
                  </h3>
                  <p>
                    {{ t("terms.intellectualProperty.userRights.content") }}
                  </p>
                </div>
                <div class="bg-gray-50 rounded-xl p-6">
                  <h3 class="font-display font-bold text-foreground mb-3">
                    {{ t("terms.intellectualProperty.companyRights.title") }}
                  </h3>
                  <p>
                    {{ t("terms.intellectualProperty.companyRights.content") }}
                  </p>
                </div>
              </div>
            </div>
          </section>

          <!-- Payment & Pricing -->
          <section>
            <h2 class="text-2xl font-display font-bold text-foreground mb-6">
              {{ t("terms.payment.title") }}
            </h2>
            <div class="space-y-4 text-foreground/70">
              <p>
                {{ t("terms.payment.description") }}
              </p>
              <div class="bg-gray-50 rounded-xl p-6">
                <h3 class="font-display font-bold text-foreground mb-3">
                  {{ t("terms.payment.trustModel.title") }}
                </h3>
                <ul class="space-y-2">
                  <li class="flex items-start gap-2">
                    <span class="text-primary font-bold">•</span>
                    {{ t("terms.payment.trustModel.point1") }}
                  </li>
                  <li class="flex items-start gap-2">
                    <span class="text-primary font-bold">•</span>
                    {{ t("terms.payment.trustModel.point2") }}
                  </li>
                  <li class="flex items-start gap-2">
                    <span class="text-primary font-bold">•</span>
                    {{ t("terms.payment.trustModel.point3") }}
                  </li>
                  <li class="flex items-start gap-2">
                    <span class="text-primary font-bold">•</span>
                    {{ t("terms.payment.trustModel.point4") }}
                  </li>
                </ul>
              </div>
            </div>
          </section>

          <!-- Shipping & Delivery -->
          <section>
            <h2 class="text-2xl font-display font-bold text-foreground mb-6">
              {{ t("terms.shipping.title") }}
            </h2>
            <div class="space-y-4 text-foreground/70">
              <p>
                {{ t("terms.shipping.description") }}
              </p>
              <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-gray-50 rounded-xl p-6">
                  <h3 class="font-display font-bold text-foreground mb-3">
                    {{ t("terms.shipping.delivery.title") }}
                  </h3>
                  <p>
                    {{ t("terms.shipping.delivery.content") }}
                  </p>
                </div>
                <div class="bg-gray-50 rounded-xl p-6">
                  <h3 class="font-display font-bold text-foreground mb-3">
                    {{ t("terms.shipping.returns.title") }}
                  </h3>
                  <p>
                    {{ t("terms.shipping.returns.content") }}
                  </p>
                </div>
              </div>
            </div>
          </section>

          <!-- Liability -->
          <section>
            <h2 class="text-2xl font-display font-bold text-foreground mb-6">
              {{ t("terms.liability.title") }}
            </h2>
            <div class="space-y-4 text-foreground/70">
              <p>
                {{ t("terms.liability.description") }}
              </p>
              <div class="bg-gray-50 rounded-xl p-6">
                <h3 class="font-display font-bold text-foreground mb-3">
                  {{ t("terms.liability.limitations.title") }}
                </h3>
                <ul class="space-y-2">
                  <li class="flex items-start gap-2">
                    <span class="text-primary font-bold">•</span>
                    {{ t("terms.liability.limitations.point1") }}
                  </li>
                  <li class="flex items-start gap-2">
                    <span class="text-primary font-bold">•</span>
                    {{ t("terms.liability.limitations.point2") }}
                  </li>
                  <li class="flex items-start gap-2">
                    <span class="text-primary font-bold">•</span>
                    {{ t("terms.liability.limitations.point3") }}
                  </li>
                  <li class="flex items-start gap-2">
                    <span class="text-primary font-bold">•</span>
                    {{ t("terms.liability.limitations.point4") }}
                  </li>
                </ul>
              </div>
            </div>
          </section>

          <!-- Changes to Terms -->
          <section>
            <h2 class="text-2xl font-display font-bold text-foreground mb-6">
              {{ t("terms.changes.title") }}
            </h2>
            <div class="prose prose-lg max-w-none text-foreground/70">
              <p>
                {{ t("terms.changes.content") }}
              </p>
            </div>
          </section>

          <!-- Contact -->
          <section class="bg-primary/5 rounded-2xl p-8 text-center">
            <h2 class="text-2xl font-display font-bold text-foreground mb-4">
              {{ t("terms.contact.title") }}
            </h2>
            <p class="text-foreground/70 mb-6 max-w-2xl mx-auto">
              {{ t("terms.contact.description") }}
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
              <router-link 
                to="/contact"
                class="inline-flex items-center justify-center px-6 py-3 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-colors"
              >
                {{ t("terms.contact.button") }}
              </router-link>
              <a 
                href="mailto:legal@radionica3d.me"
                class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-foreground font-bold rounded-lg hover:bg-gray-50 transition-colors"
              >
                {{ t("terms.contact.email") }}
              </a>
            </div>
          </section>
        </div>
      </div>
    </div>
  </main>
  <Footer />
</div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { useHead } from "@unhead/vue";
import { computed } from "vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";

const { t } = useI18n();

useHead({
  title: computed(() => t('footer.terms')),
  meta: [
    { name: 'description', content: computed(() => t('terms.subtitle')) }
  ]
});
</script>