<template>
  <div class="page">
    <div class="document-container">
      <div class="document-header">
        <h1>🔒 Политика конфиденциальности</h1>
        <div class="document-meta">
          <p>Дата последнего обновления: {{ lastUpdated }}</p>
          <button class="btn btn-secondary" @click="downloadPDF">
            📥 Скачать PDF
          </button>
        </div>
      </div>

      <div class="document-content">
        <section class="document-section">
          <h2>1. Общие положения</h2>
          <p>1.1. Настоящая Политика конфиденциальности регулирует порядок сбора, хранения и использования персональных
            данных пользователей бегового клуба "Бегущий Башкир".</p>
          <p>1.2. Используя наш сайт и услуги, вы соглашаетесь с условиями настоящей Политики.</p>
        </section>

        <section class="document-section">
          <h2>2. Собираемая информация</h2>
          <p>2.1. Мы собираем следующую информацию:</p>
          <ul>
            <li><strong>Персональные данные:</strong> имя, фамилия, email, телефон</li>
            <li><strong>Данные для тренировок:</strong> уровень подготовки, цели, спортивные результаты</li>
            <li><strong>Технические данные:</strong> IP-адрес, данные cookies, информация о браузере</li>
          </ul>
        </section>

        <section class="document-section">
          <h2>3. Цели использования данных</h2>
          <p>3.1. Собранные данные используются для:</p>
          <ul>
            <li>Регистрации и идентификации пользователей</li>
            <li>Предоставления персонализированных тренировочных программ</li>
            <li>Организации мероприятий и забегов</li>
            <li>Отправки информационных материалов (при согласии)</li>
            <li>Улучшения качества наших услуг</li>
          </ul>
        </section>

        <section class="document-section">
          <h2>4. Защита данных</h2>
          <p>4.1. Мы принимаем все необходимые меры для защиты ваших персональных данных от несанкционированного
            доступа.</p>
          <p>4.2. Данные хранятся на защищенных серверах и передаются в зашифрованном виде.</p>
        </section>

        <section class="document-section">
          <h2>5. Передача данных третьим лицам</h2>
          <p>5.1. Мы не передаем ваши персональные данные третьим лицам, за исключением:</p>
          <ul>
            <li>Случаев, предусмотренных законодательством РФ</li>
            <li>Партнеров по организации мероприятий (только с вашего согласия)</li>
            <li>Сервисных провайдеров, обеспечивающих работу нашего сайта</li>
          </ul>
        </section>

        <section class="document-section">
          <h2>6. Cookies и аналитика</h2>
          <p>6.1. Мы используем cookies для улучшения работы сайта и сбора аналитической информации.</p>
          <p>6.2. Вы можете отключить cookies в настройках браузера.</p>
        </section>

        <section class="document-section">
          <h2>7. Ваши права</h2>
          <p>7.1. Вы имеете право:</p>
          <ul>
            <li>На доступ к вашим персональным данным</li>
            <li>На исправление неточных данных</li>
            <li>На удаление ваших данных</li>
            <li>На отзыв согласия на обработку данных</li>
          </ul>
        </section>

        <section class="document-section">
          <h2>8. Контакты</h2>
          <p>По вопросам, связанным с обработкой персональных данных, обращайтесь:</p>
          <p>📧 Email: privacy@begushiybashkir.ru<br>
            📞 Телефон: +7 (XXX) XXX-XX-XX</p>
        </section>
      </div>

      <div class="document-actions">
        <button class="btn btn-primary" @click="$router.back()">
          ← Назад к регистрации
        </button>
        <button class="btn btn-secondary" @click="downloadPDF">
          📥 Скачать политику
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PrivacyPolicy',
  mounted() {
    window.addEventListener('scroll', this.handleFirstInteraction, { passive: true, once: true })
    window.addEventListener('click', this.handleFirstInteraction, { once: true })
    window.addEventListener('touchstart', this.handleFirstInteraction, { once: true })
    this.autoShowTimeout = setTimeout(() => {
      if (!this.hasInteracted) {
        this.showContent()
      }
    }, 3000)
  },
  beforeUnmount() {
    // Убираем обработчики при размонтировании
    window.removeEventListener('scroll', this.handleFirstInteraction)
    window.removeEventListener('click', this.handleFirstInteraction)
    window.removeEventListener('touchstart', this.handleFirstInteraction)
    clearTimeout(this.autoShowTimeout)
  },
  data() {
    return {
      lastUpdated: '10 октября 2024 года'
    }
  },
  methods: {

    filteredNews() {
      let filtered = this.news
      if (this.activeFilter !== 'all') {
        filtered = this.news.filter(item => item.category === this.activeFilter)
      }
      return filtered.slice(0, this.visibleNews)
    },

    // Проверка валидности формы
    isFormValid() {
      return this.newsForm.title.length >= 5 &&
        this.newsForm.title.length <= 255 &&
        this.newsForm.excerpt.length >= 10 &&
        this.newsForm.excerpt.length <= 500 &&
        this.newsForm.content.length >= 50 &&
        this.newsForm.category !== ''
    },
    downloadPDF() {
      const link = document.createElement('a')
      link.href = '/documents/privacy-policy.pdf'
      link.download = 'politika-konfidencialnosti.pdf'
      link.click()
    }
  }
}
</script>

<style scoped>
/* Стили такие же как в TermsOfService.vue */
.document-container {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.document-header {
  background: linear-gradient(135deg, #2e8b57, #3da56a);
  color: white;
  padding: 2rem;
  text-align: center;
}

.document-header h1 {
  margin: 0 0 1rem 0;
  font-size: 1.8rem;
}

.document-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.document-content {
  padding: 2rem;
  line-height: 1.6;
}

.document-section {
  margin-bottom: 2rem;
}

.document-section h2 {
  color: #2e8b57;
  border-bottom: 2px solid #e8f5e8;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.document-section ul {
  padding-left: 1.5rem;
}

.document-section li {
  margin-bottom: 0.5rem;
}

.document-actions {
  padding: 1.5rem 2rem;
  background: #f8fff8;
  border-top: 1px solid #e8f5e8;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

@media (max-width: 768px) {
  .document-meta {
    flex-direction: column;
    text-align: center;
  }

  .document-content {
    padding: 1.5rem;
  }

  .document-actions {
    flex-direction: column;
  }
}
</style>