Сделай пожалуйста анимацию для вкладки "Посмотреть детали". Сначала 2 секундная я задержка перед анимацией, после чего сверху вылетает ячейка с оперативной памятью, снизу видеокарта, слева процессор и мат плата, справа блок питания и корпус. И соответственно встают на место

html:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Revecor Store</title>
    <link rel="stylesheet" href="styles.css">
    <!-- Подключение шрифта -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div class="logo">Revecor Store</div>
        <div class="search-container">
            <input type="text" id="searchInput" placeholder="Поиск товаров...">
        </div>
        <div class="user-section" id="userSection">
            <button id="loginBtn">Вход / Регистрация</button>
        </div>
    </header>

    <div class="modal" id="authModal">
        <div class="modal-content">
            <span class="close" id="closeModal">&times;</span>
            <h2>Регистрация / Вход</h2>
            <form id="authForm">
                <label for="username">Логин:</label>
                <input type="text" id="username" name="username" required>
                
                <label for="password">Пароль:</label>
                <input type="password" id="password" name="password" required>
                
                <button type="submit" id="authSubmit">Войти</button>
            </form>
            <p id="authMessage"></p>
        </div>
    </div>

    <main>
        <nav class="tabs">
            <button class="tab-btn active" data-tab="ready">Готовые ПК</button>
            <button class="tab-btn" data-tab="custom">Собственная сборка</button>
            <button class="tab-btn" data-tab="details" style="display: none;">Комплектация ПК</button> <!-- Новая вкладка -->
            <button class="tab-btn" data-tab="contact">Контакты</button>
        </nav>

        <section id="ready" class="tab-content active">
            <div class="products-container" id="productsContainer">
                <!-- Динамическая подгрузка -->
            </div>
            <!-- Кнопка -->
            <button class="contact-button" id="contactButton" title="Контактная информация">
                <!-- Значок метки -->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="white"/>
                </svg>
            </button>
        </section>

        <section id="custom" class="tab-content">
            <div class="custom-build-container">
                <form id="customBuildForm">
                    <div class="component-select">
                        <label for="cpuSelect">Процессор:</label>
                        <select id="cpuSelect" data-category="CPU">
                            <option value="">Выберите Процессор</option>
                        </select>
                    </div>
                    <div class="component-select">
                        <label for="motherboardSelect">Материнская плата:</label>
                        <select id="motherboardSelect" data-category="Motherboard">
                            <option value="">Выберите Материнскую плату</option>
                        </select>
                    </div>
                    <div class="component-select">
                        <label for="ramSelect">Оперативная память:</label>
                        <select id="ramSelect" data-category="RAM">
                            <option value="">Выберите ОЗУ</option>
                        </select>
                    </div>
                    <div class="component-select">
                        <label for="gpuSelect">Видеокарта:</label>
                        <select id="gpuSelect" data-category="GPU">
                            <option value="">Выберите Видеокарту</option>
                        </select>
                    </div>
                    <div class="component-select">
                        <label for="psuSelect">Блок питания:</label>
                        <select id="psuSelect" data-category="PSU">
                            <option value="">Выберите Блок питания</option>
                        </select>
                    </div>
                    <div class="component-select">
                        <label for="caseSelect">Корпус:</label>
                        <select id="caseSelect" data-category="CASE">
                            <option value="">Выберите Корпус</option>
                        </select>
                    </div>
                </form>
                <div class="build-summary">
                    <p>Итого: <span id="totalPrice">0 руб</span></p>
                    <button id="makeOrderBtn">Сделать заказ</button>
                </div>
            </div>
        </section>

        <!-- Раздел для отображения комплектующих готового ПК -->
        <section id="details" class="tab-content">
            <div class="custom-build-container">
                <div class="components-grid" id="productComponentsGrid">
                    <!-- Ячейки для комплектующих готового ПК -->
                </div>
                <div class="build-summary">
                    <p>Итого: <span id="productTotalPrice">0 руб</span></p>
                    <button id="makeProductOrderBtn">Оформить заказ</button>
                </div>
            </div>
        </section>

        <section id="contact" class="tab-content">
            <div class="contact-container">
                <h1 class="contact-slogan">Лучшие сборки ПК на свете!</h1>
                <div class="map-container" id="yandexMap">
                    <script type="text/javascript" charset="utf-8" async
                        src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A4af11edc2e0214db403e3b3f6392ebfaa5126e5974127bad564da45414790671&amp;width=100%25&amp;height=450&amp;lang=ru_RU&amp;scroll=true">
                    </script>
                </div>
                <div class="contact-info">
                    <p>Адрес: г. Санкт-Петербург, Невский проспект, д. 22</p>
                    <p>Телефон: +7-123-456-78-90</p>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>ⓩ 1945-2024 Revecor Store. Администрация Сайта не несет ответственности за размещаемые материалы (в т.ч. информацию и изображения), их содержание и качество.</p>
    </footer>

    <!-- Уведомление -->
    <div id="notification"></div>

    <script src="script.js"></script>

