<template>
  <div class="about-page">
    <!-- Герой-секция -->
    <section class="hero-section">
      <div class="container">
        <h1 class="hero-title">О беговом клубе "Бегущий Башкир"</h1>
        <p class="hero-subtitle">Объединяем любителей бега в Уфе с 2022 года</p>
      </div>
    </section>

    <!-- О клубе -->
    <section class="section club-info">
      <div class="container">
        <div class="info-grid">
          <div class="info-content">
            <h2>Наша философия</h2>
            <p class="lead">
              Мы верим, что бег — это не просто спорт, а образ жизни, который объединяет людей,
              укрепляет здоровье и открывает новые горизонты.
            </p>

            <div class="mission-vision">
              <div class="mission-card">
                <h3>🎯 Наша миссия</h3>
                <p>Сделать бег доступным и enjoyable для каждого жителя Уфы, независимо от возраста и уровня подготовки.
                </p>
              </div>

              <div class="mission-card">
                <h3>👁️ Наше видение</h3>
                <p>Стать крупнейшим беговым сообществом в Башкортостане, которое вдохновляет на здоровый образ жизни.
                </p>
              </div>
            </div>

            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-number">150+</div>
                <div class="stat-label">Участников</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">25+</div>
                <div class="stat-label">Мероприятий в год</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">42.2</div>
                <div class="stat-label">км лучший марафон</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">100%</div>
                <div class="stat-label">Дружеская атмосфера</div>
              </div>
            </div>
          </div>

          <div class="info-image">
            <img :src="getImageUrl('UMM2025.png')" alt="Команда бегового клуба Бегущий Башкир" class="club-image">

          </div>
        </div>
      </div>
    </section>

    <!-- Наши ценности -->
    <section class="section values-section">
      <div class="container">
        <h2 class="section-title">Наши ценности</h2>
        <div class="values-grid">
          <div class="value-card">
            <div class="value-icon">🤝</div>
            <h3>Поддержка</h3>
            <p>Мы поддерживаем друг друга на каждом километре, как на тренировках, так и на соревнованиях.</p>
          </div>

          <div class="value-card">
            <div class="value-icon">📈</div>
            <h3>Развитие</h3>
            <p>Помогаем каждому участнику прогрессировать и достигать личных рекордов.</p>
          </div>

          <div class="value-card">
            <div class="value-icon">🌿</div>
            <h3>Единение с природой</h3>
            <p>Тренируемся в парках и на природе, наслаждаясь свежим воздухом Уфы.</p>
          </div>

          <div class="value-card">
            <div class="value-icon">🏆</div>
            <h3>Спортивный дух</h3>
            <p>Стремимся к победам, но ценим участие и личный прогресс выше медалей.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Тренер -->
    <section class="section coach-section">
      <div class="container">
        <h2 class="section-title">Наш тренер</h2>

        <div class="coach-profile">
          <div class="coach-image">
            <img :src="getImageUrl('/ZagirTrainer3.jpg')" alt="Аминев Загир - тренер бегового клуба Бегущий Башкир"
              class="coach-photo">
            <div class="coach-badges">
              <span class="badge">Мастер спорта</span>
              <span class="badge">КМС</span>
              <span class="badge">Опыт 10+ лет</span>
            </div>
          </div>

          <div class="coach-details">
            <h3>Аминев Загир Рамилевич</h3>
            <p class="coach-title">Основатель и главный тренер клуба</p>

            <div class="coach-achievements">
              <h4>Спортивные достижения:</h4>
              <ul class="achievements-list">
                <li>🥇 Мастер спорта по полиатлону</li>
                <li>🥈 Кандидат в мастера спорта по скайраннингу</li>
                <li>🏆 Победитель всероссийских соревнований по горному бегу</li>
                <li>🎯 Призер международных стартов по трейлу</li>
                <li>📚 Сертифицированный тренер по бегу</li>
              </ul>
            </div>

            <div class="coach-philosophy">
              <h4>Философия тренировок:</h4>
              <blockquote>
                "Бег должен приносить радость! Я помогаю каждому найти свой темп,
                полюбить процесс и безопасно достигать целей. От первых 5 км до марафона —
                мы пройдем этот путь вместе!"
              </blockquote>
            </div>

            <div class="coach-stats">
              <div class="coach-stat">
                <div class="stat-value">500+</div>
                <div class="stat-desc">подготовленных бегунов</div>
              </div>
              <div class="coach-stat">
                <div class="stat-value">100+</div>
                <div class="stat-desc">проведенных марафонов</div>
              </div>
              <div class="coach-stat">
                <div class="stat-value">10+</div>
                <div class="stat-desc">лет тренерского опыта</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Тренировочные локации -->
    <section class="section locations-section">
      <div class="container">
        <h2 class="section-title">Наши тренировочные базы</h2>

        <div class="locations-grid">
          <div class="location-card">
            <div class="location-image">
              <img :src="getImageUrl('UfaWhiteRiver.jpg')"
                alt="Уфимская набережная (ост. Монумент) - основная тренировочная площадка">
            </div>
            <div class="location-info">
              <h3>🏞️ Набережная </h3>
              <p><strong>Основная площадка</strong></p>
              <p>Идеальные беговые дорожки, освещенная трасса, прекрасный воздух</p>
              <div class="location-features">
                <span class="feature">📏 Круг 5 км</span>
                <span class="feature">💡 Освещение</span>
                <span class="feature">🚽 Уборная</span>
              </div>
            </div>
          </div>

          <div class="location-card">
            <div class="location-image">
              <img :src="getImageUrl('dinamo.jpg')" alt="Стадион Динамо - для интервальных тренировок">
            </div>
            <div class="location-info">
              <h3>🏟️ Стадион "Динамо"</h3>
              <p><strong>Интервальные тренировки</strong></p>
              <p>Профессиональное покрытие, идеально для работы над техникой и скоростью</p>
              <div class="location-features">
                <span class="feature">📏 Стандартная дорожка</span>
                <span class="feature">🎯 Тренерский контроль</span>
                <span class="feature">⚡ СБУ и темповая работа</span>
              </div>
            </div>
          </div>

          <div class="location-card">
            <div class="location-image">
              <img :src="getImageUrl('i.webp')" alt="Лесопарковая зона - для длительных кроссов. Уфимское ожерелье">
            </div>
            <div class="location-info">
              <h3>🌲 Лесопарковая зона</h3>
              <p><strong>Длительные кроссы</strong></p>
              <p>Живописные маршруты, подготовка к трейлам, бег по пересеченной местности</p>
              <div class="location-features">
                <span class="feature">🌳 Природа</span>
                <span class="feature">🔄 Маршруты 5-20 км</span>
                <span class="feature">🏔️ Перепады высот</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Призыв к действию -->
    <section class="section cta-section">
      <div class="container">
        <div class="cta-content">
          <h2>Готовы начать бегать с нами?</h2>
          <p>Присоединяйтесь к нашей беговой семье и откройте для себя мир возможностей!</p>
          <div class="cta-buttons">
            <router-link to="/register" class="btn btn-primary">
              🏃 Стать участником
            </router-link>
            <router-link to="/training" class="btn btn-secondary">
              📅 Посмотреть расписание
            </router-link>
            <router-link to="/contact" class="btn btn-outline">
              📞 Связаться с нами
            </router-link>
          </div>
        </div>
      </div>
    </section>

    <!-- Контакты -->
    <section class="section contact-section">
      <div class="container">
        <h2 class="section-title">Контакты</h2>
        <div class="contact-grid">
          <div class="contact-info">
            <h3>📞 Свяжитесь с нами</h3>
            <div class="contact-item">
              <strong>Телефон:</strong>
              <a href="tel:+79273093095"> +7 (927) 30-93-095</a>
            </div>
            <div class="contact-item">
              <strong>Email:</strong>
              <a href="mailto:zog1r@mail.ru"> zog1r@mail.ru</a>
            </div>
            <div class="contact-item">
              <strong>Telegram:</strong>
              <a href="https://t.me/begushiybashkir" target="_blank"> @begushiybashkir</a>
            </div>
            <div class="contact-item">
              <strong>Город:</strong>
              Уфа, Республика Башкортостан
            </div>
          </div>

          <div class="social-links">
            <h3>📱 Мы в соцсетях</h3>
            <div class="social-buttons">
              <a href="https://www.instagram.com/begushiybashkir/" target="_blank" class="social-btn instagram">
                📷 Instagram
              </a>
              <a href="https://www.youtube.com/channel/UCV45f8q172917848k05q6gA" target="_blank"
                class="social-btn youtube">
                🎥 YouTube
              </a>
              <a href="https://t.me/begushiybashkir" target="_blank" class="social-btn telegram">
                ✈️ Telegram
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'About',
  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)
  },
  metaInfo: {
    title: 'О нас - Бегущий Башкир | Беговой клуб в Уфе',
    meta: [
      {
        name: 'description',
        content: 'Беговой клуб Бегущий Башкир в Уфе: профессиональный тренер Аминев Загир, тренировки в парках Уфы, достижения и философия клуба. Присоединяйтесь к нашему сообществу!'
      },
      {
        name: 'keywords',
        content: 'беговой клуб Уфа, тренер по бегу Уфа, Аминев Загир, тренировки бег Уфа, марафон Уфа, бег в Башкортостане'
      }
    ]
  },
  methods: {
    getImageUrl(path) {
      // В продакшене замените на правильный путь
      const baseUrl = import.meta.env.BASE_URL
      // Путь от корня public/
      console.log(`${baseUrl}images/${path}`)
      return `${baseUrl}images/${path}`
    },
    handleFirstInteraction() {
      if (!this.hasInteracted) {
        this.hasInteracted = true
        this.showContent()
        clearTimeout(this.autoShowTimeout)
      }
    },
    showContent() {
      this.isContentVisible = true
      // Эмитим событие для показа хедера
      this.$emit('show-header')
    },
  }
}
</script>

