<?php
require_once __DIR__ . '/db/config.php';

$pdo = db();
$settings_res = $pdo->query("SELECT `key`, `value` FROM website_settings")->fetchAll();
$settings = [];
foreach ($settings_res as $row) {
    $settings[$row['key']] = $row['value'];
}

$project_name = $settings['site_name'] ?? '智域科技';
$logo_path = $settings['site_logo'] ?? '/assets/pasted-20260226-073317-a8105f30.png';

$case_slug = $_GET['id'] ?? '';
$stmt = $pdo->prepare("SELECT * FROM cases WHERE slug = ? OR id = ?");
$stmt->execute([$case_slug, (int)$case_slug]);
$case = $stmt->fetch();

if (!$case) {
    header('Location: cases.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($case['title']) ?> - 智域科技成功案例</title>
    <link rel="icon" href="<?= $logo_path ?>" type="image/png">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link href="/assets/css/custom.css?v=<?= time() ?>" rel="stylesheet">
</head>
<body class="bg-subtle">
    <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom fixed-top scrolled">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="/">
                <img src="<?= $logo_path ?>" alt="<?= htmlspecialchars($project_name) ?>" >
                <span class="fw-bold text-dark"><?= htmlspecialchars($project_name) ?></span>
            </a>
            <div class="ms-auto d-flex gap-2">
                <a href="cases.php" class="btn btn-outline-secondary btn-sm fw-bold d-none d-md-inline-block"><i class="bi bi-grid-3x3-gap"></i> 案例中心</a>
                <a href="/" class="btn btn-outline-primary btn-sm fw-bold"><i class="bi bi-arrow-left"></i> 返回首页</a>
            </div>
        </div>
    </nav>

    <main class="py-5 mt-5">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="tech-card p-4 p-md-5 border-0 shadow-sm">
                        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-3">
                            <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 fw-bold">智域科技精选案例 - <?= htmlspecialchars($case['tag']) ?></span>
                            <span class="small text-muted fw-bold">业务归属: <?= htmlspecialchars($case['category']) ?></span>
                        </div>
                        
                        <h1 class="display-5 fw-bold mb-4 text-dark"><?= htmlspecialchars($case['title']) ?></h1>
                        <p class="lead text-muted mb-5">
                            <?= htmlspecialchars($case['content']) ?>
                        </p>
                        
                        <div class="case-detail-image-wrapper mb-5 rounded-4 shadow-sm overflow-hidden">
                            <img src="<?= htmlspecialchars($case['img']) ?>" class="img-fluid w-100" alt="<?= htmlspecialchars($case['title']) ?>" style="max-height: 500px; object-fit: cover;">
                        </div>

                        <div class="row g-5 mb-5">
                            <div class="col-md-4">
                                <h6 class="fw-bold text-uppercase tracking-widest small text-primary mb-3">项目挑战</h6>
                                <p class="small text-muted lh-lg"><?= htmlspecialchars($case['challenge']) ?></p>
                            </div>
                            <div class="col-md-4">
                                <h6 class="fw-bold text-uppercase tracking-widest small text-primary mb-3">采用技术栈</h6>
                                <p class="small text-muted lh-lg"><?= htmlspecialchars($case['tech']) ?></p>
                            </div>
                            <div class="col-md-4">
                                <h6 class="fw-bold text-uppercase tracking-widest small text-primary mb-3">项目定位</h6>
                                <p class="small text-muted lh-lg">该方案属于智域 <?= htmlspecialchars($case['tag']) ?> 领域的标准级交付方案，具备极高的行业普适性与稳定性。</p>
                            </div>
                        </div>

                        <h4 class="fw-bold mb-4 text-dark">智域解决方案</h4>
                        <div class="p-4 bg-light rounded-4 mb-5 shadow-sm border-start border-primary border-4">
                            <p class="small text-muted lh-lg"><?= htmlspecialchars($case['solution']) ?></p>
                        </div>

                        <h4 class="fw-bold mb-4 text-dark text-center">数字化转型成效</h4>
                        <div class="row g-4 mb-5 text-center">
                            <div class="col-4">
                                <h2 class="fw-bold text-primary mb-0"><?= htmlspecialchars($case['result_stability']) ?></h2>
                                <p class="small text-muted mt-2">系统稳定性 (SLA)</p>
                            </div>
                            <div class="col-4">
                                <h2 class="fw-bold text-success mb-0"><?= htmlspecialchars($case['result_throughput']) ?></h2>
                                <p class="small text-muted mt-2">性能提升/吞吐量</p>
                            </div>
                            <div class="col-4">
                                <h2 class="fw-bold text-info mb-0"><?= htmlspecialchars($case['result_cost']) ?></h2>
                                <p class="small text-muted mt-2">运维/时间成本降低</p>
                            </div>
                        </div>

                        <div class="tech-card bg-primary bg-opacity-5 p-4 rounded-4 mb-5 border-0">
                            <div class="d-flex align-items-center gap-3">
                                <div class="icon-box-colorful bg-primary text-white mb-0" style="width: 50px; height: 50px;">
                                    <i class="bi bi-info-circle"></i>
                                </div>
                                <p class="mb-0 small text-dark fw-bold">
                                    注：由于项目包含敏感行业逻辑与核心技术壁垒，部分具体业务细节已做脱敏处理。如需了解完整架构，请联系专家咨询。
                                </p>
                            </div>
                        </div>

                        <div class="text-center mt-5">
                            <a href="<?= $settings['tg_link'] ?? 'https://t.me/zhangshihao818' ?>" class="btn btn-primary btn-lg px-5 py-3 shadow">
                                我也要定制类似的数字化方案 <i class="bi bi-chevron-right ms-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="py-5 bg-white border-top">
        <div class="container text-center small text-muted">
            <p class="mb-0">&copy; 2020 <?= htmlspecialchars($project_name) ?>. 专业数字化工程与行业方案专家.</p>
        </div>
    </footer>
    
    <!-- 手机端底部菜单 -->
    <div class="mobile-bottom-nav">
        <a href="index.php?v=home" class="mobile-nav-item">
            <i class="bi bi-house-door"></i>
            <span>首页</span>
        </a>
        <a href="cases.php" class="mobile-nav-item">
            <i class="bi bi-briefcase"></i>
            <span>作品</span>
        </a>
        <a href="index.php?v=pricing#pricing" class="mobile-nav-item">
            <i class="bi bi-tags"></i>
            <span>报价</span>
        </a>
        <a href="<?= $settings['tg_link'] ?? 'https://t.me/zhangshihao818' ?>" class="mobile-nav-item highlight">
            <i class="bi bi-telegram"></i>
            <span>咨询</span>
        </a>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/js/main.js?v=<?= time() ?>"></script>
</body>
</html>