script.js

// Global state and utilities
const AppState = {
    currentPage: window.location.pathname.split('/').pop()
};

document.addEventListener('DOMContentLoaded', () => {
    // Initialize page specific functionality
    if (AppState.currentPage === 'technical-sheets.html') {
        initTechnicalSheetsPage();
    } else if (AppState.currentPage === 'products.html') {
        initProductsPage();
    }

    // Common functionality (theme toggler, etc.)
    initCommon();
    ];
    
    // Filter options
    const categories = ['All', 'Inverters', 'Solar Panels', 'Structures', 'Batteries'];
    const manufacturers = ['All', 'GOODWE', 'GROWATT', 'SUNGROW', 'DEYE', 'HUAWEI', 'FRONIUS', 'SMA', 'ABB'];
    const powerRanges = [
        { label: 'All', min: 0, max: Infinity },
        { label: '0-10kW (Residential)', min: 0, max: 10 },
        { label: '10-50kW (Small Commercial)', min: 10, max: 50 },
        { label: '50-100kW (Medium Commercial)', min: 50, max: 100 },
        { label: '100kW+ (Large Commercial)', min: 100, max: Infinity }
    ];

    // DOM elements
    const searchInput = document.getElementById('search-input');
    const filterToggle = document.getElementById('filter-toggle');
    const filtersContainer = document.getElementById('filters-container');
    const equipmentGrid = document.getElementById('equipment-grid');
    const emptyState = document.getElementById('empty-state');
    const equipmentCount = document.getElementById('equipment-count');
    const clearFilters = document.getElementById('clear-filters');

    // State
    let searchQuery = '';
    let selectedCategory = 'All';
    let selectedManufacturer = 'All';
    let selectedPowerRange = 0;

    // Initialize
    renderFilters();
    renderEquipment();

    // Event listeners
    searchInput.addEventListener('input', (e) => {
        searchQuery = e.target.value.toLowerCase();
        renderEquipment();
    });

    filterToggle.addEventListener('click', () => {
        filtersContainer.classList.toggle('hidden');
    });

    clearFilters.addEventListener('click', () => {
        searchQuery = '';
        selectedCategory = 'All';
        selectedManufacturer = 'All';
        selectedPowerRange = 0;
        searchInput.value = '';
        renderEquipment();
        updateActiveFilters();
    });

    function renderFilters() {
        const categoryFilters = document.getElementById('category-filters');
        const manufacturerFilters = document.getElementById('manufacturer-filters');
        const powerRangeFilters = document.getElementById('power-range-filters');

        // Category filters
        categories.forEach(category => {
            const button = document.createElement('button');
            button.textContent = category;
            button.className = `px-3 py-1 rounded-full text-sm ${selectedCategory === category ? 'bg-primary-500 text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'}`;
            button.addEventListener('click', () => {
                selectedCategory = category;
                renderEquipment();
                updateActiveFilters();
            });
            categoryFilters.appendChild(button);
        });

        // Manufacturer filters
        manufacturers.forEach(manufacturer => {
            const button = document.createElement('button');
            button.textContent = manufacturer;
            button.className = `px-3 py-1 rounded-full text-sm ${selectedManufacturer === manufacturer ? 'bg-primary-500 text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'}`;
            button.addEventListener('click', () => {
                selectedManufacturer = manufacturer;
                renderEquipment();
                updateActiveFilters();
            });
            manufacturerFilters.appendChild(button);
        });

        // Power range filters
        powerRanges.forEach((range, index) => {
            const button = document.createElement('button');
            button.textContent = range.label;
            button.className = `px-3 py-1 rounded-full text-xs ${selectedPowerRange === index ? 'bg-primary-500 text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'}`;
            button.addEventListener('click', () => {
                selectedPowerRange = index;
                renderEquipment();
                updateActiveFilters();
            });
            powerRangeFilters.appendChild(button);
        });
    }

    function updateActiveFilters() {
        // Update active states for filter buttons
        document.querySelectorAll('#category-filters button').forEach(button => {
            button.className = `px-3 py-1 rounded-full text-sm ${selectedCategory === button.textContent ? 'bg-primary-500 text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'}`;
        });

        document.querySelectorAll('#manufacturer-filters button').forEach(button => {
            button.className = `px-3 py-1 rounded-full text-sm ${selectedManufacturer === button.textContent ? 'bg-primary-500 text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'}`;
        });

        document.querySelectorAll('#power-range-filters button').forEach((button, index) => {
            button.className = `px-3 py-1 rounded-full text-xs ${selectedPowerRange === index ? 'bg-primary-500 text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'}`;
        });
    }

    function renderEquipment() {
        const filtered = equipmentDatabase.filter(item => {
            const matchesSearch = 
                item.manufacturer.toLowerCase().includes(searchQuery) ||
                item.model.toLowerCase().includes(searchQuery) ||
                item.sku.toLowerCase().includes(searchQuery);
            
            const matchesCategory = 
                selectedCategory === 'All' || 
                item.category.toLowerCase() === selectedCategory.toLowerCase();
            
            const matchesManufacturer = 
                selectedManufacturer === 'All' || 
                item.manufacturer === selectedManufacturer;
            
            const powerRange = powerRanges[selectedPowerRange];
            const matchesPowerRange = 
                item.power_kw >= powerRange.min && item.power_kw <= powerRange.max;

            return matchesSearch && matchesCategory && matchesManufacturer && matchesPowerRange;
        });

        equipmentGrid.innerHTML = '';
        
        if (filtered.length === 0) {
            emptyState.classList.remove('hidden');
            equipmentGrid.classList.add('hidden');
        } else {
            emptyState.classList.add('hidden');
            equipmentGrid.classList.remove('hidden');
            
            filtered.forEach(item => {
                const card = document.createElement('custom-equipment-card');
                card.setAttribute('data-equipment', JSON.stringify(item));
                equipmentGrid.appendChild(card);
            });
        }

        equipmentCount.textContent = `${filtered.length} ${filtered.length === 1 ? 'equipment' : 'equipments'}`;
    }
}

