document.addEventListener('DOMContentLoaded', function() {
    fetch('/products.json')
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById('products-container');
            data.products.forEach(product => {
                const productDiv = document.createElement('div');
                productDiv.className = 'product';
                productDiv.innerHTML = `
                    <img src="${product.image}" alt="${product.name}">
                    <h2>${product.name}</h2>
                    <p>${product.details}</p>
                    <p>Price: $${product.price}</p>
                    <select>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                    <select>
                        ${product.locations.map(loc => `<option value="${loc}">${loc}</option>`).join('')}
                    </select>
                    <button>Add to Cart</button>
                `;
                container.appendChild(productDiv);
            });
        });
});