<?php
// 数据库配置
$db_host = 'localhost';
$db_user = 'new_hnbaobao';
$db_pass = 'd3atFbKkfYSeGKD5';
$db_name = 'new_hnbaobao';

// 连接数据库
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) { die('数据库连接失败：' . mysqli_connect_error()); }
mysqli_set_charset($conn, 'utf8mb4');

// 查询服务数据
$sql_service = "SELECT * FROM services WHERE status=1 ORDER BY sort ASC";
$result_service = mysqli_query($conn, $sql_service);

// 查询关于我们
$sql_about = "SELECT content FROM website_content WHERE type='about' LIMIT 1";
$result_about = mysqli_query($conn, $sql_about);
$about_content = mysqli_fetch_assoc($result_about)['content'];

// 查询联系我们
$sql_contact = "SELECT content FROM website_content WHERE type='contact' LIMIT 1";
$result_contact = mysqli_query($conn, $sql_contact);
$contact_content = mysqli_fetch_assoc($result_contact)['content'];
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>湖南优芷懿健康管理 - imt.hnbaobao.com</title>
    <link rel="stylesheet" href="css/layout.css">
    <style>
        /* 首页专属样式 - 匹配目标站首页细节 */
        .banner {
            height: 300px;
            background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-align: center;
        }
        .banner h1 {
            font-size: 32px;
            margin-bottom: 16px;
        }
        .banner p {
            font-size: 16px;
            opacity: 0.9;
        }
        .service-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 16px;
        }
        .service-card {
            border: 1px solid #e8e8e8;
            padding: 16px;
            border-radius: 2px;
        }
        .service-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            margin-bottom: 12px;
        }
        .form-item {
            margin-bottom: 16px;
        }
        .form-label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 8px;
            color: #333;
        }
        .form-control {
            width: 300px;
            padding: 6px 8px;
            font-size: 14px;
            border: 1px solid #d9d9d9;
            border-radius: 2px;
            outline: none;
        }
        .form-control:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
        }
        .btn {
            display: inline-block;
            padding: 4px 16px;
            font-size: 14px;
            border-radius: 2px;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            text-decoration: none;
        }
        .btn-primary {
            background-color: #1890ff;
            color: #fff;
        }
        .btn-default {
            background-color: #f5f5f5;
            color: #666;
            border: 1px solid #d9d9d9;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <!-- 头部：完全匹配目标站导航布局 -->
    <header class="header">
        <div class="container header-inner">
            <div class="logo-wrap">
                <a href="/" class="logo">优芷懿健康管理</a>
                <nav class="nav-main">
                    <div class="nav-item"><a href="/" class="active">首页</a></div>
                    <div class="nav-item"><a href="health_knowledge.php">健康知识库</a></div>
                    <div class="nav-item"><a href="#service">服务项目</a></div>
                    <div class="nav-item"><a href="#about">关于我们</a></div>
                    <div class="nav-item"><a href="#contact">联系我们</a></div>
                    <div class="nav-item"><a href="#reserve">在线预约</a></div>
                </nav>
            </div>
        </div>
    </header>

    <!-- 主体：匹配目标站首页内容布局 -->
    <main class="main">
        <div class="container">
            <!-- Banner区：目标站通栏Banner布局 -->
            <div class="banner content-block">
                <div>
                    <h1>专业健康管理 守护您的健康</h1>
                    <p>产后康复 · 关节疼痛调理 · 形体雕塑</p>
                </div>
            </div>

            <!-- 服务项目：目标站卡片网格布局 -->
            <section id="service" class="content-block">
                <h2 style="font-size: 20px; margin: 0 0 16px; font-weight: 700;">服务项目</h2>
                <div class="service-grid">
                    <?php while ($row = mysqli_fetch_assoc($result_service)): ?>
                    <div class="service-card">
                        <img src="<?php echo $row['cover']; ?>" alt="<?php echo $row['title']; ?>">
                        <h3 style="font-size: 16px; margin: 0 0 8px; font-weight: 700;"><?php echo $row['title']; ?></h3>
                        <p style="color: #8c8c8c; margin: 0 0 8px; font-size: 12px;">¥<?php echo $row['price']; ?></p>
                        <p style="margin: 0 0 12px; color: #666; line-height: 1.6;"><?php echo mb_substr($row['desc'], 0, 80) . '...'; ?></p>
                        <a href="#reserve" class="btn btn-primary">立即预约</a>
                    </div>
                    <?php endwhile; ?>
                </div>
            </section>

            <!-- 关于我们：目标站单栏文本布局 -->
            <section id="about" class="content-block">
                <h2 style="font-size: 20px; margin: 0 0 16px; font-weight: 700;">关于我们</h2>
                <div style="line-height: 1.8; color: #666;">
                    <?php echo $about_content; ?>
                </div>
            </section>

            <!-- 联系我们：目标站单栏信息布局 -->
            <section id="contact" class="content-block">
                <h2 style="font-size: 20px; margin: 0 0 16px; font-weight: 700;">联系我们</h2>
                <div style="line-height: 1.8; color: #666;">
                    <?php echo $contact_content; ?>
                </div>
            </section>

            <!-- 在线预约：目标站表单布局 -->
            <section id="reserve" class="content-block">
                <h2 style="font-size: 20px; margin: 0 0 16px; font-weight: 700;">在线预约</h2>
                <form id="reserveForm" style="max-width: 500px;">
                    <div class="form-item">
                        <label class="form-label">姓名：</label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                    <div class="form-item">
                        <label class="form-label">电话：</label>
                        <input type="tel" class="form-control" name="phone" required>
                    </div>
                    <div class="form-item">
                        <label class="form-label">服务：</label>
                        <select class="form-control" name="service_id" required>
                            <option value="">请选择服务项目</option>
                            <?php
                            mysqli_data_seek($result_service, 0);
                            while ($row = mysqli_fetch_assoc($result_service)) {
                                echo '<option value="'.$row['id'].'">'.$row['title'].'</option>';
                            }
                            ?>
                        </select>
                    </div>
                    <div class="form-item">
                        <label class="form-label">日期：</label>
                        <input type="date" class="form-control" name="reserve_date" required>
                    </div>
                    <div class="form-item">
                        <label class="form-label">备注：</label>
                        <textarea class="form-control" name="remark" rows="3" style="width: 400px;"></textarea>
                    </div>
                    <div class="form-item">
                        <label class="form-label">&nbsp;</label>
                        <button type="submit" class="btn btn-primary">提交预约</button>
                        <button type="reset" class="btn btn-default">重置</button>
                    </div>
                </form>
            </section>
        </div>
    </main>

    <!-- 页脚：匹配目标站底部布局 -->
    <footer class="footer">
        <div class="container">
            © 2026 imt.hnbaobao.com 湖南优芷懿健康管理有限责任公司 版权所有
        </div>
    </footer>

    <script>
        // 预约表单提交
        document.getElementById('reserveForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            
            fetch('submit_reserve.php', {
                method: 'POST',
                body: formData
            }).then(res => res.text()).then(data => {
                if (data.includes('成功')) {
                    alert('预约提交成功！我们将尽快与您联系');
                    this.reset();
                } else {
                    alert('提交失败：' + data);
                }
            }).catch(err => alert('提交出错：' + err));
        });

        // 页面访问统计
        fetch('count_visit.php?page=index').catch(err => console.log('统计失败：', err));
    </script>
</body>
</html>