<template>
  <div class="training-page">
    <!-- Герой-секция -->
    <section class="hero-section">
      <div class="container">
        <div class="hero-content">
          <h1 class="hero-title">📅 Тренировки с нами</h1>
          <p class="hero-subtitle">Профессиональные программы, индивидуальный подход и дружеская атмосфера</p>
          <div class="hero-features">
            <div class="feature">✅ Бесплатная первая тренировка</div>
            <div class="feature">✅ Тренер - мастер спорта</div>
            <div class="feature">✅ Группы для любого уровня</div>
          </div>
          <div class="hero-actions">
            <button class="btn btn-primary" @click="scrollToSchedule">
              🏃 Начать тренироваться
            </button>
            <router-link to="/register" class="btn btn-outline">
              👥 Вступить в клуб
            </router-link>
          </div>
        </div>
      </div>
    </section>

    <!-- Расписание -->
    <section class="schedule-section" id="schedule" ref="scheduleSection">
      <div class="container">
        <h2 class="section-title">📅 Расписание тренировок</h2>
        <p class="section-subtitle">Регулярные занятия в лучших локациях Уфы</p>

        <div class="schedule-container">
          <div class="schedule-grid">
            <div v-for="day in schedule" :key="day.name" class="schedule-day" :class="{
              'training-day': day.time !== '--:--',
              'rest-day': day.time === '--:--',
              'today': isToday(day.name)
            }">
              <div class="day-header">
                <h4>{{ day.name }}</h4>
                <span class="day-badge" v-if="isToday(day.name)">Сегодня</span>
              </div>
              <div class="day-time">
                <strong>{{ day.time }}</strong>
              </div>
              <div class="day-activity">
                {{ day.activity }}
              </div>
              <div class="day-location" v-if="day.location">
                📍 {{ day.location }}
              </div>
              <div class="day-features" v-if="day.features">
                <span v-for="feature in day.features" :key="feature" class="feature-tag">
                  {{ feature }}
                </span>
              </div>
              <button v-if="day.time !== '--:--'" class="btn-day" @click="openTrainingModal(day)">
                🏃 Записаться
              </button>
            </div>
          </div>
        </div>

        <!-- Статистика тренировок -->
        <div class="stats-section">
          <h3>📊 На этой неделе</h3>
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-icon">⏱️</div>
              <div class="stat-content">
                <div class="stat-number">3</div>
                <div class="stat-label">Групповые тренировки</div>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-icon">🏃‍♂️</div>
              <div class="stat-content">
                <div class="stat-number">5+</div>
                <div class="stat-label">Часов бега</div>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-icon">👥</div>
              <div class="stat-content">
                <div class="stat-number">20+</div>
                <div class="stat-label">Участников на тренировках</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Типы тренировок -->
    <section class="workouts-section">
      <div class="container">
        <h2 class="section-title">💪 Виды тренировок</h2>
        <div class="workouts-grid">
          <div class="workout-card">
            <div class="workout-icon">🎯</div>
            <h3>Техника бега + ОФП</h3>
            <p>Работа над правильной техникой и общефизической подготовкой</p>
            <ul class="workout-features">
              <li>✅ Коррекция техники бега</li>
              <li>✅ Упражнения на развитие силы</li>
              <li>✅ Профилактика травм</li>
            </ul>
          </div>
          <div class="workout-card">
            <div class="workout-icon">⚡</div>
            <h3>Техника бега + СБУ</h3>
            <p>Специальные беговые упражнения для развития скорости</p>
            <ul class="workout-features">
              <li>✅ СБУ различной сложности</li>
              <li>✅ Работа над каденсом</li>
              <li>✅ Улучшение экономичности бега</li>
            </ul>
          </div>
          <div class="workout-card">
            <div class="workout-icon">🛣️</div>
            <h3>Длительный кросс</h3>
            <p>Развитие выносливости на живописных маршрутах Уфы</p>
            <ul class="workout-features">
              <li>✅ Дистанции 10-20 км</li>
              <li>✅ Работа в аэробной зоне</li>
              <li>✅ Подготовка к марафонам</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- Тренировочные локации -->
    <section class="locations-section">
      <div class="container">
        <h2 class="section-title">📍 Наши локации</h2>
        <div class="locations-grid">
          <div class="location-card">
            <div class="location-image">
              <div class="image-placeholder">
                <img :src="getImageUrl('locations/riverSide.jpeg')" alt="Набережная Уфа Монумент">
              </div>
            </div>
            <div class="location-info">
              <h3>Набережная</h3>
              <p class="location-address">Уфа, ост. Монумент дружбы</p>
              <div class="location-features">
                <span class="feature">📏 Круг 2.5 км</span>
                <span class="feature">💡 Освещение</span>
                <span class="feature">🌳 Природа</span>
              </div>
              <p class="location-desc">Идеальное место для технических и длительных тренировок</p>
            </div>
          </div>
          <div class="location-card">
            <div class="location-image">
              <div class="image-placeholder">
                <img :src="getImageUrl('locations/dinamo.jpg')" alt="Стадион Динамо">
              </div>
            </div>
            <div class="location-info">
              <h3>Стадион "Динамо"</h3>
              <p class="location-address">ул. Революционная, Уфа</p>
              <div class="location-features">
                <span class="feature">🎯 Профессиональное покрытие</span>
                <span class="feature">⚡ СБУ и интервалы</span>
                <span class="feature">📊 Точный замер дистанции</span>
              </div>
              <p class="location-desc">Лучшее место для работы над скоростью и техникой</p>
            </div>
          </div>
          <div class="location-card">
            <div class="location-image">
              <div class="image-placeholder">
                <img :src="getImageUrl('locations/1mayPark.webp')" alt="Парк Первомайский ост. ДК УМПО">
              </div>
            </div>
            <div class="location-info">
              <h3>Парк первомайский</h3>
              <p class="location-address">ДК УМПО Калининский р-н</p>
              <div class="location-features">
                <span class="feature">📏 Круг 2.5 км</span>
                <span class="feature">💡 Освещение</span>
                <span class="feature">🌳 Парк</span>
              </div>
              <p class="location-desc">Идеальное место для групповых тренировок и спецбеговых упраждений</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Призыв к действию -->
    <section class="cta-section">
      <div class="container">
        <div class="cta-content">
          <h2>Готовы начать бегать с нами?</h2>
          <p>Присоединяйтесь к 150+ участникам, которые уже улучшили свои результаты</p>
          <div class="cta-features">
            <div class="cta-feature">
              <div class="feature-icon">🎯</div>
              <div class="feature-text">
                <strong>Индивидуальный подход</strong>
                <span>Программа под ваш уровень</span>
              </div>
            </div>
            <div class="cta-feature">
              <div class="feature-icon">👨‍🏫</div>
              <div class="feature-text">
                <strong>Профессиональный тренер</strong>
                <span>Мастер спорта с опытом 10+ лет</span>
              </div>
            </div>
            <div class="cta-feature">
              <div class="feature-icon">🤝</div>
              <div class="feature-text">
                <strong>Поддержка сообщества</strong>
                <span>Мотивация и новые знакомства</span>
              </div>
            </div>
          </div>
          <div class="cta-actions">
            <router-link to="/register" class="btn btn-primary btn-large">
              🏃 Начать бесплатно
            </router-link>
            <a href="tel:+79273093095" class="btn btn-secondary">
              📞 Позвонить тренеру
            </a>
          </div>
          <div class="cta-note">
            <p>📅 Первая тренировка бесплатно • 💰 Гибкая система оплаты • 👥 Любой уровень подготовки</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Модальное окно записи -->
    <div class="modal-overlay" :class="{ 'active': showModal }" v-if="showModal">
      <div class="modal-content">
        <button class="modal-close" @click="closeModal">×</button>
        <h3>Запись на тренировку</h3>
        <div class="modal-training-info">
          <h4>{{ selectedTraining.name }}</h4>
          <p><strong>Время:</strong> {{ selectedTraining.time }}</p>
          <p><strong>Тип:</strong> {{ selectedTraining.activity }}</p>
          <p><strong>Локация:</strong> {{ selectedTraining.location }}</p>
        </div>
        <form class="signup-form" @submit.prevent="handleSignup">
          <div class="form-group">
            <label for="name">Ваше имя *</label>
            <input id="name" v-model="signupForm.name" type="text" required placeholder="Введите ваше имя">
          </div>
          <div class="form-group">
            <label for="phone">Телефон *</label>
            <input id="phone" v-model="signupForm.phone" type="tel" required placeholder="+7 (999) 123-45-67">
          </div>
          <div class="form-group">
            <label for="level">Уровень подготовки</label>
            <select id="level" v-model="signupForm.level">
              <option value="">Выберите уровень</option>
              <option value="beginner">Начинающий</option>
              <option value="intermediate">Любитель</option>
              <option value="advanced">Опытный</option>
            </select>
          </div>
          <button type="submit" class="btn btn-primary btn-full">
            📝 Записаться на тренировку
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Training', data() {
    return {
      showModal: false,
      selectedTraining: {},
      signupForm: {
        name: '',
        phone: '',
        level: ''
      },
      schedule: [
        {
          name: 'Понедельник',
          time: '19:30',
          activity: 'Клубная тренировка',
          location: 'Набережная',
          features: ['Групповая тренировка', 'Техника бега']
        },
        {
          name: 'Вторник',
          time: '--:--',
          activity: 'Индивидуальный кросс',
          location: 'Свободное',
          features: ['Самостоятельно', '7-12 км']
        },
        {
          name: 'Среда',
          time: '19:30',
          activity: 'Клубная тренировка',
          location: 'Набережная',
          features: ['Групповая тренировка', 'СБУ и интервалы']
        },
        {
          name: 'Четверг',
          time: '--:--',
          activity: 'Индивидуальный кросс',
          location: 'Свободное',
          features: ['Самостоятельно', '7-12 км']
        },
        {
          name: 'Пятница',
          time: '--:--',
          activity: 'Восстановление',
          location: 'Свободное',
          features: ['Самостоятельно', 'Йога/Растяжка']
        },
        {
          name: 'Суббота',
          time: '9:00',
          activity: 'Клубная тренировка',
          location: 'Парк Лесоводов',
          features: ['Групповая тренировка', 'Развитие выносливости']
        },
        {
          name: 'Воскресенье',
          time: '9:00',
          activity: 'Длительная тренировка',
          location: 'Набережная',
          features: ['Аэробная выносливость', '15-20 км']
        }
      ]
    }
  },
  computed: {
    today() {
      const days = ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота']
      return days[new Date().getDay()]
    }
  },
  methods: {
    handleFirstInteraction() {
      if (!this.hasInteracted) {
        this.hasInteracted = true
        this.showContent()
        clearTimeout(this.autoShowTimeout)
      }
    },
    showContent() {
      this.isContentVisible = true
      // Эмитим событие для показа хедера
      this.$emit('show-header')
    },
    getImageUrl(path) {
      // В продакшене замените на правильный путь
      const baseUrl = import.meta.env.BASE_URL
      // Путь от корня public/
      console.log(`${baseUrl}images/${path}`)
      return `${baseUrl}images/${path}`
    },
    isToday(dayName) {
      return dayName === this.today
    },
    scrollToSchedule() {
      this.$refs.scheduleSection.scrollIntoView({ behavior: 'smooth' })
    },
    openTrainingModal(day) {
      this.selectedTraining = day
      this.showModal = true
      document.body.style.overflow = 'hidden'
    },
    closeModal() {
      this.showModal = false
      document.body.style.overflow = ''
      this.signupForm = { name: '', phone: '', level: '' }
    },
    handleSignup() {
      // Здесь будет логика отправки формы
      console.log('Запись на тренировку:', {
        training: this.selectedTraining,
        user: this.signupForm
      })

      // Имитация успешной записи
      alert(`Спасибо, ${this.signupForm.name}! Вы записаны на тренировку. Тренер свяжется с вами для подтверждения.`)
      this.closeModal()
    },
    handleKeydown(event) {
      if (event.key === 'Escape' && this.showModal) {
        this.closeModal()
      }
    }
  },
  mounted() {
    document.addEventListener('keydown', this.handleKeydown)
    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() {
    document.removeEventListener('keydown', this.handleKeydown)
    document.body.style.overflow = ''
    window.removeEventListener('scroll', this.handleFirstInteraction)
    window.removeEventListener('click', this.handleFirstInteraction)
    window.removeEventListener('touchstart', this.handleFirstInteraction)
    clearTimeout(this.autoShowTimeout)
  }
}
</script>

