<?php
$pageTitle = '客户端下载';
require_once 'header.php';

// 获取当前选中的平台
$selectedPlatform = isset($_GET['platform']) ? $_GET['platform'] : '';

// 获取服务器基础 URL
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
$host = $_SERVER['HTTP_HOST'] ?? 'localhost';
$scriptDir = rtrim(str_replace('\\', '/', dirname($_SERVER['SCRIPT_NAME'])), '/');
$baseUrl = $protocol . '://' . $host . $scriptDir;
?>

<style>
/* ===== 多平台客户端下载页样式 ===== */
.clients-page {
    max-width: 1100px; margin: 0 auto; padding: 20px 20px 60px;
}

/* 主横幅 */
.clients-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 24px; padding: 60px 40px 50px; text-align: center;
    margin-bottom: 40px; position: relative; overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.clients-hero::before {
    content: ''; position: absolute; top: -100px; left: 50%;
    transform: translateX(-50%); width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(182,74,42,0.3) 0%, transparent 70%);
    pointer-events: none;
}
.clients-hero-icon {
    font-size: 64px; margin-bottom: 16px; display: inline-block;
    position: relative; z-index: 1;
}
.clients-hero h1 {
    color: #fff; font-size: 36px; margin: 0 0 10px;
    position: relative; z-index: 1;
}
.clients-hero .subtitle {
    color: rgba(255,255,255,0.7); font-size: 16px; margin-bottom: 40px;
    position: relative; z-index: 1;
}

/* 平台卡片网格 */
.platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    position: relative; z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

.platform-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px; padding: 28px 20px;
    text-align: center; cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.platform-card:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.25);
}
.platform-card.active {
    background: rgba(182, 74, 42, 0.3);
    border-color: #b64a2a;
    box-shadow: 0 0 0 2px #b64a2a, 0 12px 32px rgba(182, 74, 42, 0.3);
}

.platform-icon {
    width: 72px; height: 72px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    transition: transform 0.3s;
}
.platform-card:hover .platform-icon {
    transform: scale(1.08);
}

