script.js

const REPO_OWNER = "Sunhaiy";
const REPO_NAME = "Reflex";
const RELEASES_PAGE_URL = `https://github.com/${REPO_OWNER}/${REPO_NAME}/releases`;
const LATEST_RELEASE_API_URL = `https://api.github.com/repos/${REPO_OWNER}/${REPO_NAME}/releases/latest`;

const LANGUAGE_LABELS = {
  en: "EN",
  zh: "中文",
  ja: "日本語",
  ko: "한국어",
};
const LANGUAGE_HTML = {
  en: "en",
  zh: "zh-CN",
  ja: "ja",
  ko: "ko",
};

const translations = {
  en: {
    brand: "Reflex",
    navProduct: "Product",
    navStack: "Stack",
    navFaq: "FAQ",
    navDownload: "Download",
    download: "Download",
    announce: "Open source desktop SSH workbench",
    heroTitle: "Reflex makes servers feel<br />local and easy to manage.",
    heroCopy:
      "Multi-session terminal, SFTP, Docker, monitoring, deployment automation, and AI-assisted server work in one polished desktop app.",
    heroPrimary: "Download for free &rarr;",
    trusted: "Built with a modern desktop stack",
    featuresEyebrow: "Why Reflex",
    featuresTitle: "Real server work,<br />without losing context.",
    featuresCopy:
      "Reflex is built for connecting, inspecting, editing, deploying, recovering, and continuing tasks without switching tools.",
    statOne: "Persistent terminal sessions",
    statTwo: "Visible execution flow",
    statThree: "Local-first settings",
    splitOneTitle: "One workspace for terminal, files, and metrics",
    splitOneCopy:
      "Browse remote files, run terminal commands, inspect CPU, memory, disk, and network, and keep everything side by side in one workspace.",
    splitTwoTitle: "Agent-native execution with visible task flow",
    splitTwoCopy:
      "Give the app an outcome, then watch the plan, commands, retries, uploads, and verification stay visible while the work happens.",
    splitThreeTitle: "Configure AI providers without leaving the app",
    splitThreeCopy:
      "Keep multiple providers, models, privacy modes, and send shortcuts ready for agent workflows and command assistance.",
    splitFourTitle: "Practical remote file work and deployment prep",
    splitFourCopy:
      "Upload, download, rename, delete, create directories, and inspect real project files directly inside the desktop app.",
    readDocs: "View repository",
    workflowEyebrow: "Customization",
    workflowTitle: "Theme it, tune it,<br />make it yours.",
    workflowCopy:
      "Reflex supports light, dark, black, cyberpunk, and custom accents, plus configurable terminal presets, cursor style, font family, and scrollback.",
    docsTitle: "Download and ship desktop builds",
    docsCopy:
      "Reflex is packaged for Windows, macOS, and Linux through Electron Builder and GitHub Actions, ready for real developer machines.",
    docsAction: "Open download page",
    faqTitle: "Frequently<br />asked<br /><em>questions</em>",
    faqOneQ: "Which systems does Reflex support?",
    faqOneA: "Reflex packages for Windows, macOS, and Linux with Electron Builder and GitHub Actions.",
    faqTwoQ: "Is it only an SSH terminal?",
    faqTwoA: "No. It also includes SFTP, Docker, monitoring, deployment automation, and AI Agent workflows.",
    faqThreeQ: "Where are settings stored?",
    faqThreeA: "Reflex is local-first. Connection profiles, AI settings, themes, and history stay on your machine.",
    faqFourQ: "Can I log in with a private key?",
    faqFourA: "Yes. Reflex supports both password and private-key authentication.",
    ctaTitle: "Ready to make<br /><em>remote work feel local?</em>",
    ctaButton: "Go to downloads",
    footerTag: "AI Native SSH Workbench",
    downloadLatestLabel: "Latest version",
    downloadHeroTitle: "Download Reflex for your desktop.",
    downloadHeroCopy:
      "One click picks the right build for your current system, and the cards below link straight to the latest GitHub Release assets.",
    downloadAuto: "Download now",
    downloadAllReleases: "Browse all releases",
    downloadDetecting: "Detecting your platform and matching the latest asset.",
    downloadGridEyebrow: "Platform downloads",
    downloadGridMeta: "Latest GitHub Release assets",
    downloadWindowsEyebrow: "Windows",
    downloadWindowsTitle: "Windows x64 Installer",
    downloadWindowsCopy: "Recommended `.exe` installer for Windows 10 and Windows 11.",
    downloadMacAppleEyebrow: "macOS",
    downloadMacAppleTitle: "macOS Apple Silicon",
    downloadMacAppleCopy: "Direct `.dmg` package for Apple Silicon Macs.",
    downloadMacIntelEyebrow: "macOS",
    downloadMacIntelTitle: "macOS Intel / x64",
    downloadMacIntelCopy: "Direct `.dmg` package for Intel-based Macs.",
    downloadLinuxAppEyebrow: "Linux",
    downloadLinuxAppTitle: "Linux AppImage",
    downloadLinuxAppCopy: "Portable AppImage for desktop Linux environments.",
    downloadLinuxTarEyebrow: "Linux",
    downloadLinuxTarTitle: "Linux tar.gz",
    downloadLinuxTarCopy: "Compressed archive for manual installation or repackaging.",
    downloadNow: "Download now",
    downloadLoading: "Loading latest release assets...",
    downloadUnavailable: "This file is not available in the latest release",
    downloadReleaseNotes: "View release notes",
    downloadReleaseFallback: "Couldn't load the latest Release, so the links fall back to the Releases list page.",
    downloadAutoReady: "Detected {system}. Clicking will download {file}.",
    downloadAutoUnknown: "Your system could not be detected, so the button goes to the Releases list page.",
    downloadSystemUnknown: "Unknown system",
    downloadFileLabel: "{file} · {size}",
  },
  zh: {
    brand: "Reflex",
    navProduct: "产品",
    navStack: "技术栈",
    navFaq: "常见问题",
    navDownload: "下载",
    download: "下载",
    announce: "开源桌面 SSH 工作台",
    heroTitle: "Reflex 让服务器管理<br />像本地一样顺手。",
    heroCopy:
      "多会话终端、SFTP、Docker、监控、部署自动化和 AI 辅助运维，被整合进一个打磨精致的桌面应用。",
    heroPrimary: "免费下载 &rarr;",
    trusted: "基于现代桌面技术栈构建",
    featuresEyebrow: "Why Reflex",
    featuresTitle: "真实服务器工作，<br />不再丢失上下文。",
    featuresCopy:
      "Reflex 围绕连接、检查、编辑、部署、恢复和持续任务而设计，让远程工作集中在一个桌面工作台里完成。",
    statOne: "持久终端会话",
    statTwo: "可见执行流程",
    statThree: "本地优先设置",
    splitOneTitle: "终端、文件和监控共用一套工作区",
    splitOneCopy:
      "浏览远程文件、运行终端命令、检查 CPU、内存、磁盘和网络指标，让关键上下文并排存在。",
    splitTwoTitle: "Agent 原生执行，任务过程完全可见",
    splitTwoCopy:
      "告诉 Reflex 你想要的结果，然后观察计划、命令、重试、上传和验证如何在界面中逐步展开。",
    splitThreeTitle: "不用离开应用就能配置 AI Provider",
    splitThreeCopy:
      "同时管理多个 Provider、模型、隐私模式和发送快捷键，为 Agent 工作流和命令辅助准备好完整环境。",
    splitFourTitle: "实用的远程文件工作和部署准备",
    splitFourCopy:
      "上传、下载、重命名、删除、创建目录，并直接在桌面应用里检查真实项目文件。",
    readDocs: "查看仓库",
    workflowEyebrow: "Customization",
    workflowTitle: "主题、终端、光标、字体，<br />都能调成你的习惯。",
    workflowCopy:
      "支持 light、dark、black、cyberpunk 和自定义强调色，也支持终端预设、字体、光标样式和滚动缓冲配置。",
    docsTitle: "下载并分发桌面构建",
    docsCopy:
      "Reflex 通过 Electron Builder 和 GitHub Actions 构建 Windows、macOS 和 Linux 版本，适合真实开发机环境。",
    docsAction: "打开下载页",
    faqTitle: "常见<br />问题",
    faqOneQ: "Reflex 支持哪些系统？",
    faqOneA: "Reflex 通过 Electron Builder 和 GitHub Actions 打包 Windows、macOS 和 Linux 版本。",
    faqTwoQ: "它只是 SSH 终端吗？",
    faqTwoA: "不是。它还包含 SFTP、Docker、监控、部署自动化和 AI Agent 工作流。",
    faqThreeQ: "设置会保存在云端吗？",
    faqThreeA: "Reflex 是本地优先。连接资料、AI 设置、主题和历史记录都保存在你的机器上。",
    faqFourQ: "可以用私钥登录吗？",
    faqFourA: "可以，Reflex 同时支持密码和私钥认证。",
    ctaTitle: "准备让<br /><em>远程工作像本地一样顺手？</em>",
    ctaButton: "前往下载",
    footerTag: "AI 原生 SSH 工作台",
    downloadLatestLabel: "最新版本",
    downloadHeroTitle: "下载适合你桌面的 Reflex。",
    downloadHeroCopy:
      "点击一次就会自动判断当前系统并下载对应安装包，下面的卡片也会直接跳到最新 GitHub Release 资产。",
    downloadAuto: "即刻下载",
    downloadAllReleases: "查看所有 Release",
    downloadDetecting: "正在识别你的系统，并匹配最新发布资产。",
    downloadGridEyebrow: "平台下载",
    downloadGridMeta: "最新 GitHub Release 资产",
    downloadWindowsEyebrow: "Windows",
    downloadWindowsTitle: "Windows x64 安装器",
    downloadWindowsCopy: "推荐给 Windows 10 和 Windows 11 的 `.exe` 安装包。",
    downloadMacAppleEyebrow: "macOS",
    downloadMacAppleTitle: "macOS Apple Silicon",
    downloadMacAppleCopy: "适用于 Apple Silicon Mac 的 `.dmg` 安装包。",
    downloadMacIntelEyebrow: "macOS",
    downloadMacIntelTitle: "macOS Intel / x64",
    downloadMacIntelCopy: "适用于 Intel Mac 的 `.dmg` 安装包。",
    downloadLinuxAppEyebrow: "Linux",
    downloadLinuxAppTitle: "Linux AppImage",
    downloadLinuxAppCopy: "适合桌面 Linux 环境的便携版 AppImage。",
    downloadLinuxTarEyebrow: "Linux",
    downloadLinuxTarTitle: "Linux tar.gz",
    downloadLinuxTarCopy: "适合手动安装或重新打包的压缩归档文件。",
    downloadNow: "立即下载",
    downloadLoading: "正在加载最新发布资产...",
    downloadUnavailable: "当前最新版本暂无此文件",
    downloadReleaseNotes: "查看版本说明",
    downloadReleaseFallback: "无法获取最新 Release，已回退到 Releases 列表页。",
    downloadAutoReady: "已识别 {system}，点击将下载 {file}。",
    downloadAutoUnknown: "暂时无法识别系统，按钮会带你前往 Releases 列表页。",
    downloadSystemUnknown: "未知系统",
    downloadFileLabel: "{file} · {size}",
  },
  ja: {
    brand: "Reflex",
    navProduct: "製品",
    navStack: "スタック",
    navFaq: "FAQ",
    navDownload: "ダウンロード",
    download: "ダウンロード",
    announce: "オープンソースのデスクトップ SSH ワークベンチ",
    heroTitle: "Reflex ならサーバー管理も<br />ローカルのように扱える。",
    heroCopy:
      "マルチセッション端末、SFTP、Docker、監視、デプロイ自動化、AI 支援のサーバー作業を、洗練された 1 つのデスクトップアプリに統合しました。",
    heroPrimary: "無料でダウンロード &rarr;",
    trusted: "最新のデスクトップスタックで構築",
    featuresEyebrow: "Why Reflex",
    featuresTitle: "実際のサーバー作業を、<br />コンテキストを失わずに。",
    featuresCopy:
      "Reflex は、接続、調査、編集、デプロイ、復旧、継続作業をツール切り替えなしで進められるよう設計されています。",
    statOne: "永続的な端末セッション",
    statTwo: "可視化された実行フロー",
    statThree: "ローカルファースト設定",
    splitOneTitle: "端末、ファイル、メトリクスを 1 つのワークスペースに",
    splitOneCopy:
      "リモートファイルを閲覧し、コマンドを実行し、CPU・メモリ・ディスク・ネットワークを確認しながら、必要な情報を並べて保持できます。",
    splitTwoTitle: "Agent ネイティブ実行で、作業の流れをそのまま可視化",
    splitTwoCopy:
      "達成したい結果を伝えるだけで、計画、コマンド、再試行、アップロード、検証までの流れを画面上で追えます。",
    splitThreeTitle: "アプリを離れずに AI Provider を設定",
    splitThreeCopy:
      "複数の Provider、モデル、プライバシーモード、送信ショートカットを管理し、Agent ワークフローやコマンド支援に備えられます。",
    splitFourTitle: "実用的なリモートファイル作業とデプロイ準備",
    splitFourCopy:
      "アップロード、ダウンロード、名前変更、削除、ディレクトリ作成、実際のプロジェクトファイル確認をデスクトップアプリ内で行えます。",
    readDocs: "リポジトリを見る",
    workflowEyebrow: "Customization",
    workflowTitle: "テーマも端末もカーソルもフォントも、<br />自分好みに。",
    workflowCopy:
      "light、dark、black、cyberpunk やカスタムアクセントに対応し、端末プリセット、カーソル、フォント、スクロールバックも調整できます。",
    docsTitle: "デスクトップビルドを配布",
    docsCopy:
      "Reflex は Electron Builder と GitHub Actions により、Windows、macOS、Linux 向けにパッケージ化されています。",
    docsAction: "ダウンロードページを開く",
    faqTitle: "よくある<br />質問",
    faqOneQ: "Reflex はどの OS に対応していますか？",
    faqOneA: "Reflex は Electron Builder と GitHub Actions により Windows、macOS、Linux 向けに配布されています。",
    faqTwoQ: "SSH 端末だけのアプリですか？",
    faqTwoA: "いいえ。SFTP、Docker、監視、デプロイ自動化、AI Agent ワークフローも含まれます。",
    faqThreeQ: "設定はクラウドに保存されますか？",
    faqThreeA: "Reflex はローカルファーストです。接続情報、AI 設定、テーマ、履歴はあなたのマシンに保存されます。",
    faqFourQ: "秘密鍵でログインできますか？",
    faqFourA: "はい。Reflex はパスワード認証と秘密鍵認証の両方に対応しています。",
    ctaTitle: "リモート作業を<br /><em>もっとローカルのように。</em>",
    ctaButton: "ダウンロードへ",
    footerTag: "AI ネイティブ SSH ワークベンチ",
    downloadLatestLabel: "最新バージョン",
    downloadHeroTitle: "あなたのデスクトップ向け Reflex をダウンロード。",
    downloadHeroCopy:
      "ワンクリックで現在の環境に合うビルドを選択し、下のカードから最新 GitHub Release 資産へ直接移動できます。",
    downloadAuto: "今すぐダウンロード",
    downloadAllReleases: "すべての Release を見る",
    downloadDetecting: "プラットフォームを判別し、最新の資産を照合しています。",
    downloadGridEyebrow: "プラットフォーム別ダウンロード",
    downloadGridMeta: "最新 GitHub Release 資産",
    downloadWindowsEyebrow: "Windows",
    downloadWindowsTitle: "Windows x64 インストーラー",
    downloadWindowsCopy: "Windows 10 / 11 向けの推奨 `.exe` インストーラーです。",
    downloadMacAppleEyebrow: "macOS",
    downloadMacAppleTitle: "macOS Apple Silicon",
    downloadMacAppleCopy: "Apple Silicon Mac 向けの `.dmg` パッケージです。",
    downloadMacIntelEyebrow: "macOS",
    downloadMacIntelTitle: "macOS Intel / x64",
    downloadMacIntelCopy: "Intel Mac 向けの `.dmg` パッケージです。",
    downloadLinuxAppEyebrow: "Linux",
    downloadLinuxAppTitle: "Linux AppImage",
    downloadLinuxAppCopy: "デスクトップ Linux 向けのポータブル AppImage です。",
    downloadLinuxTarEyebrow: "Linux",
    downloadLinuxTarTitle: "Linux tar.gz",
    downloadLinuxTarCopy: "手動インストールや再パッケージ向けの圧縮アーカイブです。",
    downloadNow: "ダウンロード",
    downloadLoading: "最新 Release 資産を読み込み中...",
    downloadUnavailable: "このファイルは最新 Release にありません",
    downloadReleaseNotes: "リリースノートを見る",
    downloadReleaseFallback: "最新 Release を取得できなかったため、Release 一覧ページに切り替えています。",
    downloadAutoReady: "{system} を検出しました。クリックすると {file} をダウンロードします。",
    downloadAutoUnknown: "システムを判別できなかったため、ボタンは Release 一覧ページへ移動します。",
    downloadSystemUnknown: "不明なシステム",
    downloadFileLabel: "{file} · {size}",
  },
  ko: {
    brand: "Reflex",
    navProduct: "제품",
    navStack: "스택",
    navFaq: "FAQ",
    navDownload: "다운로드",
    download: "다운로드",
    announce: "오픈소스 데스크톱 SSH 워크벤치",
    heroTitle: "Reflex는 서버 관리를<br />로컬처럼 다루게 합니다.",
    heroCopy:
      "멀티 세션 터미널, SFTP, Docker, 모니터링, 배포 자동화, AI 지원 서버 작업을 하나의 세련된 데스크톱 앱에 담았습니다.",
    heroPrimary: "무료 다운로드 &rarr;",
    trusted: "현대적인 데스크톱 스택으로 구축",
    featuresEyebrow: "Why Reflex",
    featuresTitle: "실제 서버 작업을,<br />맥락을 잃지 않고.",
    featuresCopy:
      "Reflex는 연결, 점검, 편집, 배포, 복구, 이어서 작업하기를 도구 전환 없이 수행하도록 설계되었습니다.",
    statOne: "지속형 터미널 세션",
    statTwo: "가시적인 실행 흐름",
    statThree: "로컬 우선 설정",
    splitOneTitle: "터미널, 파일, 메트릭을 하나의 워크스페이스에",
    splitOneCopy:
      "원격 파일을 탐색하고, 명령을 실행하고, CPU, 메모리, 디스크, 네트워크를 확인하면서 필요한 맥락을 나란히 유지할 수 있습니다。",
    splitTwoTitle: "Agent 네이티브 실행과 보이는 작업 흐름",
    splitTwoCopy:
      "원하는 결과를 알려주면 계획, 명령, 재시도, 업로드, 검증까지의 과정을 화면에서 그대로 추적할 수 있습니다。",
    splitThreeTitle: "앱을 벗어나지 않고 AI Provider 설정",
    splitThreeCopy:
      "여러 Provider, 모델, 프라이버시 모드, 전송 단축키를 관리하여 Agent 워크플로와 명령 보조를 준비할 수 있습니다。",
    splitFourTitle: "실용적인 원격 파일 작업과 배포 준비",
    splitFourCopy:
      "업로드, 다운로드, 이름 변경, 삭제, 디렉터리 생성, 실제 프로젝트 파일 확인을 데스크톱 앱 안에서 바로 처리할 수 있습니다。",
    readDocs: "저장소 보기",
    workflowEyebrow: "Customization",
    workflowTitle: "테마도, 터미널도, 커서도, 글꼴도<br />내 방식대로。",
    workflowCopy:
      "light, dark, black, cyberpunk 및 사용자 지정 포인트 색상을 지원하고, 터미널 프리셋, 커서, 글꼴, 스크롤백도 조정할 수 있습니다。",
    docsTitle: "데스크톱 빌드 배포",
    docsCopy:
      "Reflex는 Electron Builder와 GitHub Actions를 통해 Windows, macOS, Linux용으로 패키징됩니다。",
    docsAction: "다운로드 페이지 열기",
    faqTitle: "자주 묻는<br />질문",
    faqOneQ: "Reflex는 어떤 시스템을 지원하나요?",
    faqOneA: "Reflex는 Electron Builder와 GitHub Actions를 통해 Windows, macOS, Linux용으로 패키징됩니다。",
    faqTwoQ: "단순한 SSH 터미널인가요?",
    faqTwoA: "아니요. SFTP, Docker, 모니터링, 배포 자동화, AI Agent 워크플로도 포함합니다。",
    faqThreeQ: "설정은 클라우드에 저장되나요?",
    faqThreeA: "Reflex는 로컬 우선입니다. 연결 정보, AI 설정, 테마, 기록은 사용자의 기기에 저장됩니다。",
    faqFourQ: "개인 키로 로그인할 수 있나요?",
    faqFourA: "네. Reflex는 비밀번호 인증과 개인 키 인증을 모두 지원합니다。",
    ctaTitle: "원격 작업을<br /><em>더 로컬처럼 느껴보세요。</em>",
    ctaButton: "다운로드로 이동",
    footerTag: "AI 네이티브 SSH 워크벤치",
    downloadLatestLabel: "최신 버전",
    downloadHeroTitle: "데스크톱에 맞는 Reflex를 다운로드하세요。",
    downloadHeroCopy:
      "한 번의 클릭으로 현재 시스템에 맞는 빌드를 선택하고, 아래 카드에서 최신 GitHub Release 자산으로 바로 이동할 수 있습니다。",
    downloadAuto: "지금 다운로드",
    downloadAllReleases: "모든 Release 보기",
    downloadDetecting: "플랫폼을 감지하고 최신 자산과 매칭하는 중입니다。",
    downloadGridEyebrow: "플랫폼 다운로드",
    downloadGridMeta: "최신 GitHub Release 자산",
    downloadWindowsEyebrow: "Windows",
    downloadWindowsTitle: "Windows x64 설치 프로그램",
    downloadWindowsCopy: "Windows 10 및 Windows 11에 권장되는 `.exe` 설치 프로그램입니다。",
    downloadMacAppleEyebrow: "macOS",
    downloadMacAppleTitle: "macOS Apple Silicon",
    downloadMacAppleCopy: "Apple Silicon Mac용 `.dmg` 패키지입니다。",
    downloadMacIntelEyebrow: "macOS",
    downloadMacIntelTitle: "macOS Intel / x64",
    downloadMacIntelCopy: "Intel Mac용 `.dmg` 패키지입니다。",
    downloadLinuxAppEyebrow: "Linux",
    downloadLinuxAppTitle: "Linux AppImage",
    downloadLinuxAppCopy: "데스크톱 Linux 환경용 휴대형 AppImage입니다。",
    downloadLinuxTarEyebrow: "Linux",
    downloadLinuxTarTitle: "Linux tar.gz",
    downloadLinuxTarCopy: "수동 설치 또는 재패키징용 압축 아카이브입니다。",
    downloadNow: "다운로드",
    downloadLoading: "최신 Release 자산을 불러오는 중...",
    downloadUnavailable: "이 파일은 최신 Release에 없습니다",
    downloadReleaseNotes: "릴리스 노트 보기",
    downloadReleaseFallback: "최신 Release를 불러오지 못해 Release 목록 페이지로 전환했습니다。",
    downloadAutoReady: "{system}을 감지했습니다. 클릭하면 {file} 다운로드가 시작됩니다。",
    downloadAutoUnknown: "시스템을 감지하지 못해 버튼이 Release 목록 페이지로 이동합니다。",
    downloadSystemUnknown: "알 수 없는 시스템",
    downloadFileLabel: "{file} · {size}",
  },
};

