<?php
/**
 * 2026企业CMS - 案例详情页（优化版）
 * UI Designer: 像素君
 * 设计系统版本: 2.0
 */
$pageDescription = $case['summary'] ?: strip_tags(mb_substr($case['content'],0,200,'UTF-8'));
$pageKeywords = $case['seo_keywords'];
$breadcrumbItems = [
    ['title' => '成功案例', 'url' => cms_url('cases')],
    ['title' => $case['title']]
];
?>
<?php echo breadcrumb($breadcrumbItems); ?>

<div class="main-content">
    <div class="container" style="display: flex; gap: var(--space-8);">
        <!-- 主内容区 -->
        <div style="flex: 1;">
            <div class="article-detail case-detail">
                <h1 class="title"><?php echo xss_clean($case['title']); ?></h1>
                
                <div class="meta">
                    <?php if ($case['client_name']): ?>
                        <span>
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-right: 4px; vertical-align: middle;">
                                <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="currentColor"/>
                            </svg>
                            <?php echo xss_clean($case['client_name']); ?>
                        </span>
                    <?php endif; ?>
                    
                    <?php if ($case['project_time']): ?>
                        <span style="margin-left: var(--space-6);">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-right: 4px; vertical-align: middle;">
                                <path d="M8 0C3.58 0 0 3.58 0 8C0 12.42 3.58 16 8 16C12.42 16 16 12.42 16 8C16 3.58 12.42 0 8 0ZM8 14.5C4.96 14.5 2.5 12.04 2.5 8C2.5 4.96 4.96 2.5 8 2.5C11.04 2.5 13.5 4.96 13.5 8C13.5 11.04 11.04 14.5 8 14.5ZM10.75 7.25H8.75V5.25C8.75 4.84 8.41 4.5 8 4.5C7.59 4.5 7.25 4.84 7.25 5.25V8.25C7.25 8.66 7.59 9 8 9H10.75C11.16 9 11.5 8.66 11.5 8.25C11.5 7.84 11.16 7.5 10.75 7.25Z" fill="currentColor"/>
                            </svg>
                            <?php echo date('Y-m-d', strtotime($case['project_time'])); ?>
                        </span>
                    <?php endif; ?>
                    
                    <span style="margin-left: var(--space-6);">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style="margin-right: 4px; vertical-align: middle;">
                            <path d="M8 0C3.58 0 0 3.58 0 8C0 12.42 3.58 16 8 16C12.42 16 16 12.42 16 8C16 3.58 12.42 0 8 0ZM8 14.5C4.96 14.5 2.5 12.04 2.5 8C2.5 4.96 4.96 2.5 8 2.5C11.04 2.5 13.5 4.96 13.5 8C13.5 11.04 11.04 14.5 8 14.5Z" fill="currentColor"/>
                        </svg>
                        浏览量：<?php echo $case['views']; ?>
                    </span>
                </div>
                
                <!-- 案例封面图 -->
                <?php if ($case['cover_image']): ?>
                    <div class="case-cover-image">
                        <img src="<?php echo $case['cover_image']; ?>" 
                             alt="<?php echo xss_clean($case['title']); ?>">
                    </div>
                <?php endif; ?>
                
                <!-- 案例图集 -->
                <?php if ($case['gallery']): ?>
                    <?php $gallery = json_decode($case['gallery'], true); ?>
                    <div class="case-gallery">
                        <h3 style="font-size: var(--text-xl); color: var(--color-gray-900); margin-bottom: var(--space-4);">项目图集</h3>
                        <div class="gallery-grid">
                            <?php foreach ($gallery as $img): ?>
                                <div class="gallery-item">
                                    <img src="<?php echo $img; ?>" 
                                         alt="<?php echo xss_clean($case['title']); ?>"
                                         onclick="openLightbox('<?php echo $img; ?>')">
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endif; ?>
                
                <!-- 案例详情 -->
                <div class="case-content-section">
                    <h3 style="font-size: var(--text-xl); color: var(--color-gray-900); margin-bottom: var(--space-4);">项目详情</h3>
                    <div class="content">
                        <?php echo $case['content']; ?>
                    </div>
                </div>
                
                <!-- 项目链接 -->
                <?php if ($case['project_url']): ?>
                    <div class="case-project-link">
                        <a href="<?php echo $case['project_url']; ?>" target="_blank" class="btn btn-primary">
                            访问项目
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                                <path d="M11 3L17 3L17 9M17 3L7 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </a>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="widget">
                <h3 class="widget-title">更多案例</h3>
                <ul class="sidebar-list">
                    <?php $moreCases = db_query("SELECT `title`,`slug` FROM `cases` WHERE `status`=1 AND `id`!=? ORDER BY `sort_order` ASC LIMIT 8", [$case['id']]); ?>
                    <?php foreach ($moreCases as $mc): ?>
                        <li>
                            <a href="<?php echo cms_url('case', ['slug' => $mc['slug']]); ?>">
                                <?php echo xss_clean($mc['title']); ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </aside>
    </div>
</div>

<!-- 案例详情页额外样式 -->
<style>
.case-detail {
    padding: var(--space-8);
}

.case-cover-image {
    margin-bottom: var(--space-8);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.case-cover-image img {
    width: 100%;
    height: auto;
    display: block;
}

.case-gallery {
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.gallery-item {
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 150px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-content-section {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-gray-200);
}

.case-project-link {
    margin-top: var(--space-8);
    padding: var(--space-6);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    text-align: center;
}

.sidebar-list {
    list-style: none;
}

.sidebar-list li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.sidebar-list li:last-child {
    border-bottom: none;
}

.sidebar-list li a {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
    display: block;
}

.sidebar-list li a:hover {
    color: var(--color-secondary);
    padding-left: var(--space-2);
}

@media (max-width: 1024px) {
    .container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-item {
        height: 120px;
    }
}
</style>

<!-- 灯箱效果 -->
<div id="lightbox" class="lightbox" onclick="closeLightbox()">
    <img id="lightboxImage" src="" alt="">
</div>

<style>
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: var(--radius-md);
}
</style>

<script>
function openLightbox(src) {
    document.getElementById('lightboxImage').src = src;
    document.getElementById('lightbox').classList.add('active');
}

function closeLightbox() {
    document.getElementById('lightbox').classList.remove('active');
}
</script>
