// page-download.jsx — /download

const Download = ({ lang }) => {
  const vi = lang === 'vi';
  const L = (en, v) => (vi ? v : en);
  const dmg = window.SN_DMG_URL;
  // Label the file from the link itself, so the two can never disagree.
  const dmgName = (dmg || '').split('/').pop() || `Snapovo-${window.SN_VERSION || '1.0'}.dmg`;
  return (
  <main>
    <section className="ph">
      <div className="container">
        <div className="ph-inner">
          <Eyebrow>{L('Download', 'Tải về')} · v{window.SN_VERSION || '1.0'}</Eyebrow>
          <h1 style={{ marginTop: 14 }}>{L('Get Snapovo for macOS.', 'Tải Snapovo cho macOS.')}</h1>
          <p>{L(
            'A free 7-day trial of the full app. Signed and notarized by Apple. Updates arrive through the app — check from Help → Check for Updates…, or turn on automatic updates once in Settings.',
            'Dùng thử miễn phí 7 ngày bản đầy đủ. Được Apple ký và công chứng. Cập nhật ngay trong app — bấm Help → Check for Updates…, hoặc bật tự cập nhật một lần trong Settings.'
          )}</p>
        </div>
      </div>
    </section>

    <section className="section--tight">
      <div className="container">
        <div className="dl-card">
          <div>
            {dmg ? (
              <a className="btn btn--primary btn--xl" href={dmg} download>
                <Icon.Download size={18} /> {L('Download Snapovo', 'Tải Snapovo')} {window.SN_VERSION || '1.0'}
              </a>
            ) : (
              <span className="btn btn--primary btn--xl is-disabled" role="link" aria-disabled="true"
                    title={L('The download goes live the moment the notarized build is posted.', 'Nút tải sẽ hoạt động ngay khi bản dựng đã công chứng được đăng.')}>
                <Icon.Download size={18} /> {L('Download — coming soon', 'Tải về — sắp có')}
              </span>
            )}
            <div style={{ marginTop: 14, fontSize: 13, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>
              {dmg
                ? <>{dmgName} · 10.7 MB · macOS 13.5+</>
                : L('The notarized 1.0 build is being finalized — check back shortly.', 'Bản dựng 1.0 đã công chứng đang hoàn tất — vui lòng quay lại sau ít phút.')}
            </div>
            <div style={{ marginTop: 24, paddingTop: 24, borderTop: '1px solid var(--border)', fontSize: 13, color: 'var(--text-muted)' }}>
              <div style={{ marginBottom: 8 }}>
                {L('Future updates install through Snapovo\'s', 'Cập nhật sau cài qua')} <Kbd>Help → Check for Updates…</Kbd> {L('or automatically. Never re-download manually.', 'hoặc tự động. Không cần tải lại thủ công.')}
              </div>
              <div style={{ marginTop: 14, padding: '12px 14px', borderRadius: 8, background: 'var(--accent-tint)', border: '1px solid var(--accent)', fontSize: 13, color: 'var(--text)' }}>
                <strong>{L('About the trial:', 'Về bản dùng thử:')}</strong> {L(
                  '7 days free, full app — no card, no account, up to 3 presets. After that, Run-only mode: existing presets and chains keep working; creating and editing need a Pro license. Your presets stay on your Mac.',
                  '7 ngày miễn phí, đầy đủ tính năng — không cần thẻ, không cần tài khoản, tối đa 3 preset. Sau đó là Chế độ chỉ chạy: preset và chain đã có vẫn chạy; tạo và chỉnh sửa cần giấy phép Pro. Preset luôn nằm trên máy bạn.'
                )}
              </div>
            </div>
          </div>
          <div className="dl-meta">
            <div>
              <div className="dl-meta-label">macOS</div>
              <div className="dl-meta-val">13.5 Ventura+</div>
            </div>
            <div>
              <div className="dl-meta-label">{L('Chip', 'Chip')}</div>
              <div className="dl-meta-val">{L('Apple silicon & Intel', 'Apple silicon & Intel')}</div>
            </div>
            <div>
              <div className="dl-meta-label">{L('Release date', 'Ngày phát hành')}</div>
              <div className="dl-meta-val">{L('Sep 2, 2026', '02/09/2026')}</div>
            </div>
            <div>
              <div className="dl-meta-label">{L('Size', 'Dung lượng')}</div>
              <div className="dl-meta-val">10.7 MB</div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 64 }}>
          <h2 style={{ fontSize: 26, marginBottom: 8 }}>{L("What you'll see on first launch", 'Lần mở đầu tiên bạn sẽ thấy gì')}</h2>
          <p style={{ color: 'var(--text-muted)', fontSize: 15 }}>{L(
            'A Welcome screen, then a few permission prompts. Nothing happens until you say yes — skip any of them and Snapovo still works.',
            'Một màn hình Chào mừng, rồi vài lời xin quyền. Không có gì xảy ra cho đến khi bạn đồng ý — bỏ qua phần nào Snapovo vẫn chạy ổn.'
          )}</p>
          <div className="steps">
            <div className="step">
              <div className="step-num">01</div>
              <h4>{L('Save your first layout', 'Lưu bố cục đầu tiên')}</h4>
              <p>{L('The Welcome screen lists what\'s open and offers', 'Màn hình Chào mừng liệt kê những gì đang mở và mời bạn')} <em>{L('Save Current Layout', 'Lưu bố cục hiện tại')}</em>. {L('Try it on whatever you have open.', 'Thử ngay với những gì bạn đang mở.')}</p>
            </div>
            <div className="step">
              <div className="step-num">02</div>
              <h4>{L('Grant Accessibility', 'Cấp quyền Accessibility')}</h4>
              <p>{L('Required to read & restore window positions. macOS asks once.', 'Cần để đọc & khôi phục vị trí cửa sổ. macOS hỏi một lần.')}</p>
            </div>
            <div className="step">
              <div className="step-num">03</div>
              <h4>{L('Grant Automation (later)', 'Cấp quyền Automation (sau)')}</h4>
              <p>{L('Asked the first time a preset includes browser tabs or Finder windows. Per-app, revocable any time.', 'Được hỏi lần đầu khi preset có tab trình duyệt hoặc cửa sổ Finder. Theo từng app, thu hồi bất cứ lúc nào.')}</p>
            </div>
            <div className="step">
              <div className="step-num">04</div>
              <h4>{L('Notifications (optional)', 'Thông báo (tuỳ chọn)')}</h4>
              <p>{L('Off by default. Turn on for session and break reminders — the only notifications Snapovo sends.', 'Tắt mặc định. Bật để nhận nhắc phiên và nghỉ — loại thông báo duy nhất Snapovo gửi.')}</p>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 64, padding: '32px 40px', borderRadius: 'var(--r-3)', border: '1px solid var(--border)', background: 'var(--surface)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }}>
          <div>
            <h3 style={{ fontSize: 18, marginBottom: 8 }}>{L('Free updates, on your terms', 'Cập nhật miễn phí, theo cách của bạn')}</h3>
            <p style={{ color: 'var(--text-muted)', fontSize: 14, maxWidth: '52ch' }}>
              {L('Updates are free for the lifetime of your license. Automatic checking is on after installation — the check is anonymous, and you can switch it off in Settings → Updates to leave only manual checks.', 'Cập nhật miễn phí trọn đời giấy phép. Tự kiểm tra cập nhật bật sẵn khi cài — lần kiểm tra này ẩn danh, và bạn có thể tắt trong Settings → Updates để chỉ còn kiểm tra thủ công.')}
            </p>
          </div>
          <a className="btn btn--ghost" href="#/changelog">{L('View changelog', 'Xem nhật ký')} <Arrow /></a>
        </div>
      </div>
    </section>
  </main>
  );
};

window.Download = Download;