<script setup lang="ts">
  import { useSEO } from '../composables/useSEO';
  import { useStructuredData } from '../composables/useStructuredData';

  const { addBreadcrumbSchema } = useStructuredData();

  // Set SEO synchronously
  useSEO({
    title: 'Privacy Policy - Your Data Protection',
    description: 'Read our privacy policy. Spritesheet Generator is a client-side tool that does not collect personal data or upload your images to our servers.',
    url: '/privacy-policy',
    type: 'website',
    keywords: 'privacy policy, data protection, client-side processing',
  });

  addBreadcrumbSchema([
    { name: 'Home', url: '/' },
    { name: 'Privacy Policy', url: '/privacy-policy' },
  ]);
</script>

<template>
  <div class="w-full">
    <div class="bg-white/80 dark:bg-gray-900/80 backdrop-blur-md rounded-3xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 p-8 sm:p-12">
      <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-6">Privacy Policy</h1>
      <div class="space-y-6">
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-8">Last updated: November 26, 2025</p>

        <div class="space-y-3">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">1. Introduction</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">We respect your privacy. This Spritesheet Generator is a client-side tool, meaning your images are processed directly in your browser and are not uploaded to our servers.</p>
        </div>

        <div class="space-y-3">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">2. Data collection</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">We do not collect any personal data or uploaded images. All processing happens locally on your device.</p>
        </div>

        <div class="space-y-3">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">3. Local storage</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">We use your browser's Local Storage to save your preferences (such as dark mode and grid settings) to improve your experience.</p>
        </div>

        <div class="space-y-3">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">4. Third-Party services</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">We do not use third-party services for analytics.</p>
        </div>

        <div class="space-y-3">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">5. Contact</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">If you have any questions about this Privacy Policy, please contact us via our Discord server.</p>
        </div>
      </div>
    </div>
  </div>
</template>
