// Sample product data (in a real app, this would come from an API)
const products = [
    {
        id: 1,
        name: "NVIDIA RTX 4090",
        price: "15,999 MAD",
        image: "http://static.photos/technology/640x360/1",
        specs: "24GB GDDR6X | 16,384 CUDA Cores"
    },
    {
        id: 2,
        name: "AMD RX 7900 XTX",
        price: "12,499 MAD",
        image: "http://static.photos/technology/640x360/2",
        specs: "24GB GDDR6 | 6,144 Stream Processors"
    },
    {
        id: 3,
        name: "NVIDIA RTX 4080",
        price: "11,999 MAD",
        image: "http://static.photos/technology/640x360/3",
        specs: "16GB GDDR6X | 9,728 CUDA Cores"
    },
    {
        id: 4,
        name: "AMD RX 7800 XT",
        price: "9,999 MAD",
        image: "http://static.photos/technology/640x360/4",
        specs: "16GB GDDR6 | 5,120 Stream Processors"
    },
    {
        id: 5,
        name: "NVIDIA RTX 4070 Ti",
        price: "8,999 MAD",
        image: "http://static.photos/technology/640x360/5",
        specs: "12GB GDDR6X | 7,680 CUDA Cores"
    },
    {
        id: 6,
        name: "AMD RX 7700 XT",
        price: "7,499 MAD",
        image: "http://static.photos/technology/640x360/6",
        specs: "12GB GDDR6 | 3,456 Stream Processors"
    }
];

// Load featured products
document.addEventListener('DOMContentLoaded', () => {
    const productsContainer = document.getElementById('featured-products');
    
    products.forEach(product => {
        const productCard = document.createElement('div');
        productCard.className = 'product-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300';
        productCard.innerHTML = `
            <div class="h-48 overflow-hidden">
                <img src="${product.image}" alt="${product.name}" class="w-full h-full object-cover">
            </div>
            <div class="p-6">
                <h3 class="text-xl font-semibold text-gray-800 mb-2">${product.name}</h3>
                <p class="text-gray-600 mb-4">${product.specs}</p>
                <div class="flex justify-between items-center">
                    <span class="text-primary font-bold text-lg">${product.price}</span>
                    <button class="bg-primary hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-medium transition duration-300">
                        Add to Cart
                    </button>
                </div>
            </div>
        `;
        productsContainer.appendChild(productCard);
    });
});