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

$site_name = getSiteConfig('site_name') ?? '万能授权系统';
$site_logo = getSiteConfig('site_logo') ?? '/assets/uploads/logo.png';
?>
        <?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>
        /* 关于我们页面专用样式 */
        .about-hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 80px 20px;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
        }
        .about-hero::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: rotate 20s linear infinite;
        }
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .about-hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }
        .about-hero p {
            font-size: 18px;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        .about-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 60px 20px;
        }
        .company-intro {
            text-align: center;
            margin-bottom: 60px;
        }
        .company-intro h2 {
            font-size: 32px;
            margin-bottom: 20px;
            color: var(--text-primary);
        }
        .company-intro p {
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-secondary);
            max-width: 800px;
            margin: 0 auto;
        }
        .values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-bottom: 60px;
        }
        .value-card {
            background: var(--bg-primary);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
        }
        .value-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            border-color: var(--primary-color);
        }
        .value-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 36px;
            color: white;
        }
        .value-card h3 {
            font-size: 22px;
            margin-bottom: 15px;
            color: var(--text-primary);
        }
        .value-card p {
            color: var(--text-secondary);
            line-height: 1.6;
        }
        .team-section {
            text-align: center;
            margin-bottom: 60px;
        }
        .team-section h2 {
            font-size: 32px;
            margin-bottom: 40px;
            color: var(--text-primary);
        }
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }
        .team-card {
            background: var(--bg-primary);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s;
            border: 1px solid var(--border-color);
        }
        .team-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }
        .team-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 48px;
            color: white;
        }
        .team-card h3 {
            font-size: 20px;
            margin-bottom: 5px;
            color: var(--text-primary);
        }
        .team-card .title {
            color: var(--primary-color);
            font-size: 14px;
            margin-bottom: 15px;
        }
        .team-card .bio {
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1.6;
        }
        .milestone-section {
            background: var(--bg-secondary);
            border-radius: 30px;
            padding: 50px;
            margin-bottom: 60px;
        }
        .milestone-section h2 {
            text-align: center;
            font-size: 32px;
            margin-bottom: 40px;
            color: var(--text-primary);
        }
        .timeline {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            position: relative;
        }
        .timeline::before {
            content: '';
            position: absolute;
            top: 30px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--border-color);
        }
        .milestone-item {
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 1;
            background: var(--bg-primary);
            padding: 20px;
            border-radius: 16px;
            margin: 0 10px;
        }
        .milestone-year {
            font-size: 28px;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 10px;
        }
        .milestone-text {
            color: var(--text-secondary);
            font-size: 14px;
        }
        .contact-cta {
            text-align: center;
            background: linear-gradient(135deg, var(--primary-light) 0%, var(--bg-primary) 100%);
            border-radius: 30px;
            padding: 50px;
        }
        .contact-cta h2 {
            font-size: 28px;
            margin-bottom: 15px;
            color: var(--text-primary);
        }
        .contact-cta p {
            color: var(--text-secondary);
            margin-bottom: 25px;
        }
        .cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .btn-contact {
            padding: 12px 32px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
        }
        .btn-contact.primary {
            background: var(--primary-color);
            color: white;
        }
        .btn-contact.primary:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
        }
        .btn-contact.secondary {
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
        }
        .btn-contact.secondary:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-2px);
        }
        @media (max-width: 768px) {
            .about-hero h1 {
                font-size: 32px;
            }
            .timeline::before {
                display: none;
            }
            .milestone-item {
                margin-bottom: 20px;
            }
            .milestone-section {
                padding: 30px;
            }
        }
    </style>