const languageToggle = document.querySelector(".language-toggle");
const languageToggleLabel = document.querySelector(".language-toggle-label");
const languageMenu = document.querySelector(".language-menu");
const languageOptions = document.querySelectorAll("[data-language-option]");
const faqItems = document.querySelectorAll(".faq-item");
const autoDownloadButtons = document.querySelectorAll("[data-auto-download]");
const autoDownloadHint = document.querySelector("[data-auto-download-hint]");
const releaseVersionEl = document.querySelector("[data-release-version]");
const assetNameEls = document.querySelectorAll("[data-asset-name]");
const downloadLinkEls = document.querySelectorAll("[data-download-link]");

const savedLanguage = localStorage.getItem("reflex-language");
const initialLanguage = savedLanguage && translations[savedLanguage] ? savedLanguage : "en";

const state = {
  currentLanguage: initialLanguage,
  release: null,
  releaseError: false,
  system: detectClientSystem(),
};

function t(key) {
  const current = translations[state.currentLanguage] || translations.en;
  return current[key] || translations.en[key] || "";
}

function formatTemplate(template, values) {
  return template.replace(/\{(\w+)\}/g, (_, key) => values[key] ?? "");
}

function formatFileSize(bytes) {
  if (!Number.isFinite(bytes) || bytes <= 0) return "--";
  const units = ["B", "KB", "MB", "GB"];
  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
  const value = bytes / 1024 ** exponent;
  return `${value.toFixed(value >= 100 || exponent === 0 ? 0 : 1)} ${units[exponent]}`;
}