<style scoped>
.training-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
}

/* Герой-секция */
.hero-section {
  background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
  color: white;
  padding: 100px 0 80px;
  text-align: center;
}

.hero-title {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  font-weight: 800;
}

.hero-subtitle {
  font-size: 1.3rem;
  opacity: 0.9;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.feature {
  font-size: 1.1rem;
  opacity: 0.9;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Основные стили */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  color: #2e8b57;
  margin-bottom: 1rem;
  font-weight: 700;
}

.section-subtitle {
  text-align: center;
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 3rem;
}

/* Расписание */
.schedule-section {
  padding: 80px 0;
  background: white;
}

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.schedule-day {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.schedule-day:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.schedule-day.training-day {
  border-color: #2e8b57;
  background: linear-gradient(135deg, #f8fff8 0%, #f0f8f0 100%);
}

.schedule-day.rest-day {
  border-color: #e9ecef;
  background: #f8f9fa;
  opacity: 0.8;
}

.schedule-day.today {
  border-color: #ffd700;
  background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);
}

.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.day-header h4 {
  color: #2e8b57;
  margin: 0;
  font-size: 1.3rem;
}

.day-badge {
  background: #ffd700;
  color: #333;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: bold;
}

.day-time {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
}

.day-activity {
  color: #666;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.day-location {
  color: #2e8b57;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.day-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.feature-tag {
  background: rgba(46, 139, 87, 0.1);
  color: #2e8b57;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
}

.btn-day {
  width: 100%;
  padding: 12px;
  background: #2e8b57;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn-day:hover {
  background: #26734a;
  transform: translateY(-2px);
}

/* Статистика */
.stats-section {
  text-align: center;
}

.stats-section h3 {
  color: #2e8b57;
  margin-bottom: 2rem;
  font-size: 1.8rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
}

.stat-icon {
  font-size: 2.5rem;
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: #2e8b57;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: #666;
  font-size: 0.9rem;
}

/* Виды тренировок */
.workouts-section {
  padding: 80px 0;
  background: #f8fff8;
}

.workouts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.workout-card {
  background: white;
  padding: 2.5rem 2rem;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s ease;
  border: 2px solid transparent;
}

.workout-card:hover {
  transform: translateY(-5px);
  border-color: #2e8b57;
}

.workout-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

.workout-card h3 {
  color: #2e8b57;
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

.workout-card p {
  color: #666;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.workout-features {
  list-style: none;
  padding: 0;
  text-align: left;
}

.workout-features li {
  padding: 0.3rem 0;
  color: #555;
}

/* Локации */
.locations-section {
  padding: 80px 0;
  background: white;
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.location-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.location-card:hover {
  transform: translateY(-5px);
}

.location-image {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.location-card:hover .image-placeholder img {
  transform: scale(1.05);
}

.location-info {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.location-info h3 {
  color: #2e8b57;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.location-address {
  color: #666;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.location-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.location-features .feature {
  background: rgba(46, 139, 87, 0.1);
  color: #2e8b57;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.location-desc {
  color: #666;
  line-height: 1.5;
  margin-top: auto;
}

/* CTA секция */
.cta-section {
  background: linear-gradient(135deg, #2e8b57 0%, #26734a 100%);
  color: white;
  padding: 80px 0;
  text-align: center;
}

.cta-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.cta-content p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 3rem;
}

.cta-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.cta-feature {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.feature-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.feature-text {
  display: flex;
  flex-direction: column;
}

.feature-text strong {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.feature-text span {
  opacity: 0.8;
  font-size: 0.9rem;
}

.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.cta-note {
  opacity: 0.8;
  font-size: 0.9rem;
}

/* Модальное окно */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  padding: 2rem;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: white;
  border-radius: 20px;
  padding: 2.5rem;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #666;
  transition: color 0.3s ease;
}

.modal-close:hover {
  color: #333;
}

.modal-training-info {
  background: #f8fff8;
  padding: 1.5rem;
  border-radius: 10px;
  margin-bottom: 2rem;
  border-left: 4px solid #2e8b57;
}

.modal-training-info h4 {
  color: #2e8b57;
  margin-bottom: 1rem;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Современный способ для Flexbox */
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #2e8b57;
}

.btn-full {
  width: 100%;
}

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  gap: 0.5rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.btn-primary {
  background: #ffd700;
  color: #333;
}

.btn-primary:hover {
  background: #e6c200;
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: white;
  border-color: white;
}

.btn-secondary:hover {
  background: white;
  color: #2e8b57;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: white;
  border-color: white;
}

.btn-outline:hover {
  background: white;
  color: #2e8b57;
}

.btn-large {
  padding: 18px 35px;
  font-size: 1.2rem;
}

/* Адаптивность */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.2rem;
  }

  .hero-features {
    flex-direction: column;
    gap: 1rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .schedule-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .workouts-grid {
    grid-template-columns: 1fr;
  }

  .locations-grid {
    grid-template-columns: 1fr;
  }

  .cta-features {
    grid-template-columns: 1fr;
  }

  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 300px;
  }

  .modal-content {
    padding: 2rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 80px 0 60px;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .container {
    padding: 0 15px;
  }
}

/* Анимации */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.schedule-day,
.workout-card,
.location-card {
  animation: fadeInUp 0.6s ease;
}
</style>