'use client';
import { useEffect, CSSProperties } from 'react';
import Header from '@/components/Header';
import Fotter from '@/components/Fotter';

// Стили для страницы About
const styles = `
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes glowPulse {
  0% {
    text-shadow: 0 0 5px rgba(255,127,39,0.3);
  }
  50% {
    text-shadow: 0 0 20px rgba(255,127,39,0.6);
  }
  100% {
    text-shadow: 0 0 5px rgba(255,127,39,0.3);
  }
}

@keyframes borderGlow {
  0% {
    box-shadow: 0 0 5px rgba(255,127,39,0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(255,127,39,0.5);
  }
  100% {
    box-shadow: 0 0 5px rgba(255,127,39,0.3);
  }
}

.page-container {
  background: radial-gradient(circle at top right, rgba(30,30,30,0.8) 0%, rgba(15,15,15,0.8) 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.page-container::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/noise-texture.png'), linear-gradient(145deg, rgba(255,127,39,0.1) 0%, rgba(0,0,0,0) 70%);
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}

.content-container {
  animation: fadeInUp 0.6s ease-out forwards;
  width: 100%;
}

.section-title {
  color: #ff7f27;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  font-weight: bold;
  background: linear-gradient(to right, #ff7f27, #ff5500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glowPulse 3s infinite;
  text-align: center;
  letter-spacing: -0.5px;
}

.section-subtitle {
  font-size: 1.5rem;
  margin: 2rem 0 1rem;
  color: #ff7f27;
  font-weight: 600;
}

.about-section {
  margin-bottom: 3rem;
  background: rgba(0,0,0,0.3);
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid rgba(255,127,39,0.2);
  opacity: 0;
  animation: fadeInUp 0.8s forwards;
}

.about-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
  line-height: 1.7;
  font-size: 1.1rem;
  opacity: 0;
  animation: fadeInUp 0.8s forwards;
  animation-delay: 0.2s;
  color: rgba(255,255,255,0.9);
}

.team-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0;
}

.team-member {
  background: linear-gradient(145deg, rgba(30,30,30,0.6), rgba(15,15,15,0.8));
  border-radius: 1rem;
  padding: 1.5rem;
  width: 280px;
  text-align: center;
  border: 1px solid rgba(255,127,39,0.2);
  opacity: 0;
  animation: fadeInUp 0.5s forwards;
  transition: all 0.3s ease;
}

.team-member:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  border-color: rgba(255,127,39,0.5);
}

.member-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ff7f27;
  padding: 3px;
  margin: 0 auto 1rem;
}

.member-name {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  background: linear-gradient(to right, #ff7f27, #ff5500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.member-position {
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(0,0,0,0.2);
  border-radius: 0.8rem;
  transition: all 0.3s ease;
}

.contact-item:hover {
  background: rgba(255,127,39,0.1);
  transform: translateX(5px);
}

.mission-box {
  border-left: 4px solid #ff7f27;
  padding-left: 1.5rem;
  margin: 2rem 0;
  position: relative;
  opacity: 0;
  animation: fadeInLeft 0.8s forwards;
  animation-delay: 0.4s;
}

.mission-box::before {
  content: '❝';
  position: absolute;
  left: -1.5rem;
  top: -1rem;
  font-size: 3rem;
  color: #ff7f27;
  opacity: 0.5;
}

.values-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.value-item {
  background: rgba(0,0,0,0.2);
  border-radius: 0.8rem;
  padding: 1.5rem;
  border: 1px solid rgba(255,127,39,0.1);
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeInRight 0.6s forwards;
}

.value-item:hover {
  background: rgba(0,0,0,0.3);
  border-color: #ff7f27;
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(255,127,39,0.2);
}

.value-icon {
  background: linear-gradient(145deg, #ff7f27, #ff5500);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
`;

// Стили для главного контейнера
const mainContentStyle: CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  width: '100%',
  maxWidth: '90vw',
  margin: '0 auto',
  flex: 1,
  paddingTop: '76px',
  paddingBottom: '30px',
};