</body>
</html>

css:
/* Общие стили */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #111;
    color: #eee;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
    border: 6px ridge #0f0;
    overflow: hidden;
}

.logo {
    font-size: 40px;
    color: #0f0;
}

.search-container input {
    padding: 5px;
    border: none;
    border-radius: 30px;
}

.user-section {
    position: relative;
}

.user-section button {
    padding: 5px 10px;
    background-color: #0f0;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.user-section span {
    color: #0f0;
    font-weight: bold;
}

main {
    padding: 20px;
}

.tabs {
    display: flex;
    margin-bottom: 20px;
}

.tab-btn {
    padding: 10px 20px;
    background-color: #222;
    border: none;
    color: #0f0;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    margin-right: 5px;
    border-radius: 3px;
}

.tab-btn:hover {
    background-color: #0a0;
    color: #fff;
}

.tab-btn.active {
    background-color: #0f0;
    color: #000;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.products-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.product {
    background-color: #222;
    padding: 10px;
    border-radius: 5px;
    width: calc(25% - 20px);
    box-sizing: border-box;
    text-align: center;
}

.product img {
    max-width: 60%;
    height: 384px;
    border-bottom: 3px solid #0f0;
    margin-bottom: 10px;
    object-fit: cover;
}

.product h3 {
    margin: 10px 0;
    color: #0f0;
}

.product button {
    padding: 5px 10px;
    background-color: #0f0;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    color: #000;
}

footer {
    text-align: center;
    font-size: 10px;
    padding: 20px;
    background-color: #000;
    color: #0f0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

/* Авторизация окно */
.modal {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.8); 
}

.modal-content {
    background-color: #141414;
    margin: 10% auto; 
    padding: 20px;
    border: 1px solid #0f0;
    width: 300px; 
    border-radius: 5px;
    color: #0f0;
}

.close {
    color: #0f0;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

form label {
    display: block;
    margin: 10px 0 5px;
}

form input, form select {
    width: 100%;
    padding: 5px;
    border: none;
    border-radius: 3px;
}

form button {
    margin-top: 15px;
    padding: 10px;
    width: 100%;
    background-color: #0f0;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    color: #000;
}

#authMessage {
    margin-top: 10px;
    color: #f00;
    text-align: center;
}

/* Стили для "Собственной сборки" */
.custom-build-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.component-select {
    margin-bottom: 15px;
    width: 100%;
    max-width: 400px;
}

.component-select label {
    display: block;
    margin-bottom: 5px;
    color: #0f0;
}

.component-select select {
    padding: 8px;
    border-radius: 3px;
    border: none;
    width: 100%;
}

