<script>
  import { onMount } from 'svelte';
  import { writable } from 'svelte/store';
  import { Container, Row, Col } from '@sveltestrap/sveltestrap';
  import GlitchText from '$lib/components/GlitchText.svelte';
  import CRTScreen from '$lib/components/CRTScreen.svelte';

  const activeSection = writable('mission');
  const isMobile = writable(false);

  const teamData = {
    mission: {
      title: "Наша Миссия",
      icon: "",
      content: {
        main: "Мы создаем инновационные технологические решения, которые делают мир лучше, проще и эффективнее.",
        points: [
          "Разрабатывать ПО, которое решает реальные проблемы",
          "Создавать продукты с душой и вниманием к деталям", 
          "Продвигать open-source и сообщество разработчиков",
          "Обучать и вдохновлять следующее поколение инженеров"
        ]
      }
    },
    values: {
      title: "Наши Ценности", 
      icon: "",
      content: {
        main: "Наши ценности - это фундамент, на котором строится вся наша работа.",
        points: [
          {
            icon: "",
            title: "Инновации",
            description: "Мы постоянно исследуем новые технологии и подходы"
          },
          {
            icon: "", 
            title: "Качество",
            description: "Каждая строка кода должна быть продумана и оптимизирована"
          },
          {
            icon: "",
            title: "Сотрудничество",
            description: "Вместе мы достигаем большего, чем по отдельности"
          },
          {
            icon: "",
            title: "Обучение",
            description: "Мы постоянно растем и развиваемся как профессионалы"
          },
          {
            icon: "",
            title: "Креативность",
            description: "Находим нестандартные решения для сложных задач"
          },
          {
            icon: "",
            title: "Эффективность",
            description: "Делаем больше за меньшее время без потери качества"
          }
        ]
      }
    },
    history: {
      title: "Наша История",
      icon: "",
      content: {
        main: "Путь от идеи к реализации - это история постоянного роста и развития.",
        timeline: [
          {
            year: "2023",
            event: "Основание команды",
            description: "Группа энтузиастов объединилась для работы над первыми проектами"
          },
          {
            year: "2024",
            event: "Первый крупный проект", 
            description: "Успешный запуск платформы для блогов в ретро-стиле"
          },
          {
            year: "2024",
            event: "Расширение команды",
            description: "К команде присоединились специалисты разных направлений"
          },
          {
            year: "Настоящее время",
            event: "Активное развитие",
            description: "Работа над несколькими инновационными проектами одновременно"
          }
        ]
      }
    },
    technology: {
      title: "Технологии",
      icon: "",
      content: {
        main: "Мы используем современный стек технологий, сочетая его с проверенными временем решениями.",
        categories: [
          {
            name: "Frontend",
            technologies: ["Svelte/SvelteKit", "TypeScript", "Vue.js", "Tailwind CSS"],
            color: "#00aaff"
          },
          {
            name: "Backend",
            technologies: ["Node.js", "Python", "Rust", "PostgreSQL", "MongoDB"],
            color: "#ff00aa"
          },
          {
            name: "DevOps",
            technologies: ["Docker", "Kubernetes", "AWS", "GitLab CI/CD", "Linux"],
            color: "#00ff88"
          },
          {
            name: "Embedded",
            technologies: ["C/C++", "Arduino", "Raspberry Pi", "IoT Protocols"],
            color: "#ffaa00"
          },
          {
            name: "QA",
            technologies: ["Jest", "Cypress", "Selenium", "Test Automation"],
            color: "#aa00ff"
          }
        ]
      }
    }
  };

  const stats = {
    projects: 12,
    teamMembers: 5,
    yearsExperience: 2,
    technologies: 20,
    satisfiedClients: 8,
    codeCommits: 2500
  };

  onMount(() => {
    isMobile.set(window.innerWidth < 768);
    
    const handleResize = () => isMobile.set(window.innerWidth < 768);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  });

  function setActiveSection(section) {
    activeSection.set(section);
  }
</script>

