---

// Архитектура глобального ядра интернет-магазина
let cart = JSON.parse(localStorage.getItem('moto_cart')) || [];

document.addEventListener("DOMContentLoaded", () => {
    injectCartHTML();
    updateCart();
});

function injectCartHTML() {
    const container = document.getElementById('cart-container');
    if (!container) return;

    container.innerHTML = `
        <div id="cart-sidebar" class="fixed inset-y-0 right-0 w-full max-w-md bg-slate-950 shadow-2xl z-50 transform translate-x-full transition duration-300 ease-in-out border-l border-slate-800 flex flex-col">
            <div class="p-6 border-b border-slate-800 flex items-center justify-between">
                <h3 class="text-xl font-bold text-white flex items-center gap-2">
                    <i class="fa-solid fa-basket-shopping text-amber-500"></i> Корзина покупателя
                </h3>
                <button onclick="toggleCart()" class="text-slate-400 hover:text-white text-2xl cursor-pointer"><i class="fa-solid fa-xmark"></i></button>
            </div>
            <div id="cart-items" class="p-6 flex-1 overflow-y-auto space-y-4"></div>
            <div class="p-6 border-t border-slate-800 bg-slate-900/50">
                <div class="flex justify-between text-lg font-bold mb-6">
                    <span>Сумма:</span>
                    <span id="cart-total" class="text-amber-500">0 ₽</span>
                </div>
                <button onclick="openCheckout()" id="checkout-btn" class="w-full bg-amber-500 hover:bg-amber-600 disabled:bg-slate-800 disabled:text-slate-500 text-slate-950 py-4 rounded-xl font-bold text-center block transition cursor-pointer" disabled>
                    Оформить предзаказ
                </button>
            </div>
        </div>

        <div id="checkout-modal" class="fixed inset-0 bg-black/80 z-50 hidden flex items-center justify-center p-4">
            <div class="bg-slate-950 border border-slate-800 rounded-2xl max-w-md w-full p-8 relative">
                <button onclick="closeCheckout()" class="absolute top-4 right-4 text-slate-400 hover:text-white text-xl cursor-pointer"><i class="fa-solid fa-xmark"></i></button>
                <h3 class="text-2xl font-bold text-white mb-4">Оформление</h3>
                <form id="order-form" onsubmit="submitOrder(event)" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-400 mb-1">ФИО</label>
                        <input type="text" required class="w-full bg-slate-900 border border-slate-700 rounded-lg px-4 py-2.5 text-white focus:border-amber-500 focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-400 mb-1">Телефон</label>
                        <input type="tel" placeholder="+7" required class="w-full bg-slate-900 border border-slate-700 rounded-lg px-4 py-2.5 text-white focus:border-amber-500 focus:outline-none">
                    </div>
                    <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold py-3.5 rounded-lg mt-4 cursor-pointer transition">
                        Подтвердить заказ
                    </button>
                </form>
            </div>
        </div>
    `;
}

function toggleCart() {
    const sidebar = document.getElementById('cart-sidebar');
    if(sidebar) sidebar.classList.toggle('translate-x-full');
}

function addToCart(id, name, price) {
    const cartItem = cart.find(item => item.id === id);
    if (cartItem) {
        cartItem.quantity++;
    } else {
        cart.push({ id, name, price, quantity: 1 });
    }
    saveAndRefresh();
}

function changeQuantity(id, delta) {
    const item = cart.find(item => item.id === id);
    if (item) {
        item.quantity += delta;
        if (item.quantity <= 0) {
            cart = cart.filter(i => i.id !== id);
        }
    }
    saveAndRefresh();
}

function saveAndRefresh() {
    localStorage.setItem('moto_cart', JSON.stringify(cart));
    updateCart();
}

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';
        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 onclick="changeQuantity(${item.id}, -1)" class="px-2 py-0.5 bg-slate-950 text-slate-400 rounded cursor-pointer hover:text-white">-</button>
                <span class="text-sm font-bold text-white min-w-[16px] text-center">${item.quantity}</span>
                <button onclick="changeQuantity(${item.id}, 1)" class="px-2 py-0.5 bg-slate-950 text-slate-400 rounded cursor-pointer hover:text-white">+</button>
            </div>
        `;
        itemsContainer.appendChild(row);
    });

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

function openCheckout() {
    toggleCart();
    document.getElementById('checkout-modal').classList.remove('hidden');
}

function closeCheckout() {
    document.getElementById('checkout-modal').classList.add('hidden');
}

function submitOrder(e) {
    e.preventDefault();
    alert('Заявка успешно отправлена! Наш менеджер свяжется с вами.');
    cart = [];
    saveAndRefresh();
    closeCheckout();
    document.getElementById('order-form').reset();
}