.build-summary {
    margin-top: 20px;
    background-color: #222;
    padding: 20px;
    border: 2px solid #0f0;
    border-radius: 5px;
    color: #0f0;
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.build-summary p {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.build-summary button {
    padding: 10px 20px;
    background-color: #0f0;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    color: #000;
    font-size: 16px;
}

.build-summary button:hover {
    background-color: #0a0;
}

/* Стили для уведомления */
#notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #4CAF50; /* Зеленый цвет */
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateY(20px);
    z-index: 3000;
}

#notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* Стили для "Комплектация ПК" */
.components-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.component-cell {
    background-color: rgba(0, 255, 0, 0.671);
    border: 2px solid rgb(0, 145, 0);
    border-radius: 5px;
    padding: 10px;
    width: 150px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Выровнять содержимое по нижнему краю */
    text-align: center;
}

.component-cell img {
    max-width: 100%;
    height: 150px;
    margin-bottom: 5px;
    object-fit: cover;
}

.component-cell .component-name {
    color: #000;
    font-weight: bold;
}

.contact-button:hover {
    background-color: #0a0;
    color: #fff;
}

/* Показать кнопку только на вкладке "Готовые ПК" */
#ready.active .contact-button {
    display: block;
}

.contact-button {
    position: fixed; /* Фиксированная позиция */
    bottom: 30px; /* Расположение снизу */
    right: 30px; /* Расположение справа */
    width: 60px;
    height: 60px;
    background-color: #0f0;
    border: none;
    border-radius: 50%; /* Круглая форма */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Поверх остальных элементов */
}

.contact-button:hover {
    background-color: #0c0; /* Темнее при наведении */
    transform: scale(1.1); /* Немного увеличивается при наведении */
}

.contact-button svg {
    width: 24px;
    height: 24px;
    fill: white; /* Белый цвет иконки */
}

/* Стили для "Контактной информации" */
.contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

.contact-slogan {
    font-size: 36px;
    color: #0f0;
    text-align: center;
    margin-bottom: 30px;
    font-family: 'Arial Black', Gadget, sans-serif;
}

.contact-slogan {
    font-family: 'Roboto Slab', serif;
}

.map-container {
    width: 80%;
    height: 450px;
    margin-bottom: 30px;
    border: 8px ridge #0f0;
    border-radius: 10px;
    overflow: hidden;
}

.contact-info {
    font-size: 14px;
    color: #0f0;
    text-align: center;
    margin-top: 20px;
}

button[data-tab="contact"] {
    display: none;
}

button[data-tab="details"] {
    display: none;
}