function detectClientSystem() {
  const platformSource = [
    navigator.userAgentData?.platform,
    navigator.platform,
    navigator.userAgent,
  ]
    .filter(Boolean)
    .join(" ")
    .toLowerCase();
  const architectureSource = [
    navigator.userAgentData?.architecture,
    navigator.userAgent,
  ]
    .filter(Boolean)
    .join(" ")
    .toLowerCase();

  let platform = "unknown";
  if (platformSource.includes("win")) {
    platform = "windows";
  } else if (platformSource.includes("mac")) {
    platform = "mac";
  } else if (platformSource.includes("linux") || platformSource.includes("x11")) {
    platform = "linux";
  }

  let arch = "x64";
  if (/arm64|aarch64|arm|apple ?silicon/.test(architectureSource)) {
    arch = "arm64";
  }

  return { platform, arch };
}

function getSystemDisplayName(system = state.system) {
  if (system.platform === "windows") return "Windows x64";
  if (system.platform === "mac") return system.arch === "arm64" ? "macOS Apple Silicon" : "macOS Intel / x64";
  if (system.platform === "linux") return "Linux x64";
  return t("downloadSystemUnknown");
}

function getInstallableAssets(assets) {
  return assets.filter((asset) => {
    const name = asset.name.toLowerCase();
    return !name.endsWith(".blockmap") && !name.endsWith(".yml");
  });
}

