<?php
declare(strict_types=1);

// ===== 站点配置 =====
$APP_NAME        = '海中通';
$APP_TAGLINE     = '卫星网络连接服务';
$OFFICIAL_SITE   = 'https://app.satant.com';
$APP_STORE_URL   = 'https://apps.apple.com/cn/search?term=' . rawurlencode($APP_NAME);
$APP_GALLERY_URL = 'https://appgallery.huawei.com/appsearch?keywords=' . rawurlencode($APP_NAME);
$APK_DIR         = __DIR__ . '/apk';

function h(string $s): string
{
    return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
}

function format_size(int|float $bytes): string
{
    if ($bytes >= 1073741824) return round($bytes / 1073741824, 1) . ' GB';
    if ($bytes >= 1048576)    return round($bytes / 1048576, 1) . ' MB';
    if ($bytes >= 1024)       return round($bytes / 1024, 1) . ' KB';
    return $bytes . ' B';
}

function parse_version(string $name): ?string
{
    if (preg_match('/([0-9]+(?:\.[0-9]+){1,3})/', $name, $m)) {
        return $m[1];
    }
    return null;
}

function collect_apks(string $dir): array
{
    if (!is_dir($dir)) return [];
    $apks = [];
    foreach (glob(rtrim($dir, '/') . '/*.apk') ?: [] as $file) {
        if (!is_file($file)) continue;
        $apks[] = [
            'name'    => basename($file),
            'url'     => 'apk/' . rawurlencode(basename($file)),
            'version' => parse_version(basename($file)),
            'size'    => format_size((int) filesize($file)),
            'time'    => date('Y-m-d H:i', (int) filemtime($file)),
            'mtime'   => (int) filemtime($file),
        ];
    }
    usort($apks, fn($a, $b) => $b['mtime'] <=> $a['mtime']);
    return $apks;
}