.platform-android .platform-icon {
    background: linear-gradient(135deg, #4caf50, #66bb6a); color: #fff;
}
.platform-ios .platform-icon {
    background: linear-gradient(135deg, #333, #555); color: #fff;
}
.platform-windows .platform-icon {
    background: linear-gradient(135deg, #0078d4, #2b88d8); color: #fff;
}
.platform-mac .platform-icon {
    background: linear-gradient(135deg, #555, #777); color: #fff;
}
.platform-wechat .platform-icon {
    background: linear-gradient(135deg, #09bb07, #10c810); color: #fff;
}

.platform-icon i {
    font-size: 36px;
}
.platform-icon svg {
    width: 36px; height: 36px;
}

.platform-name {
    color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 6px;
}
.platform-desc {
    color: rgba(255,255,255,0.6); font-size: 13px; line-height: 1.4;
}

/* 详情面板 */
.platform-detail {
    background: #fff; border-radius: 20px; padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.platform-detail h2 {
    font-size: 28px; color: #333; margin-bottom: 10px;
    display: flex; align-items: center; gap: 12px;
}
.platform-detail .platform-icon-lg {
    width: 48px; height: 48px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
}
.platform-detail .platform-icon-lg i,
.platform-detail .platform-icon-lg svg {
    font-size: 24px; width: 24px; height: 24px;
}

.platform-detail .platform-subtitle {
    color: #888; font-size: 15px; margin-bottom: 30px;
}

/* 下载按钮组 */
.download-actions {
    display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px;
}
.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, #b64a2a, #d4663a);
    color: #fff; padding: 12px 28px; border-radius: 10px;
    font-size: 15px; font-weight: 600; text-decoration: none;
    border: none; cursor: pointer; transition: all 0.2s;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(182, 74, 42, 0.35);
}
.btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: #b64a2a; padding: 12px 28px;
    border-radius: 10px; font-size: 15px; font-weight: 500;
    text-decoration: none; border: 2px solid #e0c0b0;
    cursor: pointer; transition: all 0.2s;
}
.btn-secondary:hover {
    border-color: #b64a2a;
    background: #fff5f0;
}

/* 平台特定内容 */
.platform-features {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px; margin-bottom: 30px;
}
.feature-item {
    background: #faf8f6; border-radius: 12px; padding: 16px;
    text-align: center;
}
.feature-item .f-icon { font-size: 28px; margin-bottom: 8px; }
.feature-item .f-name { font-size: 14px; font-weight: 600; color: #333; }
.feature-item .f-desc { font-size: 12px; color: #888; margin-top: 4px; }

/* 步骤指引 */
.steps-guide {
    margin-bottom: 30px;
}
.steps-guide h3 {
    font-size: 18px; color: #333; margin-bottom: 16px;
    padding-bottom: 10px; border-bottom: 2px solid #f0e0d0;
}
.steps-list { list-style: none; padding: 0; margin: 0; }
.steps-list li {
    display: flex; gap: 14px; padding: 14px 0;
    border-bottom: 1px solid #f5f0ea;
}
.steps-list li:last-child { border-bottom: none; }
.step-num {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: #b64a2a; color: #fff; display: flex;
    align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
}
.step-content { flex: 1; }
.step-content strong { display: block; font-size: 15px; color: #333; margin-bottom: 4px; }
.step-content p { margin: 0; font-size: 14px; color: #666; line-height: 1.6; }
.step-content .warning {
    display: inline-block; background: #fff3e0; color: #e65100;
    padding: 3px 10px; border-radius: 4px; font-size: 12px;
    margin-top: 6px;
}

/* 二维码展示 */
.qr-display {
    text-align: center; margin: 30px 0;
}
.qr-box {
    display: inline-block; padding: 20px;
    background: #fff; border: 3px solid #b64a2a; border-radius: 16px;
}
.qr-box canvas, .qr-box img {
    display: block; border-radius: 8px;
}
.qr-hint {
    margin-top: 12px; font-size: 14px; color: #666;
}
.qr-hint strong { color: #b64a2a; }

/* 系统要求 */
.sys-req {
    background: #f8f8f8; border-radius: 12px; padding: 20px;
}
.sys-req h3 {
    font-size: 16px; color: #555; margin-bottom: 12px;
}
.sys-req ul { list-style: none; padding: 0; margin: 0; }
.sys-req li {
    padding: 5px 0; font-size: 13px; color: #666;
    display: flex; align-items: center; gap: 8px;
}
.sys-req li::before {
    content: '✓'; color: #4caf50; font-weight: 700;
}

/* 移动端 */
@media (max-width: 768px) {
    .clients-hero { padding: 40px 20px 30px; }
    .clients-hero h1 { font-size: 26px; }
    .platforms-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
    .platform-card { padding: 20px 12px; }
    .platform-icon { width: 56px; height: 56px; border-radius: 14px; }
    .platform-icon i { font-size: 28px; }
    .platform-name { font-size: 15px; }
    .platform-desc { font-size: 11px; }
    .platform-detail { padding: 24px 20px; }
    .download-actions { flex-direction: column; }
    .btn-primary, .btn-secondary { justify-content: center; }
}
</style>

<main class="site-main">
<div class="clients-page">

    <!-- 主横幅 -->
    <div class="clients-hero">
        <div class="clients-hero-icon">💒</div>
        <h1>阳泉婚礼宝典 · 全平台客户端</h1>
        <p class="subtitle">随时随地，为您的婚礼保驾护航</p>

        <div class="platforms-grid">
            <!-- Android -->
            <a href="clients.php?platform=android" class="platform-card platform-android <?php echo $selectedPlatform === 'android' ? 'active' : ''; ?>" data-platform="android">
                <div class="platform-icon"><i class="fab fa-android"></i></div>
                <div class="platform-name">Android</div>
                <div class="platform-desc">扫码下载 APK 安装包</div>
            </a>

            <!-- iOS -->
            <a href="clients.php?platform=ios" class="platform-card platform-ios <?php echo $selectedPlatform === 'ios' ? 'active' : ''; ?>" data-platform="ios">
                <div class="platform-icon"><i class="fab fa-apple"></i></div>
                <div class="platform-name">iOS</div>
                <div class="platform-desc">添加到主屏幕使用</div>
            </a>

            <!-- Windows -->
            <a href="clients.php?platform=windows" class="platform-card platform-windows <?php echo $selectedPlatform === 'windows' ? 'active' : ''; ?>" data-platform="windows">
                <div class="platform-icon">
                    <svg viewBox="0 0 24 24" width="36" height="36" fill="currentColor">
                        <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.6L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-13.051-1.349"/>
                    </svg>
                </div>
                <div class="platform-name">Windows</div>
                <div class="platform-desc">便携版本地运行</div>
            </a>

            <!-- Mac -->
            <a href="clients.php?platform=mac" class="platform-card platform-mac <?php echo $selectedPlatform === 'mac' ? 'active' : ''; ?>" data-platform="mac">
                <div class="platform-icon"><i class="fab fa-apple"></i></div>
                <div class="platform-name">Mac</div>
                <div class="platform-desc">本地 PHP 运行指南</div>
            </a>

            <!-- 微信 -->
            <a href="clients.php?platform=wechat" class="platform-card platform-wechat <?php echo $selectedPlatform === 'wechat' ? 'active' : ''; ?>" data-platform="wechat">
                <div class="platform-icon"><i class="fab fa-weixin"></i></div>
                <div class="platform-name">微信</div>
                <div class="platform-desc">H5 版扫码进入</div>
            </a>
        </div>
    </div>

    <!-- 平台详情 -->
    <?php if ($selectedPlatform === 'android'): ?>
    <div class="platform-detail">
        <h2>
            <span class="platform-icon-lg" style="background:linear-gradient(135deg,#4caf50,#66bb6a);"><i class="fab fa-android"></i></span>
            Android 客户端
        </h2>
        <p class="platform-subtitle">阳泉婚礼宝典 Android 原生 APP · v1.0.0 · 4.41MB</p>

        <div class="download-actions">
            <a href="downloads.php?action=download&type=apk" class="btn-primary">
                <i class="fas fa-download"></i> 下载 APK
            </a>
            <a href="app_download.php" class="btn-secondary">
                <i class="fas fa-qrcode"></i> 查看下载页
            </a>
        </div>

        <div class="platform-features">
            <div class="feature-item"><div class="f-icon">📅</div><div class="f-name">筹备清单</div><div class="f-desc">完整任务跟踪</div></div>
            <div class="feature-item"><div class="f-icon">🎬</div><div class="f-name">统筹时间轴</div><div class="f-desc">12个环节指挥</div></div>
            <div class="feature-item"><div class="f-icon">🎤</div><div class="f-name">数字主持人</div><div class="f-desc">AI 驱动主持</div></div>
            <div class="feature-item"><div class="f-icon">📋</div><div class="f-name">资料下载</div><div class="f-desc">13种文档模板</div></div>
        </div>

        <h3 style="font-size:18px;color:#333;margin-bottom:12px;">📋 安装步骤</h3>
        <ol class="steps-list">
            <li><span class="step-num">1</span><div class="step-content"><strong>下载 APK 文件</strong><p>点击上方按钮下载 yangquan_wedding_v1.0.0.apk (约 4.41MB)</p></div></li>
            <li><span class="step-num">2</span><div class="step-content"><strong>允许未知来源安装</strong><p>首次安装请在系统设置中开启"允许来自此来源的应用"</p><span class="warning">⚠️ 仅需设置一次</span></div></li>
            <li><span class="step-num">3</span><div class="step-content"><strong>点击安装</strong><p>在通知栏点击 APK 文件，点击"安装"即可</p></div></li>
            <li><span class="step-num">4</span><div class="step-content"><strong>打开使用</strong><p>安装完成点击"打开"即可使用</p></div></li>
        </ol>

        <div class="sys-req">
            <h3>⚙️ 系统要求</h3>
            <ul>
                <li>Android 7.0 (API 24) 及以上</li>
                <li>至少 20MB 可用存储空间</li>
                <li>需要网络连接（Wi-Fi 或移动数据）</li>
                <li>已通过 APK Signature Scheme v2 签名验证</li>
            </ul>
        </div>
    </div>

    <?php elseif ($selectedPlatform === 'ios'): ?>
    <div class="platform-detail">
        <h2>
            <span class="platform-icon-lg" style="background:linear-gradient(135deg,#333,#555);"><i class="fab fa-apple"></i></span>
            iOS 客户端
        </h2>
        <p class="platform-subtitle">通过 Safari 添加到主屏幕，体验等同于原生 APP</p>

        <div class="download-actions">
            <a href="<?php echo $baseUrl; ?>" class="btn-primary" onclick="iosAddToHomeScreen(event)">
                <i class="fas fa-home"></i> 在 Safari 中打开
            </a>
        </div>

        <h3 style="font-size:18px;color:#333;margin:20px 0 12px;">📱 添加到主屏幕步骤</h3>
        <ol class="steps-list">
            <li><span class="step-num">1</span><div class="step-content"><strong>在 Safari 中打开网站</strong><p>在 iOS Safari 浏览器中访问阳泉婚礼宝典网站</p></div></li>
            <li><span class="step-num">2</span><div class="step-content"><strong>点击分享按钮</strong><p>点击 Safari 底部/顶部的"分享"按钮（方框带向上箭头图标）</p></div></li>
            <li><span class="step-num">3</span><div class="step-content"><strong>选择"添加到主屏幕"</strong><p>在弹出菜单中选择"添加到主屏幕"</p></div></li>
            <li><span class="step-num">4</span><div class="step-content"><strong>确认添加</strong><p>确认名称后点击"添加"，主屏幕将出现 APP 图标</p></div></li>
            <li><span class="step-num">5</span><div class="step-content"><strong>点击图标使用</strong><p>点击主屏幕图标即可全屏使用，体验与原生 APP 一致</p></div></li>
        </ol>

        <div class="platform-features">
            <div class="feature-item"><div class="f-icon">📱</div><div class="f-name">全屏体验</div><div class="f-desc">无浏览器地址栏</div></div>
            <div class="feature-item"><div class="f-icon">💾</div><div class="f-name">离线可用</div><div class="f-desc">Service Worker 缓存</div></div>
            <div class="feature-item"><div class="f-icon">🔔</div><div class="f-name">推送通知</div><div class="f-desc">支持通知提醒</div></div>
            <div class="feature-item"><div class="f-icon">🎨</div><div class="f-name">主题定制</div><div class="f-desc">婚礼主题配色</div></div>
        </div>

        <div class="sys-req">
            <h3>⚙️ 系统要求</h3>
            <ul>
                <li>iOS 12.0 及以上</li>
                <li>Safari 浏览器（或支持 PWA 的浏览器）</li>
                <li>iCloud 账户（用于备份）</li>
                <li>无需下载安装包，纯网页体验</li>
            </ul>
        </div>
    </div>

    <?php elseif ($selectedPlatform === 'windows'): ?>
    <div class="platform-detail">
        <h2>
            <span class="platform-icon-lg" style="background:linear-gradient(135deg,#0078d4,#2b88d8);">
                <svg viewBox="0 0 24 24" width="24" height="24" fill="#fff">
                    <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.6L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-13.051-1.349"/>
                </svg>
            </span>
            Windows 客户端
        </h2>
        <p class="platform-subtitle">便携版 PHP 本地运行包 · 开箱即用</p>

        <div class="download-actions">
            <a href="downloads.php?action=download&type=windows_portable" class="btn-primary">
                <i class="fas fa-download"></i> 下载便携版
            </a>
            <button class="btn-secondary" onclick="showWindowsGuide()">
                <i class="fas fa-book"></i> 查看使用说明
            </button>
        </div>

        <h3 style="font-size:18px;color:#333;margin:20px 0 12px;">🖥️ 使用步骤</h3>
        <ol class="steps-list">
            <li><span class="step-num">1</span><div class="step-content"><strong>下载便携版压缩包</strong><p>点击上方按钮下载 yangquan_wedding_windows.zip</p></div></li>
            <li><span class="step-num">2</span><div class="step-content"><strong>解压到本地目录</strong><p>解压到 D:\yangquan_wedding（或任意英文路径）</p></div></li>
            <li><span class="step-num">3</span><div class="step-content"><strong>双击启动</strong><p>运行 "start.bat" 脚本自动启动 PHP 服务器</p></div></li>
            <li><span class="step-num">4</span><div class="step-content"><strong>浏览器访问</strong><p>自动打开 http://127.0.0.1:8080 即可使用</p></div></li>
            <li><span class="step-num">5</span><div class="step-content"><strong>关闭服务</strong><p>关闭命令行窗口即可停止服务器</p></div></li>
        </ol>

        <div class="platform-features">
            <div class="feature-item"><div class="f-icon">💨</div><div class="f-name">免安装</div><div class="f-desc">解压即用</div></div>
            <div class="feature-item"><div class="f-icon">🔒</div><div class="f-name">数据本地</div><div class="f-desc">SQLite 数据库</div></div>
            <div class="feature-item"><div class="f-icon">🌐</div><div class="f-name">离线可用</div><div class="f-desc">无需联网</div></div>
            <div class="feature-item"><div class="f-icon">💾</div><div class="f-name">便携存储</div><div class="f-desc">U盘直接运行</div></div>
        </div>

        <div class="sys-req">
            <h3>⚙️ 系统要求</h3>
            <ul>
                <li>Windows 7/8/10/11（32位或64位）</li>
                <li>至少 200MB 可用磁盘空间</li>
                <li>任意现代浏览器（Chrome/Edge/Firefox 推荐）</li>
                <li>无需安装 PHP 或其他运行时</li>
            </ul>
        </div>
    </div>

    <?php elseif ($selectedPlatform === 'mac'): ?>
    <div class="platform-detail">
        <h2>
            <span class="platform-icon-lg" style="background:linear-gradient(135deg,#555,#777);"><i class="fab fa-apple"></i></span>
            Mac 客户端
        </h2>
        <p class="platform-subtitle">使用 PHP 内置服务器或 MAMP 在本地运行</p>

        <div class="download-actions">
            <a href="<?php echo $baseUrl; ?>" class="btn-primary">
                <i class="fas fa-globe"></i> 直接访问网站
            </a>
        </div>

        <h3 style="font-size:18px;color:#333;margin:20px 0 12px;">🍎 本地运行方式</h3>

        <h4 style="font-size:16px;color:#555;margin:16px 0 8px;">方式一：使用 Homebrew 安装 PHP（推荐）</h4>
        <ol class="steps-list">
            <li><span class="step-num">1</span><div class="step-content"><strong>安装 PHP</strong><p>终端执行：<code style="background:#f5f0ea;padding:2px 8px;border-radius:4px;">brew install php</code></p></div></li>
            <li><span class="step-num">2</span><div class="step-content"><strong>下载网站源码</strong><p>将网站文件下载到本地目录，如 ~/Sites/wedding</p></div></li>
            <li><span class="step-num">3</span><div class="step-content"><strong>启动服务器</strong><p>进入目录执行：<code style="background:#f5f0ea;padding:2px 8px;border-radius:4px;">php -S localhost:8080</code></p></div></li>
            <li><span class="step-num">4</span><div class="step-content"><strong>浏览器访问</strong><p>打开 http://localhost:8080 即可使用</p></div></li>
        </ol>

        <h4 style="font-size:16px;color:#555;margin:16px 0 8px;">方式二：使用 MAMP（图形界面）</h4>
        <ol class="steps-list">
            <li><span class="step-num">1</span><div class="step-content"><strong>下载 MAMP</strong><p>访问 https://mamp.info 下载免费版本</p></div></li>
            <li><span class="step-num">2</span><div class="step-content"><strong>配置网站</strong><p>将源码放入 MAMP 的 htdocs 目录</p></div></li>
            <li><span class="step-num">3</span><div class="step-content"><strong>启动服务</strong><p>打开 MAMP，点击"Start Servers"</p></div></li>
            <li><span class="step-num">4</span><div class="step-content"><strong>访问使用</strong><p>浏览器打开 http://localhost:8888 即可使用</p></div></li>
        </ol>

        <div class="sys-req">
            <h3>⚙️ 系统要求</h3>
            <ul>
                <li>macOS 10.13 (High Sierra) 及以上</li>
                <li>PHP 7.3 及以上版本</li>
                <li>SQLite 3.0 及以上</li>
                <li>推荐使用 Safari 或 Chrome 浏览器</li>
            </ul>
        </div>
    </div>

    <?php elseif ($selectedPlatform === 'wechat'): ?>
    <div class="platform-detail">
        <h2>
            <span class="platform-icon-lg" style="background:linear-gradient(135deg,#09bb07,#10c810);"><i class="fab fa-weixin"></i></span>
            微信 H5 版
        </h2>
        <p class="platform-subtitle">在微信中直接打开，无需下载安装</p>

        <div class="download-actions">
            <a href="<?php echo $baseUrl; ?>" class="btn-primary">
                <i class="fas fa-external-link-alt"></i> 在微信中打开
            </a>
        </div>

        <!-- 二维码 -->
        <div class="qr-display">
            <div class="qr-box" id="wechatQrBox">
                <div id="wechatQr" style="width:200px;height:200px;"></div>
            </div>
            <p class="qr-hint">📱 用微信 <strong>扫一扫</strong> 扫描二维码<br>直接在微信中打开阳泉婚礼宝典</p>
        </div>

        <h3 style="font-size:18px;color:#333;margin:20px 0 12px;">💬 使用说明</h3>
        <ol class="steps-list">
            <li><span class="step-num">1</span><div class="step-content"><strong>打开微信</strong><p>在手机上打开微信，点击右上角"+"选择"扫一扫"</p></div></li>
            <li><span class="step-num">2</span><div class="step-content"><strong>扫描二维码</strong><p>扫描上方二维码，系统将自动在微信中打开 H5 页面</p></div></li>
            <li><span class="step-num">3</span><div class="step-content"><strong>收藏小程序</strong><p>点击右上角"···"→"收藏"，下次可从收藏中快速访问</p></div></li>
            <li><span class="step-num">4</span><div class="step-content"><strong>添加到桌面</strong><p>点击右上角"···"→"添加到桌面"，生成桌面快捷方式</p></div></li>
        </ol>

        <div class="platform-features">
            <div class="feature-item"><div class="f-icon">⚡</div><div class="f-name">免下载</div><div class="f-desc">扫码即用</div></div>
            <div class="feature-item"><div class="f-icon">💬</div><div class="f-name">微信内</div><div class="f-desc">直接分享</div></div>
            <div class="feature-item"><div class="f-icon">📱</div><div class="f-name">跨平台</div><div class="f-desc">iOS & Android</div></div>
            <div class="feature-item"><div class="f-icon">🔗</div><div class="f-name">一键分享</div><div class="f-desc">给朋友使用</div></div>
        </div>
    </div>

    <?php else: ?>
    <!-- 默认：全部平台总览 -->
    <div class="platform-detail" style="text-align:center;">
        <h2 style="justify-content:center;">
            <span class="platform-icon-lg" style="background:linear-gradient(135deg,#b64a2a,#d4663a);"><i class="fas fa-mobile-alt"></i></span>
            选择您的平台
        </h2>
        <p class="platform-subtitle" style="text-align:center;">点击上方平台卡片，查看详细下载和使用说明</p>

        <div class="download-actions" style="justify-content:center;">
            <a href="clients.php?platform=android" class="btn-primary">
                <i class="fab fa-android"></i> Android APP
            </a>
            <a href="clients.php?platform=ios" class="btn-secondary">
                <i class="fab fa-apple"></i> iOS 使用
            </a>
            <a href="clients.php?platform=wechat" class="btn-secondary">
                <i class="fab fa-weixin"></i> 微信 H5
            </a>
        </div>
    </div>
    <?php endif; ?>

</div>
</main>

<!-- QRCode.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
var baseUrl = '<?php echo $baseUrl; ?>';
var platform = '<?php echo $selectedPlatform; ?>';

// 生成微信二维码
if (platform === 'wechat' && typeof QRCode !== 'undefined') {
    new QRCode(document.getElementById('wechatQr'), {
        text: baseUrl,
        width: 200,
        height: 200,
        colorDark: '#000',
        colorLight: '#fff',
        correctLevel: QRCode.CorrectLevel.H
    });
}

// iOS 添加到主屏提示
function iosAddToHomeScreen(e) {
    e.preventDefault();
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf('iphone') !== -1 || ua.indexOf('ipad') !== -1) {
        alert('请在 Safari 浏览器中打开本页面，然后点击分享按钮 → 添加到主屏幕');
    } else {
        window.open(baseUrl, '_blank');
    }
}

function showWindowsGuide() {
    alert('Windows 便携版使用说明：\n\n1. 下载压缩包\n2. 解压到本地目录\n3. 双击 start.bat 启动\n4. 浏览器访问 http://127.0.0.1:8080\n\n详细步骤请查看页面上方的使用说明');
}

// 点击平台卡片切换（平滑滚动）
document.querySelectorAll('.platform-card').forEach(function(card) {
    card.addEventListener('click', function(e) {
        setTimeout(function() {
            var detail = document.querySelector('.platform-detail');
            if (detail) {
                detail.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        }, 100);
    });
});
</script>

<?php require_once 'footer.php'; ?>