document.addEventListener('DOMContentLoaded', () => {
    const productsSection = document.getElementById('products');

    const products = [
        { id: 1, name: 'Product 1', image: 'https://via.placeholder.com/150', price: 19.99 },
        { id: 2, name: 'Product 2', image: 'https://via.placeholder.com/150', price: 29.99 },
        { id: 3, name: 'Product 3', image: 'https://via.placeholder.com/150', price: 39.99 },
        { id: 4, name: 'Product 4', image: 'https://via.placeholder.com/150', price: 49.99 },
    ];

    products.forEach(product => {
        const productDiv = document.createElement('div');
        productDiv.classList.add('border', 'p-4', 'rounded-md');

        productDiv.innerHTML = `
            <img src="${product.image}" alt="${product.name}" class="w-full h-40 object-cover mb-2">
            <h3 class="text-lg font-bold">${product.name}</h3>
            <p class="text-gray-700">$${product.price}</p>
            <button class="bg-amazon-orange hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded mt-2">Add to Cart</button>
        `;

        productsSection.appendChild(productDiv);
    });
});