document.addEventListener("DOMContentLoaded", function () {
    fetch("/api/heze")
        .then(response => response.json())
        .then(data => {
            const about = document.getElementById("about");
            about.textContent = data.data.about;

            const placesContainer = document.getElementById("places-container");
            const foodContainer = document.getElementById("food-container");
            const cultureContainer = document.getElementById("culture-container");

            // 渲染景点
            data.data.places.forEach(place => {
                const placeItem = document.createElement("div");
                placeItem.classList.add("item");

                const placeName = document.createElement("div");
                placeName.classList.add("item-name");
                placeName.textContent = place.name;

                const placeDescription = document.createElement("div");
                placeDescription.classList.add("item-description");
                placeDescription.textContent = place.description;

                placeItem.appendChild(placeName);
                placeItem.appendChild(placeDescription);

                placesContainer.appendChild(placeItem);
            });

            // 渲染美食
            data.data.food.forEach(food => {
                const foodItem = document.createElement("div");
                foodItem.classList.add("item");

                const foodName = document.createElement("div");
                foodName.classList.add("item-name");
                foodName.textContent = food.name;

                const foodDescription = document.createElement("div");
                foodDescription.classList.add("item-description");
                foodDescription.textContent = food.description;

                foodItem.appendChild(foodName);
                foodItem.appendChild(foodDescription);

                foodContainer.appendChild(foodItem);
            });

            // 渲染文化
            data.data.culture.forEach(culture => {
                const cultureItem = document.createElement("div");
                cultureItem.classList.add("item");

                const cultureName = document.createElement("div");
                cultureName.classList.add("item-name");
                cultureName.textContent = culture.name;

                const cultureDescription = document.createElement("div");
                cultureDescription.classList.add("item-description");
                cultureDescription.textContent = culture.description;

                cultureItem.appendChild(cultureName);
                cultureItem.appendChild(cultureDescription);

                cultureContainer.appendChild(cultureItem);
            });
        })
        .catch(error => {
            console.error("Error fetching data:", error);
        });
});