<template>
  <div class="min-h-screen bg-background flex flex-col">
    <Header />
    <main class="flex-grow pt-24 pb-20 selection:bg-primary/10">
    <div class="container mx-auto px-6 max-w-4xl">
      <!-- Header Section -->
      <div class="relative mb-10 sm:mb-20 animate-in fade-in slide-in-from-bottom-4 duration-1000">
        <div class="absolute -left-12 top-0 w-24 h-24 bg-primary/5 rounded-full blur-3xl -z-10 animate-pulse"></div>
        <h1 class="font-display text-5xl md:text-7xl font-extrabold tracking-tight text-foreground mb-8 text-balance">
          {{ t("privacy.title") }}
        </h1>
        <div class="grid md:grid-cols-2 gap-12 items-start">
          <div class="space-y-6">
            <p class="text-xl text-foreground/70 font-medium leading-relaxed whitespace-pre-line">
              {{ t("privacy.subtitle") }}
            </p>
            <p class="text-lg text-foreground/50 leading-relaxed italic border-l-2 border-primary/20 pl-6 whitespace-pre-line">
              {{ t("privacy.intro") }}
            </p>
          </div>
          <div class="bg-white p-8 rounded-3xl border border-black/[0.04] shadow-sm hover:shadow-md transition-shadow">
            <h3 class="text-xs font-bold uppercase tracking-widest text-primary mb-2">{{ t("privacy.contactTitle") }}</h3>
            <p class="text-sm text-foreground/60 mb-6 font-medium">{{ t("privacy.contactDesc") }}</p>
            <a href="mailto:Hello@radionica3d.me" class="inline-flex items-center gap-2 px-6 py-3 bg-foreground text-background rounded-full text-sm font-bold hover:bg-primary transition-colors group">
              <Mail class="w-4 h-4" />
              Hello@radionica3d.me
              <ArrowUpRight class="w-4 h-4 opacity-0 -translate-y-1 translate-x-1 group-hover:opacity-100 group-hover:translate-y-0 group-hover:translate-x-0 transition-all" />
            </a>
          </div>
        </div>
      </div>

      <!-- Policy Sections -->
      <div class="grid gap-12 sm:gap-20">
        <section 
          v-for="(section, index) in privacySections" 
          :key="section" 
          class="group relative animate-in fade-in slide-in-from-bottom-8 duration-1000"
          :style="{ animationDelay: (index * 100) + 'ms' }"
        >
          <div class="flex flex-col md:flex-row gap-8 md:gap-16">
            <div class="md:w-16 shrink-0">
              <span class="sticky top-40 block text-5xl md:text-7xl font-black text-black/[0.03] group-hover:text-primary/[0.08] transition-colors tabular-nums">
                {{ (index + 1).toString().padStart(2, '0') }}
              </span>
            </div>
            <div class="flex-1 space-y-6">
              <h2 class="font-display text-2xl md:text-3xl font-bold tracking-tight text-foreground/90 transition-colors group-hover:text-foreground">
                {{ t(`privacy.sections.${section}.title`).replace(/^\d+\.\s*/, '') }}
              </h2>
              <div 
                class="text-foreground/70 leading-relaxed font-medium text-lg whitespace-pre-line max-w-none"
                v-html="formatContent(t(`privacy.sections.${section}.content`))"
              ></div>
            </div>
          </div>
        </section>
      </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 { Mail, ArrowUpRight } from "lucide-vue-next";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";

const { t } = useI18n();

useHead({
  title: computed(() => t('privacy.title')),
  meta: [
    { name: 'description', content: computed(() => t('privacy.subtitle')) }
  ]
});

const privacySections = [
  "01_data", "02_usage", "03_basis", "04_uploads", "05_security", 
  "06_sharing", "07_rights", "08_cookies", "09_international", 
  "10_updates", "11_contact"
];

const formatContent = (content: string) => {
  // Add styling to bullet points and their labels
  return content
    .replace(/(•\s)([^:]+:)/g, '<span class="text-primary mr-2">●</span><span class="font-bold text-foreground/90">$2</span>')
    .replace(/(•\s)/g, '<span class="text-primary mr-2">●</span>');
};
</script>

<style scoped>
.font-display {
  font-family: inherit;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-in-from-bottom {
  from { transform: translateY(1rem); }
  to { transform: translateY(0); }
}

.animate-in {
  animation: fade-in 1s ease-out forwards;
}

.slide-in-from-bottom-4 {
  animation: fade-in 1s ease-out forwards, slide-in-from-bottom 1s ease-out forwards;
}

.slide-in-from-bottom-8 {
  animation: fade-in 1s ease-out forwards, slide-in-from-bottom 1s ease-out forwards;
}
</style>