function findAsset(assets, matcher) {
  return assets.find((asset) => matcher(asset.name.toLowerCase()));
}

function getAssetMap(release) {
  const assets = getInstallableAssets(release.assets || []);

  return {
    windows:
      findAsset(assets, (name) => name.includes("win") && name.endsWith(".exe")) ||
      findAsset(assets, (name) => name.includes("win") && name.endsWith(".zip")),
    "mac-arm64": findAsset(assets, (name) => name.includes("mac-arm64") && name.endsWith(".dmg")),
    "mac-x64": findAsset(assets, (name) => name.includes("mac-x64") && name.endsWith(".dmg")),
    "linux-appimage": findAsset(assets, (name) => name.includes("linux") && name.endsWith(".appimage")),
    "linux-targz": findAsset(assets, (name) => name.includes("linux") && name.endsWith(".tar.gz")),
  };
}

function getAutoDownloadAsset(assetMap, system = state.system) {
  if (system.platform === "windows") return assetMap.windows;
  if (system.platform === "mac") {
    return system.arch === "arm64"
      ? assetMap["mac-arm64"] || assetMap["mac-x64"]
      : assetMap["mac-x64"] || assetMap["mac-arm64"];
  }
  if (system.platform === "linux") return assetMap["linux-appimage"] || assetMap["linux-targz"];
  return null;
}

