<?php
ob_start();
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 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            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 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            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(260px, 1fr));
            gap: 30px;
            margin-bottom: 60px;
        }
        .value-card {
            background: var(--bg-primary);
            border-radius: 24px;
            padding: 36px 28px;
            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 24px;
            color: white;
        }
        .value-icon img {
            width: 40px;
            height: 40px;
            filter: brightness(0) invert(1);
        }
        .value-card h3 {
            font-size: 22px;
            margin-bottom: 15px;
            color: var(--text-primary);
            font-weight: 600;
        }
        .value-card p {
            color: var(--text-secondary);
            line-height: 1.7;
            font-size: 15px;
        }
        .milestone-section {
            background: var(--bg-secondary);
            border-radius: 30px;
            padding: 50px;
            margin-bottom: 60px;
        }
        .milestone-section h2 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            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: 35px;
            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: 24px 20px;
            border-radius: 16px;
            margin: 0 10px;
            border: 1px solid var(--border-color);
        }
        .milestone-year {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 28px;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 12px;
        }
        .milestone-text {
            color: var(--text-secondary);
            font-size: 14px;
            line-height: 1.6;
        }
        .contact-cta {
            text-align: center;
            background: linear-gradient(135deg, rgba(102,126,234,0.08) 0%, var(--bg-primary) 100%);
            border-radius: 30px;
            padding: 50px;
            border: 1px solid rgba(102,126,234,0.15);
        }
        .contact-cta h2 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: 28px;
            margin-bottom: 15px;
            color: var(--text-primary);
        }
        .contact-cta p {
            color: var(--text-secondary);
            margin-bottom: 30px;
            font-size: 16px;
        }
        .cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .btn-contact {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 36px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
            font-size: 16px;
        }
        .btn-contact.primary {
            background: var(--primary-color);
            color: white;
        }
        .btn-contact.primary:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }
        .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);
        }
        .btn-contact.secondary:hover img {
            filter: brightness(0) invert(1);
        }
        @media (max-width: 768px) {
            .about-hero h1 {
                font-size: 32px;
            }
            .timeline::before {
                display: none;
            }
            .milestone-item {
                margin-bottom: 20px;
                flex: auto;
                width: 100%;
            }
            .milestone-section {
                padding: 30px 20px;
            }
            .contact-cta {
                padding: 40px 24px;
            }
            .cta-buttons {
                flex-direction: column;
            }
            .btn-contact {
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="front-container">
        
        <main class="front-main">
            <!-- Hero 区域 -->
            <div class="about-hero">
                <h1>
                    <img src="https://api.iconify.design/mdi:information.svg?color=white" width="42" height="42" alt="">
                    关于 <?php echo htmlspecialchars($site_name); ?>
                </h1>
                <p>专注软件授权服务，守护开发者权益</p>
            </div>
            
            <div class="about-container">
                <!-- 公司介绍 -->
                <div class="company-intro">
                    <h2>
                        <img src="https://api.iconify.design/mdi:target.svg?color=%23667eea" width="28" height="28" alt="">
                        我们的使命
                    </h2>
                    <p><?php echo htmlspecialchars($site_name); ?> 致力于为开发者和企业提供安全、稳定、高效的软件授权管理解决方案。我们相信，每一个优秀的软件作品都值得被保护，每一位开发者的劳动成果都应该得到尊重。</p>
                </div>
                
                <!-- 核心价值观 -->
                <div class="values-grid">
                    <div class="value-card">
                        <div class="value-icon">
                            <img src="https://api.iconify.design/mdi:shield-lock.svg?color=white" alt="">
                        </div>
                        <h3>安全可靠</h3>
                        <p>采用高强度加密算法，保障授权码安全，防止破解和盗用</p>
                    </div>
                    <div class="value-card">
                        <div class="value-icon">
                            <img src="https://api.iconify.design/mdi:flash.svg?color=white" alt="">
                        </div>
                        <h3>高效稳定</h3>
                        <p>毫秒级验证响应，99.9%服务可用性，支持高并发场景</p>
                    </div>
                    <div class="value-card">
                        <div class="value-icon">
                            <img src="https://api.iconify.design/mdi:lightbulb.svg?color=white" alt="">
                        </div>
                        <h3>简单易用</h3>
                        <p>一行代码接入，可视化后台管理，无需复杂配置</p>
                    </div>
                    <div class="value-card">
                        <div class="value-icon">
                            <img src="https://api.iconify.design/mdi:handshake.svg?color=white" alt="">
                        </div>
                        <h3>专业服务</h3>
                        <p>7×24小时技术支持，一对一咨询，快速响应解决问题</p>
                    </div>
                </div>
                
                <!-- 发展历程 -->
                <div class="milestone-section">
                    <h2>
                        <img src="https://api.iconify.design/mdi:timeline-clock.svg?color=%23667eea" width="28" height="28" alt="">
                        发展历程
                    </h2>
                    <div class="timeline">
                        <div class="milestone-item">
                            <div class="milestone-year">
                                <img src="https://api.iconify.design/mdi:calendar.svg?color=%23667eea" width="20" height="20" alt="">
                                2023
                            </div>
                            <div class="milestone-text">项目启动，专注授权技术研发</div>
                        </div>
                        <div class="milestone-item">
                            <div class="milestone-year">
                                <img src="https://api.iconify.design/mdi:calendar.svg?color=%23667eea" width="20" height="20" alt="">
                                2024
                            </div>
                            <div class="milestone-text">平台上线，服务首批开发者用户</div>
                        </div>
                        <div class="milestone-item">
                            <div class="milestone-year">
                                <img src="https://api.iconify.design/mdi:calendar.svg?color=%23667eea" width="20" height="20" alt="">
                                2025
                            </div>
                            <div class="milestone-text">服务用户突破1000+，授权码发放超5000个</div>
                        </div>
                        <div class="milestone-item">
                            <div class="milestone-year">
                                <img src="https://api.iconify.design/mdi:calendar.svg?color=%23667eea" width="20" height="20" alt="">
                                2026
                            </div>
                            <div class="milestone-text">全新版本上线，功能全面升级</div>
                        </div>
                    </div>
                </div>
                
                <!-- 联系CTA -->
                <div class="contact-cta">
                    <h2>
                        <img src="https://api.iconify.design/mdi:account-group.svg?color=%23667eea" width="28" height="28" alt="">
                        加入我们，一起成长
                    </h2>
                    <p>如果您对我们的产品感兴趣，或有任何合作意向，欢迎联系我们</p>
                    <div class="cta-buttons">
                        <a href="/modules/home/contact.php" class="btn-contact primary">
                            <img src="https://api.iconify.design/mdi:headset.svg?color=white" width="20" height="20" alt="">
                            联系我们
                        </a>
                        <a href="/modules/home/buy.php" class="btn-contact secondary">
                            <img src="https://api.iconify.design/mdi:cart.svg?color=%23667eea" width="20" height="20" alt="">
                            购买授权
                        </a>
                    </div>
                </div>
            </div>
        </main>
        
        <?php include 'footer.php'; ?>
    </div>
</body>
</html>