function initProductsPage() {
    // Sample product data
    const products = [
        {
            id: 1,
            name: 'Premium Solar Panel 400W',
            price: 249.99,
            category: 'Solar Panels',
            image_url: 'http://static.photos/solar/320x240/1'
        },
        {
            id: 2,
            name: 'Home Inverter 5kW',
            price: 1299.99,
            category: 'Inverters',
            image_url: 'http://static.photos/technology/320x240/2'
        },
        {
            id: 3,
            name: 'Mounting System Kit',
            price: 399.99,
            category: 'Structures',
            image_url: 'http://static.photos/construction/320x240/3'
        },
        {
            id: 4,
            name: 'Lithium Battery 10kWh',
            price: 3499.99,
            category: 'Batteries',
            image_url: 'http://static.photos/technology/320x240/4'
        }
    ];

    const productsGrid = document.getElementById('products-grid');
    const emptyState = document.getElementById('empty-state');
    const productCount = document.getElementById('product-count');

    // Render products
    if (products.length === 0) {
        emptyState.classList.remove('hidden');
        productsGrid.classList.add('hidden');
    } else {
        emptyState.classList.add('hidden');
        productsGrid.classList.remove('hidden');
        
        products.forEach(product => {
            const card = document.createElement('product-card');
            card.setAttribute('data-product', JSON.stringify(product));
            productsGrid.appendChild(card);
        });
    }

    productCount.textContent = `${products.length} ${products.length === 1 ? 'product' : 'products'}`;
}
function initCommon() {
    // Theme toggle functionality
    const themeToggle = document.getElementById('theme-toggle');
    if (themeToggle) {
        themeToggle.addEventListener('click', () => {
            document.documentElement.classList.toggle('dark');
            localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
        });
    }
}

