sozday-sayt-magazin-naimenov/script.js

const products = [
  {
    id: 1,
    title: 'LED-лампа E27 10W',
    category: 'home',
    price: 2500,
    description: 'Классическая светодиодная лампа для дома, теплый белый свет 2700K',
    image: 'https://images.unsplash.com/photo-1550989460-0adf9ea622e2?w=400&h=400&fit=crop'
  },
  {
    id: 2,
    title: 'LED-лампа E27 15W',
    category: 'home',
    price: 3200,
    description: 'Мощная лампа для больших помещений, дневной свет 4000K',
    image: 'https://images.unsplash.com/photo-1550989460-0adf9ea622e2?w=400&h=400&fit=crop'
  },
  {
    id: 3,
    title: 'LED-лампа E14 8W',
    category: 'home',
    price: 2100,
    description: 'Компактная лампа с цоколем E14 для бра и светильников',
    image: 'https://images.unsplash.com/photo-1595411425754-9e91d0a6e899?w=400&h=400&fit=crop'
  },
  {
    id: 4,
    title: 'Потолочный светильник',
    category: 'home',
    price: 15900,
    description: 'Современный потолочный светильник для гостиной и зала',
    image: 'https://images.unsplash.com/photo-1513506003011-3b03c80165bd?w=400&h=400&fit=crop'
  },
  {
    id: 5,
    title: 'Настенный бра',
    category: 'home',
    price: 8900,
    description: 'Элегантный настенный светильник для спальни и коридора',
    image: 'https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w=400&h=400&fit=crop'
  },
  {
    id: 6,
    title: 'Настольная лампа',
    category: 'home',
    price: 12500,
    description: 'Рабочая лампа с регулируемой яркостью и цветовой температурой',
    image: 'https://images.unsplash.com/photo-1534073828943-f801091a7d58?w=400&h=400&fit=crop'
  },
  {
    id: 7,
    title: 'Люстра LED',
    category: 'home',
    price: 45000,
    description: 'Роскошная люстра с LED-подсветкой для гостиной',
    image: 'https://images.unsplash.com/photo-1543512214-318c77a07298?w=400&h=400&fit=crop'
  },
  {
    id: 8,
    title: 'Торшер напольный',
    category: 'home',
    price: 28900,
    description: 'Стильный напольный торшер с регулируемым светом',
    image: 'https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w=400&h=400&fit=crop'
  },
  {
    id: 9,
    title: 'Уличный прожектор 50W',
    category: 'outdoor',
    price: 18900,
    description: 'Влагозащищенный прожектор для улицы, IP65',
    image: 'https://images.unsplash.com/photo-1565814329452-e1efa11c5b89?w=400&h=400&fit=crop'
  },
  {
    id: 10,
    title: 'Садовый фонарь',
    category: 'outdoor',
    price: 6500,
    description: 'Декоративный фонарь для сада и участка на солнечной батарее',
    image: 'https://images.unsplash.com/photo-1585314062604-1a357de8b000?w=400&h=400&fit=crop'
  },
  {
    id: 11,
    title: 'Уличный светильник',
    category: 'outdoor',
    price: 22000,
    description: 'Антивандальный светильник для фасада и подъезда',
    image: 'https://images.unsplash.com/photo-1565814329452-e1efa11c5b89?w=400&h=400&fit=crop'
  },
  {
    id: 12,
    title: 'Прожектор уличный 100W',
    category: 'outdoor',
    price: 35000,
    description: 'Мощный прожектор для освещения больших площадей и парковок',
    image: 'https://images.unsplash.com/photo-1565814329452-e1efa11c5b89?w=400&h=400&fit=crop'
  },
  {
    id: 13,
    title: 'Smart лампа WiFi',
    category: 'smart',
    price: 8900,
    description: 'Умная лампа с управлением со смартфона через WiFi',
    image: 'https://images.unsplash.com/photo-1550989460-0adf9ea622e2?w=400&h=400&fit=crop'
  },
  {
    id: 14,
    title: 'Smart лампа RGB',
    category: 'smart',
    price: 11500,
    description: 'Цветная умная лампа с 16 млн оттенков и пультом',
    image: 'https://images.unsplash.com/photo-1550989460-0adf9ea622e2?w=400&h=400&fit=crop'
  },
  {
    id: 15,
    title: 'Smart лампа Alexa',
    category: 'smart',
    price: 13900,
    description: 'Голосовое управление через Alexa и Google Home',
    image: 'https://images.unsplash.com/photo-1550989460-0adf9ea622e2?w=400&h=400&fit=crop'
  },
  {
    id: 16,
    title: 'Smart лента LED',
    category: 'smart',
    price: 9500,
    description: 'Умная светодиодная лента 5 метров с контроллером',
    image: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop'
  },
  {
    id: 17,
    title: 'Прожектор промышленный',
    category: 'spot',
    price: 55000,
    description: 'Промышленный прожектор для складов и цехов 200W',
    image: 'https://images.unsplash.com/photo-1565814329452-e1efa11c5b89?w=400&h=400&fit=crop'
  },
  {
    id: 18,
    title: 'Прожектор точечный',
    category: 'spot',
    price: 4500,
    description: 'Точечный светильник для акцентной подсветки интерьера',
    image: 'https://images.unsplash.com/photo-1565814329452-e1efa11c5b89?w=400&h=400&fit=crop'
  },
  {
    id: 19,
    title: 'Трековый светильник',
    category: 'spot',
    price: 12900,
    description: 'Трековый светильник для магазинов и выставок',
    image: 'https://images.unsplash.com/photo-1565814329452-e1efa11c5b89?w=400&h=400&fit=crop'
  },
  {
    id: 20,
    title: 'Прожектор светодиодный 30W',
    category: 'spot',
    price: 8900,
    description: 'Компактный светодиодный прожектор для дома и дачи',
    image: 'https://images.unsplash.com/photo-1565814329452-e1efa11c5b89?w=400&h=400&fit=crop'
  }
];