js:
// Список готовых ПК с комплектующими
const products = [
    {
        id: 1,
        name: "Thunder spear",
        image: "https://www.1stplayer.com/uploads/images/20201023/b85c7a696f245f6e82415b24832bf0cf.png",
        price: 150000,
        category: "PC", 
        components: {
            "CPU": { name: "Intel core ultra 5", image: "https://r2p.com.ua/content/images/41/protsesor-intel-core-ultra-5-245k-bx80768245k-64139805826454_+0d6d2747a2.png", price: 16000 },
            "Motherboard": { name: "ASUS Z990 Gaming", image: "https://dlcdnwebimgs.asus.com/gain/06c30b53-c697-4c79-a567-8ae099943f1c/w800", price: 12000 },
            "RAM": { name: "GSkill 32GB DDR5", image: "https://images.1a.lv/display/aikido/cache/7e415e0532139638f14ae5f1a40c08ee.png", price: 8000 },
            "GPU": { name: "NVIDIA RTX 4070 SUPER", image: "https://24.lv/images/detailed/870/600_a2ba-d9.png", price: 20000 },
            "PSU": { name: "Cougar GEX950 80+", image: "https://spbsis.ru/wa-data/public/shop/products/27/35/53527/images/110618/110618.420.png", price: 20000 },
            "CASE": { name: "MONTECH KING 95 PRO Full-Tower", image: "https://www.1stplayer.com/uploads/images/20201023/b85c7a696f245f6e82415b24832bf0cf.png", price: 17000 }
        }
    },
    {
        id: 2,
        name: "GAMING Capitan PRO",
        image: "https://www.lyambda.com/wp-content/uploads/2023/03/L-GM1738-BK_1-p-s.png.webp",
        price: 100000,
        category: "PC",
        components: {
            "CPU": { name: "AMD Ryzen 7", image: "https://cdn0.it4profit.com/s3size/rt:fill/w:900/h:900/g:no/el:1/f:webp/plain/s3://cms/product/0d/3f/0d3fd3857ded8a62bed53d1f1c224058/240912140040010910.webp", price: 22000 },
            "Motherboard": { name: "MSI B650 WIFI PLUS", image: "https://asset.msi.com/resize/image/global/product/product_16647820029d01ca38195280b73c7eb1a9d602e855.png62405b38c58fe0f07fcef2367d8a9ba1/600.png", price: 13000 },
            "RAM": { name: "ADATA Lancer 32GB DDR5", image: "https://pcbelfast.co.uk/wp-content/uploads/2023/10/XPG-LANCER.png", price: 15000 },
            "GPU": { name: "NVIDIA RTX 4060", image: "https://i.ebayimg.com/images/g/~uoAAOSwtFZkpmcS/s-l1200.png", price: 35000 },
            "PSU": { name: "DEEPCOOL PF750 Bronze 80+", image: "https://royal-computers.ru/upload/thumbs/catalog/source/power_5e4e84.png", price: 35000 },
            "CASE": { name: "DEEPCOOL CK560 Mid-Tower", image: "https://www.lyambda.com/wp-content/uploads/2023/03/L-GM1738-BK_1-p-s.png.webp", price: 9600 }
        }
    },
    {
        id: 3,
        name: "Infinity X-101",
        image: "https://cougargaming.com/_cgrwdr_/wwdpp/wp-content/uploads/2022/06/MX330-F-03.png",
        price: 80000,
        category: "PC",
        components: {
            "CPU": { name: "AMD Ryzen 5", image: "https://via.placeholder.com/100", price: 16000 },
            "Motherboard": { name: "ASUS A620 Gaming", image: "https://via.placeholder.com/100", price: 12000 },
            "RAM": { name: "GSkill 16GB DDR5", image: "https://via.placeholder.com/100", price: 8000 },
            "GPU": { name: "NVIDIA GTX 1660 SUPER", image: "https://via.placeholder.com/100", price: 20000 },
            "PSU": { name: "DEEPCOOL PF550 80+", image: "https://via.placeholder.com/100", price: 20000 },
            "CASE": { name: "MSI MAG FORGE M111R Mini-Tower", image: "https://via.placeholder.com/100", price: 6000 }
        }
    },
    {
        id: 4,
        name: "Steel Titan",
        image: "https://gamingpc.com.ua/image/cache/component-description/12de29b6595f86dec38a7e19a7bdfb1b-590.webp",
        price: 200000,
        category: "PC",
        components: {
            "CPU": { name: "AMD Ryzen 9", image: "https://via.placeholder.com/100", price: 22000 },
            "Motherboard": { name: "MSI X670 PREMIUM PLUS", image: "https://via.placeholder.com/100", price: 13000 },
            "RAM": { name: "KINGSTON FURY 32GB DDR5", image: "https://via.placeholder.com/100", price: 15000 },
            "GPU": { name: "NVIDIA RTX 4070 Ti SUPER", image: "https://via.placeholder.com/100", price: 35000 },
            "PSU": { name: "Cougar GEX950 80+ Gold", image: "https://via.placeholder.com/100", price: 35000 },
            "CASE": { name: "MONTECH KING 95 PRO Full-Tower", image: "https://via.placeholder.com/100", price: 17000 }
        }
    },
];