function initTechnicalSheetsPage() {
    // Equipment data
    const equipmentDatabase = [
{
            sku: 'GOODWEGW250KHTIMAGEPRODUCT600142',
            manufacturer: 'GOODWE',
            model: 'GW250K-HT',
            category: 'inverters',
            power_kw: 250,
            voltage_v: 380,
            mppt_count: 10,
            efficiency_percent: 98.5,
            price_brl: 182250.0,
            image_url: 'https://cdn.yellosolarhub.com/products/inversores/GOODWE-GW250K-HT_IMAGE_PRODUCT_600142.png',
            notes: 'Largest GOODWE inverter - 250kW for large commercial projects',
            sync_status: 'synchronized',
            recovered_value: 450250.0
        },
        // ... (other equipment objects from the React code)
    ];

    // Filter options
    const categories = ['All', 'Inverters', 'Solar Panels', 'Structures', 'Batteries'];
    const manufacturers = ['All', 'GOODWE', 'GROWATT', 'SUNGROW', 'DEYE', 'HUAWEI', 'FRONIUS', 'SMA', 'ABB'];
    const powerRanges = [
        { label: 'All', min: 0, max: Infinity },
        { label: '0-10kW (Residential)', min: 0, max: 10 },
        { label: '10-50kW (Small Commercial)', min: 10, max: 50 },
        { label: '50-100kW (Medium Commercial)', min: 50, max: 100 },
        { label: '100kW+ (Large Commercial)', min: 100, max: Infinity }
    ];

    // DOM elements
    const searchInput = document.getElementById('search-input');
    const filterToggle = document.getElementById('filter-toggle');
    const filtersContainer = document.getElementById('filters-container');
    const equipmentGrid = document.getElementById('equipment-grid');
    const emptyState = document.getElementById('empty-state');
    const equipmentCount = document.getElementById('equipment-count');
    const clearFilters = document.getElementById('clear-filters');

    // State
    let searchQuery = '';
    let selectedCategory = 'All';
    let selectedManufacturer = 'All';
    let selectedPowerRange = 0;

    // Initialize
    renderFilters();
    renderEquipment();

    // Event listeners
    searchInput.addEventListener('input', (e) => {
        searchQuery = e.target.value.toLowerCase();
        renderEquipment();
    });

    filterToggle.addEventListener('click', () => {
        filtersContainer.classList.toggle('hidden');
    });

    clearFilters.addEventListener('click', () => {
        searchQuery = '';
        selectedCategory = 'All';
        selectedManufacturer = 'All';
        selectedPowerRange = 0;
        searchInput.value = '';
        renderEquipment();
        updateActiveFilters();
    });

    function renderFilters() {
        const categoryFilters = document.getElementById('category-filters');
        const manufacturerFilters = document.getElementById('manufacturer-filters');
        const powerRangeFilters = document.getElementById('power-range-filters');

        // Category filters
        categories.forEach(category => {
            const button = document.createElement('button');
            button.textContent = category;
            button.className = `px-3 py-1 rounded-full text-sm ${selectedCategory === category ? 'bg-primary-500 text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'}`;
            button.addEventListener('click', () => {
                selectedCategory = category;
                renderEquipment();
                updateActiveFilters();
            });
            categoryFilters.appendChild(button);
        });

        // Manufacturer filters
        manufacturers.forEach(manufacturer => {
            const button = document.createElement('button');
            button.textContent = manufacturer;
            button.className = `px-3 py-1 rounded-full text-sm ${selectedManufacturer === manufacturer ? 'bg-primary-500 text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'}`;
            button.addEventListener('click', () => {
                selectedManufacturer = manufacturer;
                renderEquipment();
                updateActiveFilters();
            });
            manufacturerFilters.appendChild(button);
        });

        // Power range filters
        powerRanges.forEach((range, index) => {
            const button = document.createElement('button');
            button.textContent = range.label;
            button.className = `px-3 py-1 rounded-full text-xs ${selectedPowerRange === index ? 'bg-primary-500 text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'}`;
            button.addEventListener('click', () => {
                selectedPowerRange = index;
                renderEquipment();
                updateActiveFilters();
            });
            powerRangeFilters.appendChild(button);
        });
    }

    function updateActiveFilters() {
        // Update active states for filter buttons
        document.querySelectorAll('#category-filters button').forEach(button => {
            button.className = `px-3 py-1 rounded-full text-sm ${selectedCategory === button.textContent ? 'bg-primary-500 text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'}`;
        });

        document.querySelectorAll('#manufacturer-filters button').forEach(button => {
            button.className = `px-3 py-1 rounded-full text-sm ${selectedManufacturer === button.textContent ? 'bg-primary-500 text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'}`;
        });

        document.querySelectorAll('#power-range-filters button').forEach((button, index) => {
            button.className = `px-3 py-1 rounded-full text-xs ${selectedPowerRange === index ? 'bg-primary-500 text-white' : 'bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'}`;
        });
    }

    function renderEquipment() {
        const filtered = equipmentDatabase.filter(item => {
            const matchesSearch = 
                item.manufacturer.toLowerCase().includes(searchQuery) ||
                item.model.toLowerCase().includes(searchQuery) ||
                item.sku.toLowerCase().includes(searchQuery);
            
            const matchesCategory = 
                selectedCategory === 'All' || 
                item.category.toLowerCase() === selectedCategory.toLowerCase();
            
            const matchesManufacturer = 
                selectedManufacturer === 'All' || 
                item.manufacturer === selectedManufacturer;
            
            const powerRange = powerRanges[selectedPowerRange];
            const matchesPowerRange = 
                item.power_kw >= powerRange.min && item.power_kw <= powerRange.max;

            return matchesSearch && matchesCategory && matchesManufacturer && matchesPowerRange;
        });

        equipmentGrid.innerHTML = '';
        
        if (filtered.length === 0) {
            emptyState.classList.remove('hidden');
            equipmentGrid.classList.add('hidden');
        } else {
            emptyState.classList.add('hidden');
            equipmentGrid.classList.remove('hidden');
            
            filtered.forEach(item => {
                const card = document.createElement('custom-equipment-card');
                card.setAttribute('data-equipment', JSON.stringify(item));
                equipmentGrid.appendChild(card);
            });
        }

        equipmentCount.textContent = `${filtered.length} ${filtered.length === 1 ? 'equipment' : 'equipments'}`;
    }
});