export default function About() {
  // Эффект для анимации элементов при прокрутке
  useEffect(() => {
    const handleAnimateElements = () => {
      const elements = document.querySelectorAll('.animate-on-scroll');
      elements.forEach((el, index) => {
        if (el instanceof HTMLElement) {
          el.style.animationDelay = `${index * 0.1}s`;
        }
      });
    };
    
    handleAnimateElements();
    
    // Дополнительная анимация при прокрутке (для будущего расширения)
    const handleScroll = () => {
      // Будущая логика анимации при прокрутке
    };
    
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="page-container">
      <style>{styles}</style>
      <Header />
      
      <main style={mainContentStyle} className="content-container">
        <h1 className="section-title">О нашем проекте</h1>
        
        <p className="about-intro">
          Мы — команда энтузиастов, создающих уникальные культурные события, 
          которые объединяют людей и дарят незабываемые впечатления. Наша платформа 
          помогает находить и приобретать билеты на самые яркие мероприятия вашего города.
        </p>
        
        <section className="about-section" style={{ animationDelay: '0.2s' }}>
          <h2 className="section-subtitle">Наша миссия</h2>
          
          <div className="mission-box">
            <p style={{ fontSize: '1.1rem', lineHeight: 1.7 }}>
              Мы стремимся сделать культурную жизнь доступной каждому, предоставляя 
              удобный сервис для поиска и покупки билетов на разнообразные мероприятия. 
              Наша цель — создать пространство, где каждый найдет что-то по душе, 
              расширит свой кругозор и получит новые впечатления.
            </p>
          </div>
          
          <h2 className="section-subtitle">Наши ценности</h2>
          <div className="values-container">
            {[
              {
                title: 'Доступность',
                icon: '✨',
                desc: 'Мы делаем культурные события доступными для всех',
                delay: '0.3s'
              },
              {
                title: 'Разнообразие',
                icon: '🎭',
                desc: 'Поддерживаем широкий спектр мероприятий для любых интересов',
                delay: '0.4s'
              },
              {
                title: 'Качество',
                icon: '🏆',
                desc: 'Тщательно отбираем события, чтобы предложить лучшее',
                delay: '0.5s'
              },
              {
                title: 'Инновации',
                icon: '💡',
                desc: 'Постоянно совершенствуем нашу платформу и сервисы',
                delay: '0.6s'
              }
            ].map((value, index) => (
              <div 
                key={index} 
                className="value-item" 
                style={{ animationDelay: value.delay }}
              >
                <div className="value-icon">
                  <span style={{ fontSize: '1.5rem' }}>{value.icon}</span>
                </div>
                <h3 style={{ 
                  color: '#ff7f27', 
                  marginBottom: '0.5rem', 
                  fontSize: '1.25rem' 
                }}>
                  {value.title}
                </h3>
                <p style={{ color: 'rgba(255,255,255,0.8)' }}>
                  {value.desc}
                </p>
              </div>
            ))}
          </div>
        </section>
        
        <section className="about-section" style={{ animationDelay: '0.4s' }}>
          <h2 className="section-subtitle">Наша команда</h2>
          
          <div className="team-container">
            {[
              {
                name: 'Вальтер Владислав',
                position: 'Разработчик',
                photo: 'https://sun9-73.userapi.com/impg/0L7o8ihONzvGVLWaps-rW_EpVxnF6eRxlkZbmQ/_fnB1AnXl_E.jpg?size=721x1080&quality=95&sign=cc610fe8deefb4ea1a92be84d0df65a7&type=album',
                delay: '0.2s'
              },
              {
                name: 'Изосимова Татьяна',
                position: 'Преподователь "Интернет Программирование"',
                photo: 'https://sun9-5.userapi.com/impg/VLRZ9cfoeqZsX8cND0-_t6UBa2R18ixtbOsrUg/IyYDh9y4_Oo.jpg?size=810x1080&quality=96&sign=ee2565303309ea04e802010d67090ea0&type=album',
                delay: '0.3s'
              },
              {
                name: 'Володин Сергей',
                position: 'Преподователь "Разработка корпоритивных информационных систем"',
                photo: 'https://www.mfua.ru/upload/resize_cache/iblock/294/468_576_1/wd0mv0y90q2thfyzpr71uvzz37lbn7u7.jpg',
                delay: '0.4s'
              },
              {
                name: 'Пахом',
                position: 'Талисман',
                photo: 'https://img.championat.com/i/l/v/16518528031486776581.jpg',
                delay: '0.5s'
              }
            ].map((member, index) => (
              <div 
                key={index} 
                className="team-member"
                style={{ animationDelay: member.delay }}
              >
                <img src={member.photo} alt={member.name} className="member-avatar" />
                <h3 className="member-name">{member.name}</h3>
                <p className="member-position">{member.position}</p>
                <div style={{ 
                  display: 'flex', 
                  justifyContent: 'center', 
                  gap: '1rem', 
                  marginTop: '1rem' 
                }}>
                  {member.name === 'Вальтер Владислав' ? (
                    <>
                      <a 
                        href="https://github.com/3DThing" 
                        target="_blank" 
                        rel="noopener noreferrer"
                        style={{ textDecoration: 'none' }}
                      >
                        <div 
                          style={{
                            width: 32,
                            height: 32,
                            borderRadius: '50%',
                            background: 'rgba(255,127,39,0.15)',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            cursor: 'pointer',
                            transition: 'all 0.3s ease'
                          }}
                          onMouseOver={(e) => {
                            e.currentTarget.style.background = 'rgba(255,127,39,0.3)';
                            e.currentTarget.style.transform = 'translateY(-3px)';
                          }}
                          onMouseOut={(e) => {
                            e.currentTarget.style.background = 'rgba(255,127,39,0.15)';
                            e.currentTarget.style.transform = 'translateY(0)';
                          }}
                        >
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" stroke="#ff7f27" strokeLinecap="round" strokeLinejoin="round"/>
                          </svg>
                        </div>
                      </a>
                      <a 
                        href="https://vk.com/id632206075" 
                        target="_blank" 
                        rel="noopener noreferrer"
                        style={{ textDecoration: 'none' }}
                      >
                        <div 
                          style={{
                            width: 32,
                            height: 32,
                            borderRadius: '50%',
                            background: 'rgba(255,127,39,0.15)',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            cursor: 'pointer',
                            transition: 'all 0.3s ease'
                          }}
                          onMouseOver={(e) => {
                            e.currentTarget.style.background = 'rgba(255,127,39,0.3)';
                            e.currentTarget.style.transform = 'translateY(-3px)';
                          }}
                          onMouseOut={(e) => {
                            e.currentTarget.style.background = 'rgba(255,127,39,0.15)';
                            e.currentTarget.style.transform = 'translateY(0)';
                          }}
                        >
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fillRule="evenodd" clipRule="evenodd" d="M3.4 3.4C2 4.81333 2 7.07333 2 11.6V12.4C2 16.92 2 19.18 3.4 20.6C4.81333 22 7.07333 22 11.6 22H12.4C16.92 22 19.18 22 20.6 20.6C22 19.1867 22 16.9267 22 12.4V11.6C22 7.08 22 4.82 20.6 3.4C19.1867 2 16.9267 2 12.4 2H11.6C7.08 2 4.82 2 3.4 3.4ZM5.37333 8.08667C5.48 13.2867 8.08 16.4067 12.64 16.4067H12.9067V13.4333C14.58 13.6 15.8467 14.8267 16.3533 16.4067H18.72C18.4773 15.5089 18.0469 14.6727 17.4574 13.9533C16.8679 13.234 16.1326 12.6478 15.3 12.2333C16.0461 11.779 16.6905 11.1756 17.1929 10.461C17.6953 9.7464 18.045 8.93585 18.22 8.08H16.0733C15.6067 9.73334 14.22 11.2333 12.9067 11.3733V8.08667H10.7533V13.8467C9.42 13.5133 7.74 11.9 7.66666 8.08667H5.37333Z" fill="#ff7f27"/>
                          </svg>
                        </div>
                      </a>

<a 
  href="https://t.me/lucifer364" 
  target="_blank" 
  rel="noopener noreferrer"
  style={{ textDecoration: 'none' }}
>
  <div 
    style={{
      width: 32,
      height: 32,
      borderRadius: '50%',
      background: 'rgba(255,127,39,0.15)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      cursor: 'pointer',
      transition: 'all 0.3s ease'
    }}
    onMouseOver={(e) => {
      e.currentTarget.style.background = 'rgba(255,127,39,0.3)';
      e.currentTarget.style.transform = 'translateY(-3px)';
    }}
    onMouseOut={(e) => {
      e.currentTarget.style.background = 'rgba(255,127,39,0.15)';
      e.currentTarget.style.transform = 'translateY(0)';
    }}
  >
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fillRule="evenodd" clipRule="evenodd" d="M23.1117 4.49449C23.4296 2.94472 21.9074 1.65683 20.4317 2.227L2.3425 9.21601C0.694517 9.85273 0.621087 12.1572 2.22518 12.8975L6.1645 14.7157L8.03849 21.2746C8.13583 21.6153 8.40618 21.8791 8.74917 21.968C9.09216 22.0568 9.45658 21.9576 9.70712 21.707L12.5938 18.8203L16.6375 21.8531C17.8113 22.7334 19.5019 22.0922 19.7967 20.6549L23.1117 4.49449ZM3.0633 11.0816L21.1525 4.0926L17.8375 20.2531L13.1 16.6999C12.7019 16.4013 12.1448 16.4409 11.7929 16.7928L10.5565 18.0292L10.928 15.9861L18.2071 8.70703C18.5614 8.35278 18.5988 7.79106 18.2947 7.39293C17.9906 6.99479 17.4389 6.88312 17.0039 7.13168L6.95124 12.876L3.0633 11.0816ZM8.17695 14.4791L8.78333 16.6015L9.01614 15.321C9.05253 15.1209 9.14908 14.9366 9.29291 14.7928L11.5128 12.573L8.17695 14.4791Z" fill="#ff7f27"/>
    </svg>
  </div>
</a>

                    </>
                  ) : member.name === 'Изосимова Татьяна' ? (
                    <a 
                      href="https://vk.com/id19862788" 
                      target="_blank" 
                      rel="noopener noreferrer"
                      style={{ textDecoration: 'none' }}
                    >
                      <div 
                        style={{
                          width: 32,
                          height: 32,
                          borderRadius: '50%',
                          background: 'rgba(255,127,39,0.15)',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          cursor: 'pointer',
                          transition: 'all 0.3s ease'
                        }}
                        onMouseOver={(e) => {
                          e.currentTarget.style.background = 'rgba(255,127,39,0.3)';
                          e.currentTarget.style.transform = 'translateY(-3px)';
                        }}
                        onMouseOut={(e) => {
                          e.currentTarget.style.background = 'rgba(255,127,39,0.15)';
                          e.currentTarget.style.transform = 'translateY(0)';
                        }}
                      >
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path fillRule="evenodd" clipRule="evenodd" d="M3.4 3.4C2 4.81333 2 7.07333 2 11.6V12.4C2 16.92 2 19.18 3.4 20.6C4.81333 22 7.07333 22 11.6 22H12.4C16.92 22 19.18 22 20.6 20.6C22 19.1867 22 16.9267 22 12.4V11.6C22 7.08 22 4.82 20.6 3.4C19.1867 2 16.9267 2 12.4 2H11.6C7.08 2 4.82 2 3.4 3.4ZM5.37333 8.08667C5.48 13.2867 8.08 16.4067 12.64 16.4067H12.9067V13.4333C14.58 13.6 15.8467 14.8267 16.3533 16.4067H18.72C18.4773 15.5089 18.0469 14.6727 17.4574 13.9533C16.8679 13.234 16.1326 12.6478 15.3 12.2333C16.0461 11.779 16.6905 11.1756 17.1929 10.461C17.6953 9.7464 18.045 8.93585 18.22 8.08H16.0733C15.6067 9.73334 14.22 11.2333 12.9067 11.3733V8.08667H10.7533V13.8467C9.42 13.5133 7.74 11.9 7.66666 8.08667H5.37333Z" fill="#ff7f27"/>
                        </svg>
                      </div>
                    </a>
                  ) : null /* Для Володина Сергея и Пахома не показываем иконки */}
                </div>
              </div>
            ))}
          </div>
        </section>
        
        {/* Секция "Связаться с нами" удалена, поскольку эта информация будет на отдельной странице */}
        
      </main>
      
      <Fotter />
    </div>
  );
}