<?php
/**
 * 2026企业CMS - 案例列表页（优化版）
 * UI Designer: 像素君
 * 设计系统版本: 2.0
 */
$pageDescription = '成功案例展示 - ' . SITE_NAME;
$breadcrumbItems = [['title' => '成功案例']];
?>
<?php echo breadcrumb($breadcrumbItems); ?>

<div class="main-content">
    <div class="container">
        <h1 class="section-title">成功案例</h1>
        <p style="text-align: center; color: var(--color-gray-500); margin-bottom: var(--space-12); max-width: 600px; margin-left: auto; margin-right: auto;">
            我们为各行业客户提供了专业的解决方案，助力企业实现数字化转型
        </p>
        
        <?php if (empty($cases)): ?>
            <div class="empty-state">
                <div class="empty-state-icon">📁</div>
                <p class="empty-state-text">暂无案例</p>
            </div>
        <?php else: ?>
            <div class="grid grid-3">
                <?php foreach ($cases as $c): ?>
                    <div class="card case-card">
                        <a href="<?php echo cms_url('case', ['slug' => $c['slug']]); ?>" class="case-link">
                            <div class="card-img case-img">
                                <?php if ($c['cover_image']): ?>
                                    <img src="<?php echo $c['cover_image']; ?>" 
                                         alt="<?php echo xss_clean($c['title']); ?>">
                                <?php else: ?>
                                    <div class="case-img-placeholder">📁</div>
                                <?php endif; ?>
                            </div>
                            <div class="card-body">
                                <h3 class="card-title"><?php echo xss_clean($c['title']); ?></h3>
                                <p class="card-desc"><?php echo xss_clean(str_cut($c['summary'], 80)); ?></p>
                                <?php if ($c['client_name']): ?>
                                    <div class="case-client">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-right: 6px;">
                                            <path d="M8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8ZM8 10C5.33 10 0 11.34 0 14V16H16V14C16 11.34 10.67 10 8 10Z" fill="var(--color-gray-400)"/>
                                        </svg>
                                        <?php echo xss_clean($c['client_name']); ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<!-- 案例列表页额外样式 -->
<style>
.case-card {
    transition: all var(--transition-normal);
}

.case-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

.case-img {
    height: 240px;
    position: relative;
    overflow: hidden;
}

.case-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: var(--color-gray-300);
    background: var(--color-gray-50);
}

.case-client {
    display: flex;
    align-items: center;
    color: var(--color-gray-400);
    font-size: var(--text-sm);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-gray-100);
}

.empty-state {
    text-align: center;
    padding: var(--space-16);
    color: var(--color-gray-400);
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: var(--space-4);
}

.empty-state-text {
    font-size: var(--text-lg);
}

@media (max-width: 768px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
}
</style>