// Комплектующие для собственной сборки
const componentCategories = {
    "CPU": [
        {
            id: 1,
            name: "Intel core ultra 5",
            image: "https:// ",
            price: 16000
        },
        {
            id: 2,
            name: "AMD Ryzen 7",
            image: "https:// ",
            price: 22000
        }
    ],
    "Motherboard": [
        {
            id: 3,
            name: "ASUS A620 Gaming",
            image: "https:// ",
            price: 10000
        },
        {
            id: 4,
            name: "MSI B650 WIFI PLUS",
            image: "https:// ",
            price: 19000
        },
        {
            id: 14,
            name: "GIGABYTE H810",
            image: "https:// ",
            price: 9000
        },
        {
            id: 15,
            name: "ASUS Z890 ROG MAXIMUS",
            image: "https:// ",
            price: 26000
        }
    ],
    "RAM": [
        {
            id: 5,
            name: "GSkill 16GB DDR5",
            image: "https:// ",
            price: 8000
        },
        {
            id: 6,
            name: "ADATA Lancer 32GB DDR5",
            image: "https:// ",
            price: 15000
        }
    ],
    "GPU": [
        {
            id: 7,
            name: "NVIDIA GTX 1660 SUPER",
            image: "https:// ",
            price: 20000
        },
        {
            id: 8,
            name: "NVIDIA RTX 4060",
            image: "https:// ",
            price: 35000
        }
    ],
    "PSU": [
        {
            id: 9,
            name: "DEEPCOOL PF750 Bronze 80+",
            image: "https:// ",
            price: 20000
        },
        {
            id: 10,
            name: "Cougar GEX950 80+ Gold",
            image: "https:// ",
            price: 35000
        }
    ],
    "CASE": [
        {
            id: 11,
            name: "MONTECH KING 95 PRO Full-Tower",
            image: "https:// ",
            price: 17000
        },
        {
            id: 12,
            name: "DEEPCOOL CK560 Mid-Tower",
            image: "https:// ",
            price: 9600
        },
        {
            id: 13,
            name: "MSI MAG FORGE M111R Mini-Tower",
            image: "https:// ",
            price: 6000
        }
    ],
};

// Для хранения выбранных компонентов собственной сборки
let selectedComponents = {
    "CPU": null,
    "Motherboard": null,
    "RAM": null,
    "GPU": null,
    "PSU": null,
    "CASE": null
};

// Регистрация и авторизация
const authModal = document.getElementById('authModal');
const loginBtn = document.getElementById('loginBtn');
const closeModal = document.getElementById('closeModal');
const authForm = document.getElementById('authForm');
const authMessage = document.getElementById('authMessage');
const userSection = document.getElementById('userSection');

// Показываем окно
loginBtn.addEventListener('click', () => {
    authModal.style.display = 'block';
});

// Закрываем окно
closeModal.addEventListener('click', () => {
    authModal.style.display = 'none';
});

// Закрываем при клике вне окна
window.addEventListener('click', (e) => {
    if (e.target == authModal) {
        authModal.style.display = 'none';
    }
});

// Обработка формы авторизации
authForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const username = authForm.username.value.trim();
    const password = authForm.password.value.trim();

    if (!username || !password) {
        authMessage.textContent = "Пожалуйста, заполните все поля.";
        return;
    }

    // Получаем пользователей из localStorage
    let users = JSON.parse(localStorage.getItem('users')) || [];

    // Проверка, существует ли пользователь
    const user = users.find(u => u.username === username);

    if (user) {
        // Проверка пароля
        if (user.password === password) {
            // Успешный вход
            localStorage.setItem('currentUser', username);
            updateUserSection();
            authModal.style.display = 'none';
            authMessage.textContent = '';
        } else {
            authMessage.textContent = "Неверный пароль.";
        }
    } else {
        // Регистрация нового пользователя
        users.push({ username, password });
        localStorage.setItem('users', JSON.stringify(users));
        localStorage.setItem('currentUser', username);
        updateUserSection();
        authModal.style.display = 'none';
        authMessage.textContent = '';
    }
});

