<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            window.location.href = "index_m.html";
        }
    </script>
    <title>中国国际贸易促进委员会 - 培训中心</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
    <!-- Header -->
    <header class="site-header">
        <div class="container header-content">
            <div class="logo">
                <img src="img/ccpit_logo.png" alt="CCPIT Logo" class="logo-img">
                <img src="img/logo.png" alt="CCPIT Text" class="logo-text-img">
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="/">首页</a></li>
                    <li><a href="/programs.html?item=finance&type=list">业务介绍</a></li>
                    <li><a href="/about.html?item=intro&type=article&id=10">中心简介</a></li>
                    <li><a href="/about.html?item=public&type=list">信息公开</a></li>
                    <li><a href="/about.html?item=contact&type=article&id=11">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Main Content -->
    <main>
        <!-- Banners -->
        <section class="banner-section container">
            <div class="banner-item">
                <a href="https://www.ccpit.org/dangdeershida/"><img src="img/banner_left.png" alt="学习宣传贯彻党的二十大精神"></a>
            </div>
            <div class="banner-item">
                <a href="https://www.cisce.org.cn/"><img src="img/banner_right.jpg" alt="中国国际供应链促进博览会"></a>
            </div>
        </section>
        
        <!-- 分割线：缩短宽度并与下方元素保持距离 -->
        <hr class="section-divider" style="width: 100%; max-width: 1200px; margin: 20px auto;">
        <!-- Feature Grid -->
        <section class="feature-grid container">
            <!-- Left Column -->
            <div class="col-left">
                <!-- Card 1: Trade Finance -->
                <div class="feature-card card-finance">
                    <div class="card-bg">
                        <img src="img/card_finance.png" alt="Trade Finance">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title-zh">国际贸易金融</h3>
                        <h4 class="card-title-en">Trade Finance</h4>
                        <hr class="divider">
                        <ul class="feature-list" id="list-finance">
                            <!-- Dynamic Content -->
                            <li>正在加载...</li>
                        </ul>
                    </div>
                </div>

                <!-- Card 3: International Office -->
                <div class="feature-card card-office">
                    <div class="card-bg">
                        <img src="img/card_talent_2.png" alt="International Office">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title-zh">国际经贸能力</h3>
                        <h4 class="card-title-en">Economic Capability</h4>
                        <hr class="divider">
                        <ul class="feature-list" id="list-international">
                            <!-- Dynamic Content -->
                            <li>正在加载...</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Right Column -->
            <div class="col-right">
                <!-- Card 2: Exhibition Talent -->
                <div class="feature-card card-talent">
                    <div class="card-bg">
                        <img src="img/card_talent_1.png" alt="Exhibition Talent">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title-zh">会展人才培养</h3>
                        <h4 class="card-title-en">MICE Management</h4>
                        <hr class="divider">
                        <ul class="feature-list" id="list-exhibition">
                            <!-- Dynamic Content -->
                            <li>正在加载...</li>
                        </ul>
                    </div>
                </div>

                <!-- Card 4: Compliance Management -->
                <div class="feature-card card-compliance">
                    <div class="card-bg">
                        <img src="img/card_compliance.png" alt="Compliance Management">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title-zh">商事法律实务</h3>
                        <h4 class="card-title-en">Commercial Law</h4>
                        <hr class="divider">
                        <ul class="feature-list" id="list-compliance">
                            <!-- Dynamic Content -->
                            <li>正在加载...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="site-footer">
        <div class="container footer-content">
            <div class="footer-column">
                <h4>常用链接</h4>
                <ul>
                    <li><a href="https://www.ccpit.org/">中国国际贸易促进委员会</a></li>
                    <li><a href="http://www.ccoic.cn/">中国国际商会</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h4>主办单位</h4>
                <ul>
                    <li>中国国际贸易促进委员会（中国国际商会）培训中心</li>
                </ul>
            </div>
            <div class="footer-column contact-info">
                <h4>联系我们</h4>
                <p>地址：北京市西城区桦皮厂胡同2号国际商会大厦2层</p>
                <p>邮编：100035</p>
            </div>
            <div class="footer-column qr-codes">
                <!-- <h4>联系我们</h4> -->
                <div class="qr-group">
                    <div class="qr-item">
                        <img src="img/qr_1.jpg" alt="中国贸促会公众号">
                        <p>中国贸促会公众号</p>
                    </div>
                    <div class="qr-item">
                        <img src="img/qr_2.jpg" alt="中国贸促会培训中心公众号">
                        <p>中国贸促会<br>培训中心公众号</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <p>京ICP备09088920号-10 京公网安备: 110401200011号</p>
        </div>
    </footer>
    <script src="js/config.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', async () => {
            const columnMap = {
                'list-finance': '/business/finance',
                'list-international': '/business/international',
                'list-exhibition': '/business/exhibition',
                'list-compliance': '/business/compliance'
            };

            const columns = Object.values(columnMap);
            const limit = 8; // Max items per column

            try {
                const response = await fetch(`${API_BASE_URL}/v1/official_web/by_columns?columns=${encodeURIComponent(columns.join(','))}&limit=${limit}`);
                if (!response.ok) throw new Error('Network response was not ok');
                const data = await response.json();

                for (const [elementId, columnCode] of Object.entries(columnMap)) {
                    const listElement = document.getElementById(elementId);
                    if (!listElement) continue;

                    listElement.innerHTML = ''; // Clear loading text

                    const articles = data[columnCode] || [];
                    if (articles.length === 0) {
                        listElement.innerHTML = '<li>暂无内容</li>';
                        continue;
                    }

                    articles.forEach(article => {
                        const li = document.createElement('li');
                        const a = document.createElement('a');
                        a.href = `programs.html?id=${article.id}`;
                        a.textContent = article.title;
                        li.appendChild(a);
                        listElement.appendChild(li);
                    });
                }

            } catch (error) {
                console.error('Error fetching home page data:', error);
                // Optionally show error message in the lists
                for (const elementId of Object.keys(columnMap)) {
                    const listElement = document.getElementById(elementId);
                    if (listElement) listElement.innerHTML = '<li>加载失败</li>';
                }
            }
        });
    </script>
</body>
</html>
