// Digital Background Initialization
// Обновляем функцию для интеграции с темной темой
function updateBackgroundForTheme() {
  const isDarkMode = document.body.classList.contains('dark-mode');
  const binaryDigits = document.querySelectorAll('.binary-digit');
  const floatingCode = document.querySelectorAll('.floating-code');
  const connectionNodes = document.querySelectorAll('.connection-node');
  const dataFlows = document.querySelectorAll('.data-flow');
  
  // Обновляем цвета элементов в реальном времени
  const accentColor = isDarkMode ? 'rgba(41, 128, 185, 0.8)' : 'rgba(0, 123, 255, 0.8)';
  
  binaryDigits.forEach(digit => {
    digit.style.color = accentColor;
  });
  
  floatingCode.forEach(code => {
    code.style.color = accentColor;
  });
  
  connectionNodes.forEach(node => {
    node.style.background = accentColor;
  });
  
  dataFlows.forEach(flow => {
    flow.style.background = `linear-gradient(90deg, transparent, ${accentColor}, transparent)`;
  });
}

// Create binary rain effect
function createBinaryRain() {
  const container = document.createElement('div');
  container.className = 'binary-rain';
  document.body.appendChild(container);

  // Создаем больше потоков для полного покрытия
  for (let i = 0; i < 15; i++) { // Увеличиваем количество потоков
    setTimeout(() => {
      createBinaryStream(container);
    }, i * 150);
  }
}

function createBinaryStream(container) {
  const stream = document.createElement('div');
  stream.className = 'binary-stream';
  // Распределяем потоки по всей ширине экрана
  const left = Math.random() * 100;
  stream.style.left = `${left}%`;
  stream.style.position = 'absolute';
  stream.style.width = 'auto';
  
  // Создаем больше цифр в каждом потоке
  for (let i = 0; i < 15; i++) {
    const digit = document.createElement('div');
    digit.className = 'binary-digit';
    digit.textContent = Math.random() > 0.5 ? '1' : '0';
    digit.style.position = 'absolute';
    digit.style.left = '0';
    digit.style.top = `${-i * 50}px`; // Увеличиваем расстояние между цифрами
    digit.style.animationDuration = `${2 + Math.random() * 3}s`; // Быстрее анимация
    digit.style.animationDelay = `${i * 0.15}s`;
    digit.style.opacity = `${0.3 + Math.random() * 0.7}`; // Разная прозрачность
    digit.style.fontSize = `${12 + Math.random() * 8}px`; // Разный размер шрифта
    stream.appendChild(digit);
  }
  
  container.appendChild(stream);
}

// Create floating code elements
function createFloatingCode() {
  const symbols = ['{', '}', '<>', '();', '[]', '</>', '=>', '&&', 'function', 'const', 'let', 'var', 'class', 'import', 'export', 'return'];
  const classes = ['code-bracket', 'code-parenthesis', 'code-brace', 'code-tag'];
  
  // Создаем больше плавающих элементов
  for (let i = 0; i < 25; i++) {
    const symbol = symbols[Math.floor(Math.random() * symbols.length)];
    const element = document.createElement('div');
    element.className = `floating-code ${classes[Math.floor(Math.random() * classes.length)]}`;
    element.textContent = symbol;
    element.style.left = `${Math.random() * 100}%`;
    element.style.top = `${Math.random() * 100}%`;
    element.style.animationDuration = `${20 + Math.random() * 20}s`;
    element.style.fontSize = `${10 + Math.random() * 6}px`;
    element.style.opacity = `${0.05 + Math.random() * 0.1}`;
    document.body.appendChild(element);
  }
}

// Create connection nodes
function createConnectionNodes() {
  for (let i = 0; i < 20; i++) {
    const node = document.createElement('div');
    node.className = 'connection-node';
    node.style.left = `${Math.random() * 100}%`;
    node.style.top = `${Math.random() * 100}%`;
    node.style.animationDelay = `${Math.random() * 4}s`;
    node.style.width = `${4 + Math.random() * 6}px`;
    node.style.height = node.style.width;
    document.body.appendChild(node);
  }
}

// Create data flow lines
function createDataFlows() {
  for (let i = 0; i < 12; i++) {
    const flow = document.createElement('div');
    flow.className = 'data-flow';
    flow.style.top = `${Math.random() * 100}%`;
    flow.style.width = `${40 + Math.random() * 50}%`;
    flow.style.left = `${-Math.random() * 30}%`;
    flow.style.animationDuration = `${5 + Math.random() * 10}s`;
    flow.style.animationDelay = `${Math.random() * 8}s`;
    flow.style.height = `${1 + Math.random() * 2}px`;
    document.body.appendChild(flow);
  }
}

// Initialize digital background with theme integration
document.addEventListener('DOMContentLoaded', function() {
  // Сначала создаем элементы
  createBinaryRain();
  createFloatingCode();
  createConnectionNodes();
  createDataFlows();
  
  // Затем настраиваем наблюдение за темой
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.attributeName === 'class') {
        setTimeout(updateBackgroundForTheme, 100); // Небольшая задержка для применения стилей
      }
    });
  });
  
  observer.observe(document.body, {
    attributes: true,
    attributeFilter: ['class']
  });
  
  // Инициализируем цвета при загрузке
  setTimeout(updateBackgroundForTheme, 500);
});

// Также обновляем тему при переключении
function toggleTheme() {
  document.body.classList.toggle('dark-mode');
  const btn = document.querySelector('.theme-toggle');
  
  if (document.body.classList.contains('dark-mode')) {
    btn.textContent = '☀️ Светлая тема';
    localStorage.setItem('theme', 'dark');
  } else {
    btn.textContent = '🌙 Темная тема';
    localStorage.setItem('theme', 'light');
  }
  
  // Обновляем фон после переключения темы
  setTimeout(updateBackgroundForTheme, 100);
}

// Загрузка темы при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
  const savedTheme = localStorage.getItem('theme');
  const btn = document.querySelector('.theme-toggle');
  
  if (savedTheme === 'dark') {
    document.body.classList.add('dark-mode');
    btn.textContent = '☀️ Светлая тема';
  } else {
    btn.textContent = '🌙 Темная тема';
  }
});