// Обновление секции пользователя
function updateUserSection() {
    const currentUser = localStorage.getItem('currentUser');
    if (currentUser) {
        userSection.innerHTML = `<span>Добро пожаловать, ${currentUser}</span> <button id="logoutBtn">Выйти</button>`;

        document.getElementById('logoutBtn').addEventListener('click', () => {
            localStorage.removeItem('currentUser');
            userSection.innerHTML = `<button id="loginBtn">Вход / Регистрация</button>`;
            document.getElementById('loginBtn').addEventListener('click', () => {
                authModal.style.display = 'block';
            });

            // Если пользователь вышел, скрываем вкладку "Комплектация ПК"
            const detailsTabButton = document.querySelector('.tab-btn[data-tab="details"]');
            if (detailsTabButton) {
                detailsTabButton.style.display = 'none';
            }
        });

        // Показываем вкладку "Комплектация ПК"
        const detailsTabButton = document.querySelector('.tab-btn[data-tab="details"]');
        if (detailsTabButton) {
            detailsTabButton.style.display = 'none';
        }
    } else {
        // Если пользователь вышел, скрываем вкладку "Комплектация ПК"
        const detailsTabButton = document.querySelector('.tab-btn[data-tab="details"]');
        if (detailsTabButton) {
            detailsTabButton.style.display = 'none';
        }
    }
}

// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', () => {
    updateUserSection();
    displayProducts(products);
    initializeCustomBuild();
});

// Переключение вкладок
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');

// Функция для переключения вкладок
function switchTab(tabName) {
    // Проверка авторизации для вкладки "details"
    if (tabName === "details" && !localStorage.getItem('currentUser')) {
        alert("Пожалуйста, выполните вход или зарегистрируйтесь для просмотра деталей и оформления заказа.");
        return;
    }

    // Удаляем активный класс у всех кнопок
    tabButtons.forEach(b => b.classList.remove('active'));

    // Добавляем активный класс соответствующей кнопке, если она существует
    const correspondingButton = document.querySelector(`.tab-btn[data-tab="${tabName}"]`);
    if (correspondingButton) {
        correspondingButton.classList.add('active');
    }

    // Скрываем все содержимые вкладок
    tabContents.forEach(content => content.classList.remove('active'));

    // Показываем выбранную вкладку
    const targetTab = document.getElementById(tabName);
    if (targetTab) {
        targetTab.classList.add('active');
    }
}

// Добавляем обработчики на кнопки вкладок
tabButtons.forEach(btn => {
    btn.addEventListener('click', () => {
        const activeTab = btn.getAttribute('data-tab');
        switchTab(activeTab);
    });
});

tabButtons.forEach(btn => {
    btn.addEventListener('click', () => {
        const activeTab = btn.getAttribute('data-tab');

        // Если пользователь не авторизован и пытается открыть "Комплектация ПК", показываем сообщение
        if (activeTab === "details" && !localStorage.getItem('currentUser')) {
            alert("Пожалуйста, выполните вход или зарегистрируйтесь для просмотра деталей и оформления заказа.");
            return;
        }

        // Удаляем активный класс у всех кнопок и добавляем текущей
        tabButtons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        // Скрываем все контенты и показываем нужный
        tabContents.forEach(content => content.classList.remove('active'));
        document.getElementById(activeTab).classList.add('active');
    });
});

// Отображение продуктов
function displayProducts(productList) {
    const container = document.getElementById('productsContainer');
    container.innerHTML = '';

    if (productList.length === 0) {
        container.innerHTML = '<p>Товары не найдены.</p>';
        return;
    }

    productList.forEach(product => {
        const div = document.createElement('div');
        div.classList.add('product');
        div.innerHTML = `
            <img src="${product.image}" alt="${product.name}">
            <h3>${product.name}</h3>
            <p>${product.price} руб</p>
            <button class="view-components-btn" data-id="${product.id}">Посмотреть комплектующие</button>
        `;
        container.appendChild(div);
    });

    // Добавляем обработчики для кнопок
    const viewButtons = document.querySelectorAll('.view-components-btn');
    viewButtons.forEach(button => {
        button.addEventListener('click', () => {
            const productId = parseInt(button.getAttribute('data-id'));
            showProductDetails(productId);
        });
    });
}

