// page-features.jsx — /features

// Real Snapovo screenshots (light + dark) per feature — data URIs in feat-images.js.
const FEAT_IMG = window.FEAT_SHOTS || {};

const FeatShot = ({ kind, theme }) => {
  const set = FEAT_IMG[kind] || {};
  const src = set[theme === 'light' ? 'light' : 'dark'] || set.dark;
  return (
    <div className="feat-shot">
      <div className="uc-shot-bar"><i /><i /><i /><span>Snapovo</span></div>
      <img className="feat-shot-img" src={src} alt="Snapovo screenshot" />
    </div>
  );
};

const FeatVis = ({ kind, theme }) => {
  if (FEAT_IMG[kind]) return <FeatShot kind={kind} theme={theme} />;
  const wrap = { position: 'absolute', inset: 0, padding: 24, display: 'flex' };

  if (kind === 'presets') {
    return (
      <div className="feat-vis">
        <div style={{ ...wrap, flexDirection: 'column', gap: 8 }}>
          <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 500, marginBottom: 4 }}>Presets · 12</div>
          {[
            { n: 'Morning focus', meta: '4 apps · 2 displays', kbd: '⌃⌥⌘1', active: true },
            { n: 'Afternoon review', meta: '6 apps · 1 display', kbd: '⌃⌥⌘2' },
            { n: 'Client — Acme', meta: '5 apps · 3 displays', kbd: '⌃⌥⌘3' },
            { n: 'Writing', meta: '2 apps · 1 display', kbd: '⌃⌥⌘4' },
            { n: 'Off-hours', meta: '1 app', kbd: '—' },
          ].map((p, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '10px 14px', borderRadius: 8,
              background: p.active ? 'var(--accent-tint)' : 'var(--surface-2)',
              border: '1px solid', borderColor: p.active ? 'var(--accent)' : 'var(--border)',
            }}>
              <span style={{ width: 8, height: 8, borderRadius: 4, background: p.active ? 'var(--accent)' : 'var(--text-dim)', opacity: p.active ? 1 : 0.4 }} />
              <span style={{ flex: 1, fontWeight: 500, fontSize: 13, color: 'var(--text)' }}>{p.n}</span>
              <span style={{ fontSize: 11, color: 'var(--text-dim)' }}>{p.meta}</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)', minWidth: 56, textAlign: 'right' }}>{p.kbd}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (kind === 'chains') {
    return (
      <div className="feat-vis">
        <div style={{ ...wrap, flexDirection: 'column', justifyContent: 'center', gap: 22 }}>
          <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 500 }}>Chain · Deep work day</div>
          {[
            { n: 'Morning focus', d: '50 min', a: 0 },
            { n: 'Stretch break', d: '10 min', a: 1 },
            { n: 'Pair programming', d: '90 min', a: 0 },
            { n: 'Lunch', d: 'until 1pm', a: 1 },
            { n: 'Afternoon review', d: '40 min', a: 0 },
          ].map((s, i, arr) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, position: 'relative' }}>
              <div style={{
                width: 28, height: 28, borderRadius: 8,
                background: s.a ? 'var(--surface-2)' : 'var(--accent-tint)',
                border: '1px solid', borderColor: s.a ? 'var(--border)' : 'var(--accent)',
                display: 'grid', placeItems: 'center',
                fontFamily: 'var(--font-mono)', fontSize: 11, color: s.a ? 'var(--text-dim)' : 'var(--accent)',
                fontWeight: 600,
                position: 'relative', zIndex: 1,
              }}>{s.a ? '·' : i / 2 + 1}</div>
              {i < arr.length - 1 && (
                <div style={{ position: 'absolute', left: 14, top: 28, bottom: -22, width: 1, background: 'var(--border)' }} />
              )}
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, color: 'var(--text)', fontWeight: 500 }}>{s.n}</div>
                <div style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>{s.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (kind === 'pomodoro') {
    return (
      <div className="feat-vis" style={{ display: 'grid', placeItems: 'center' }}>
        <div style={{ width: 220, height: 220, borderRadius: '50%',
          background: `conic-gradient(var(--accent) 0deg ${72 * 3.6}deg, var(--surface-2) ${72 * 3.6}deg 360deg)`,
          display: 'grid', placeItems: 'center',
          position: 'relative',
        }}>
          <div style={{ width: 180, height: 180, borderRadius: '50%', background: 'var(--surface)', border: '1px solid var(--border)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4 }}>
            <span style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 500 }}>Focus</span>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 600, letterSpacing: '-0.04em' }}>14:02</span>
            <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>of 50 min</span>
            <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
              <Kbd>Skip</Kbd>
              <Kbd>End</Kbd>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (kind === 'insights') {
    return (
      <div className="feat-vis" style={{ padding: 24 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
          <div style={{ fontSize: 11, color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 500 }}>Activity · Last 90 days</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>
            <span>Sessions/day</span>
            {[0.08, 0.3, 0.55, 0.8, 1].map((v, i) => (
              <span key={i} style={{ width: 11, height: 11, borderRadius: 2, background: `color-mix(in oklab, var(--accent) ${v * 100}%, var(--surface-2))` }} />
            ))}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(15, 1fr)', gap: 4 }}>
          {Array.from({ length: 30 }).map((_, i) => {
            const v = [0.2, 0.5, 0.8, 1, 0.6, 0.9, 0.7, 0.3, 0.85, 0.5, 1, 0.7, 0.45, 0.8, 0.6, 0.9, 0.55, 0.75, 0.4, 1, 0.6, 0.5, 0.8, 0.95, 0.7, 0.65, 0.85, 0.5, 0.75, 0.9][i];
            return <div key={i} style={{ aspectRatio: 1, borderRadius: 3, background: `color-mix(in oklab, var(--accent) ${v * 100}%, var(--surface-2))` }} />;
          })}
        </div>
        <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[['18', 'sessions this week'], ['32h', 'total focus'], ['14', 'day streak']].map(([n, l]) => (
            <div key={l}>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, letterSpacing: '-0.022em' }}>{n}</div>
              <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (kind === 'triggers') {
    const Days = ({ on }) => (
      <div style={{ display: 'flex', gap: 4, marginTop: 6 }}>
        {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => (
          <span key={i} style={{
            width: 18, height: 18, borderRadius: '50%',
            display: 'grid', placeItems: 'center',
            fontSize: 9.5, fontWeight: 600,
            background: on.includes(i) ? 'var(--accent)' : 'var(--surface-3)',
            color: on.includes(i) ? '#fff' : 'var(--text-dim)',
          }}>{d}</span>
        ))}
      </div>
    );
    return (
      <div className="feat-vis" style={{ padding: 24 }}>
        {/* A real schedule row: time + day-of-week circles */}
        <div style={{ padding: '12px 14px', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 10, marginBottom: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 28, height: 16, borderRadius: 8, background: 'var(--accent)', position: 'relative', flexShrink: 0 }}>
              <span style={{ position: 'absolute', right: 2, top: 2, width: 12, height: 12, borderRadius: '50%', background: '#fff' }} />
            </span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>09:00</span>
            <span style={{ fontSize: 11, color: 'var(--text-dim)' }}>Schedule · runs “Morning focus”</span>
          </div>
          <Days on={[1, 2, 3, 4, 5]} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { i: '⏻', n: 'Login', d: 'On Mac startup' },
            { i: '🖥', n: 'Display', d: 'External display connect / disconnect' },
            { i: '☀', n: 'Wake', d: 'On wake from sleep' },
            { i: '🌙', n: 'Focus Mode', d: 'When a macOS Focus turns on' },
          ].map((tr, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 12px', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 8 }}>
              <div style={{ width: 30, height: 30, borderRadius: 6, background: 'var(--surface-3)', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)' }}>{tr.i}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{tr.n}</div>
                <div style={{ fontSize: 11, color: 'var(--text-dim)' }}>{tr.d}</div>
              </div>
              <span style={{ width: 28, height: 16, borderRadius: 8, background: 'var(--accent)', position: 'relative' }}>
                <span style={{ position: 'absolute', right: 2, top: 2, width: 12, height: 12, borderRadius: '50%', background: '#fff' }} />
              </span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (kind === 'multi') {
    return (
      <div className="feat-vis" style={{ display: 'grid', placeItems: 'center', padding: 24 }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14 }}>
          <div style={{ width: 220, height: 130, borderRadius: 6, background: 'var(--surface-2)', border: '1.5px solid var(--accent)', position: 'relative', padding: 8 }}>
            <div style={{ position: 'absolute', inset: 8, display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 4 }}>
              <div style={{ background: 'var(--surface-3)', borderRadius: 3 }} />
              <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 4 }}>
                <div style={{ background: 'var(--accent-tint)', borderRadius: 3, border: '1px solid var(--accent)' }} />
                <div style={{ background: 'var(--surface-3)', borderRadius: 3 }} />
              </div>
            </div>
            <span style={{ position: 'absolute', bottom: -22, left: 0, right: 0, textAlign: 'center', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-dim)' }}>Studio Display · 5K</span>
          </div>
          <div style={{ width: 130, height: 88, borderRadius: 6, background: 'var(--surface-2)', border: '1px solid var(--border)', padding: 6 }}>
            <div style={{ width: '100%', height: '100%', background: 'var(--surface-3)', borderRadius: 3 }} />
            <span style={{ position: 'absolute', marginTop: 4, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-dim)' }}>MacBook · 14"</span>
          </div>
        </div>
      </div>
    );
  }

  if (kind === 'theme') {
    return (
      <div className="feat-vis" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
        <div style={{ background: '#0A0A0F', padding: 20, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ fontSize: 11, color: '#5E5E6E', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Dark</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {['#6D5DFC', '#10B981', '#F59E0B', '#EF4444'].map((c) => (
              <div key={c} style={{ width: 20, height: 20, borderRadius: 5, background: c, border: '1px solid rgba(255,255,255,0.08)' }} />
            ))}
          </div>
          <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 18, height: 18, borderRadius: 5, background: 'linear-gradient(160deg, #6D5DFC, #4F3FE0)' }} />
            <span style={{ fontSize: 10, color: '#9C9CA8', fontFamily: 'var(--font-mono)' }}>2:14 · 4h 32m</span>
          </div>
        </div>
        <div style={{ background: '#FAFAF7', padding: 20, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ fontSize: 11, color: '#8B8B95', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Light</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {['#6D5DFC', '#10B981', '#F59E0B', '#EF4444'].map((c) => (
              <div key={c} style={{ width: 20, height: 20, borderRadius: 5, background: c, border: '1px solid rgba(0,0,0,0.06)' }} />
            ))}
          </div>
          <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 18, height: 18, borderRadius: 5, background: 'linear-gradient(160deg, #6D5DFC, #4F3FE0)' }} />
            <span style={{ fontSize: 10, color: '#52525B', fontFamily: 'var(--font-mono)' }}>2:14 · 4h 32m</span>
          </div>
        </div>
      </div>
    );
  }

  if (kind === 'feedback') {
    return (
      <div className="feat-vis" style={{ padding: 24 }}>
        <div style={{ borderRadius: 10, border: '1px solid var(--border)', background: 'var(--surface-2)', overflow: 'hidden' }}>
          <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)', fontSize: 12, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon.Lock size={12} /> Send Feedback
          </div>
          <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 12, color: 'var(--text-muted)' }}>
            <div style={{ height: 56, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 6, padding: 8, color: 'var(--text)' }}>
              Hotkey conflicts with Things 3 — could you switch the default…
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 14, height: 14, borderRadius: 3, border: '1px solid var(--accent)', background: 'var(--accent-tint)', display: 'grid', placeItems: 'center' }}>
                <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
              </span>
              Include diagnostic logs (no personal data)
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 14, height: 14, borderRadius: 3, border: '1px solid var(--border)' }} />
              Include macOS version &amp; hardware
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <span style={{ padding: '6px 12px', borderRadius: 6, background: 'var(--accent)', color: '#fff', fontSize: 12, fontWeight: 500 }}>Send</span>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return null;
};

const FeatRow = ({ eyebrow, h, p, where, vis, id, lang, theme }) => (
  <div className="feat-row" id={id}>
    <div className="feat-copy">
      <div className="feat-eyebrow">{eyebrow}</div>
      <h2>{h}</h2>
      <p>{p}</p>
      {where && (
        <div className="feat-where">
          <span className="feat-where-label">{lang === 'vi' ? 'Tìm ở đâu:' : 'Where to find it:'}</span>
          {where}
        </div>
      )}
    </div>
    <FeatVis kind={vis} theme={theme} />
  </div>
);

const Features = ({ lang, theme }) => {
  const vi = lang === 'vi';
  const L = (en, v) => (vi ? v : en);
  return (
  <main>
    <section className="ph">
      <div className="container">
        <div className="ph-inner">
          <Eyebrow>{L('Features', 'Tính năng')}</Eyebrow>
          <h1 style={{ marginTop: 14 }}>{L('One job, done thoroughly.', 'Một việc, làm thật trọn vẹn.')}</h1>
          <p>{L(
            'Snapovo captures and restores Mac workspaces — and does a focused set of things in service of that.',
            'Snapovo lưu và khôi phục không gian làm việc trên Mac — cùng một số việc tập trung phục vụ điều đó.'
          )}</p>
        </div>
      </div>
    </section>

    <div className="container">
      <FeatRow
        lang={lang}
        theme={theme}
        id="presets"
        eyebrow={L('01 · Presets', '01 · Preset')}
        h={L('Capture, restore, and undo workspaces.', 'Lưu, khôi phục và hoàn tác không gian làm việc.')}
        p={L(
          "Snapshot every running app, window position, display, browser tab and Finder path. Restore in one click — undo if it wasn't what you wanted.",
          'Ghi lại mọi ứng dụng đang chạy, vị trí cửa sổ, màn hình, tab trình duyệt và đường dẫn Finder. Khôi phục bằng một cú click — hoàn tác nếu không như ý.'
        )}
        where={<><Kbd>⌃⌥⌘S</Kbd> {L('capture', 'lưu')} <Kbd>⌃⌥⌘O</Kbd> {L('show', 'hiện')} <Kbd>⌃⌥⌘Z</Kbd> {L('undo', 'hoàn tác')} · {L('per-preset hotkeys are user-set', 'phím tắt từng preset do bạn đặt')}</>}
        vis="presets"
      />
      <FeatRow
        lang={lang}
        theme={theme}
        id="chains"
        eyebrow="02 · Chains"
        h={L('String presets into a timed sequence.', 'Nối các preset thành chuỗi có hẹn giờ.')}
        p={L(
          'A chain is presets in order, with optional timed phases — build your own rhythm, like a 50/10 focus loop or a full deep-work day. Pause, skip, or end at any time. Chains are a Pro feature.',
          'Chuỗi (chain) là các preset xếp theo thứ tự, kèm các pha hẹn giờ tuỳ chọn — tự xây nhịp riêng, như vòng tập trung 50/10 hay cả một ngày làm việc sâu. Tạm dừng, bỏ qua hoặc kết thúc bất cứ lúc nào. Chains là tính năng Pro.'
        )}
        where={<><span className="feat-where-label">{L('No default global hotkey — start a chain from the menu bar or Apple Shortcuts.', 'Không có phím tắt mặc định — khởi động chuỗi từ thanh menu hoặc Apple Shortcuts.')}</span></>}
        vis="chains"
      />
      <FeatRow
        lang={lang}
        theme={theme}
        id="sessions"
        eyebrow={L('03 · Sessions', '03 · Phiên')}
        h={L('Pomodoro and timed focus, built in.', 'Pomodoro và tập trung hẹn giờ, tích hợp sẵn.')}
        p={L(
          "Each timed phase shows a circular dial in Snapovo's panel — detachable into an always-on-top Focus Timer — and a quiet hairline in the menu bar. Notifications announce phase changes. Skip a phase or end the session whenever.",
          'Mỗi pha hẹn giờ hiển thị một vòng tròn trong bảng Snapovo — tách ra được thành Focus Timer luôn nổi trên cùng — và một vạch mảnh trên thanh menu. Thông báo báo khi chuyển pha. Bỏ qua một pha hoặc kết thúc phiên bất cứ lúc nào.'
        )}
        where={<>View → Focus Timer (<Kbd>⌃⌥⌘F</Kbd>{L(', while a session is running', ', khi phiên đang chạy')}) · <Kbd>{L('Skip', 'Bỏ qua')}</Kbd> <Kbd>{L('End', 'Kết thúc')}</Kbd> {L('in the panel', 'trong bảng')}</>}
        vis="pomodoro"
      />
      <FeatRow
        lang={lang}
        theme={theme}
        id="insights"
        eyebrow="04 · Insights"
        h={L('Focus stats: this week, today, streak, total focus.', 'Thống kê: tuần này, hôm nay, chuỗi ngày, tổng tập trung.')}
        p={L(
          'A calm view of your sessions — sessions this week, today, a day streak, and total focus time — with an activity heat-grid over the last 30 or 90 days. No leaderboards, no badges, no shame.',
          'Một bảng nhìn nhẹ nhàng về các phiên của bạn — số phiên tuần này, hôm nay, chuỗi ngày, và tổng thời gian tập trung — kèm lưới nhiệt hoạt động trong 30 hoặc 90 ngày qua. Không bảng xếp hạng, không huy hiệu, không áp lực.'
        )}
        where={<>View → Insights (<Kbd>⇧⌘I</Kbd>) · {L('30d / 90d heat-grid', 'lưới nhiệt 30/90 ngày')}</>}
        vis="insights"
      />
      <FeatRow
        lang={lang}
        theme={theme}
        id="triggers"
        eyebrow={L('05 · Triggers', '05 · Trigger')}
        h={L('Run a preset automatically, or from anywhere.', 'Chạy preset tự động, hoặc từ bất cứ đâu.')}
        p={L(
          'Auto-run a preset on login, external display connect/disconnect, wake from sleep, a schedule, or a macOS Focus change. Or fire it yourself by hotkey, Spotlight, or Apple Shortcuts.',
          'Tự chạy một preset khi đăng nhập, khi cắm/rút màn hình ngoài, khi máy thức dậy, theo lịch, hoặc khi đổi Focus của macOS. Hoặc tự kích hoạt bằng phím tắt, Spotlight hay Apple Shortcuts.'
        )}
        where={<><Chip>{L('Login', 'Đăng nhập')}</Chip><Chip>{L('Display', 'Màn hình')}</Chip><Chip>{L('Wake', 'Thức dậy')}</Chip><Chip>{L('Schedule', 'Lịch')}</Chip><Chip>Focus Mode</Chip><Chip>{L('Hotkey', 'Phím tắt')}</Chip><Chip>Spotlight</Chip><Chip>Shortcuts</Chip></>}
        vis="triggers"
      />
      <FeatRow
        lang={lang}
        theme={theme}
        id="multi-display"
        eyebrow={L('06 · Multi-display', '06 · Đa màn hình')}
        h={L("Knows what screens you're plugged into.", 'Biết bạn đang cắm những màn hình nào.')}
        p={L(
          'Save a preset at the desk with the 5K and the laptop. Unplug, head to the café. Snapovo restores onto the screens that exist now — no windows orphaned off-screen, no painful manual recovery.',
          'Lưu một preset ở bàn làm việc với màn 5K và laptop. Rút cáp, ra quán cà phê. Snapovo khôi phục lên đúng những màn hình hiện có — không cửa sổ nào lạc ra ngoài, không phải sắp lại thủ công.'
        )}
        where={<><Kbd>⌃⌥⌘/</Kbd> {L('switch the workspace to the other display', 'chuyển workspace sang màn hình kia')}</>}
        vis="multi"
      />
      <FeatRow
        lang={lang}
        theme={theme}
        id="theme"
        eyebrow="07 · Themes · Pro"
        h={L('Named themes, including seasonal ones.', 'Theme có tên, gồm cả theo mùa.')}
        p={L(
          'Light, Dark, and System, plus named themes — Minimal, Sunset, Ocean, Mocha, Coder, Poker — and seasonal sets like Lunar New Year, Valentine, Vietnam National Day, Halloween and Christmas Snow. Themes are a Pro feature.',
          'Sáng, Tối và Theo hệ thống, cùng các theme có tên — Minimal, Sunset, Ocean, Mocha, Coder, Poker — và các bộ theo mùa như Tết, Valentine, Quốc khánh Việt Nam, Halloween và Christmas Snow. Themes là tính năng Pro.'
        )}
        vis="theme"
      />
      <FeatRow
        lang={lang}
        theme={theme}
        id="feedback"
        eyebrow={L('08 · Send Feedback', '08 · Gửi phản hồi')}
        h={L('Bugs reported on your terms.', 'Báo lỗi theo cách của bạn.')}
        p={L(
          "Help → Send Feedback opens a panel where you type what's wrong and choose what to attach. Nothing is collected automatically. It's the only feedback channel, and you trigger it.",
          'Help → Send Feedback mở một bảng để bạn gõ điều cần báo và chọn những gì đính kèm. Không có gì được thu thập tự động. Đây là kênh phản hồi duy nhất, và do bạn chủ động.'
        )}
        where={<><Kbd>Help</Kbd> {L('menu', 'menu')} → <Kbd>Send Feedback…</Kbd></>}
        vis="feedback"
      />

      {/* More real capabilities — called out so the page mirrors the app */}
      <div className="feat-extras">
        <div className="feat-extra">
          <Eyebrow>{L('Arrange open windows', 'Sắp xếp cửa sổ')}</Eyebrow>
          <h3>{L("Tile what's already open, no preset needed.", 'Xếp gọn cửa sổ đang mở, không cần preset.')}</h3>
          <p>{L(
            'Apply a tiling template to your current windows — two-column, three-column, or a wide focus pane with a stack — 20+ templates that scale to your window count.',
            'Áp một mẫu lưới cho các cửa sổ hiện tại — hai cột, ba cột, hoặc khung chính rộng kèm cột xếp chồng — hơn 20 mẫu tự co giãn theo số cửa sổ.'
          )}</p>
          <div className="feat-where"><span className="feat-where-label">{L('Where:', 'Ở đâu:')}</span> <Kbd>⌃⌥⌘A</Kbd></div>
        </div>
        <div className="feat-extra">
          <Eyebrow>Clear Desk</Eyebrow>
          <h3>{L('Close or hide everything — and undo it.', 'Đóng hoặc ẩn tất cả — và hoàn tác được.')}</h3>
          <p>{L(
            'One command to close or hide every app, with a keep-list for the ones you always want running. Fully undoable.',
            'Một lệnh để đóng hoặc ẩn mọi ứng dụng, kèm danh sách giữ lại cho app bạn luôn muốn chạy. Hoàn tác được.'
          )}</p>
          <div className="feat-where"><span className="feat-where-label">{L('Where:', 'Ở đâu:')}</span> <Kbd>⌃⌥⌘X</Kbd> {L('close', 'đóng')} · <Kbd>⌃⌥H</Kbd> {L('hide', 'ẩn')} · <Kbd>⌃⌥⌘Z</Kbd> {L('undo', 'hoàn tác')}</div>
        </div>
        <div className="feat-extra">
          <Eyebrow>{L('Break & eye reminders', 'Nhắc nghỉ & nghỉ mắt')}</Eyebrow>
          <h3>{L('Gentle nudges to step away.', 'Nhắc nhẹ nhàng để rời màn hình.')}</h3>
          <p>{L(
            'Eye-break reminders with a soft overlay, plus longer breaks on your schedule. A strict mode makes them harder to skip.',
            'Nhắc nghỉ mắt với lớp phủ nhẹ, cùng các quãng nghỉ dài theo lịch. Chế độ nghiêm khắc khiến khó bỏ qua hơn.'
          )}</p>
          <div className="feat-where"><span className="feat-where-label">{L('Where:', 'Ở đâu:')}</span> <Kbd>⌃⌥⌘E</Kbd> {L('eye-break', 'nghỉ mắt')} · Settings → Breaks</div>
        </div>
        <div className="feat-extra">
          <Eyebrow>{L('Proactive suggestions', 'Gợi ý chủ động')}</Eyebrow>
          <h3>{L('Notices the apps you opened.', 'Nhận ra các app bạn vừa mở.')}</h3>
          <p>{L(
            "When your open apps match a saved preset, Snapovo quietly suggests restoring it.",
            'Khi các app đang mở trùng với một preset đã lưu, Snapovo lặng lẽ gợi ý khôi phục nó.'
          )}</p>
          <div className="feat-where"><span className="feat-where-label">{L('Where:', 'Ở đâu:')}</span> {L('Menu-bar suggestion when a match is detected', 'Gợi ý trên thanh menu khi phát hiện trùng khớp')}</div>
        </div>
        <div className="feat-extra">
          <Eyebrow>Launchers</Eyebrow>
          <h3>{L('Drive Snapovo from Raycast, Alfred, Shortcuts.', 'Điều khiển Snapovo từ Raycast, Alfred, Shortcuts.')}</h3>
          <p>{L(
            'Run presets and chains, capture layouts, undo, and move workspaces between displays from Apple Shortcuts — so Raycast and Alfred can trigger them too.',
            'Chạy preset và chain, lưu bố cục, hoàn tác và chuyển workspace giữa các màn hình từ Apple Shortcuts — nên Raycast và Alfred cũng kích hoạt được.'
          )}</p>
          <div className="feat-where"><span className="feat-where-label">{L('Where:', 'Ở đâu:')}</span> {L('Apple Shortcuts → Snapovo actions', 'Apple Shortcuts → hành động Snapovo')}</div>
        </div>
        <div className="feat-extra">
          <Eyebrow>{L('Signed & notarized', 'Ký số & công chứng')}</Eyebrow>
          <h3>{L('Verified safe by Apple.', 'Được Apple xác nhận an toàn.')}</h3>
          <p>{L(
            'Signed and notarized by Apple, so macOS opens it without warnings. Updates are free for the lifetime of your license.',
            'Được Apple ký và công chứng, nên macOS mở app không cảnh báo. Cập nhật miễn phí trọn đời giấy phép.'
          )}</p>
        </div>
      </div>
    </div>
  </main>
  );
};

window.Features = Features;
