---

// 1. Инициализация корзины
let cart = JSON.parse(localStorage.getItem('moto_cart')) || [];

// Ждем загрузку страницы
document.addEventListener("DOMContentLoaded", () => {
    updateCart();
    
    // Автоматически вешаем открытие/закрытие на иконку корзины и крестик
    const cartToggle = document.getElementById('cart-toggle');
    const closeCart = document.getElementById('close-cart');
    
    if (cartToggle) {
        cartToggle.addEventListener('click', toggleCart);
    }
    if (closeCart) {
        closeCart.addEventListener('click', toggleCart);
    }
});

// 2. Функция открытия / закрытия шторки корзины
function toggleCart() {
    const sidebar = document.getElementById('cart-sidebar');
    if (sidebar) {
        sidebar.classList.toggle('translate-x-full');
    }
}

// 3. Добавление товара в корзину
function addToCart(id, name, price) {
    // Приводим ID к строке, чтобы точно не было конфликтов типов данных
    const productId = String(id);
    const cartItem = cart.find(item => String(item.id) === productId);
    
    if (cartItem) {
        cartItem.quantity++;
    } else {
        cart.push({ 
            id: productId, 
            name: name, 
            price: Number(price), 
            quantity: 1 
        });
    }
    saveAndRefresh();
    
    // Сразу открываем корзину, чтобы пользователь видел, что товар добавился
    const sidebar = document.getElementById('cart-sidebar');
    if (sidebar && sidebar.classList.contains('translate-x-full')) {
        sidebar.classList.remove('translate-x-full');
    }
}

// 4. Изменение количества (+ и -)
function changeQuantity(id, delta) {
    const productId = String(id);
    const item = cart.find(i => String(i.id) === productId);
    
    if (item) {
        item.quantity += delta;
        if (item.quantity <= 0) {
            cart = cart.filter(i => String(i.id) !== productId);
        }
        saveAndRefresh();
    }
}

// 5. Сохранение и перерисовка
function saveAndRefresh() {
    localStorage.setItem('moto_cart', JSON.stringify(cart));
    updateCart();
}

// 6. Обновление интерфейса корзины
function updateCart() {
    const itemsContainer = document.getElementById('cart-items');
    const countBadge = document.getElementById('cart-count');
    const totalContainer = document.getElementById('cart-total');
    const checkoutBtn = document.getElementById('checkout-btn');

    if (!itemsContainer) return;

    itemsContainer.innerHTML = '';
    let total = 0;
    let count = 0;

    cart.forEach(item => {
        total += item.price * item.quantity;
        count += item.quantity;

        const row = document.createElement('div');
        row.className = 'flex items-center justify-between bg-slate-900 p-4 rounded-xl border border-slate-800/40 mb-2';
        
        // Передаем item.id как строку в кавычках внутри onclick, чтобы JS не ломался на текстовых ID (например, 'enduro-yamaha')
        row.innerHTML = `
            <div class="flex-1 min-w-0 pr-2">
                <h4 class="text-white font-bold text-sm truncate">${item.name}</h4>
                <p class="text-amber-500 text-xs mt-1">${(item.price * item.quantity).toLocaleString()} ₽</p>
            </div>
            <div class="flex items-center gap-2">
                <button type="button" onclick="changeQuantity('${item.id}', -1)" class="px-2 py-0.5 bg-slate-950 text-slate-400 rounded hover:text-white transition font-bold cursor-pointer">-</button>
                <span class="text-sm font-bold text-white min-w-[16px] text-center">${item.quantity}</span>
                <button type="button" onclick="changeQuantity('${item.id}', 1)" class="px-2 py-0.5 bg-slate-950 text-slate-400 rounded hover:text-white transition font-bold cursor-pointer">+</button>
            </div>
        `;
        itemsContainer.appendChild(row);
    });

    if (countBadge) countBadge.innerText = count;
    if (totalContainer) totalContainer.innerText = total.toLocaleString() + ' ₽';
    if (checkoutBtn) checkoutBtn.disabled = cart.length === 0;
}

// 7. Оформление заказа
function openCheckout() {
    let modal = document.getElementById('checkout-modal');
    if (!modal) {
        modal = document.createElement('div');
        modal.id = 'checkout-modal';
        document.body.appendChild(modal);
    }
    
    modal.className = "fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 backdrop-blur-sm p-4 text-slate-100 font-sans";

    let finalCount = 0;
    let finalPrice = 0;
    
    cart.forEach(item => {
        finalCount += item.quantity;
        finalPrice += item.price * item.quantity;
    });

    modal.innerHTML = `
        <div class="bg-slate-900 border border-slate-800 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl">
            <div class="bg-slate-950 px-6 py-4 border-b border-slate-800 flex items-center justify-between">
                <h2 class="text-xl font-black text-white uppercase tracking-tight">Оформление предзаказа</h2>
                <button type="button" onclick="closeCheckoutModal()" class="text-slate-400 hover:text-white transition cursor-pointer text-xl p-1">✕</button>
            </div>

            <form id="checkout-form" onsubmit="submitOrder(event)" class="p-6 space-y-4">
                <div class="bg-slate-950 p-4 rounded-xl border border-slate-800/50 text-sm">
                    <div class="flex justify-between mb-1">
                        <span class="text-slate-400">Выбрано товаров:</span>
                        <span class="text-white font-bold">${finalCount} шт.</span>
                    </div>
                    <div class="flex justify-between items-center border-t border-slate-800/60 pt-2 mt-2">
                        <span class="text-slate-400 font-bold">Итого к оплате:</span>
                        <span class="text-amber-500 font-black text-lg">${finalPrice.toLocaleString()} ₽</span>
                    </div>
                </div>

                <div>
                    <label class="block text-xs text-slate-400 uppercase font-bold mb-1.5">Ваше имя *</label>
                    <input type="text" required placeholder="Иван Иванов" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition">
                </div>

                <div>
                    <label class="block text-xs text-slate-400 uppercase font-bold mb-1.5">Номер телефона *</label>
                    <input type="tel" required placeholder="+7 (999) 000-00-00" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition">
                </div>

                <div class="pt-4">
                    <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-slate-950 py-3.5 rounded-xl font-black uppercase text-sm transition cursor-pointer">
                        Подтвердить предзаказ
                    </button>
                </div>
            </form>
        </div>
    `;
    modal.classList.remove('hidden');
}

function closeCheckoutModal() {
    const modal = document.getElementById('checkout-modal');
    if (modal) modal.classList.add('hidden');
}

function submitOrder(event) {
    if (event) event.preventDefault();
    alert('Успешно! Ваш предзаказ принят.');
    cart = [];
    saveAndRefresh();
    closeCheckoutModal();
}