<?php
/**
 * 2026企业CMS - 联系我们页面（优化版）
 * UI Designer: 像素君
 * 设计系统版本: 2.0
 */
$pageDescription = '联系我们 - ' . SITE_NAME;
$breadcrumbItems = [['title' => '联系我们']];
?>
<?php echo breadcrumb($breadcrumbItems); ?>

<div class="main-content">
    <div class="container">
        <h1 class="section-title">联系我们</h1>
        <p style="text-align: center; color: var(--color-gray-500); margin-bottom: var(--space-12); max-width: 600px; margin-left: auto; margin-right: auto;">
            如果您有任何问题或需求，请随时联系我们，我们将竭诚为您服务
        </p>
        
        <div class="contact-grid">
            <!-- 联系信息 -->
            <div class="contact-info-card">
                <h3>联系方式</h3>
                
                <div class="contact-items">
                    <div class="contact-item">
                        <div class="contact-icon">📞</div>
                        <div class="contact-detail">
                            <label>联系电话</label>
                            <value><?php echo get_setting('contact_phone', '13874944449'); ?></value>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">📧</div>
                        <div class="contact-detail">
                            <label>电子邮箱</label>
                            <value><?php echo get_setting('contact_email', '284795@qq.com'); ?></value>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <div class="contact-icon">📍</div>
                        <div class="contact-detail">
                            <label>公司地址</label>
                            <value><?php echo get_setting('contact_address', '长沙市开福区青竹湖街道湘江北路一段369号 金霞跨境产贸城 长沙金霞经济开发区'); ?></value>
                        </div>
                    </div>
                    
                    <?php if (get_setting('contact_qq')): ?>
                    <div class="contact-item">
                        <div class="contact-icon">💬</div>
                        <div class="contact-detail">
                            <label>QQ</label>
                            <value><?php echo get_setting('contact_qq'); ?></value>
                        </div>
                    </div>
                    <?php endif; ?>
                    
                    <?php if (get_setting('contact_wechat')): ?>
                    <div class="contact-item">
                        <div class="contact-icon">👤</div>
                        <div class="contact-detail">
                            <label>微信</label>
                            <value><?php echo get_setting('contact_wechat'); ?></value>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
            
            <!-- 联系表单 -->
            <div class="contact-form-card">
                <h3>在线留言</h3>
                
                <?php echo $contactMsg ?? ''; ?>
                
                <form method="post" action="<?php echo cms_url('contact'); ?>" class="contact-form" id="contactForm">
                    <div class="form-group">
                        <label>姓名 <span style="color: var(--color-error);">*</span></label>
                        <input type="text" name="name" required placeholder="请输入您的姓名">
                    </div>
                    
                    <div class="form-group">
                        <label>电话 <span style="color: var(--color-error);">*</span></label>
                        <input type="tel" name="phone" required placeholder="请输入您的联系电话">
                    </div>
                    
                    <div class="form-group">
                        <label>邮箱</label>
                        <input type="email" name="email" placeholder="请输入您的邮箱地址">
                    </div>
                    
                    <div class="form-group">
                        <label>公司名称</label>
                        <input type="text" name="company" placeholder="请输入您的公司名称">
                    </div>
                    
                    <div class="form-group">
                        <label>留言内容 <span style="color: var(--color-error);">*</span></label>
                        <textarea name="message" required placeholder="请输入您的需求或问题"></textarea>
                    </div>
                    
                    <button type="submit" name="contact_submit" class="btn btn-primary btn-lg" style="width: 100%;">
                        提交留言
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="1.5"/>
                            <path d="M7 10L9 12L13 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </form>
            </div>
        </div>
        
        <!-- 公司介绍内容 -->
        <?php if (!empty($pageData['content'])): ?>
            <div class="contact-about-section">
                <div class="article-detail">
                    <?php echo $pageData['content']; ?>
                </div>
            </div>
        <?php endif; ?>
    </div>
</div>

<!-- 联系我们页面额外样式 -->
<style>
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}

.contact-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.contact-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    color: white;
    border-radius: var(--radius-md);
    font-size: var(--text-2xl);
    flex-shrink: 0;
}

.contact-detail label {
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--space-1);
}

.contact-detail value {
    display: block;
    color: var(--color-gray-700);
    font-size: var(--text-base);
    font-weight: 500;
}

.contact-form .form-group {
    margin-bottom: var(--space-5);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: all var(--transition-fast);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.1);
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-about-section {
    margin-top: var(--space-12);
}

.alert {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .contact-info-card,
    .contact-form-card {
        padding: var(--space-6);
    }
}
</style>

<!-- 表单验证脚本 -->
<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
    const name = this.querySelector('[name="name"]').value.trim();
    const phone = this.querySelector('[name="phone"]').value.trim();
    const message = this.querySelector('[name="message"]').value.trim();
    
    if (!name || !phone || !message) {
        e.preventDefault();
        alert('请填写必填项（姓名、电话、留言内容）');
        return false;
    }
    
    // 验证手机号格式
    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!phoneRegex.test(phone)) {
        e.preventDefault();
        alert('请输入正确的手机号码');
        return false;
    }
});
</script>