let cart = [];

function init() {
  renderProducts('all');
  setupFilter();
  setupCart();
  setupCheckout();
  loadCart();
}

function renderProducts(category) {
  const grid = document.getElementById('productsGrid');
  const filtered = category === 'all' 
    ? products 
    : products.filter(p => p.category === category);
  
  grid.innerHTML = filtered.map(product => `
    <div class="product-card" data-id="${product.id}">
      <div class="product-image">
        <img src="${product.image}" alt="${product.title}" style="width: 100%; height: 100%; object-fit: cover;">
      </div>
      <div class="product-info">
        <div class="product-category">${getCategoryName(product.category)}</div>
        <h3 class="product-title">${product.title}</h3>
        <p class="product-description">${product.description}</p>
        <div class="product-footer">
          <span class="product-price">${formatPrice(product.price)}</span>
          <button class="btn-add" onclick="addToCart(${product.id})">Купить</button>
        </div>
      </div>
    </div>
  `).join('');
}

function getCategoryName(cat) {
  const names = {
    home: 'Для дома',
    outdoor: 'Уличные',
    smart: 'Умные',
    spot: 'Прожекторы'
  };
  return names[cat] || cat;
}

function formatPrice(price) {
  return price.toLocaleString('ru-RU') + ' ₸';
}

function setupFilter() {
  const buttons = document.querySelectorAll('.filter-btn');
  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      buttons.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      renderProducts(btn.dataset.category);
    });
  });
}

function setupCart() {
  const cartBtn = document.getElementById('cartBtn');
  const cartModal = document.getElementById('cartModal');
  const cartClose = document.getElementById('cartClose');
  const cartOverlay = cartModal.querySelector('.cart-overlay');
  
  cartBtn.addEventListener('click', () => {
    renderCart();
    cartModal.classList.add('active');
  });
  
  cartClose.addEventListener('click', () => {
    cartModal.classList.remove('active');
  });
  
  cartOverlay.addEventListener('click', () => {
    cartModal.classList.remove('active');
  });
}

function addToCart(productId) {
  const product = products.find(p => p.id === productId);
  const existing = cart.find(item => item.id === productId);
  
  if (existing) {
    existing.quantity++;
  } else {
    cart.push({ ...product, quantity: 1 });
  }
  
  saveCart();
  updateCartCount();
  showNotification('Товар добавлен в корзину');
}

function removeFromCart(productId) {
  cart = cart.filter(item => item.id !== productId);
  saveCart();
  renderCart();
  updateCartCount();
}

