<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-document-text" class="w-8 h-8" />
        </div>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Terms and Conditions</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. Acceptance of Terms</h2>
            <p class="text-gray-600 dark:text-gray-400">
              By accessing and using TimeTracker, you accept and agree to be bound by the terms and provision of this agreement.
            </p>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">2. Description of Service</h2>
            <p class="text-gray-600 dark:text-gray-400">
              TimeTracker is a time tracking application that allows users to track their working hours, manage projects, and generate reports.
            </p>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">3. User Responsibilities</h2>
            <p class="text-gray-600 dark:text-gray-400">You agree to:</p>
            <ul class="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400 ml-4">
              <li>Provide accurate and complete information</li>
              <li>Maintain the security of your account</li>
              <li>Not share your login credentials with others</li>
              <li>Use the service in compliance with applicable laws</li>
            </ul>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">4. Privacy and Data Protection</h2>
            <p class="text-gray-600 dark:text-gray-400">
              We are committed to protecting your privacy. Your personal data will be processed in accordance with our Privacy Policy and applicable data
              protection laws.
            </p>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">5. Intellectual Property</h2>
            <p class="text-gray-600 dark:text-gray-400">
              The TimeTracker service and all its contents, including but not limited to text, graphics, logos, and software, are the property of TimeTracker
              and are protected by intellectual property laws.
            </p>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">6. Limitation of Liability</h2>
            <p class="text-gray-600 dark:text-gray-400">
              TimeTracker shall not be liable for any indirect, incidental, special, consequential, or punitive damages resulting from your use of or inability
              to use the service.
            </p>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">7. Termination</h2>
            <p class="text-gray-600 dark:text-gray-400">
              We reserve the right to terminate or suspend your account at any time, without prior notice, for conduct that we believe violates these Terms and
              Conditions or is harmful to other users or the service.
            </p>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">8. Changes to Terms</h2>
            <p class="text-gray-600 dark:text-gray-400">
              We reserve the right to modify these Terms and Conditions at any time. Your continued use of TimeTracker after any changes indicates your
              acceptance of the new terms.
            </p>
          </section>

          <section>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">9. Contact Information</h2>
            <p class="text-gray-600 dark:text-gray-400">
              If you have any questions about these Terms and Conditions, please contact us at support@timetracker.com.
            </p>
          </section>
        </div>

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