<section class="about-page">
    <Row class=" g-0">
      <!-- Левая панель - Навигация -->
      <Col lg={3} class="h-100">
        <div class="panel navigation-panel">
          <CRTScreen class="navigation-terminal h-100">
            <div class="terminal-header">
              <span class="blink">█</span> О КОМАНДЕ [58]
            </div>
            
            <div class="terminal-body navigation-body">

              <div class="navigation-menu">
                {#each Object.entries(teamData) as [key, section]}
                  <div 
                    class="nav-item"
                    class:active={$activeSection === key}
                    on:click={() => setActiveSection(key)}
                  >
                    <span class="nav-icon">{section.icon}</span>
                    <span class="nav-title">{section.title}</span>
                    <span class="nav-arrow">
                      {#if $activeSection === key}
                        ▶
                      {:else}
                        ●
                      {/if}
                    </span>
                  </div>
                {/each}
              </div>

              <div class="quick-stats">
                <h4> Быстрая статистика</h4>
                <div class="stats-grid">
                  <div class="stat">
                    <span class="stat-number">{stats.projects}+</span>
                    <span class="stat-label">Проектов</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">{stats.teamMembers}</span>
                    <span class="stat-label">Участников</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">{stats.yearsExperience}</span>
                    <span class="stat-label">Года опыта</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">{stats.technologies}+</span>
                    <span class="stat-label">Технологий</span>
                  </div>
                </div>
              </div>

              <div class="contact-info">
                <h4> Контакты</h4>
                <div class="contact-item">
                  <span class="contact-icon"></span>
                  <span class="contact-text">team58@example.com</span>
                </div>
                <div class="contact-item">
                  <span class="contact-icon"></span>
                  <span class="contact-text">@58team</span>
                </div>
                <div class="contact-item">
                  <span class="contact-icon"></span>
                  <span class="contact-text">github.com/58team</span>
                </div>
              </div>
            </div>
          </CRTScreen>
        </div>
      </Col>

      <!-- Правая панель - Контент -->
      <Col lg={9} class="h-100">
        <div class="panel content-panel">
          <CRTScreen class="content-terminal h-100">
            <div class="terminal-header">
              <span class="blink">█</span> 
              {teamData[$activeSection].icon} {teamData[$activeSection].title}
            </div>
            
            <div class="terminal-body content-body">
              <div class="content-scroll">
                {#if $activeSection === 'mission'}
                  <div class="mission-content">
                    <div class="section-header">
                      <h1>Наша Миссия</h1>
                      <p class="lead">{teamData.mission.content.main}</p>
                    </div>

                    <div class="mission-points">
                      {#each teamData.mission.content.points as point}
                        <div class="mission-point">
                          <span class="point-icon">✓</span>
                          <span class="point-text">{point}</span>
                        </div>
                      {/each}
                    </div>

                    <div class="mission-vision">
                      <h2> Наше Видение</h2>
                      <div class="vision-grid">
                        <div class="vision-card">
                          <div class="vision-icon"></div>
                          <h3>Инновации</h3>
                          <p>Создавать технологии, которые опережают время</p>
                        </div>
                        <div class="vision-card">
                          <div class="vision-icon"></div>
                          <h3>Влияние</h3>
                          <p>Менять мир к лучшему через технологии</p>
                        </div>
                        <div class="vision-card">
                          <div class="vision-icon"></div>
                          <h3>Сообщество</h3>
                          <p>Развивать open-source и помогать другим</p>
                        </div>
                      </div>
                    </div>
                  </div>

                {:else if $activeSection === 'values'}
                  <div class="values-content">
                    <div class="section-header">
                      <h1>Наши Ценности</h1>
                      <p class="lead">{teamData.values.content.main}</p>
                    </div>

                    <div class="values-grid">
                      {#each teamData.values.content.points as value}
                        <div class="value-card">
                          <div class="value-icon">{value.icon}</div>
                          <div class="value-content">
                            <h3>{value.title}</h3>
                            <p>{value.description}</p>
                          </div>
                        </div>
                      {/each}
                    </div>

                    <div class="values-principles">
                      <h2>Наши Принципы Работы</h2>
                      <div class="principles-list">
                        <div class="principle">
                          <strong>Agile подход:</strong> Гибкость и адаптивность в разработке
                        </div>
                        <div class="principle">
                          <strong>Code Review:</strong> Каждая строка кода проверяется коллегами
                        </div>
                        <div class="principle">
                          <strong>Документация:</strong> Подробная документация для всех проектов
                        </div>
                        <div class="principle">
                          <strong>Непрерывное обучение:</strong> Регулярные воркшопы и обмен знаниями
                        </div>
                      </div>
                    </div>
                  </div>

                {:else if $activeSection === 'history'}
                  <div class="history-content">
                    <div class="section-header">
                      <h1>Наша История</h1>
                      <p class="lead">{teamData.history.content.main}</p>
                    </div>

                    <div class="timeline">
                      {#each teamData.history.content.timeline as event, index}
                        <div class="timeline-item">
                          <div class="timeline-marker">
                            <div class="marker-dot"></div>
                            {#if index < teamData.history.content.timeline.length - 1}
                              <div class="marker-line"></div>
                            {/if}
                          </div>
                          <div class="timeline-content">
                            <div class="timeline-year">{event.year}</div>
                            <h3>{event.event}</h3>
                            <p>{event.description}</p>
                          </div>
                        </div>
                      {/each}
                    </div>

                    <div class="history-achievements">
                      <h2> Наши Достижения</h2>
                      <div class="achievements-grid">
                        <div class="achievement">
                          <div class="achievement-icon"></div>
                          <div class="achievement-text">Успешный запуск 10+ проектов</div>
                        </div>
                        <div class="achievement">
                          <div class="achievement-icon"></div>
                          <div class="achievement-text">Собрана сильная команда специалистов</div>
                        </div>
                        <div class="achievement">
                          <div class="achievement-icon"></div>
                          <div class="achievement-text">Разработана уникальная ретро-платформа</div>
                        </div>
                        <div class="achievement">
                          <div class="achievement-icon"></div>
                          <div class="achievement-text">Постоянный рост и развитие</div>
                        </div>
                      </div>
                    </div>
                  </div>

                {:else if $activeSection === 'technology'}
                  <div class="technology-content">
                    <div class="section-header">
                      <h1>Наш Технологический Стек</h1>
                      <p class="lead">{teamData.technology.content.main}</p>
                    </div>

                    <div class="tech-categories">
                      {#each teamData.technology.content.categories as category}
                        <div class="tech-category">
                          <h3 style="color: {category.color}">{category.name}</h3>
                          <div class="tech-tags">
                            {#each category.technologies as tech}
                              <span 
                                class="tech-tag"
                                style="border-color: {category.color}; color: {category.color}"
                              >
                                {tech}
                              </span>
                            {/each}
                          </div>
                        </div>
                      {/each}
                    </div>

                    <div class="tech-philosophy">
                      <h2>Наш Подход к Технологиям</h2>
                      <div class="philosophy-points">
                        <div class="philosophy-point">
                          <strong>Правильный инструмент для задачи:</strong> Выбираем технологии исходя из требований проекта
                        </div>
                        <div class="philosophy-point">
                          <strong>Современные стандарты:</strong> Следуем best practices и актуальным трендам
                        </div>
                        <div class="philosophy-point">
                          <strong>Безопасность и надежность:</strong> Приоритет - стабильность и защита данных
                        </div>
                        <div class="philosophy-point">
                          <strong>Масштабируемость:</strong> Архитектура, которая растет вместе с проектом
                        </div>
                      </div>
                    </div>
                  </div>
                {/if}

                <div class="content-footer">
                  <div class="footer-cta">
                    <h3> Готовы работать с нами?</h3>
                    <p>Мы всегда открыты для новых вызовов и интересных проектов</p>
                    <div class="cta-buttons">
                      <a href="/contact" class="cta-btn primary">Связаться с нами</a>
                      <a href="/projects" class="cta-btn secondary">Наши проекты</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </CRTScreen>
        </div>
      </Col>
    </Row>
</section>

<style>
  .about-page {
    min-height: 100vh;
    padding-top: 50px;
    background: var(--bg-dark);
    overflow: hidden;
  }

  .panel {
    height: 100%;
    border: 1px solid var(--terminal-border);
    background: rgba(10, 10, 10, 0.9);
  }

  .terminal-header {
    background: var(--primary-green);
    color: var(--bg-dark);
    padding: 12px 20px;
    font-weight: bold;
    border-bottom: 2px solid var(--bg-dark);
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .terminal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .navigation-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }


  .navigation-menu {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border: 1px solid var(--terminal-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
  }

  .nav-item:hover {
    border-color: var(--primary-green);
    transform: translateX(5px);
  }

  .nav-item.active {
    border-color: var(--secondary-pink);
    background: rgba(255, 0, 170, 0.1);
  }

  .nav-icon {
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
  }

  .nav-title {
    flex: 1;
    color: var(--text-secondary);
    font-weight: bold;
  }

  .nav-item.active .nav-title {
    color: var(--primary-green);
  }

  .nav-arrow {
    color: var(--text-muted);
  }

  .quick-stats h4, .contact-info h4 {
    color: var(--primary-green);
    margin: 0 0 15px 0;
    font-size: 1rem;
  }

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

  .stat {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--terminal-border);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
  }

  .stat-number {
    display: block;
    color: var(--primary-green);
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 2px;
  }

  .stat-label {
    color: var(--text-muted);
    font-size: 0.7rem;
  }

  .contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .contact-item:last-child {
    border-bottom: none;
  }

  .contact-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
  }

  .contact-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
  }

  /* Контентная часть */
  .content-body {
    padding: 0;
  }

  .content-scroll {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
  }

  .section-header {
    margin-bottom: 40px;
    text-align: center;
  }

  .section-header h1 {
    color: var(--primary-green);
    font-size: 2.5rem;
    margin: 0 0 20px 0;
  }

  .lead {
    color: var(--text-secondary);
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
  }

  /* Стили для разных секций */
  .mission-points {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 30px 0;
  }

  .mission-point {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--terminal-border);
    border-radius: 8px;
  }

  .point-icon {
    color: var(--primary-green);
    font-weight: bold;
    font-size: 1.2rem;
  }

  .point-text {
    color: var(--text-secondary);
    font-size: 1.1rem;
  }

  .vision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
  }

  .vision-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--terminal-border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
  }

  .vision-card:hover {
    border-color: var(--primary-green);
    transform: translateY(-5px);
  }

  .vision-icon {
    font-size: 2rem;
    margin-bottom: 15px;
  }

  .vision-card h3 {
    color: var(--primary-green);
    margin: 0 0 10px 0;
  }

  .vision-card p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
  }

  .values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 30px 0;
  }

  .value-card {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--terminal-border);
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .value-card:hover {
    border-color: var(--primary-green);
  }

  .value-icon {
    font-size: 1.5rem;
    margin-top: 5px;
  }

  .value-content h3 {
    color: var(--primary-green);
    margin: 0 0 10px 0;
    font-size: 1.2rem;
  }

  .value-content p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
  }

  .principles-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }

  .principle {
    color: var(--text-secondary);
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border-left: 3px solid var(--primary-green);
  }

  .timeline {
    position: relative;
    margin: 40px 0;
  }

  .timeline-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
  }

  .timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .marker-dot {
    width: 12px;
    height: 12px;
    background: var(--primary-green);
    border-radius: 50%;
    border: 2px solid var(--bg-dark);
  }

  .marker-line {
    flex: 1;
    width: 2px;
    background: var(--primary-green);
    margin-top: 5px;
  }

  .timeline-content {
    flex: 1;
    padding-bottom: 20px;
  }

  .timeline-year {
    color: var(--secondary-pink);
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
  }

  .timeline-content h3 {
    color: var(--primary-green);
    margin: 0 0 10px 0;
    font-size: 1.3rem;
  }

  .timeline-content p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
  }

  .achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
  }

  .achievement {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--terminal-border);
    border-radius: 8px;
  }

  .achievement-icon {
    font-size: 1.5rem;
  }

  .achievement-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
  }

  .tech-categories {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 30px 0;
  }

  .tech-category h3 {
    margin: 0 0 15px 0;
    font-size: 1.3rem;
  }

  .tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .tech-tag {
    padding: 5px 12px;
    border: 1px solid;
    border-radius: 20px;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
  }

  .tech-tag:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
  }

  .philosophy-points {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
  }

  .philosophy-point {
    color: var(--text-secondary);
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border-left: 4px solid var(--primary-green);
  }

  .content-footer {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--terminal-border);
  }

  .footer-cta {
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--terminal-border);
    border-radius: 12px;
    padding: 30px;
  }

  .footer-cta h3 {
    color: var(--primary-green);
    margin: 0 0 10px 0;
  }

  .footer-cta p {
    color: var(--text-secondary);
    margin: 0 0 20px 0;
  }

  .cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
  }

  .cta-btn {
    padding: 12px 24px;
    border: 2px solid;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
  }

  .cta-btn.primary {
    background: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--bg-dark);
  }

  .cta-btn.secondary {
    background: transparent;
    border-color: var(--secondary-pink);
    color: var(--secondary-pink);
  }

  .cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }

  /* Адаптивность */
  @media (max-width: 768px) {
    .about-page {
      height: auto;
      min-height: 100vh;
    }

    .content-scroll {
      padding: 20px;
    }

    .section-header h1 {
      font-size: 2rem;
    }

    .vision-grid, .values-grid {
      grid-template-columns: 1fr;
    }

    .cta-buttons {
      flex-direction: column;
    }

    .timeline-item {
      flex-direction: column;
    }

    .timeline-marker {
      flex-direction: row;
      margin-bottom: 10px;
    }

    .marker-line {
      width: 100%;
      height: 2px;
      margin: 0 10px;
    }
  }
</style>