<?php
ob_start();
require_once '../../config.php';

$site_name = getSiteConfig('site_name') ?? '万能授权系统';
$site_logo = getSiteConfig('site_logo') ?? '/assets/uploads/logo.png';

// 从数据库获取联系配置
$contact_config = json_decode(getSiteConfig('contact_config') ?? '{}', true);

// 设置默认值
$qq_group = $contact_config['qq_group'] ?? '709503830';
$email = $contact_config['email'] ?? 'admin@lhwks.top';
$service_time = $contact_config['service_time'] ?? '周一至周五 9:00-18:00';
$company_address = $contact_config['company_address'] ?? '中国 · 江苏';
$business_tip = $contact_config['business_tip'] ?? '非工作时间提交的问题，我们会在下一个工作日第一时间处理';
$wechat_qrcode = $contact_config['wechat_qrcode'] ?? '/assets/uploads/wechat.jpg';
?>
<?php include 'header.php'; ?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - <?php echo htmlspecialchars($site_name); ?></title>
    <link rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/dark.css" id="dark-theme" disabled>
    <script src="/assets/js/main.js" defer></script>
    <style>
        .contact-container {
            min-height: 60vh;
            padding: 60px 20px;
            background: var(--bg-secondary);
        }
        .contact-wrapper {
            max-width: 1200px;
            margin: 0 auto;
        }
        .contact-header {
            text-align: center;
            margin-bottom: 50px;
        }
        .contact-header h1 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-size: 36px;
            margin-bottom: 15px;
            color: var(--text-primary);
        }
        .contact-header p {
            color: var(--text-secondary);
            font-size: 18px;
        }
        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }
        .contact-card {
            background: var(--bg-primary);
            border-radius: 24px;
            padding: 36px 28px;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
        }
        .contact-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }
        .contact-icon {
            width: 72px;
            height: 72px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
            color: white;
        }
        .contact-icon img {
            width: 36px;
            height: 36px;
            filter: brightness(0) invert(1);
        }
        .contact-card h3 {
            font-size: 22px;
            margin-bottom: 20px;
            color: var(--text-primary);
            font-weight: 600;
        }
        .contact-card .content {
            color: var(--text-secondary);
            line-height: 1.7;
        }
        .contact-card .content a {
            color: var(--primary-color);
            text-decoration: none;
        }
        .contact-card .content a:hover {
            text-decoration: underline;
        }
        .qr-code {
            margin: 15px auto;
            width: 160px;
            height: 160px;
            background: var(--bg-secondary);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 1px solid var(--border-color);
        }
        .qr-code img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .qr-code-placeholder {
            text-align: center;
            color: var(--text-muted);
            font-size: 13px;
        }
        .qr-code-placeholder img {
            width: 56px;
            height: 56px;
            margin-bottom: 12px;
            opacity: 0.6;
        }
        .contact-value {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-color);
            margin: 15px 0;
            font-family: 'Monaco', 'Menlo', monospace;
        }
        .copy-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--primary-light);
            border: 1.5px solid var(--primary-color);
            padding: 8px 20px;
            border-radius: 30px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s;
            color: var(--primary-color);
        }
        .copy-btn:hover {
            background: var(--primary-color);
            color: white;
        }
        .copy-btn:hover img {
            filter: brightness(0) invert(1);
        }
        .contact-card .content p {
            margin-top: 16px;
            font-size: 14px;
        }
        .contact-info-section {
            background: var(--bg-primary);
            border-radius: 24px;
            padding: 36px 32px;
            margin-top: 30px;
            border: 1px solid var(--border-color);
        }
        .contact-info-section h3 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 28px;
            font-size: 20px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .info-list {
            display: flex;
            justify-content: center;
            gap: 50px;
            flex-wrap: wrap;
        }
        .info-item {
            display: flex;
            align-items: center;
            gap: 14px;
            color: var(--text-secondary);
            font-size: 15px;
        }
        .info-item .label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .business-hours {
            text-align: center;
            margin-top: 32px;
            padding-top: 24px;
            border-top: 1px solid var(--border-color);
            color: var(--text-muted);
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        @media (max-width: 768px) {
            .contact-header h1 {
                font-size: 28px;
            }
            .contact-grid {
                grid-template-columns: 1fr;
            }
            .info-list {
                flex-direction: column;
                align-items: center;
                gap: 20px;
            }
            .contact-card {
                padding: 28px 20px;
            }
            .contact-value {
                font-size: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="front-container">
        <main class="front-main">
            <div class="contact-container">
                <div class="contact-wrapper">
                    <div class="contact-header">
                        <h1>
                            <img src="https://api.iconify.design/mdi:headset.svg?color=%23667eea" width="36" height="36" alt="">
                            联系我们
                        </h1>
                        <p>有任何问题，欢迎随时与我们取得联系，我们将尽快为您解答</p>
                    </div>

                    <div class="contact-grid">
                        <!-- 公众号二维码 -->
                        <div class="contact-card">
                            <div class="contact-icon">
                                <img src="https://api.iconify.design/mdi:wechat.svg?color=white" alt="">
                            </div>
                            <h3>官方公众号</h3>
                            <div class="qr-code" id="wechatQrCode">
                                <img src="<?php echo htmlspecialchars($wechat_qrcode); ?>" alt="微信公众号二维码" onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'qr-code-placeholder\'><img src=\'https://api.iconify.design/mdi:qrcode.svg?color=%239ca3af\' alt=\'\'><br>请上传公众号二维码图片</div>'">
                            </div>
                            <div class="content">
                                <p>微信扫一扫关注公众号<br>获取最新资讯和技术支持</p>
                            </div>
                        </div>

                        <!-- QQ群 -->
                        <div class="contact-card">
                            <div class="contact-icon">
                                <img src="https://api.iconify.design/mdi:qqchat.svg?color=white" alt="">
                            </div>
                            <h3>官方QQ群</h3>
                            <div class="content">
                                <div class="contact-value" id="qqGroup"><?php echo htmlspecialchars($qq_group); ?></div>
                                <button class="copy-btn" onclick="copyToClipboard('<?php echo htmlspecialchars($qq_group); ?>', 'QQ群号已复制')">
                                    <img src="https://api.iconify.design/mdi:content-copy.svg?color=currentColor" width="14" height="14" alt="">
                                    复制群号
                                </button>
                                <p>点击复制群号，打开QQ添加<br>加入官方交流群，与开发者互动</p>
                            </div>
                        </div>

                        <!-- 邮箱 -->
                        <div class="contact-card">
                            <div class="contact-icon">
                                <img src="https://api.iconify.design/mdi:email.svg?color=white" alt="">
                            </div>
                            <h3>官方邮箱</h3>
                            <div class="content">
                                <div class="contact-value" id="emailAddress"><?php echo htmlspecialchars($email); ?></div>
                                <button class="copy-btn" onclick="copyToClipboard('<?php echo htmlspecialchars($email); ?>', '邮箱地址已复制')">
                                    <img src="https://api.iconify.design/mdi:content-copy.svg?color=currentColor" width="14" height="14" alt="">
                                    复制邮箱
                                </button>
                                <p>商务合作、问题反馈请发送邮件<br>我们会在24小时内回复</p>
                            </div>
                        </div>
                    </div>

                    <!-- 额外联系信息 -->
                    <div class="contact-info-section">
                        <h3>
                            <img src="https://api.iconify.design/mdi:information.svg?color=%23667eea" width="20" height="20" alt="">
                            其他联系方式
                        </h3>
                        <div class="info-list">
                            <div class="info-item">
                                <span class="label">
                                    <img src="https://api.iconify.design/mdi:clock-outline.svg?color=%23667eea" width="18" height="18" alt="">
                                    服务时间：
                                </span>
                                <span><?php echo htmlspecialchars($service_time); ?></span>
                            </div>
                            <div class="info-item">
                                <span class="label">
                                    <img src="https://api.iconify.design/mdi:map-marker.svg?color=%23667eea" width="18" height="18" alt="">
                                    公司地址：
                                </span>
                                <span><?php echo htmlspecialchars($company_address); ?></span>
                            </div>
                        </div>
                        <div class="business-hours">
                            <img src="https://api.iconify.design/mdi:information.svg?color=%23f59e0b" width="18" height="18" alt="">
                            温馨提示：<?php echo htmlspecialchars($business_tip); ?>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        
        <?php include 'footer.php'; ?>
    </div>

    <script>
        // 复制到剪贴板
        function copyToClipboard(text, message) {
            navigator.clipboard?.writeText(text).then(() => {
                if (window.showToast) {
                    window.showToast(message || '复制成功', 'success');
                } else {
                    alert(message || '复制成功');
                }
            }).catch(() => {
                const ta = document.createElement('textarea');
                ta.value = text;
                document.body.appendChild(ta);
                ta.select();
                document.execCommand('copy');
                document.body.removeChild(ta);
                if (window.showToast) {
                    window.showToast(message || '复制成功', 'success');
                } else {
                    alert(message || '复制成功');
                }
            });
        }
    </script>
</body>
</html>