<?php
// ========== 代理商链接识别 ==========
// 必须在任何输出之前，放在最顶部
ob_start();

if (isset($_GET['agent']) && isset($_GET['app'])) {
    require_once 'config.php';
    $agent_id = intval($_GET['agent']);
    $app_id = intval($_GET['app']);
    
    $agent_app = $db->fetchOne("
        SELECT * FROM agent_apps 
        WHERE agent_id = $agent_id AND app_id = $app_id AND status = 1
    ");
    
    if ($agent_app) {
        session_start();
        $_SESSION['agent_id'] = $agent_id;
        $_SESSION['agent_app_id'] = $app_id;
        $_SESSION['agent_price'] = $agent_app['agent_price'];
        header('Location: /modules/home/buy.php?app=' . $app_id);
        exit;
    }
}

// 识别短链接（code参数）
if (isset($_GET['code'])) {
    require_once 'config.php';
    $code = base64_decode($_GET['code']);
    if ($code && strpos($code, '|') !== false) {
        list($agent_id, $app_id) = explode('|', $code);
        if ($agent_id && $app_id) {
            session_start();
            $_SESSION['agent_id'] = $agent_id;
            $_SESSION['agent_app_id'] = $app_id;
            header('Location: /modules/home/buy.php?app=' . $app_id);
            exit;
        }
    }
}
// ========== 代理商链接识别结束 ==========

// 安装检测
if (!file_exists(__DIR__ . '/install.lock') && basename($_SERVER['PHP_SELF']) !== 'install.php') {
    header('Location: install.php');
    exit;
}

require_once 'config.php';

$current_user = currentUser();
$site_name = getSiteConfig('site_name') ?? '麟泓授权系统';
$site_keywords = getSiteConfig('site_keywords') ?? '';
$site_copyright = getSiteConfig('site_copyright') ?? '';
$site_logo = getSiteConfig('site_logo') ?? '/assets/uploads/logo.png';
$site_sidebar_icon = getSiteConfig('site_sidebar_icon');
$headerLinks = getHeaderLinks();
$friendLinks = getFriendLinks();

// 获取统计信息
$apps_count = $db->fetchOne("SELECT COUNT(*) as cnt FROM apps WHERE status = 1")['cnt'] ?? 0;
$licenses_count = $db->fetchOne("SELECT COUNT(*) as cnt FROM licenses")['cnt'] ?? 0;
$users_count = $db->fetchOne("SELECT COUNT(*) as cnt FROM users WHERE role = 'user'")['cnt'] ?? 0;

// ========== 页面配置区域 ==========
$pageConfig = [
    'hero' => [
        'title' => '麟泓授权系统',
        'subtitle' => '专业软件授权管理 · 安全 · 稳定 · 高效',
        'features' => ['一键授权', '在线支付', '自动发货'],
        'buttons' => [
            'primary' => ['text' => '立即登录', 'url' => '/modules/home/login.php', 'icon' => 'login'],
            'secondary' => ['text' => '立即注册', 'url' => '/modules/home/register.php', 'icon' => 'register'],
            'xz' => ['text' => '源码下载', 'url' => '//auth.lhwks.cn/download.php', 'icon' => 'login']
            
        ]
    ],
    
    'features' => [
        ['icon' => 'shield-check', 'color' => '667eea', 'title' => '安全可靠', 'desc' => '高强度加密算法，防止篡改与破解，授权记录全程留痕，安全可追溯。'],
        ['icon' => 'flash', 'color' => 'f59e0b', 'title' => '快速验证', 'desc' => '毫秒级授权验证响应，支持高并发场景，稳定可靠。'],
        ['icon' => 'credit-card', 'color' => '10b981', 'title' => '在线支付', 'desc' => '支持支付宝、微信支付，一键购买，自动发货。'],
        ['icon' => 'web', 'color' => '764ba2', 'title' => '多域名绑定', 'desc' => '支持单授权多域名、泛域名绑定，防止盗用与非法分发。'],
        ['icon' => 'chart-line', 'color' => 'ef4444', 'title' => '实时监控', 'desc' => '服务器状态、授权使用情况实时展示，异常自动预警。'],
        ['icon' => 'code-tags', 'color' => '3498db', 'title' => '极简接入', 'desc' => 'API 简洁清晰，一行代码接入，支持 PHP、Python、Java 等多种环境。']
    ],
    
    'testimonials' => [
        ['avatar' => 'account-circle', 'color' => '667eea', 'text' => '接入非常简单，几分钟就完成了授权集成。系统稳定，客服响应及时！', 'name' => '开发者李工'],
        ['avatar' => 'account-tie', 'color' => '764ba2', 'text' => '授权管理功能强大，多域名绑定完美解决了我们的需求，推荐！', 'name' => '科技公司 CTO'],
        ['avatar' => 'account-star', 'color' => 'f59e0b', 'text' => '界面美观，操作流畅，支付也很方便，客户反馈体验很好。', 'name' => '独立开发者小王']
    ],
    
    'faq' => [
        ['q' => '授权码如何获取？', 'a' => '购买应用后，系统会自动生成唯一授权码，您可以在用户后台的"授权码管理"中查看和复制。'],
        ['q' => '授权码可以绑定多个域名吗？', 'a' => '支持，每个授权码可以绑定一个主域名。如需更换域名，可以在后台解绑后重新绑定。'],
        ['q' => '支付方式有哪些？', 'a' => '支持支付宝和微信支付，支付成功后自动生成授权码，无需人工干预。'],
        ['q' => '授权过期后可以续费吗？', 'a' => '可以，您可以在用户后台购买新的授权或联系客服进行续费处理。']
    ],
    
    'partners' => [
        ['icon' => 'star', 'color' => 'f59e0b', 'name' => '科技公司'],
        ['icon' => 'laptop', 'color' => '667eea', 'name' => '软件工作室'],
        ['icon' => 'cellphone', 'color' => '10b981', 'name' => '移动应用'],
        ['icon' => 'gamepad-variant', 'color' => 'ef4444', 'name' => '游戏开发'],
        ['icon' => 'github', 'color' => '333333', 'name' => '开源项目']
    ],
    
    'stats' => [
        ['value' => $apps_count, 'label' => '可授权应用', 'icon' => 'apps', 'color' => '667eea'],
        ['value' => $licenses_count, 'label' => '已发放授权码', 'icon' => 'key', 'color' => '10b981'],
        ['value' => $users_count, 'label' => '服务用户数', 'icon' => 'account-group', 'color' => 'f59e0b'],
        ['value' => '99.9%', 'label' => '服务可用性', 'icon' => 'chart-arc', 'color' => 'ef4444']
    ]
];

function iconUrl($icon, $color = '667eea') {
    return "assets/icons/{$icon}.svg";
}
?>
<?php include 'modules/home/header.php'; ?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title><?php echo htmlspecialchars($site_name); ?></title>
    <meta name="keywords" content="<?php echo htmlspecialchars($site_keywords); ?>">
    <meta name="description" content="<?php echo htmlspecialchars($site_name); ?>提供专业的软件授权管理服务，支持支付宝、微信支付，安全可靠、快速验证。">
    <link rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/dark.css" id="dark-theme" disabled>
    <style>
        /* ========== 全局变量 ========== */
        :root {
            --primary-color: #667eea;
            --primary-hover: #5a67d8;
            --danger-color: #ef4444;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --gradient-start: #667eea;
            --gradient-end: #764ba2;
            --bg-primary: #ffffff;
            --bg-secondary: #f8fafc;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --border-color: #e5e7eb;
            --card-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
            --card-hover-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
        }
        
        [data-theme="dark"] {
            --bg-primary: #1f2937;
            --bg-secondary: #111827;
            --text-primary: #f9fafb;
            --text-secondary: #9ca3af;
            --border-color: #374151;
            --card-shadow: 0 4px 6px -1px rgba(0,0,0,0.3);
            --card-hover-shadow: 0 20px 25px -5px rgba(0,0,0,0.4);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body { 
            background: var(--bg-primary); 
            color: var(--text-primary);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            transition: background 0.3s, color 0.3s;
        }
        
        /* ========== 图标通用样式 ========== */
        .icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }
        
        .icon img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
        }
        
        /* ========== 加载动画 ========== */
        .loader-fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        
        .loader-fullscreen.hide {
            opacity: 0;
            visibility: hidden;
        }
        
        .loader-content {
            text-align: center;
        }
        
        .loader-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid var(--border-color);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 16px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* ========== Hero 区域 ========== */
        .hero-section {
            position: relative;
            min-height: 600px;
            background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
            overflow: hidden;
        }
        
        .hero-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 100px 20px 140px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .hero-badge {
            display: inline-block;
            background: rgba(255,255,255,0.2);
            backdrop-filter: blur(10px);
            padding: 6px 16px;
            border-radius: 40px;
            color: white;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 24px;
            border: 1px solid rgba(255,255,255,0.3);
        }
        
        .hero-icon {
            margin-bottom: 32px;
            animation: float 4s ease-in-out infinite;
        }
        
        .hero-icon .icon {
            width: 90px;
            height: 90px;
            margin: 0 auto;
            filter: drop-shadow(0 8px 20px rgba(0,0,0,0.2));
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-12px); }
        }
        
        .hero-title {
            font-size: 56px;
            font-weight: 800;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #fff 0%, #f0e7ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .hero-subtitle {
            font-size: 20px;
            color: rgba(255,255,255,0.9);
            margin-bottom: 36px;
        }
        
        .hero-features {
            display: flex;
            justify-content: center;
            gap: 32px;
            margin-bottom: 48px;
            flex-wrap: wrap;
        }
        
        .hero-feature {
            display: flex;
            align-items: center;
            gap: 10px;
            color: white;
            font-size: 16px;
            font-weight: 500;
            background: rgba(255,255,255,0.15);
            padding: 10px 24px;
            border-radius: 40px;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255,255,255,0.2);
            transition: all 0.3s;
        }
        
        .hero-feature:hover {
            background: rgba(255,255,255,0.25);
            transform: translateY(-2px);
        }
        
        .hero-feature .icon {
            width: 22px;
            height: 22px;
        }
        
        .hero-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .hero-btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 16px 40px;
            border-radius: 60px;
            font-size: 18px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s;
        }
        
        .hero-btn .icon {
            width: 24px;
            height: 24px;
        }
        
        .hero-btn-primary {
            background: white;
            color: var(--primary-color);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        .hero-btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }
        
        .hero-btn-outline {
            background: rgba(255,255,255,0.1);
            color: white;
            border: 2px solid rgba(255,255,255,0.3);
            backdrop-filter: blur(10px);
        }
        
        .hero-btn-outline:hover {
            background: rgba(255,255,255,0.2);
            border-color: rgba(255,255,255,0.5);
            transform: translateY(-3px);
        }
        
        .hero-wave {
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            z-index: 2;
        }
        
        /* ========== 统计区域 ========== */
        .stats-section {
            background: var(--bg-secondary);
            padding: 80px 20px;
            margin-top: -2px;
        }
        
        .stats-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }
        
        .stat-card {
            background: var(--bg-primary);
            border-radius: 20px;
            padding: 40px 24px;
            text-align: center;
            box-shadow: var(--card-shadow);
            border: 1px solid var(--border-color);
            transition: all 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--card-hover-shadow);
        }
        
        .stat-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 20px;
        }
        
        .stat-icon .icon {
            width: 100%;
            height: 100%;
        }
        
        .stat-number {
            font-size: 48px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary-color), var(--gradient-end));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 12px;
        }
        
        .stat-label {
            font-size: 16px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        /* ========== 功能卡片 ========== */
        .features-section {
            max-width: 1200px;
            margin: 80px auto;
            padding: 0 20px;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-badge {
            display: inline-block;
            background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));
            color: var(--primary-color);
            padding: 6px 20px;
            border-radius: 40px;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 16px;
        }
        
        .section-title {
            font-size: 40px;
            font-weight: 800;
            margin-bottom: 16px;
            color: var(--text-primary);
        }
        
        .section-desc {
            color: var(--text-secondary);
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        
        .feature-card {
            background: var(--bg-primary);
            border-radius: 24px;
            padding: 40px 28px;
            text-align: left;
            box-shadow: var(--card-shadow);
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--gradient-end));
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--card-hover-shadow);
        }
        
        .feature-card:hover::before {
            opacity: 1;
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            margin-bottom: 24px;
            background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px;
        }
        
        .feature-icon .icon {
            width: 100%;
            height: 100%;
        }
        
        .feature-card h3 {
            font-size: 22px;
            margin-bottom: 12px;
            color: var(--text-primary);
        }
        
        .feature-card p {
            color: var(--text-secondary);
            line-height: 1.7;
            font-size: 15px;
        }
        
        /* ========== CTA 区域 ========== */
        .cta-section {
            text-align: center;
            padding: 80px 40px;
            background: linear-gradient(135deg, rgba(102,126,234,0.05), rgba(118,75,162,0.05));
            border-radius: 40px;
            margin: 60px 20px;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border-color);
        }
        
        .cta-content {
            position: relative;
            z-index: 2;
        }
        
        .cta-section h2 {
            font-size: 40px;
            margin-bottom: 20px;
            color: var(--text-primary);
        }
        
        .cta-section p {
            color: var(--text-secondary);
            margin-bottom: 36px;
            font-size: 18px;
        }
        
        .btn-group {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 16px 40px;
            border-radius: 60px;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        
        .btn .icon {
            width: 20px;
            height: 20px;
        }
        
        .btn-primary {
            background: var(--primary-color);
            color: white;
            box-shadow: 0 4px 15px rgba(102,126,234,0.4);
        }
        
        .btn-primary:hover {
            background: var(--primary-hover);
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(102,126,234,0.5);
        }
        
        .btn-outline {
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            background: transparent;
        }
        
        .btn-outline:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-3px);
        }
        
        /* ========== 用户评价 ========== */
        .testimonial-section {
            padding: 80px 20px;
            background: var(--bg-secondary);
        }
        
        .testimonial-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        
        .testimonial-card {
            background: var(--bg-primary);
            border-radius: 24px;
            padding: 36px 30px;
            box-shadow: var(--card-shadow);
            border: 1px solid var(--border-color);
            transition: all 0.3s;
        }
        
        .testimonial-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--card-hover-shadow);
        }
        
        .testimonial-quote {
            color: var(--primary-color);
            font-size: 40px;
            line-height: 1;
            margin-bottom: 20px;
            opacity: 0.3;
        }
        
        .testimonial-text {
            color: var(--text-primary);
            margin-bottom: 24px;
            line-height: 1.7;
            font-size: 16px;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .testimonial-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .testimonial-avatar .icon {
            width: 100%;
            height: 100%;
        }
        
        .testimonial-info h4 {
            color: var(--text-primary);
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .testimonial-info span {
            color: var(--text-secondary);
            font-size: 14px;
        }
        
        /* ========== FAQ ========== */
        .faq-section {
            max-width: 900px;
            margin: 80px auto;
            padding: 0 20px;
        }
        
        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 40px;
        }
        
        .faq-item {
            background: var(--bg-primary);
            border-radius: 20px;
            border: 1px solid var(--border-color);
            overflow: hidden;
            transition: all 0.3s;
        }
        
        .faq-item:hover {
            border-color: var(--primary-color);
            box-shadow: var(--card-shadow);
        }
        
        .faq-question {
            padding: 20px 24px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-primary);
            transition: background 0.3s;
        }
        
        .faq-question:hover {
            background: var(--bg-secondary);
        }
        
        .faq-icon {
            transition: transform 0.3s;
            color: var(--primary-color);
        }
        
        .faq-icon .icon {
            width: 20px;
            height: 20px;
        }
        
        .faq-question.active .faq-icon {
            transform: rotate(180deg);
        }
        
        .faq-answer {
            padding: 0 24px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.4s ease;
            color: var(--text-secondary);
            line-height: 1.7;
            border-top: 1px solid transparent;
        }
        
        .faq-answer.show {
            padding: 20px 24px;
            max-height: 300px;
            border-top-color: var(--border-color);
        }
        
        /* ========== 合作伙伴 ========== */
        .partner-section {
            padding: 60px 20px;
            text-align: center;
            border-top: 1px solid var(--border-color);
        }
        
        .partner-title {
            color: var(--text-secondary);
            margin-bottom: 40px;
            font-size: 16px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        
        .partner-logos {
            display: flex;
            justify-content: center;
            gap: 60px;
            flex-wrap: wrap;
        }
        
        .partner-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            transition: all 0.3s;
        }
        
        .partner-item:hover {
            transform: translateY(-4px);
        }
        
        .partner-icon {
            width: 56px;
            height: 56px;
            padding: 12px;
            background: var(--bg-secondary);
            border-radius: 16px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .partner-item:hover .partner-icon {
            background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));
        }
        
        .partner-icon .icon {
            width: 100%;
            height: 100%;
        }
        
        .partner-item span {
            font-size: 14px;
            color: var(--text-secondary);
            font-weight: 500;
        }
        
        /* ========== Footer ========== */
        .footer {
            background: var(--bg-secondary);
            padding: 40px 20px;
            text-align: center;
            border-top: 1px solid var(--border-color);
        }
        
        .footer-logo {
            margin-bottom: 24px;
        }
        
        .footer-logo img {
            height: 40px;
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        
        .footer-links a {
            color: var(--text-secondary);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: var(--primary-color);
        }
        
        .footer-copyright {
            color: var(--text-secondary);
            font-size: 14px;
        }
        
        .footer-copyright a {
            color: var(--text-secondary);
            text-decoration: none;
            margin-left: 12px;
        }
        
        .footer-copyright a:hover {
            color: var(--primary-color);
        }
        
        /* ========== 响应式 ========== */
        @media (max-width: 992px) {
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
            .faq-grid { grid-template-columns: 1fr; }
        }
        
        @media (max-width: 768px) {
            .hero-title { font-size: 36px; }
            .hero-subtitle { font-size: 16px; }
            .hero-content { padding: 80px 20px 120px; }
            .hero-btn { padding: 14px 28px; font-size: 16px; }
            .features-grid { grid-template-columns: 1fr; }
            .stats-grid { grid-template-columns: 1fr; }
            .testimonial-grid { grid-template-columns: 1fr; }
            .section-title { font-size: 30px; }
            .stat-number { font-size: 40px; }
            .partner-logos { gap: 30px; }
            .cta-section { padding: 60px 20px; margin: 40px 20px; }
            .cta-section h2 { font-size: 28px; }
        }
    </style>
</head>
<body>
    <!-- 全屏加载动画 -->
    <div class="loader-fullscreen" id="loader">
        <div class="loader-content">
            <div class="loader-spinner"></div>
            <p style="color: var(--text-secondary);">加载中...</p>
        </div>
    </div>

    <!-- Hero 区域 -->
    <div class="hero-section">
        <div class="hero-particles" id="heroParticles"></div>
        <div class="hero-content">
            <div class="hero-badge">
                <span> 专业软件授权解决方案</span>
            </div>
            <div class="hero-icon">
                <span class="icon">
                    <img src="<?php echo $site_sidebar_icon; ?>" alt="授权" >
                </span>
            </div>
            <h1 class="hero-title">
                <span class="gradient-text"><?php echo htmlspecialchars($pageConfig['hero']['title']); ?></span>
            </h1>
            <p class="hero-subtitle"><?php echo htmlspecialchars($pageConfig['hero']['subtitle']); ?></p>
            <div class="hero-features">
                <?php foreach ($pageConfig['hero']['features'] as $feature): ?>
                <span class="hero-feature">
                    <span class="icon">
                        <img src="/assets/icons/check-circle.svg" alt="">
                    </span>
                    <?php echo htmlspecialchars($feature); ?>
                </span>
                <?php endforeach; ?>
            </div>
            <div class="hero-buttons">
                <a href="<?php echo $pageConfig['hero']['buttons']['primary']['url']; ?>" class="hero-btn hero-btn-primary">
                    <span class="icon">
                        <img src="<?php echo iconUrl($pageConfig['hero']['buttons']['primary']['icon'], '667eea'); ?>" alt="">
                    </span>
                    <?php echo $pageConfig['hero']['buttons']['primary']['text']; ?>
                </a>
                <a href="<?php echo $pageConfig['hero']['buttons']['secondary']['url']; ?>" class="hero-btn hero-btn-outline">
                    <span class="icon">
                        <img src="<?php echo iconUrl($pageConfig['hero']['buttons']['secondary']['icon'], 'ffffff'); ?>" alt="">
                    </span>
                    <?php echo $pageConfig['hero']['buttons']['secondary']['text']; ?>
                </a>
                 <a href="<?php echo $pageConfig['hero']['buttons']['xz']['url']; ?>" class="hero-btn hero-btn-outline">
                    <span class="icon">
                        <img src="<?php echo iconUrl($pageConfig['hero']['buttons']['secondary']['icon'], 'ffffff'); ?>" alt="">
                    </span>
                    <?php echo $pageConfig['hero']['buttons']['xz']['text']; ?>
                </a>
            </div>
        </div>
        <div class="hero-wave">
            
        </div>
    </div>

    <!-- 统计数据区域 -->
    <section class="stats-section">
        <div class="stats-grid">
            <?php foreach ($pageConfig['stats'] as $stat): ?>
            <div class="stat-card">
                <div class="stat-icon">
                    <span class="icon">
                        <img src="<?php echo iconUrl($stat['icon'], $stat['color']); ?>" alt="">
                    </span>
                </div>
                <div class="stat-number"><?php echo is_numeric($stat['value']) ? number_format($stat['value']) : $stat['value']; ?></div>
                <div class="stat-label"><?php echo htmlspecialchars($stat['label']); ?></div>
            </div>
            <?php endforeach; ?>
        </div>
    </section>

    <!-- 特色功能区域 -->
    <section class="features-section">
        <div class="section-header">
            <span class="section-badge">核心功能</span>
            <h2 class="section-title">为什么选择我们</h2>
            <p class="section-desc">提供全方位的软件授权管理解决方案，让您的业务更安全高效</p>
        </div>
        <div class="features-grid">
            <?php foreach ($pageConfig['features'] as $feature): ?>
            <div class="feature-card">
                <div class="feature-icon">
                    <span class="icon">
                        <img src="<?php echo iconUrl($feature['icon'], $feature['color']); ?>" alt="">
                    </span>
                </div>
                <h3><?php echo htmlspecialchars($feature['title']); ?></h3>
                <p><?php echo htmlspecialchars($feature['desc']); ?></p>
            </div>
            <?php endforeach; ?>
        </div>
    </section>

    <!-- CTA 区域 -->
    <div class="cta-section">
        <div class="cta-content">
            <h2>开始保护您的软件资产</h2>
            <p>加入 <?php echo htmlspecialchars($site_name); ?>，让您的软件授权管理更简单、更安全</p>
            <div class="btn-group">
                <?php if ($current_user): ?>
                    <a href="/admin.php" class="btn btn-primary">
                        <span class="icon">
                            <img src="/assets/icons/view-dashboard.svg" alt="">
                        </span>
                        进入控制台
                    </a>
                <?php else: ?>
                    <a href="/modules/home/register.php" class="btn btn-primary">
                        <span class="icon">
                            <img src="/assets/icons/account-plus.svg" alt="">
                        </span>
                        免费注册
                    </a>
                    <a href="/modules/home/login.php" class="btn btn-outline">
                        <span class="icon">
                            <img src="/assets/icons/login.svg" alt="">
                        </span>
                        已有账号？登录
                    </a>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- 用户评价区域 -->
    <section class="testimonial-section">
        <div class="section-header">
            <span class="section-badge">用户评价</span>
            <h2 class="section-title">客户怎么说</h2>
            <p class="section-desc">听听来自真实用户的使用体验</p>
        </div>
        <div class="testimonial-grid">
            <?php foreach ($pageConfig['testimonials'] as $item): ?>
            <div class="testimonial-card">
                <div class="testimonial-quote">"</div>
                <div class="testimonial-text"><?php echo htmlspecialchars($item['text']); ?></div>
                <div class="testimonial-author">
                    <div class="testimonial-avatar">
                        <span class="icon">
                            <img src="<?php echo iconUrl($item['avatar'], ); ?>" alt="">
                        </span>
                    </div>
                    <div class="testimonial-info">
                        <h4><?php echo htmlspecialchars($item['name']); ?></h4>
                        <span>已验证用户</span>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </section>

    <!-- FAQ 区域 -->
    <section class="faq-section">
        <div class="section-header">
            <span class="section-badge">常见问题</span>
            <h2 class="section-title">需要帮助？</h2>
            <p class="section-desc">快速解答您的疑问</p>
        </div>
        <div class="faq-grid">
            <?php foreach ($pageConfig['faq'] as $index => $item): ?>
            <div class="faq-item">
                <div class="faq-question" onclick="toggleFAQ(this)">
                    <span><?php echo htmlspecialchars($item['q']); ?></span>
                    <span class="faq-icon">
                        <span class="icon">
                            <img src="/assets/icons/chevron-down.svg" alt="">
                        </span>
                    </span>
                </div>
                <div class="faq-answer">
                    <?php echo htmlspecialchars($item['a']); ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </section>

    <!-- 合作伙伴区域 -->
    <section class="partner-section">
        <p class="partner-title">已为以下品牌提供授权服务</p>
        <div class="partner-logos">
            <?php foreach ($pageConfig['partners'] as $partner): ?>
            <div class="partner-item">
                <div class="partner-icon">
                    <span class="icon">
                        <img src="<?php echo iconUrl($partner['icon'], $partner['color']); ?>" alt="">
                    </span>
                </div>
                <span><?php echo htmlspecialchars($partner['name']); ?></span>
            </div>
            <?php endforeach; ?>
        </div>
    </section>

    <!-- 底部 -->
    <footer class="footer">
        <div class="footer-logo">
            <img src="<?php echo htmlspecialchars($site_logo); ?>" alt="Logo" onerror="this.src='/assets/uploads/logo.png'">
        </div>
        <div class="footer-links">
            <?php foreach ($friendLinks as $link): ?>
                <a href="<?php echo htmlspecialchars($link['url']); ?>" target="_blank"><?php echo htmlspecialchars($link['name']); ?></a>
            <?php endforeach; ?>
        </div>
        <div class="footer-copyright">
            <?php echo htmlspecialchars($site_copyright); ?>
            <?php if (!empty(getSiteConfig('site_icp'))): ?>
                <a href="https://beian.miit.gov.cn/" target="_blank"><?php echo htmlspecialchars(getSiteConfig('site_icp')); ?></a>
            <?php endif; ?>
        </div>
    </footer>

    <script>
        // 全屏加载动画
        window.addEventListener('load', function() {
            const loader = document.getElementById('loader');
            if (loader) {
                setTimeout(() => {
                    loader.classList.add('hide');
                    setTimeout(() => loader.style.display = 'none', 500);
                }, 800);
            }
        });
        
        // FAQ 切换
        function toggleFAQ(element) {
            element.classList.toggle('active');
            element.nextElementSibling.classList.toggle('show');
        }
        
        // 粒子动画
        (function() {
            const container = document.getElementById('heroParticles');
            if (!container) return;
            
            for (let i = 0; i < 40; i++) {
                const particle = document.createElement('div');
                const size = Math.random() * 4 + 2;
                particle.style.cssText = `
                    position: absolute;
                    width: ${size}px;
                    height: ${size}px;
                    background: rgba(255,255,255,${Math.random() * 0.4 + 0.2});
                    border-radius: 50%;
                    left: ${Math.random() * 100}%;
                    top: ${Math.random() * 100}%;
                    animation: floatParticle ${Math.random() * 12 + 12}s linear infinite;
                    animation-delay: ${Math.random() * -15}s;
                    box-shadow: 0 0 ${size * 2}px rgba(255,255,255,0.5);
                `;
                container.appendChild(particle);
            }
            
            if (!document.getElementById('particle-style')) {
                const style = document.createElement('style');
                style.id = 'particle-style';
                style.textContent = `
                    @keyframes floatParticle {
                        0% { transform: translateY(0) rotate(0deg); opacity: 0; }
                        10% { opacity: 1; }
                        90% { opacity: 1; }
                        100% { transform: translateY(-600px) rotate(360deg); opacity: 0; }
                    }
                `;
                document.head.appendChild(style);
            }
        })();
        
        // 深色主题切换
        const theme = localStorage.getItem('theme');
        if (theme === 'dark') {
            document.documentElement.setAttribute('data-theme', 'dark');
            document.getElementById('dark-theme').disabled = false;
        }
    </script>
</body>
</html>