// Поиск товаров
const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', () => {
    const query = searchInput.value.toLowerCase();
    const filteredProducts = products.filter(p => p.name.toLowerCase().includes(query));
    displayProducts(filteredProducts);
});

/* Собственная сборка */

// Функция для отображения уведомлений
function showNotification(message) {
    let notification = document.getElementById('notification');
    if (!notification) {
        notification = document.createElement('div');
        notification.id = 'notification';
        document.body.appendChild(notification);
    }
    notification.textContent = message;
    notification.classList.add('show');
    setTimeout(() => {
        notification.classList.remove('show');
    }, 1500); // Убрать через 1.5 секунды
}

// Инициализация интерфейса собственной сборки
function initializeCustomBuild() {
    const customBuildForm = document.getElementById('customBuildForm');

    for (const category in componentCategories) {
        const select = customBuildForm.querySelector(`select[data-category="${category}"]`);
        if (select) {
            componentCategories[category].forEach(component => {
                const option = document.createElement('option');
                option.value = component.id;
                option.textContent = `${component.name} (${component.price} руб)`;
                select.appendChild(option);
            });

            // Добавляем обработчик изменения
            select.addEventListener('change', (e) => {
                const selectedId = parseInt(e.target.value);
                const selectedComp = componentCategories[category].find(c => c.id === selectedId) || null;
                selectedComponents[category] = selectedComp;
                updateTotalPrice();
                if (selectedComp) {
                    showNotification(`${category} выбрана: ${selectedComp.name}`);
                }
            });
        }
    }

    // Обработчик кнопки "Сделать заказ"
    const makeOrderBtn = document.getElementById('makeOrderBtn');
    makeOrderBtn.addEventListener('click', makeOrder);
}

// Обновление общей стоимости сборки
function updateTotalPrice() {
    let total = 0;
    Object.values(selectedComponents).forEach(comp => {
        if (comp) {
            total += comp.price;
        }
    });
    document.getElementById('totalPrice').textContent = `${total} руб`;
}

// Обработка заказа собственной сборки
function makeOrder() {
    // Проверяем, все ли компоненты выбраны (опционально)
    const allSelected = Object.values(selectedComponents).every(comp => comp !== null);
    if (!allSelected) {
        alert("Пожалуйста, выберите все необходимые компоненты для сборки.");
        return;
    }

    // Проверка авторизации пользователя
    const currentUser = localStorage.getItem('currentUser');
    if (!currentUser) {
        alert("Пожалуйста, выполните вход или зарегистрируйтесь для оформления заказа.");
        return;
    }

    // Пример сохранения заказа в localStorage
    let orders = JSON.parse(localStorage.getItem('orders')) || [];
    const order = {
        id: Date.now(),
        user: currentUser,
        type: 'Custom Build',
        components: { ...selectedComponents },
        price: Object.values(selectedComponents).reduce((sum, comp) => sum + (comp.price || 0), 0),
        date: new Date().toLocaleString()
    };
    orders.push(order);
    localStorage.setItem('orders', JSON.stringify(orders));

    alert("Заказ успешно сделан! С вами свяжется менеджер.");

    // Сброс сборки
    resetCustomBuild();
}

// Сброс собственной сборки
function resetCustomBuild() {
    selectedComponents = {
        "CPU": null,
        "Motherboard": null,
        "RAM": null,
        "GPU": null,
        "PSU": null,
        "CASE": null
    };
    const customBuildForm = document.getElementById('customBuildForm');
    customBuildForm.reset();
    updateTotalPrice();
}

