<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. Участником Клуба может стать любой желающий, достигший 18 лет и согласившийся с настоящими Правилами.</p>
        </section>

        <section class="document-section">
          <h2>2. Членство в Клубе</h2>
          <p>2.1. Для вступления в Клуб необходимо:</p>
          <ul>
            <li>Заполнить регистрационную форму на сайте</li>
            <li>Ознакомиться и принять настоящие Правила</li>
            <li>Оплатить членский взнос (при наличии)</li>
          </ul>
          
          <p>2.2. Участники Клуба имеют право:</p>
          <ul>
            <li>Участвовать в регулярных тренировках Клуба</li>
            <li>Получать консультации тренеров</li>
            <li>Участвовать в клубных мероприятиях и забегах</li>
            <li>Получать скидки от партнеров Клуба</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>
          <p>5.2. Клуб не несет ответственности за травмы, полученные в результате несоблюдения техники безопасности.</p>
        </section>

        <section class="document-section">
          <h2>6. Конфиденциальность</h2>
          <p>6.1. Клуб обязуется не передавать персональные данные участников третьим лицам.</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: 'TermsOfService',
  data() {
    return {
      lastUpdated: '10 октября 2024 года'
    }
  },
  methods: {
    downloadPDF() {
      // Временная реализация - можно заменить на реальный PDF
      const link = document.createElement('a')
      link.href = '/documents/terms-of-service.pdf'
      link.download = 'pravila-begovogo-kluba.pdf'
      link.click()
    }
  }
}
</script>

<style scoped>
.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>