function updateQuantity(productId, delta) {
  const item = cart.find(i => i.id === productId);
  if (item) {
    item.quantity += delta;
    if (item.quantity <= 0) {
      removeFromCart(productId);
    } else {
      saveCart();
      renderCart();
      updateCartCount();
    }
  }
}

function renderCart() {
  const cartItems = document.getElementById('cartItems');
  const cartTotal = document.getElementById('cartTotal');
  
  if (cart.length === 0) {
    cartItems.innerHTML = '<p style="text-align: center; color: var(--gray-dark); padding: 40px;">Корзина пуста</p>';
    cartTotal.textContent = '0 ₸';
    return;
  }
  
  cartItems.innerHTML = cart.map(item => `
    <div class="cart-item">
      <div class="cart-item-image">
        <img src="${item.image}" alt="${item.title}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px;">
      </div>
      <div class="cart-item-info">
        <div class="cart-item-title">${item.title}</div>
        <div class="cart-item-price">${formatPrice(item.price)}</div>
        <div class="cart-item-quantity">
          <button class="qty-btn" onclick="updateQuantity(${item.id}, -1)">−</button>
          <span>${item.quantity} шт.</span>
          <button class="qty-btn" onclick="updateQuantity(${item.id}, 1)">+</button>
        </div>
      </div>
      <button class="cart-item-remove" onclick="removeFromCart(${item.id})">&times;</button>
    </div>
  `).join('');
  
  const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
  cartTotal.textContent = formatPrice(total);
}

function updateCartCount() {
  const count = cart.reduce((sum, item) => sum + item.quantity, 0);
  document.getElementById('cartCount').textContent = count;
}

function saveCart() {
  localStorage.setItem('ledray_cart', JSON.stringify(cart));
}

function loadCart() {
  const saved = localStorage.getItem('ledray_cart');
  if (saved) {
    cart = JSON.parse(saved);
    updateCartCount();
  }
}

function setupCheckout() {
  const checkoutBtn = document.getElementById('checkoutBtn');
  const checkoutModal = document.getElementById('checkoutModal');
  const checkoutClose = document.getElementById('checkoutClose');
  const checkoutOverlay = checkoutModal.querySelector('.checkout-overlay');
  const checkoutForm = document.getElementById('checkoutForm');
  const successModal = document.getElementById('successModal');
  const successClose = document.getElementById('successClose');
  const cartModal = document.getElementById('cartModal');
  
  checkoutBtn.addEventListener('click', () => {
    if (cart.length === 0) {
      showNotification('Корзина пуста');
      return;
    }
    renderOrderSummary();
    cartModal.classList.remove('active');
    checkoutModal.classList.add('active');
  });
  
  checkoutClose.addEventListener('click', () => {
    checkoutModal.classList.remove('active');
  });
  
  checkoutOverlay.addEventListener('click', () => {
    checkoutModal.classList.remove('active');
  });
  
  checkoutForm.addEventListener('submit', (e) => {
    e.preventDefault();
    checkoutModal.classList.remove('active');
    successModal.classList.add('active');
    cart = [];
    saveCart();
    updateCartCount();
  });
  
  successClose.addEventListener('click', () => {
    successModal.classList.remove('active');
  });
}

function renderOrderSummary() {
  const summary = document.getElementById('orderSummary');
  const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
  
  summary.innerHTML = `
    <h3>Ваш заказ</h3>
    <div style="margin-bottom: 15px;">
      ${cart.map(item => `
        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
          <span>${item.title} × ${item.quantity}</span>
          <span>${formatPrice(item.price * item.quantity)}</span>
        </div>
      `).join('')}
    </div>
    <div class="order-total">
      <span>Итого:</span>
      <span>${formatPrice(total)}</span>
    </div>
  `;
}

function showNotification(message) {
  const notification = document.createElement('div');
  notification.style.cssText = `
    position: fixed;
    top: 80px;
    right: 20px;
    background: var(--success);
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    z-index: 2000;
    animation: slideIn 0.3s ease;
  `;
  notification.textContent = message;
  document.body.appendChild(notification);
  
  setTimeout(() => {
    notification.remove();
  }, 2000);
}

window.addToCart = addToCart;
window.removeFromCart = removeFromCart;
window.updateQuantity = updateQuantity;

init();