// page-home.jsx — / (marketing landing)

const HomePillarVis = ({ kind, lang }) => {
  const L = (en, v) => (lang === 'vi' ? v : en);
  if (kind === 'capture') {
    return (
      <div className="pillar-vis" style={{ display: 'grid', placeItems: 'center' }}>
        <div style={{
          position: 'relative', width: 140, height: 80,
          borderRadius: 6, border: '1px dashed var(--accent)',
          background: 'var(--accent-tint)',
        }}>
          <div style={{ position: 'absolute', inset: 8, display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 4 }}>
            <div style={{ background: 'var(--surface)', borderRadius: 3, border: '1px solid var(--border)' }} />
            <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 4 }}>
              <div style={{ background: 'var(--surface)', borderRadius: 3, border: '1px solid var(--border)' }} />
              <div style={{ background: 'var(--surface)', borderRadius: 3, border: '1px solid var(--border)' }} />
            </div>
          </div>
          <div style={{
            position: 'absolute', top: -10, right: -10,
            width: 22, height: 22, borderRadius: 6,
            background: 'var(--accent)', display: 'grid', placeItems: 'center',
            boxShadow: '0 4px 12px var(--accent-glow)',
          }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12" />
            </svg>
          </div>
        </div>
      </div>
    );
  }
  if (kind === 'restore') {
    return (
      <div className="pillar-vis" style={{ display: 'grid', placeItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <Kbd>⌃</Kbd><Kbd>⌥</Kbd><Kbd>⌘</Kbd><Kbd>1</Kbd>
          <span style={{ color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>→</span>
          <div style={{ position: 'relative', width: 56, height: 40, borderRadius: 4, background: 'var(--surface)', border: '1px solid var(--border)' }}>
            <div style={{ position: 'absolute', inset: 4, display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 2 }}>
              <div style={{ background: 'var(--accent-tint)', borderRadius: 2, border: '1px solid var(--accent)' }} />
              <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 2 }}>
                <div style={{ background: 'var(--accent-tint)', borderRadius: 2, border: '1px solid var(--accent)' }} />
                <div style={{ background: 'var(--accent-tint)', borderRadius: 2, border: '1px solid var(--accent)' }} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
  // repeat
  return (
    <div className="pillar-vis" style={{ display: 'grid', placeItems: 'center', padding: 14 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '100%' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
          <span>50m</span>
          <span style={{ color: 'var(--text-dim)' }}>·</span>
          <span>10m</span>
          <span style={{ color: 'var(--text-dim)' }}>·</span>
          <span>40m</span>
          <span style={{ color: 'var(--text-dim)' }}>·</span>
          <span>5m</span>
          <span style={{ color: 'var(--text-dim)' }}>·</span>
          <span>30m</span>
        </div>
        <div className="session-strip">
          <i /><i /><i /><i /><i />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>
          <span>{L('FOCUS', 'TẬP TRUNG')}</span><span>{L('BREAK', 'NGHỈ')}</span><span>{L('FOCUS', 'TẬP TRUNG')}</span><span>{L('BREAK', 'NGHỈ')}</span><span>{L('REVIEW', 'RÀ SOÁT')}</span>
        </div>
      </div>
    </div>
  );
};

const PresetShot = ({ src }) => (
  <div className="preset-shot">
    <div className="uc-shot-bar"><i /><i /><i /><span>Snapovo</span></div>
    <img className="preset-shot-img" src={src} alt="Snapovo — preset list / danh sách preset" />
  </div>
);

const Home = ({ lang, theme, onNav }) => {
  const t = useStr(lang);
  const vi = lang === 'vi';
  const L = (en, v) => (vi ? v : en);
  const ucImg = (window.UC_IMG && window.UC_IMG[theme]) || (window.UC_IMG && window.UC_IMG.dark) || {};

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div className="hero-copy">
              <Eyebrow>Snapovo {window.SN_VERSION || '1.0'} · {L('macOS workspace manager', 'trình quản lý không gian macOS')}</Eyebrow>
              <h1 style={{ marginTop: 18 }}>
                {t.hero_h1_a}{' '}
                <span className="accent">{t.hero_h1_b}</span>
                <br />
                {t.hero_h1_c}
              </h1>
              <p className="hero-sub">{t.hero_sub}</p>
              <div className="hero-ctas">
                <a className="btn btn--primary btn--lg" href={window.SN_BUY_URL_BOTH} target="_blank" rel="noopener noreferrer">
                  {L('Buy Snapovo Pro', 'Mua Snapovo Pro')}
                </a>
                <a className="btn btn--ghost btn--lg" href="#download" onClick={(e) => { e.preventDefault(); onNav('download'); }}>
                  <Icon.Download size={16} /> {t.cta_download_beta}
                </a>
              </div>
              <div className="hero-meta">
                <span><span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--accent)' }} /> {t.free_beta}</span>
                <span><Icon.Lock size={12} /> {t.no_telemetry}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5 }}>{t.macos_min}</span>
              </div>
            </div>
            <HeroStage lang={lang} />
          </div>
        </div>
      </section>

      {/* DEMO VIDEO */}
      <section className="section section--tight" data-screen-label="Home · Demo">
        <div className="container">
          <div className="s-head">
            <div>
              <Eyebrow>{L('See it work', 'Xem thử')}</Eyebrow>
              <h2 style={{ marginTop: 14 }}>{L('A minute and a half, start to finish.', 'Một phút rưỡi, từ đầu đến cuối.')}</h2>
            </div>
            <p>{L('Capturing a layout, restoring it, and arranging what is already open — recorded on a real Mac, nothing sped up.', 'Lưu một bố cục, khôi phục lại, và sắp xếp những cửa sổ đang mở — quay trên máy thật, không tua nhanh.')}</p>
          </div>
          <video
            className="demo-video"
            src="demo.mp4"
            poster="demo-poster.jpg"
            autoPlay
            muted
            loop
            playsInline
            controls
            preload="metadata"
            aria-label={L('Snapovo demo', 'Video demo Snapovo')}
          />
        </div>
      </section>

      {/* SHORTCUTS */}
      <section className="section">
        <div className="container">
          <div className="s-head">
            <div>
              <Eyebrow>{L('Capabilities', 'Khả năng')}</Eyebrow>
              <h2 style={{ marginTop: 14 }}>{L('Everything Snapovo can do — and its hotkey.', 'Tất cả những gì Snapovo làm được — kèm phím tắt.')}</h2>
            </div>
            <p>{L('Every capability is a global hotkey, remappable in Settings. These are the defaults.', 'Mỗi khả năng là một phím tắt toàn hệ thống, đổi được trong Cài đặt. Dưới đây là mặc định.')}</p>
          </div>
          <ul className="hotkeys">
            {[
              [L('Save current layout', 'Lưu bố cục hiện tại'), L('Snapshot every open app, window position, display and tab.', 'Chụp lại mọi app, vị trí cửa sổ, màn hình và tab đang mở.'), ['⌃','⌥','⌘','S']],
              [L('Undo last action', 'Hoàn tác hành động gần nhất'), L('Reverse a restore, arrange or Clear Desk in one press.', 'Hoàn tác một lần khôi phục, sắp xếp hay dọn bàn.')                                        , ['⌃','⌥','⌘','Z']],
              [L('Arrange open windows', 'Sắp xếp cửa sổ đang mở'), L('Tile whatever is on screen into a clean grid.', 'Xếp gọn các cửa sổ đang mở thành lưới ngăn nắp.'), ['⌃','⌥','⌘','A']],
              [L('Clear Desk: quit apps', 'Dọn bàn: Đóng app'), L('Close everything that is not part of your layout.', 'Đóng mọi thứ không thuộc bố cục của bạn.'), ['⌃','⌥','⌘','X']],
              [L('Clear Desk: hide apps', 'Dọn bàn: Ẩn app'), L('Same, but hides instead of quitting — nothing is lost.', 'Tương tự, nhưng chỉ ẩn thay vì đóng — không mất gì.'), ['⌃','⌥','H']],
              [L('Open main window', 'Mở cửa sổ chính'), L('Jump to your preset list from anywhere.', 'Mở danh sách preset từ bất cứ đâu.'), ['⌃','⌥','⌘','O']],
              [L('Start an eye break', 'Bắt đầu nghỉ mắt'), L('A quiet full-screen pause on your own schedule.', 'Một khoảng nghỉ toàn màn hình theo nhịp của bạn.'), ['⌃','⌥','⌘','E']],
              [L('Move workspace to another display', 'Chuyển workspace sang màn hình khác'), L('Shift the whole layout to a second screen intact.', 'Chuyển toàn bộ bố cục sang màn hình thứ hai, nguyên vẹn.'), ['⌃','⌥','⌘','/']],
            ].map(([label, desc, keys]) => (
              <li className="hotkey-row" key={label}>
                <span className="hotkey-text">
                  <span className="hotkey-label">{label}</span>
                  <span className="hotkey-desc">{desc}</span>
                </span>
                <span className="hotkey-keys">{keys.map((k, i) => <Kbd key={i}>{k}</Kbd>)}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <hr className="hairline" />

      {/* POMODORO + INSIGHTS */}
      <section className="section">
        <div className="container">
          <div className="s-head">
            <div>
              <Eyebrow>{L('Sessions & Insights', 'Phiên & Thống kê')}</Eyebrow>
              <h2 style={{ marginTop: 14 }}>{L('A quiet hairline of progress, not a dashboard.', 'Một vạch tiến độ mảnh, không phải bảng điều khiển.')}</h2>
            </div>
            <p>{L('Insights live in the menu bar — a 1-pixel line that fills as the day fills. Open the panel only when you want to.', 'Insights nằm trên thanh menu — một vạch 1 pixel đầy dần theo ngày. Mở bảng chỉ khi bạn muốn.')}</p>
          </div>

          <figure className="insights-shot">
            <div className="uc-shot-bar"><i /><i /><i /><span>Snapovo</span></div>
            <img className="insights-shot-img" src={ucImg.insights} alt="Snapovo — Insights panel / bảng Insights" />
          </figure>
        </div>
      </section>

      <hr className="hairline" />

      {/* PRIVACY */}
      <section className="section">
        <div className="container">
          <div className="privacy-stripe">
            <div>
              <Eyebrow>{L('Privacy by default', 'Riêng tư mặc định')}</Eyebrow>
              <h2 style={{ marginTop: 14, fontSize: 'clamp(24px, 3vw, 36px)' }}>{t.privacy_h}</h2>
              <p style={{ marginTop: 16, color: 'var(--text-muted)', fontSize: 15.5, maxWidth: '52ch' }}>
                {t.privacy_p}
              </p>
              <a className="btn btn--ghost" style={{ marginTop: 20 }} href="#privacy" onClick={(e) => { e.preventDefault(); onNav('privacy'); }}>
                {L('Read the full policy', 'Đọc toàn bộ chính sách')} <Arrow />
              </a>
            </div>
            <div className="privacy-list">
              <span>{L('No telemetry', 'Không telemetry')}</span>
              <span>{L('No analytics', 'Không analytics')}</span>
              <span>{L('No accounts', 'Không tài khoản')}</span>
              <span>{L('Local-first storage', 'Lưu trữ cục bộ')}</span>
              <span>{L('License in Keychain', 'Giấy phép trong Keychain')}</span>
              <span>{L('No tracking pixels', 'Không tracking pixel')}</span>
              <span>{L('Open privacy policy', 'Chính sách công khai')}</span>
              <span>{L('Notarized by Apple', 'Apple công chứng')}</span>
            </div>
          </div>
        </div>
      </section>

      <hr className="hairline" />

      {/* PRICING — Trial / Pro (one-time) */}
      <section className="section" id="pricing">
        <div className="container">
          <div className="s-head">
            <div>
              <Eyebrow>{lang === 'vi' ? 'Giá' : 'Pricing'}</Eyebrow>
              <h2 style={{ marginTop: 14 }}>{lang === 'vi' ? 'Dùng thử 7 ngày. Mua một lần. Sở hữu vĩnh viễn.' : 'Try for 7 days. Buy once. Own it forever.'}</h2>
            </div>
            <p>{lang === 'vi'
              ? 'Một lần mua qua Lemon Squeezy — không thuê bao, không tài khoản. Dùng thử đầy đủ tính năng trong 7 ngày.'
              : 'A one-time purchase through Lemon Squeezy — no subscription, no accounts. The 7-day trial is the full app.'}</p>
          </div>

          <div className="pricing-3">
            <div className="price-card">
              <Eyebrow>{lang === 'vi' ? 'Dùng thử · 7 ngày' : 'Free trial · 7 days'}</Eyebrow>
              <div className="price-amt">{lang === 'vi' ? 'Miễn phí' : 'Free'}<small>{lang === 'vi' ? '7 ngày' : 'for 7 days'}</small></div>
              <p style={{ color: 'var(--text-muted)', fontSize: 14.5 }}>{lang === 'vi'
                ? 'Đầy đủ tính năng trong 7 ngày — không cần thẻ, không tài khoản, tối đa 3 preset. Hết hạn thì chuyển sang Chế độ chỉ chạy.'
                : 'Every feature for 7 days — no card, no account, up to 3 presets. When it ends, Snapovo switches to Run-only mode.'}</p>
              <ul className="price-list">
                <li>{lang === 'vi' ? 'Đầy đủ tính năng trong 7 ngày (tối đa 3 preset)' : 'Every feature for 7 days (up to 3 presets)'}</li>
                <li>{lang === 'vi' ? 'Sau 7 ngày (Chỉ chạy): chạy mọi thứ bạn đã có; theme mặc định; tạo & chỉnh sửa cần Pro' : 'After 7 days (Run-only): run everything you already have; default theme; creating & editing need Pro'}</li>
                <li>{lang === 'vi' ? 'Cập nhật miễn phí (Sparkle)' : 'Free updates (Sparkle)'}</li>
              </ul>
              <a className="btn btn--ghost price-cta" href="#download" onClick={(e) => { e.preventDefault(); onNav('download'); }}>
                <Icon.Download size={15} /> {lang === 'vi' ? 'Tải bản dùng thử' : 'Download free trial'}
              </a>
            </div>

            <div className="price-card">
              <Eyebrow>{lang === 'vi' ? 'Pro · 1 máy Mac' : 'Pro · 1 Mac'}</Eyebrow>
              <div className="price-amt">$9<span className="cents">.99</span><small>{lang === 'vi' ? '· một lần' : '· one-time'}</small></div>
              <p style={{ color: 'var(--text-muted)', fontSize: 14.5 }}>{lang === 'vi'
                ? 'Mua một lần cho một máy Mac. Kích hoạt bằng email + license key, chuyển được sang máy Mac khác của bạn.'
                : 'A one-time license for a single Mac. Activate with email + license key; movable to another of your Macs.'}</p>
              <ul className="price-list">
                <li>{lang === 'vi' ? 'Preset không giới hạn' : 'Unlimited presets'}</li>
                <li>{lang === 'vi' ? 'Tất cả theme và tính năng Pro' : 'All themes and Pro features'}</li>
                <li>{lang === 'vi' ? '1 máy Mac · cập nhật miễn phí' : '1 Mac · free updates'}</li>
              </ul>
              <a className="btn btn--ghost price-cta" href={window.SN_BUY_URL_1MAC} target="_blank" rel="noopener noreferrer">
                {lang === 'vi' ? 'Mua — 1 Mac' : 'Buy — 1 Mac'} <Arrow />
              </a>
            </div>

            <div className="price-card is-pro">
              <Eyebrow>{lang === 'vi' ? 'Pro · 2 máy Mac' : 'Pro · 2 Macs'}</Eyebrow>
              <div className="price-amt">$16<span className="cents">.99</span><small>{lang === 'vi' ? '· một lần' : '· one-time'}</small></div>
              <p style={{ color: 'var(--text-muted)', fontSize: 14.5 }}>{lang === 'vi'
                ? 'Một giấy phép cho hai máy Mac, chuyển được giữa các máy của bạn. Tốt nhất cho ai dùng nhiều hơn một máy.'
                : 'One license for two Macs, movable between your own machines. Best if you use more than one.'}</p>
              <ul className="price-list">
                <li>{lang === 'vi' ? 'Preset không giới hạn' : 'Unlimited presets'}</li>
                <li>{lang === 'vi' ? 'Tất cả theme và tính năng Pro' : 'All themes and Pro features'}</li>
                <li>{lang === 'vi' ? '2 máy Mac · cập nhật miễn phí' : '2 Macs · free updates'}</li>
              </ul>
              <a className="btn btn--primary price-cta" href={window.SN_BUY_URL_2MAC} target="_blank" rel="noopener noreferrer">
                {lang === 'vi' ? 'Mua — 2 Mac' : 'Buy — 2 Macs'} <Arrow />
              </a>
            </div>
          </div>

          <p style={{ marginTop: 18, fontSize: 12.5, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', textAlign: 'center' }}>
            {lang === 'vi' ? 'Mỗi gói có liên kết thanh toán riêng — gói bạn chọn sẽ được điền sẵn trên trang Lemon Squeezy.' : 'Each tier has its own checkout — your pick is pre-selected on the Lemon Squeezy page.'}
          </p>

          {/* Buyer flow — one app, key unlocks Pro */}
          <div className="buyflow">
            {[
              { n: '01', h: lang === 'vi' ? 'Tải về' : 'Download', p: lang === 'vi' ? 'Bản DMG là bản dùng thử 7 ngày đầy đủ.' : 'The DMG is the full 7-day trial.' },
              { n: '02', h: lang === 'vi' ? 'Mua key' : 'Buy a key', p: lang === 'vi' ? 'Chọn 1 Mac hoặc 2 Mac qua Lemon Squeezy.' : 'Pick 1-Mac or 2-Mac via Lemon Squeezy.' },
              { n: '03', h: lang === 'vi' ? 'Nhập key' : 'Enter it', p: lang === 'vi' ? 'Dán license key vào Snapovo trên máy.' : 'Paste the license key into Snapovo.' },
              { n: '04', h: 'Pro', p: lang === 'vi' ? 'Mở khoá preset không giới hạn, themes & chains.' : 'Unlimited presets, themes & chains unlock.' },
            ].map((s, i, arr) => (
              <div key={s.n} className="buyflow-step">
                <span className="buyflow-num">{s.n}</span>
                <div>
                  <div className="buyflow-h">{s.h}</div>
                  <div className="buyflow-p">{s.p}</div>
                </div>
                {i < arr.length - 1 && <span className="buyflow-arrow" aria-hidden>→</span>}
              </div>
            ))}
          </div>
          <p style={{ marginTop: 16, fontSize: 12.5, color: 'var(--text-dim)', textAlign: 'center' }}>
            {lang === 'vi' ? 'Chỉ một ứng dụng — bản tải về cũng chính là bản Pro; nhập key để mở khoá. Không có bản “trial” và “pro” riêng.' : 'One app — the download is the Pro build; a key unlocks it. There is no separate “trial” vs “pro” build.'}
          </p>

          {/* Comparison table */}
          <div className="cmp" style={{ marginTop: 64 }}>
            <div className="cmp-head">
              <div></div>
              <div>{lang === 'vi' ? 'Dùng thử' : 'Trial'}</div>
              <div>{lang === 'vi' ? 'Chỉ chạy' : 'Run-only'}</div>
              <div className="cmp-pro">Pro</div>
            </div>
            {[
              { l: lang === 'vi' ? 'Số preset' : 'Presets', f: '3', t: lang === 'vi' ? 'Chạy cái đã có' : 'Run existing', p: '∞' },
              { l: lang === 'vi' ? 'Chains' : 'Chains', f: '✓', t: lang === 'vi' ? 'Chạy cái đã có' : 'Run existing', p: '✓' },
              { l: lang === 'vi' ? 'Themes, gồm theo mùa (Pro)' : 'Themes, incl. seasonal (Pro)', f: '✓', t: lang === 'vi' ? 'Mặc định' : 'Default', p: '✓' },
              { l: 'Pomodoro · Focus Timer', f: '✓', t: '✓', p: '✓' },
              { l: lang === 'vi' ? 'Insights · chuỗi ngày' : 'Insights · streaks', f: '✓', t: '✓', p: '✓' },
              { l: lang === 'vi' ? 'Arrange · Clear Desk · Breaks' : 'Arrange · Clear Desk · Breaks', f: '✓', t: '✓', p: '✓' },
              { l: lang === 'vi' ? 'Triggers & tự động hoá' : 'Triggers & automations', f: '✓', t: lang === 'vi' ? 'Chạy cái đã có' : 'Run existing', p: '✓' },
              { l: lang === 'vi' ? 'Đa màn hình thông minh' : 'Multi-display aware restore', f: '✓', t: '✓', p: '✓' },
              { l: lang === 'vi' ? 'Số máy Mac' : 'Macs', f: '—', t: '—', p: lang === 'vi' ? '1 hoặc 3' : '1 or 3' },
              { l: lang === 'vi' ? 'Cập nhật miễn phí (Sparkle)' : 'Free updates (Sparkle)', f: '✓', t: '✓', p: '✓' },
              { l: lang === 'vi' ? 'Thời hạn' : 'Duration', f: lang === 'vi' ? '7 ngày' : '7 days', t: lang === 'vi' ? 'Khi hết dùng thử' : 'After trial', p: lang === 'vi' ? 'Vĩnh viễn' : 'Forever' },
            ].map((r, i) => (
              <div key={i} className="cmp-row">
                <div className="cmp-l">{r.l}</div>
                <div className={`cmp-v ${r.f === '—' ? 'is-no' : ''}`}>{r.f}</div>
                <div className={`cmp-v ${r.t === '—' ? 'is-no' : ''}`}>{r.t}</div>
                <div className={`cmp-v cmp-pro ${r.p === '—' ? 'is-no' : ''}`}>{r.p}</div>
              </div>
            ))}
          </div>
          <p style={{ marginTop: 16, fontSize: 12.5, color: 'var(--text-dim)', textAlign: 'center', maxWidth: '62ch', marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.5 }}>
            {lang === 'vi'
              ? 'Chế độ chỉ chạy chạy mọi thứ bạn đã có; tạo, chỉnh sửa và lưu cần Pro.'
              : 'Run-only mode runs everything you already have; creating, editing, and saving need Pro.'}
          </p>
        </div>
      </section>

      <hr className="hairline" />

      {/* FAQ */}
      <section className="section" id="faq" data-screen-label="Home · FAQ">
        <div className="container">
          <div className="s-head">
            <div>
              <Eyebrow>FAQ</Eyebrow>
              <h2 style={{ marginTop: 14 }}>{lang === 'vi' ? 'Câu hỏi thường gặp' : 'Common questions'}</h2>
            </div>
          </div>
          <div className="faq-grid">
            {[
              {
                q: L('How is this different from a window snapping app?', 'Khác gì app chia cửa sổ?'),
                a: L('Those tile the windows you already have open. Snapovo remembers the whole setup — which apps, which windows, which display each one sits on, even which browser tabs — and brings it all back, launching anything that isn\'t running yet.', 'Các app đó chỉ sắp lại những cửa sổ bạn đang mở. Snapovo nhớ cả bối cảnh — app nào, cửa sổ nào, nằm ở màn hình nào, cả tab trình duyệt — rồi mở lại toàn bộ, kể cả app chưa chạy.'),
              },
              {
                q: L('What do I get during the 7-day trial?', 'Dùng thử 7 ngày được những gì?'),
                a: L("Everything, capped at 3 saved workspaces. That's enough to see whether it fits how you work. Pro removes the cap.", 'Đầy đủ tính năng, giới hạn 3 workspace. Đủ để biết nó có hợp với cách bạn làm việc không. Pro bỏ giới hạn này.'),
              },
              {
                q: L("What happens if I don't buy?", 'Không mua thì sao?'),
                a: L("Your workspaces stay on your Mac and keep running. You just can't create or edit them until you upgrade. Nothing is deleted, nothing is held hostage.", 'Workspace của bạn vẫn nằm trên máy và vẫn chạy được. Chỉ là không tạo hay sửa được cho tới khi nâng cấp. Không xoá gì, không giữ làm con tin.'),
              },
              {
                q: L('Is it a subscription?', 'Có phải thuê bao không?'),
                a: L('No. One payment, yours for good, updates included.', 'Không. Trả một lần, dùng mãi, cập nhật miễn phí.'),
              },
              {
                q: L("I'm switching to a new Mac — do I lose my license?", 'Đổi sang Mac mới có mất giấy phép không?'),
                a: L('No. Release the old Mac from Settings → License, then activate the new one. The 1-Mac and 2-Mac tiers differ only in how many can be active at once.', 'Không. Vào Settings → License nhả máy cũ ra, rồi kích hoạt máy mới. Gói 1 Mac và 2 Mac chỉ khác nhau ở số máy dùng cùng lúc.'),
              },
              {
                q: L('What if it puts my windows in the wrong place?', 'Lỡ nó sắp cửa sổ sai chỗ thì sao?'),
                a: L('Press ⌃⌥⌘Z. Every run can be undone, including Clear Desk — the app remembers where each window was before it moved anything.', 'Bấm ⌃⌥⌘Z. Mọi lần chạy đều hoàn tác được, kể cả Clear Desk — app nhớ vị trí cũ của từng cửa sổ trước khi động vào.'),
              },
              {
                q: L('Does Snapovo collect my data?', 'Snapovo có thu thập dữ liệu không?'),
                a: L('No telemetry, no analytics, no account. Nothing leaves your Mac unless you send a diagnostics report yourself.', 'Không telemetry, không phân tích, không cần tài khoản. Không gì rời khỏi máy trừ khi chính bạn gửi báo cáo chẩn đoán.'),
              },
            ].map((f, i) => (
              <div key={i} className="faq-item">
                <h4>{f.q}</h4>
                <p>{f.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <hr className="hairline" />

      {/* FINAL CTA */}
      <section className="section" data-screen-label="Home · Final CTA">
        <div className="container">
          <div className="final-cta">
            <AppIcon size={56} />
            <h2>{lang === 'vi' ? 'Bàn làm việc gọn gàng chỉ cách một cú click.' : 'Your tidy desk is one click away.'}</h2>
            <p>{lang === 'vi' ? 'Dùng thử miễn phí 7 ngày. Không cần thẻ, không cần tài khoản.' : 'Free for 7 days. No card, no account.'}</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <a className="btn btn--primary btn--lg" href="#download" onClick={(e) => { e.preventDefault(); onNav('download'); }}>
                <Icon.Download size={16} /> {lang === 'vi' ? 'Tải bản dùng thử' : 'Download free trial'}
              </a>
              <a className="btn btn--ghost btn--lg" href={window.SN_BUY_URL_BOTH} target="_blank" rel="noopener noreferrer">
                {lang === 'vi' ? 'Mua Snapovo Pro' : 'Buy Snapovo Pro'}
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

window.Home = Home;