function setLinkState(link, href, label, disabled = false) {
  if (!link) return;
  link.textContent = label;
  link.href = href;
  link.classList.toggle("is-disabled", disabled);
  if (disabled) {
    link.setAttribute("aria-disabled", "true");
  } else {
    link.removeAttribute("aria-disabled");
  }
}

function bindDownloadCard(key, assetMap) {
  const asset = assetMap[key];
  const meta = document.querySelector(`[data-asset-name="${key}"]`);
  const link = document.querySelector(`[data-download-link="${key}"]`);

  if (!meta || !link) return;

  if (asset) {
    meta.textContent = formatTemplate(t("downloadFileLabel"), {
      file: asset.name,
      size: formatFileSize(asset.size),
    });
    setLinkState(link, asset.browser_download_url, t("downloadNow"));
    return;
  }

  meta.textContent = t("downloadUnavailable");
  setLinkState(link, RELEASES_PAGE_URL, t("downloadReleaseNotes"), true);
}

function renderDownloadPage() {
  if (!autoDownloadButtons.length) return;

  if (!state.release) {
    if (releaseVersionEl) releaseVersionEl.textContent = "Loading...";
    if (autoDownloadHint) {
      autoDownloadHint.textContent = state.releaseError ? t("downloadReleaseFallback") : t("downloadDetecting");
    }
    autoDownloadButtons.forEach((button) => {
      setLinkState(button, RELEASES_PAGE_URL, t("downloadAuto"));
    });
    assetNameEls.forEach((element) => {
      element.textContent = t("downloadLoading");
    });
    downloadLinkEls.forEach((link) => {
      setLinkState(link, RELEASES_PAGE_URL, t("downloadNow"));
    });
    return;
  }

  const assetMap = getAssetMap(state.release);
  const autoAsset = getAutoDownloadAsset(assetMap);

  if (releaseVersionEl) {
    releaseVersionEl.textContent = state.release.tag_name || state.release.name || "Latest";
  }

  if (autoAsset) {
    autoDownloadButtons.forEach((button) => {
      setLinkState(button, autoAsset.browser_download_url, t("downloadAuto"));
    });
    if (autoDownloadHint) {
      autoDownloadHint.textContent = formatTemplate(t("downloadAutoReady"), {
        system: getSystemDisplayName(),
        file: autoAsset.name,
      });
    }
  } else {
    autoDownloadButtons.forEach((button) => {
      setLinkState(button, RELEASES_PAGE_URL, t("downloadAllReleases"));
    });
    if (autoDownloadHint) autoDownloadHint.textContent = t("downloadAutoUnknown");
  }

  bindDownloadCard("windows", assetMap);
  bindDownloadCard("mac-arm64", assetMap);
  bindDownloadCard("mac-x64", assetMap);
  bindDownloadCard("linux-appimage", assetMap);
  bindDownloadCard("linux-targz", assetMap);
}