<style scoped>
.about-page {
  color: #333;
}

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

.hero-title {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.hero-subtitle {
  font-size: 1.3rem;
  opacity: 0.9;
}

/* Основные секции */
.section {
  padding: 80px 0;
}

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

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Информация о клубе */
.club-info {
  background: #f8fff8;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.lead {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: #555;
}

.mission-vision {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0;
}

.mission-card {
  background: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #2e8b57;
}

.mission-card h3 {
  color: #2e8b57;
  margin-bottom: 1rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
}

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

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

.club-image {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Ценности */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

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

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

.value-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.value-card h3 {
  color: #2e8b57;
  margin-bottom: 1rem;
}

/* Тренер */
.coach-section {
  background: #f5f5f5;
}

.coach-profile {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 3rem;
  align-items: start;
}

.coach-image {
  position: relative;
}

.coach-photo {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.coach-badges {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.badge {
  background: #ffd700;
  color: #333;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.coach-details h3 {
  font-size: 2rem;
  color: #2e8b57;
  margin-bottom: 0.5rem;
}

.coach-title {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 2rem;
  font-style: italic;
}

.coach-achievements,
.coach-philosophy {
  margin-bottom: 2rem;
}

.coach-achievements h4,
.coach-philosophy h4 {
  color: #2e8b57;
  margin-bottom: 1rem;
}

.achievements-list {
  list-style: none;
  padding: 0;
}

.achievements-list li {
  padding: 0.5rem 0;
  font-size: 1.1rem;
}

blockquote {
  background: white;
  padding: 1.5rem;
  border-left: 4px solid #2e8b57;
  font-style: italic;
  color: #555;
  margin: 1rem 0;
  border-radius: 0 8px 8px 0;
}

.coach-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.coach-stat {
  text-align: center;
  padding: 1rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2e8b57;
}

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

/* Локации */
.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.1);
  transition: transform 0.3s ease;
}

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

.location-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.location-info {
  padding: 1.5rem;
}

.location-info h3 {
  color: #2e8b57;
  margin-bottom: 1rem;
}

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

.feature {
  background: #f0f8f0;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  color: #2e8b57;
}

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

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

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

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
}

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

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

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

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

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

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

/* Контакты */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-item {
  margin-bottom: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

.contact-item a {
  color: #2e8b57;
  text-decoration: none;
}

.contact-item a:hover {
  text-decoration: underline;
}

.social-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.social-btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: transform 0.3s ease;
  text-align: center;
}

.social-btn:hover {
  transform: translateY(-2px);
}

.instagram {
  background: #E4405F;
}

.youtube {
  background: #CD201F;
}

.telegram {
  background: #0088cc;
}

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

  .info-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .coach-profile {
    grid-template-columns: 1fr;
  }

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

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

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

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

  .btn {
    width: 100%;
    max-width: 300px;
  }
}
</style>