<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

<template>
  <div
    class="min-h-screen bg-gradient-to-br from-primary-50 via-white to-primary-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 py-12 px-4 sm:px-6 lg:px-8"
  >
    <div class="max-w-4xl mx-auto">
      <!-- Header -->
      <div class="text-center mb-12">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary-500 text-white mb-4 shadow-lg shadow-primary-500/30">
          <UIcon name="i-heroicons-shield-check" class="w-8 h-8" />
        </div>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Privacy Policy</h1>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Last updated: March 2026</p>
      </div>

      <!-- Content Card -->
      <UCard class="shadow-xl shadow-gray-200/50 dark:shadow-gray-900/50">
        <div class="prose prose-sm sm:prose dark:prose-invert max-w-none space-y-6">
          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">1. Introduction</h2>
            <p class="text-gray-600 dark:text-gray-400">
              At TimeTracker, we take your privacy seriously. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when
              you use our application.
            </p>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">2. Information We Collect</h2>
            <p class="text-gray-600 dark:text-gray-400">We may collect personal information that you voluntarily provide to us when you:</p>
            <ul class="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400 ml-4">
              <li>Register for an account</li>
              <li>Use our time tracking features</li>
              <li>Create or manage projects</li>
              <li>Generate reports</li>
              <li>Contact our support team</li>
            </ul>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">3. How We Use Your Information</h2>
            <p class="text-gray-600 dark:text-gray-400">We use the information we collect to:</p>
            <ul class="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400 ml-4">
              <li>Provide and maintain our services</li>
              <li>Track your time and manage your projects</li>
              <li>Improve our services and user experience</li>
              <li>Communicate with you about updates and support</li>
              <li>Comply with legal obligations</li>
            </ul>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">4. Data Storage and Security</h2>
            <p class="text-gray-600 dark:text-gray-400">
              Your data is stored securely using industry-standard encryption. We implement appropriate technical and organizational measures to protect your
              personal information against unauthorized access, alteration, disclosure, or destruction.
            </p>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">5. Data Sharing</h2>
            <p class="text-gray-600 dark:text-gray-400">
              We do not sell, trade, or otherwise transfer your personal information to outside parties. We may share information with:
            </p>
            <ul class="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400 ml-4">
              <li>Service providers who assist in our operations</li>
              <li>Legal authorities when required by law</li>
              <li>Business partners with your consent</li>
            </ul>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">6. Your Rights</h2>
            <p class="text-gray-600 dark:text-gray-400">You have the right to:</p>
            <ul class="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400 ml-4">
              <li>Access your personal information</li>
              <li>Correct inaccurate data</li>
              <li>Request deletion of your data</li>
              <li>Export your data in a portable format</li>
              <li>Opt-out of marketing communications</li>
            </ul>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">7. Cookies and Tracking Technologies</h2>
            <p class="text-gray-600 dark:text-gray-400">
              We use cookies and similar tracking technologies to enhance your experience. You can control cookies through your browser settings.
            </p>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">8. Children's Privacy</h2>
            <p class="text-gray-600 dark:text-gray-400">
              Our service is not intended for children under 13. We do not knowingly collect personal information from children under 13.
            </p>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">9. Changes to This Policy</h2>
            <p class="text-gray-600 dark:text-gray-400">
              We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new policy on this page and updating the
              "Last updated" date.
            </p>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">10. Contact Us</h2>
            <p class="text-gray-600 dark:text-gray-400">If you have any questions about this Privacy Policy, please contact us at privacy@timetracker.com.</p>
          </section>
        </div>

        <template #footer>
          <div class="flex justify-center"></div>
        </template>
      </UCard>
    </div>
  </div>
</template>
