document.addEventListener("DOMContentLoaded", () => {
    fetch("/api/data")
        .then(response => response.json())
        .then(data => {
            document.getElementById("product-name").innerText = data.product_name;
            document.getElementById("product-image").src = data.image_url;
            document.getElementById("description").innerText = data.description;
            const benefitsList = document.getElementById("benefits");
            data.benefits.forEach(benefit => {
                const li = document.createElement("li");
                li.innerText = benefit;
                benefitsList.appendChild(li);
            });
            document.getElementById("price").innerText = data.price;
        })
        .catch(error => {
            console.error("Error fetching data:", error);
        });
});