script.js

// Main application logic
document.addEventListener('DOMContentLoaded', () => {
    // Component data
    const components = {
        cpu: [
            { id: 1, name: 'AMD Ryzen 5 5600X', price: 199, cores: 6, threads: 12, speed: '3.7GHz', img: 'http://static.photos/technology/200x200/1' },
            { id: 2, name: 'Intel Core i5-12600K', price: 249, cores: 10, threads: 16, speed: '3.7GHz', img: 'http://static.photos/technology/200x200/2' },
            { id: 3, name: 'AMD Ryzen 7 5800X3D', price: 349, cores: 8, threads: 16, speed: '3.4GHz', img: 'http://static.photos/technology/200x200/3' },
            { id: 4, name: 'Intel Core i9-13900K', price: 599, cores: 24, threads: 32, speed: '3.0GHz', img: 'http://static.photos/technology/200x200/4' }
        ],
        gpu: [
            { id: 1, name: 'NVIDIA GeForce RTX 3060', price: 329, vram: '12GB', img: 'http://static.photos/technology/200x200/5' },
            { id: 2, name: 'AMD Radeon RX 6700 XT', price: 379, vram: '12GB', img: 'http://static.photos/technology/200x200/6' },
            { id: 3, name: 'NVIDIA GeForce RTX 4070', price: 599, vram: '12GB', img: 'http://static.photos/technology/200x200/7' },
            { id: 4, name: 'AMD Radeon RX 7900 XTX', price: 999, vram: '24GB', img: 'http://static.photos/technology/200x200/8' }
        ],
        ram: [
            { id: 1, name: '16GB DDR4 3200MHz', price: 59, type: 'DDR4', speed: '3200MHz', img: 'http://static.photos/technology/200x200/9' },
            { id: 2, name: '32GB DDR4 3600MHz', price: 99, type: 'DDR4', speed: '3600MHz', img: 'http://static.photos/technology/200x200/10' },
            { id: 3, name: '32GB DDR5 5600MHz', price: 149, type: 'DDR5', speed: '5600MHz', img: 'http://static.photos/technology/200x200/11' },
            { id: 4, name: '64GB DDR5 6000MHz', price: 249, type: 'DDR5', speed: '6000MHz', img: 'http://static.photos/technology/200x200/12' }
        ],
        storage: [
            { id: 1, name: '500GB NVMe SSD', price: 49, type: 'NVMe', capacity: '500GB', img: 'http://static.photos/technology/200x200/13' },
            { id: 2, name: '1TB NVMe SSD', price: 79, type: 'NVMe', capacity: '1TB', img: 'http://static.photos/technology/200x200/14' },
            { id: 3, name: '2TB NVMe SSD', price: 149, type: 'NVMe', capacity: '2TB', img: 'http://static.photos/technology/200x200/15' },
            { id: 4, name: '4TB HDD + 1TB SSD', price: 199, type: 'Hybrid', capacity: '5TB', img: 'http://static.photos/technology/200x200/16' }
        ]
    };

    // Current build
    const currentBuild = {
        cpu: null,
        gpu: null,
        ram: null,
        storage: null
    };

    // Render component options
    function renderComponentOptions(type, containerSelector) {
        const container = document.querySelector(containerSelector);
        container.innerHTML = '';
        
        components[type].forEach(component => {
            const card = document.createElement('div');
            card.className = 'component-card bg-white p-4 rounded-lg cursor-pointer border border-gray-200';
            card.innerHTML = `
                <img src="${component.img}" alt="${component.name}" class="w-full h-32 object-contain mb-4">
                <h4 class="font-semibold text-gray-800 mb-1">${component.name}</h4>
                <p class="text-gray-600 text-sm mb-2">${component.cores ? `${component.cores}C/${component.threads}T` : ''} ${component.vram ? `VRAM: ${component.vram}` : ''} ${component.speed ? `Speed: ${component.speed}` : ''} ${component.capacity ? `Capacity: ${component.capacity}` : ''}</p>
                <p class="text-yellow-600 font-bold">$${component.price}</p>
            `;
            
            card.addEventListener('click', () => {
                // Remove selected class from all cards in this container
                document.querySelectorAll(`${containerSelector} .component-card`).forEach(c => {
                    c.classList.remove('selected');
                });
                
                // Add selected class to clicked card
                card.classList.add('selected');
                
                // Update current build
                currentBuild[type] = component;
                updateBuildSummary();
            });
            
            container.appendChild(card);
        });
    }

    // Update build summary
    function updateBuildSummary() {
        const summaryContainer = document.getElementById('build-summary');
        const totalPriceElement = document.getElementById('total-price');
        const saveButton = document.getElementById('save-build');
        
        let totalPrice = 0;
        let summaryHTML = '';
        
        for (const [type, component] of Object.entries(currentBuild)) {
            if (component) {
                totalPrice += component.price;
                summaryHTML += `
                    <div class="flex justify-between items-center py-2 border-b border-gray-200">
                        <span class="text-gray-700">${type.toUpperCase()}:</span>
                        <div class="flex items-center">
                            <span class="font-medium">${component.name}</span>
                            <span class="ml-2 text-yellow-600 font-bold">$${component.price}</span>
                        </div>
                    </div>
                `;
            }
        }
        
        if (totalPrice > 0) {
            summaryContainer.innerHTML = summaryHTML;
            totalPriceElement.textContent = `$${totalPrice}`;
            totalPriceElement.classList.add('price-updated');
            setTimeout(() => {
                totalPriceElement.classList.remove('price-updated');
            }, 500);
            saveButton.disabled = false;
        } else {
            summaryContainer.innerHTML = '<p class="text-gray-500">Select components to see your build</p>';
            totalPriceElement.textContent = '$0';
            saveButton.disabled = true;
        }
    }

    // Save build
    document.getElementById('save-build').addEventListener('click', () => {
        const buildName = prompt('Give your build a name:');
        if (buildName) {
            alert(`Build "${buildName}" saved successfully!`);
            // In a real app, you would save to localStorage or send to a server
        }
    });

    // Initialize component selectors
    renderComponentOptions('cpu', '#builder > div > div > div:nth-child(1) > div');
    renderComponentOptions('gpu', '#builder > div > div > div:nth-child(2) > div');
    renderComponentOptions('ram', '#builder > div > div > div:nth-child(3) > div');
    renderComponentOptions('storage', '#builder > div > div > div:nth-child(4) > div');

    // Feather icons replacement
    feather.replace();
});