async function loadLatestRelease() {
  if (!autoDownloadButtons.length) return;

  try {
    const response = await fetch(LATEST_RELEASE_API_URL, {
      headers: { Accept: "application/vnd.github+json" },
    });

    if (!response.ok) {
      throw new Error(`GitHub API responded with ${response.status}`);
    }

    state.release = await response.json();
    state.releaseError = false;
  } catch (error) {
    console.error("Failed to load latest release", error);
    state.release = null;
    state.releaseError = true;
  }

  renderDownloadPage();
}

function closeLanguageMenu() {
  if (!languageMenu || !languageToggle) return;
  languageMenu.classList.remove("open");
  languageToggle.setAttribute("aria-expanded", "false");
}

function openLanguageMenu() {
  if (!languageMenu || !languageToggle) return;
  languageMenu.classList.add("open");
  languageToggle.setAttribute("aria-expanded", "true");
}

function updateLanguageMenu() {
  if (languageToggleLabel) {
    languageToggleLabel.textContent = LANGUAGE_LABELS[state.currentLanguage];
  }

  languageOptions.forEach((option) => {
    option.classList.toggle("is-active", option.dataset.languageOption === state.currentLanguage);
  });
}

function applyLanguage(language) {
  state.currentLanguage = translations[language] ? language : "en";
  document.documentElement.lang = LANGUAGE_HTML[state.currentLanguage] || "en";

  document.querySelectorAll("[data-i18n]").forEach((element) => {
    const value = t(element.dataset.i18n);
    if (value) element.innerHTML = value;
  });

  updateLanguageMenu();
  localStorage.setItem("reflex-language", state.currentLanguage);
  renderDownloadPage();
}

