xk/js/main.js

// Language switching functionality
let currentLang = localStorage.getItem('language') || 'cn';
let langData = {};

async function loadLanguage(lang) {
    try {
        const res = await fetch(`config/lang-${lang}.json`);
        langData = await res.json();
        updatePageLanguage();
        localStorage.setItem('language', lang);
        currentLang = lang;

        // Update active state for language options
        document.querySelectorAll('.lang-option').forEach(option => {
            if (option.getAttribute('data-lang') === lang) {
                option.classList.add('active');
            } else {
                option.classList.remove('active');
            }
        });

        // Reload services and cases with new language
        loadServices();
        loadCases();
    } catch (err) {
        console.error("加载语言文件失败:", err);
    }
}

function updatePageLanguage() {
    // Update all elements with data-i18n attribute
    document.querySelectorAll('[data-i18n]').forEach(element => {
        const key = element.getAttribute('data-i18n');
        const translation = getNestedTranslation(langData, key);
        if (translation) {
            element.textContent = translation;
        }
    });
}

function getNestedTranslation(obj, path) {
    return path.split('.').reduce((current, key) => current?.[key], obj);
}

async function loadServices() {
    try {
        const res = await fetch(`config/card-${currentLang}.json`);
        const cards = await res.json();

        const grid = document.getElementById("servicesGrid");
        grid.innerHTML = ''; // Clear existing content

        cards.forEach(item => {
            const card = document.createElement("div");
            card.className = "service-card";

            // 判断 src 是图片还是图标
            let content;
            if (/\.(png|jpe?g|gif|webp|svg)$/i.test(item.src)) {
                content = `<img src="${item.src}" alt="${item.title}" />`;
            } else {
                content = `<i class="${item.src}"></i>`;
            }

            card.innerHTML = `
                    <div class="service-img">${content}</div>
                    <div class="service-content">
                        <h3>${item.title}</h3>
                        <p>${item.desc}</p>
                    </div>
                `;

            // 如果 url 不为空，整个卡片可点击
            if (item.url && item.url.trim() !== "") {
                card.style.cursor = "pointer";
                card.addEventListener("click", () => {
                    let targetUrl = item.url.trim();
                    // 如果不是 http/https 开头，自动补全
                    if (!/^https?:\/\//i.test(targetUrl)) {
                        targetUrl = "https://" + targetUrl;
                    }
                    window.open(targetUrl, "_blank"); // 新窗口打开
                });
            }

            grid.appendChild(card);
        });
    } catch (err) {
        console.error("加载业务卡片失败:", err);
    }
}

async function loadPartners() {
    try {
        const res = await fetch("config/partners.json");
        const partners = await res.json();

        const grid = document.getElementById("partnersGrid");

        partners.forEach(item => {
            const partnerCard = document.createElement("div");
            partnerCard.className = "partner-logo";

            partnerCard.innerHTML = `
                <img src="${item.logo}" alt="${item.name}" />
            `;

            // 如果 url 不为空，整个卡片可点击
            if (item.url && item.url.trim() !== "") {
                partnerCard.style.cursor = "pointer";
                partnerCard.addEventListener("click", () => {
                    let targetUrl = item.url.trim();
                    // 如果不是 http/https 开头，自动补全
                    if (!/^https?:\/\//i.test(targetUrl)) {
                        targetUrl = "https://" + targetUrl;
                    }
                    window.open(targetUrl, "_blank"); // 新窗口打开
                });
            }

            grid.appendChild(partnerCard);
        });
    } catch (err) {
        console.error("加载合作伙伴失败:", err);
    }
}

document.addEventListener("DOMContentLoaded", () => {
    loadCases();
    loadServices();
    loadPartners();

    // Load initial language
    loadLanguage(currentLang);

    // Language toggle button event - handle clicks on language options
    const langBtn = document.getElementById('langToggle');
    if (langBtn) {
        langBtn.addEventListener('click', (e) => {
            const target = e.target;
            if (target.classList.contains('lang-option')) {
                const selectedLang = target.getAttribute('data-lang');
                if (selectedLang !== currentLang) {
                    loadLanguage(selectedLang);
                }
            }
        });
    }
});




async function loadCases() {
    try {
        // 读取 config/video-{lang}.json
        const res = await fetch(`config/video-${currentLang}.json`);
        const cases = await res.json();

        const grid = document.getElementById("casesGrid");
        grid.innerHTML = ''; // Clear existing content

        cases.forEach(item => {
            const card = document.createElement("div");
            card.className = "case-card";
            card.setAttribute("data-video", item.src);
            const previewPath = "img/preview/" + item.preview + ".png";
            // 用 preview 图片当封面
            card.innerHTML = `
                <img src="${previewPath}" alt="${item.title}" class="case-preview">
                <div class="play-button"><i class="fa-solid fa-play"></i></div>
                <div class="case-overlay">
                    <h3>${item.title}</h3>
                    <p>${item.desc}</p>
                </div>
            `;

            grid.appendChild(card);
        });

        // 加载完成后绑定点击播放逻辑
        bindVideoModal();
    } catch (err) {
        console.error("加载案例失败:", err);
    }
}

function bindVideoModal() {
    const modal = document.getElementById("videoModal");
    const modalVideo = document.getElementById("modalVideo");
    const closeBtn = modal.querySelector(".close-btn");

    // 点击卡片播放
    document.querySelectorAll(".case-card .play-button").forEach(button => {
        button.addEventListener("click", () => {
            const videoSrc = button.parentElement.getAttribute("data-video");
            modal.style.display = "flex";
            modalVideo.src = videoSrc;
            modalVideo.play();
        });
    });

    // 关闭按钮
    closeBtn.addEventListener("click", () => {
        modal.style.display = "none";
        modalVideo.pause();
        modalVideo.src = "";
    });

    // 点击遮罩层关闭
    modal.addEventListener("click", (e) => {
        if (e.target === modal) {
            modal.style.display = "none";
            modalVideo.pause();
            modalVideo.src = "";
        }
    });
}




// const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');

// hamburger.addEventListener('click', () => {
//     navLinks.classList.toggle('active');
// });

window.addEventListener('scroll', () => {
    const header = document.querySelector('header');
    if (window.scrollY > 100) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        const targetId = this.getAttribute('href');
        if (targetId === '#') return;

        const targetElement = document.querySelector(targetId);
        if (targetElement) {
            navLinks.classList.remove('active');

            window.scrollTo({
                top: targetElement.offsetTop - 80,
                behavior: 'smooth'
            });
        }
    });
});