</head>
<body>
    <div class="front-container">
        
        <main class="front-main">
            <!-- Hero 区域 -->
            <div class="about-hero">
                <h1>关于 <?php echo htmlspecialchars($site_name); ?></h1>
                <p>专注软件授权服务，守护开发者权益</p>
            </div>
            
            <div class="about-container">
                <!-- 公司介绍 -->
                <div class="company-intro">
                    <h2>我们的使命</h2>
                    <p><?php echo htmlspecialchars($site_name); ?> 致力于为开发者和企业提供安全、稳定、高效的软件授权管理解决方案。我们相信，每一个优秀的软件作品都值得被保护，每一位开发者的劳动成果都应该得到尊重。</p>
                </div>
                
                <!-- 核心价值观 -->
                <div class="values-grid">
                    <div class="value-card">
                        <div class="value-icon">🔒</div>
                        <h3>安全可靠</h3>
                        <p>采用高强度加密算法，保障授权码安全，防止破解和盗用</p>
                    </div>
                    <div class="value-card">
                        <div class="value-icon">⚡</div>
                        <h3>高效稳定</h3>
                        <p>毫秒级验证响应，99.9%服务可用性，支持高并发场景</p>
                    </div>
                    <div class="value-card">
                        <div class="value-icon">💡</div>
                        <h3>简单易用</h3>
                        <p>一行代码接入，可视化后台管理，无需复杂配置</p>
                    </div>
                    <div class="value-card">
                        <div class="value-icon">🤝</div>
                        <h3>专业服务</h3>
                        <p>7×24小时技术支持，一对一咨询，快速响应解决问题</p>
                    </div>
                </div>
                
                <!-- 发展历程 -->
                <div class="milestone-section">
                    <h2>发展历程</h2>
                    <div class="timeline">
                        <div class="milestone-item">
                            <div class="milestone-year">2023</div>
                            <div class="milestone-text">项目启动，专注授权技术研发</div>
                        </div>
                        <div class="milestone-item">
                            <div class="milestone-year">2024</div>
                            <div class="milestone-text">平台上线，服务首批开发者用户</div>
                        </div>
                        <div class="milestone-item">
                            <div class="milestone-year">2025</div>
                            <div class="milestone-text">服务用户突破1000+，授权码发放超5000个</div>
                        </div>
                        <div class="milestone-item">
                            <div class="milestone-year">2026</div>
                            <div class="milestone-text">全新版本上线，功能全面升级</div>
                        </div>
                    </div>
                </div>
                
                <!-- 团队介绍 -->
                <!--<div class="team-section">-->
                <!--    <h2>核心团队</h2>-->
                <!--    <div class="team-grid">-->
                <!--        <div class="team-card">-->
                <!--            <div class="team-avatar">👨‍💻</div>-->
                <!--            <h3>张伟</h3>-->
                <!--            <div class="title">创始人 & CEO</div>-->
                <!--            <div class="bio">十年互联网行业经验，资深软件架构师，致力于为开发者提供最好的授权解决方案。</div>-->
                <!--        </div>-->
                <!--        <div class="team-card">-->
                <!--            <div class="team-avatar">👩‍💻</div>-->
                <!--            <h3>李婷</h3>-->
                <!--            <div class="title">技术总监</div>-->
                <!--            <div class="bio">全栈工程师，专注于系统架构设计和高性能服务开发。</div>-->
                <!--        </div>-->
                <!--        <div class="team-card">-->
                <!--            <div class="team-avatar">👨‍🎨</div>-->
                <!--            <h3>王磊</h3>-->
                <!--            <div class="title">产品经理</div>-->
                <!--            <div class="bio">用户体验专家，持续优化产品功能，让授权管理更简单。</div>-->
                <!--        </div>-->
                <!--        <div class="team-card">-->
                <!--            <div class="team-avatar">👨‍🔧</div>-->
                <!--            <h3>陈晨</h3>-->
                <!--            <div class="title">技术支持</div>-->
                <!--            <div class="bio">7×24小时在线，快速响应用户问题，提供专业咨询。</div>-->
                <!--        </div>-->
                <!--    </div>-->
                <!--</div>-->
                
                <!-- 联系CTA -->
                <div class="contact-cta">
                    <h2>加入我们，一起成长</h2>
                    <p>如果您对我们的产品感兴趣，或有任何合作意向，欢迎联系我们</p>
                    <div class="cta-buttons">
                        <a href="/modules/home/contact.php" class="btn-contact primary">联系我们</a>
                        <a href="/modules/home/buy.php" class="btn-contact secondary">购买授权</a>
                    </div>
                </div>
            </div>
        </main>
        
        <?php include 'footer.php'; ?>
    </div>
</body>
</html>