if (languageToggle) {
  languageToggle.addEventListener("click", (event) => {
    event.stopPropagation();
    if (languageMenu?.classList.contains("open")) {
      closeLanguageMenu();
    } else {
      openLanguageMenu();
    }
  });
}

languageOptions.forEach((option) => {
  option.addEventListener("click", () => {
    applyLanguage(option.dataset.languageOption || "en");
    closeLanguageMenu();
  });
});

document.addEventListener("click", (event) => {
  if (languageMenu && !languageMenu.contains(event.target)) {
    closeLanguageMenu();
  }
});

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") closeLanguageMenu();
});

faqItems.forEach((item) => {
  item.addEventListener("click", () => item.classList.toggle("open"));
});

const revealTargets = document.querySelectorAll(
  ".announcement, .hero h1, .hero-copy, .hero-actions, .hero-image-shell, .trusted, .tiptap-heading, .feature-stats > div, .extension-wall, .split-row, .showcase-grid, .docs-card, .faq-section, .final-cta, .site-footer, .download-hero, .download-section-bar, .download-grid > .download-card"
);

revealTargets.forEach((target, index) => {
  target.classList.add("reveal");
  target.style.setProperty("--reveal-delay", `${Math.min(index % 4, 3) * 70}ms`);
});

const revealObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("in-view");
        revealObserver.unobserve(entry.target);
      }
    });
  },
  { threshold: 0.16, rootMargin: "0px 0px -70px 0px" }
);

revealTargets.forEach((target) => revealObserver.observe(target));

document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
  anchor.addEventListener("click", (event) => {
    const selector = anchor.getAttribute("href");
    if (!selector) return;
    const target = document.querySelector(selector);
    if (!target) return;
    event.preventDefault();
    target.scrollIntoView({ behavior: "smooth", block: "start" });
  });
});

const hero = document.querySelector(".hero, .download-hero");
const parallaxTargets = document.querySelectorAll(".aurora, .hero-image-shell");

if (hero && window.matchMedia("(prefers-reduced-motion: no-preference)").matches) {
  hero.addEventListener("pointermove", (event) => {
    const rect = hero.getBoundingClientRect();
    const x = (event.clientX - rect.left) / rect.width - 0.5;
    const y = (event.clientY - rect.top) / rect.height - 0.5;

    parallaxTargets.forEach((target, index) => {
      const depth = (index + 1) * 8;
      target.animate(
        { translate: `${x * depth}px ${y * depth}px` },
        { duration: 650, fill: "forwards", easing: "cubic-bezier(.2,.8,.2,1)" }
      );
    });
  });
}

applyLanguage(state.currentLanguage);
loadLatestRelease();