// Отображение деталей выбранного ПК
function showProductDetails(productId) {
    const product = products.find(p => p.id === productId);
    if (!product) {
        alert("Продукт не найден.");
        return;
    }

    // Переключаемся на вкладку "Комплектация ПК"
    tabButtons.forEach(b => b.classList.remove('active'));
    const detailsTabButton = document.querySelector('.tab-btn[data-tab="details"]');
    //detailsTabButton.style.display = 'inline-block'; //кнопка видна
    detailsTabButton.classList.add('active');

    tabContents.forEach(content => content.classList.remove('active'));
    document.getElementById('details').classList.add('active');

    // Отображаем комплектующие
    displayProductComponents(product);
}

// Отображение комплектующих выбранного ПК
function displayProductComponents(product) {
    const componentsGrid = document.getElementById('productComponentsGrid');
    componentsGrid.innerHTML = '';

    for (const category in product.components) {
        const component = product.components[category];
        const cell = document.createElement('div');
        cell.classList.add('component-cell');
        cell.innerHTML = `
            <img src="${component.image}" alt="${component.name}">
            <span class="component-name">${component.name}</span>
        `;
        componentsGrid.appendChild(cell);
    }

    // Устанавливаем фиксированную стоимость из продукта
    document.getElementById('productTotalPrice').textContent = `${product.price} руб`;

    // Сохранение цены и названия продукта в data-атрибуты кнопки заказа
    const orderButton = document.getElementById('makeProductOrderBtn');
    orderButton.setAttribute('data-price', product.price);
    orderButton.setAttribute('data-name', product.name);
}

// Обработчик кнопки "Оформить заказ" для выбранного ПК
const makeProductOrderBtn = document.getElementById('makeProductOrderBtn');
makeProductOrderBtn.addEventListener('click', () => {
    const productName = makeProductOrderBtn.getAttribute('data-name');
    const productPrice = makeProductOrderBtn.getAttribute('data-price');

    // Проверка авторизации пользователя
    const currentUser = localStorage.getItem('currentUser');
    if (!currentUser) {
        alert("Пожалуйста, выполните вход или зарегистрируйтесь для оформления заказа.");
        return;
    }

    // Пример сохранения заказа в localStorage
    let orders = JSON.parse(localStorage.getItem('orders')) || [];
    const order = {
        id: Date.now(),
        user: currentUser,
        type: 'Ready PC',
        product: productName,
        price: parseInt(productPrice),
        date: new Date().toLocaleString()
    };
    orders.push(order);
    localStorage.setItem('orders', JSON.stringify(orders));

    alert("Заказ успешно оформлен! С вами свяжется менеджер.");

    // Сброс или возврат на вкладку "Готовые ПК"
    resetProductDetails();
});

// Функция сброса деталей продукта
function resetProductDetails() {
    const componentsGrid = document.getElementById('productComponentsGrid');
    componentsGrid.innerHTML = '';
    document.getElementById('productTotalPrice').textContent = '0 руб';

    // Очистка data-атрибутов кнопки заказа
    const orderButton = document.getElementById('makeProductOrderBtn');
    orderButton.removeAttribute('data-price');
    orderButton.removeAttribute('data-name');

    // Переключаемся обратно на вкладку "Готовые ПК"
    tabButtons.forEach(b => b.classList.remove('active'));
    const readyTabButton = document.querySelector('.tab-btn[data-tab="ready"]');
    readyTabButton.classList.add('active');

    tabContents.forEach(content => content.classList.remove('active'));
    document.getElementById('ready').classList.add('active');
}

// Обработчик кнопки "Контактная информация"
const contactButton = document.getElementById('contactButton');
const contactTabButton = document.querySelector('.tab-btn[data-tab="contact"]');

contactButton.addEventListener('click', () => {
    if (contactTabButton) {
        contactTabButton.click(); // Переключаемся на вкладку "Контактная информация"
    } else {
        // Если кнопка вкладки не найдена, выводим сообщение или переключаемся другим способом
        alert("Вкладка 'Контактная информация' не найдена.");
    }
});