$apks   = collect_apks($APK_DIR);
$latest = $apks[0] ?? null;
?>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="robots" content="noindex,nofollow">
    <title><?= h($APP_NAME) ?> - 官方下载</title>
    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='%230b2f52'/%3E%3Ccircle cx='32' cy='32' r='11' fill='%23fff'/%3E%3Cpath d='M32 21 16 10m4 4 6 13m-6 11 20 18m-16-16 16-12m6-2a16 16 0 0 1 0 22m-2.5-5a9 9 0 0 0 0-12' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --bg1: #0b2f52;
            --bg2: #12456f;
            --ink: #16202c;
            --sub: #5c6b7a;
            --line: #e4e9ef;
            --card: #ffffff;
            --green: #3ddc84;
            --green-dk: #21b06a;
            --ios: #0f1419;
            --harmony: #e2131f;
        }
        html { -webkit-text-size-adjust: 100%; }
        body {
            min-height: 100vh;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: radial-gradient(1200px 500px at 50% -8%, #1b5f96 0%, var(--bg1) 55%), linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
            background-attachment: fixed;
            color: var(--ink);
            display: flex;
            flex-direction: column;
        }
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1040px;
            margin: 0 auto;
            width: 100%;
            padding: 18px 24px 0;
            color: rgba(255,255,255,.85);
            font-size: 14px;
        }
        .topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
        .topbar .brand svg { width: 26px; height: 26px; }
        .topbar a {
            color: rgba(255,255,255,.9);
            text-decoration: none;
            padding: 6px 14px;
            border: 1px solid rgba(255,255,255,.35);
            border-radius: 999px;
            transition: background .2s, border-color .2s;
        }
        .topbar a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }
        .hero { text-align: center; padding: 52px 24px 40px; color: #fff; }
        .hero .logo { width: 96px; height: 96px; margin: 0 auto 22px; }
        .hero h1 { font-size: 34px; letter-spacing: 2px; font-weight: 700; }
        .hero .tag { margin-top: 10px; font-size: 15px; opacity: .8; letter-spacing: 4px; }
        .wrap { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 6px 20px 60px; }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 22px;
        }
        .card {
            background: var(--card);
            border-radius: 18px;
            padding: 28px 26px;
            box-shadow: 0 18px 40px rgba(3, 16, 30, .35);
            display: flex;
            flex-direction: column;
        }
        .card .head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
        .card .icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
        .card .icon svg { width: 32px; height: 32px; }
        .card .icon.android { background: #e6f8ef; }
        .card .icon.ios { background: #eef0f2; }
        .card .icon.harmony { background: #fdecee; }
        .card h2 { font-size: 20px; font-weight: 700; }
        .card .sub { font-size: 13px; color: var(--sub); margin-top: 2px; }
        .card .desc { font-size: 14px; color: var(--sub); line-height: 1.7; margin: 14px 0 18px; min-height: 44px; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 12px;
            padding: 13px 20px;
            font-size: 15px;
            font-weight: 600;
            text-decoration: none;
            color: #fff;
            border: none;
            cursor: pointer;
            transition: transform .15s, box-shadow .2s, filter .2s;
        }
        .btn:active { transform: scale(.97); }
        .btn.green { background: linear-gradient(135deg, var(--green), var(--green-dk)); box-shadow: 0 8px 20px rgba(61, 220, 132, .35); }
        .btn.green:hover { filter: brightness(1.05); }
        .btn.ios { background: linear-gradient(135deg, #1b222a, #0f1419); box-shadow: 0 8px 20px rgba(15, 20, 25, .3); }
        .btn.ios:hover { filter: brightness(1.15); }
        .btn.harmony { background: linear-gradient(135deg, #f23a45, #c70f1e); box-shadow: 0 8px 20px rgba(226, 19, 31, .3); }
        .btn.harmony:hover { filter: brightness(1.08); }
        .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
        .pill {
            font-size: 12px;
            color: var(--sub);
            background: #f3f5f8;
            border: 1px solid var(--line);
            padding: 4px 10px;
            border-radius: 999px;
        }
        .pill b { color: var(--ink); font-weight: 600; }
        .empty {
            text-align: center;
            color: var(--sub);
            font-size: 13px;
            padding: 10px 0;
        }
        .more { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 14px; }
        .more summary { cursor: pointer; font-size: 13px; color: var(--sub); list-style: none; display: inline-flex; align-items: center; gap: 4px; }
        .more summary::-webkit-details-marker { display: none; }
        .more ul { list-style: none; margin-top: 10px; }
        .more li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 9px 0;
            border-bottom: 1px solid var(--line);
            font-size: 13px;
        }
        .more li:last-child { border-bottom: none; }
        .more li .fname { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .more li .fmeta { color: var(--sub); flex: 0 0 auto; font-size: 12px; }
        .more li a { color: var(--green-dk); font-weight: 600; text-decoration: none; flex: 0 0 auto; }
        .note { text-align: center; color: rgba(255,255,255,.6); font-size: 12px; margin-top: 26px; line-height: 1.8; }
        footer { background: rgba(3, 15, 28, .45); margin-top: auto; padding: 22px 20px; text-align: center; color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.9; }
        footer a { color: rgba(255,255,255,.8); text-decoration: none; margin: 0 8px; }
        footer a:hover { color: #fff; text-decoration: underline; }
        @media (max-width: 640px) {
            .hero h1 { font-size: 28px; }
            .hero { padding: 40px 16px 30px; }
        }
    </style>
</head>
<body>
<div class="topbar">
    <div class="brand">
        <svg viewBox="0 0 64 64" fill="none" aria-hidden="true">
            <circle cx="32" cy="32" r="28" fill="#fff" opacity=".15"/>
            <circle cx="32" cy="32" r="10" fill="#fff"/>
            <path d="M32 21 16 10m4 4 6 13m-6 11 20 18m-16-16 16-12m6-2a16 16 0 0 1 0 22m-2.5-5a9 9 0 0 0 0-12" stroke="#fff" stroke-width="3.5" stroke-linecap="round"/>
        </svg>
        <?= h($APP_NAME) ?>官方下载
    </div>
    <a href="<?= h($OFFICIAL_SITE) ?>" rel="noopener">返回官网</a>
</div>

<div class="hero">
    <svg class="logo" viewBox="0 0 64 64" fill="none" aria-hidden="true">
        <circle cx="32" cy="32" r="30" fill="rgba(255,255,255,.12)"/>
        <circle cx="32" cy="32" r="11" fill="#fff"/>
        <path d="M32 21 16 10m4 4 6 13m-6 11 20 18m-16-16 16-12m6-2a16 16 0 0 1 0 22m-2.5-5a9 9 0 0 0 0-12" stroke="#fff" stroke-width="3.5" stroke-linecap="round"/>
    </svg>
    <h1><?= h($APP_NAME) ?></h1>
    <div class="tag"><?= h($APP_TAGLINE) ?></div>
</div>

<div class="wrap">
    <div class="grid">
        <!-- Android -->
        <div class="card">
            <div class="head">
                <div class="icon android">
                    <svg viewBox="0 0 24 24" fill="#3DDC84" aria-hidden="true">
                        <path d="M17.6 9.48l1.84-3.18c.16-.31.04-.7-.27-.86-.29-.18-.66-.05-.85.27l-1.88 3.24c-1.07-.5-2.27-.77-3.44-.77s-2.37.27-3.44.77L7.68 5.71c-.19-.32-.56-.45-.85-.27-.31.16-.43.55-.27.86l1.84 3.18C6.44 10.85 5.5 12.55 5.5 14.45c0 .28.22.5.5.5h12c.28 0 .5-.22.5-.5 0-1.9-.94-3.6-2.4-4.97zM9.3 13.9c-.5 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9zm5.4 0c-.5 0-.9-.4-.9-.9s.4-.9.9-.9.9.4.9.9-.4.9-.9.9zM6.25 16.5v3.5c0 .28.22.5.5.5h1.5c.28 0 .5-.22.5-.5v-3.5h-2.5zm9 0v3.5c0 .28.22.5.5.5h1.5c.28 0 .5-.22.5-.5v-3.5h-2.5z"/>
                    </svg>
                </div>
                <div>
                    <h2>Android 安卓版</h2>
                    <div class="sub">APK 安装包 · 直连下载</div>
                </div>
            </div>
            <p class="desc">适用于安卓手机 / 平板，点击下方按钮直接下载 APK 安装包，下载完成后打开即可安装。</p>
            <?php if ($latest): ?>
                <a class="btn green" href="<?= h($latest['url']) ?>" download rel="noopener">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
                    下载 APK
                </a>
                <div class="meta">
                    <span class="pill">版本 <b><?= h($latest['version'] ?? '最新') ?></b></span>
                    <span class="pill">大小 <b><?= h($latest['size']) ?></b></span>
                    <span class="pill">更新 <b><?= h($latest['time']) ?></b></span>
                </div>
                <?php if (count($apks) > 1): ?>
                <details class="more">
                    <summary>历史版本（<?= count($apks) - 1 ?>）</summary>
                    <ul>
                        <?php foreach (array_slice($apks, 1) as $a): ?>
                        <li>
                            <span class="fname" title="<?= h($a['name']) ?>"><?= h($a['version'] ?? $a['name']) ?></span>
                            <span class="fmeta"><?= h($a['size']) ?> · <?= h(substr($a['time'], 0, 10)) ?></span>
                            <a href="<?= h($a['url']) ?>" download>下载</a>
                        </li>
                        <?php endforeach; ?>
                    </ul>
                </details>
                <?php endif; ?>
            <?php else: ?>
                <a class="btn green" href="#" onclick="return false" style="opacity:.55;pointer-events:none">暂无安装包</a>
                <div class="empty">APK 安装包正在准备中，请稍后再试</div>
            <?php endif; ?>
        </div>

        <!-- iOS -->
        <div class="card">
            <div class="head">
                <div class="icon ios">
                    <svg viewBox="0 0 384 512" fill="#0f1419" aria-hidden="true">
                        <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
                    </svg>
                </div>
                <div>
                    <h2>iPhone / iPad</h2>
                    <div class="sub">App Store 下载</div>
                </div>
            </div>
            <p class="desc">适用于 iPhone / iPad，请在 App Store 中搜索「<?= h($APP_NAME) ?>」并下载安装。</p>
            <a class="btn ios" href="<?= h($APP_STORE_URL) ?>" target="_blank" rel="noopener">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M8 7h9v9"/></svg>
                前往 App Store 下载
            </a>
            <div class="meta">
                <span class="pill">系统 <b>iOS 及以上</b></span>
                <span class="pill">方式 <b>App Store</b></span>
            </div>
        </div>

        <!-- HarmonyOS -->
        <div class="card">
            <div class="head">
                <div class="icon harmony">
                    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <circle cx="12" cy="12" r="2.4" fill="#e2131f"/>
                        <g stroke="#e2131f" stroke-width="1.8" stroke-linecap="round">
                            <path d="M12 2.8v3.2M12 18v3.2M2.8 12H6M18 12h3.2M5.5 5.5l2.3 2.3M16.2 16.2l2.3 2.3M18.5 5.5l-2.3 2.3M7.8 16.2l-2.3 2.3"/>
                        </g>
                    </svg>
                </div>
                <div>
                    <h2>鸿蒙 HarmonyOS</h2>
                    <div class="sub">应用市场下载</div>
                </div>
            </div>
            <p class="desc">适用于华为手机及搭载鸿蒙系统的设备，请在华为应用市场（AppGallery）中搜索「<?= h($APP_NAME) ?>」并下载安装。</p>
            <a class="btn harmony" href="<?= h($APP_GALLERY_URL) ?>" target="_blank" rel="noopener">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M8 7h9v9"/></svg>
                前往应用市场下载
            </a>
            <div class="meta">
                <span class="pill">系统 <b>HarmonyOS</b></span>
                <span class="pill">方式 <b>应用市场</b></span>
            </div>
        </div>
    </div>

    <p class="note">若下载按钮无法点击或安装包不显示，请确认文件已放置到服务器 apk 目录，或联系客服获取帮助。</p>
</div>

<footer>
    <div>
        <a href="<?= h($OFFICIAL_SITE) ?>/privacy.html" target="_blank" rel="noopener">隐私协议</a>
        <a href="<?= h($OFFICIAL_SITE) ?>/terms.html" target="_blank" rel="noopener">用户协议</a>
    </div>
    <div>北京达顺威尔科技有限公司 版权所有 · <?= date('Y') ?></div>
</footer>
</body>
</html>
