<?php
$pageTitle = '婚礼案例';
require_once 'header.php';
require_once 'config.php';

// 获取案例数据
try {
    $stmt = $pdo->query("SELECT * FROM wedding_gallery ORDER BY sort_order, id DESC");
    $galleries = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    // 收集所有类型用于筛选
    $types = array_unique(array_column($galleries, 'type'));
} catch (PDOException $e) {
    $galleries = [];
    $types = [];
}
?>

<main class="site-main">

    <!-- 页面标题区域 -->
    <section class="page-banner">
        <div class="container">
            <h1>📸 婚礼案例</h1>
            <p>每一场婚礼都是独一无二的爱情故事</p>
        </div>
    </section>

    <!-- 案例筛选 -->
    <section class="gallery-section">
        <div class="container">
            
            <?php if (!empty($galleries)): ?>
            <!-- 筛选按钮 -->
            <div class="gallery-filters">
                <button class="filter-btn active" data-filter="all">全部</button>
                <?php foreach ($types as $t): ?>
                <button class="filter-btn" data-filter="<?php echo $t; ?>"><?php echo $t; ?>婚礼</button>
                <?php endforeach; ?>
            </div>

            <!-- 案例展示区域 -->
            <div class="gallery-grid">
                <?php foreach ($galleries as $g): 
                    $gradient = "linear-gradient(135deg, {$g['gradient_start']}, {$g['gradient_end']})";
                    $dateStr = $g['wedding_date'] ? date('Y年m月d日', strtotime($g['wedding_date'])) : '';
                ?>
                <div class="gallery-card" data-type="<?php echo $g['type']; ?>">
                    <div class="gallery-image" style="background: <?php echo $gradient; ?>;">
                        <span class="gallery-type"><?php echo $g['type']; ?></span>
                        <span class="gallery-icon"><?php echo $g['icon']; ?></span>
                    </div>
                    <div class="gallery-info">
                        <h3><?php echo htmlspecialchars($g['title']); ?></h3>
                        <p>新郎：<?php echo htmlspecialchars($g['groom_name']); ?> & 新娘：<?php echo htmlspecialchars($g['bride_name']); ?></p>
                        <?php if ($dateStr): ?>
                        <p class="gallery-date"><?php echo $dateStr; ?></p>
                        <?php endif; ?>
                        <p class="gallery-desc"><?php echo htmlspecialchars($g['description']); ?></p>
                    </div>
                </div>
                <?php endforeach; ?>
                
                <!-- 雪山户外婚礼 · 玉龙雪山 主题案例 -->
                <a href="gallery_yulong.php" class="gallery-card featured-card" data-type="户外">
                    <div class="gallery-image" style="background: linear-gradient(135deg, #1e3a5f, #4a90c2); position: relative; overflow: hidden;">
                        <span class="gallery-type">户外</span>
                        <span class="gallery-icon" style="font-size: 48px;">❄️</span>
                        <div class="featured-badge">
                            <i class="fas fa-star"></i> 热门主题
                        </div>
                        <div class="snow-overlay"></div>
                    </div>
                    <div class="gallery-info">
                        <h3>雪山户外婚礼 · 玉龙雪山</h3>
                        <p class="gallery-location">📍 云南丽江 · 玉龙雪山海拔4680米观景平台</p>
                        <p class="gallery-desc">在雪山之巅，以蓝天白云为证，举办一场终生难忘的高原婚礼。雪山全景背景、高原草甸、纯净自然...</p>
                        <div class="gallery-highlights">
                            <span class="highlight-tag">雪山全景</span>
                            <span class="highlight-tag">高原草甸</span>
                            <span class="highlight-tag">四季美景</span>
                        </div>
                    </div>
                </a>
            </div>
            <?php else: ?>
            <p class="empty-state">暂无婚礼案例，请在后台添加。</p>
            <?php endif; ?>

        </div>
    </section>

</main>

<script>
// 筛选功能
document.querySelectorAll('.gallery-filters .filter-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.gallery-filters .filter-btn').forEach(function(b) { b.classList.remove('active'); });
        this.classList.add('active');
        var filter = this.getAttribute('data-filter');
        document.querySelectorAll('.gallery-card').forEach(function(card) {
            if (filter === 'all' || card.getAttribute('data-type') === filter) {
                card.style.display = 'block';
            } else {
                card.style.display = 'none';
            }
        });
    });
});
</script>

<?php require_once 'footer.php'; ?>