// primitives.jsx — shared UI atoms used across pages

const Kbd = ({ children }) => <span className="kbd">{children}</span>;

const Chip = ({ children }) => <span className="chip">{children}</span>;

const Eyebrow = ({ children, dot = true }) => (
  <span className="eyebrow">
    {dot && <span className="eyebrow-dot" />}
    {children}
  </span>
);

const Arrow = () => <span className="btn-arrow" aria-hidden>→</span>;

// SVG icons — minimal stroke set
const Icon = {
  Capture: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="3" />
      <rect x="7" y="7" width="10" height="6" rx="1" />
      <line x1="7" y1="16" x2="13" y2="16" />
      <line x1="7" y1="19" x2="11" y2="19" />
    </svg>
  ),
  Restore: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12a9 9 0 1 1-3.6-7.2" />
      <polyline points="21 4 21 9 16 9" />
    </svg>
  ),
  Repeat: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="17 1 21 5 17 9" />
      <path d="M3 11V9a4 4 0 0 1 4-4h14" />
      <polyline points="7 23 3 19 7 15" />
      <path d="M21 13v2a4 4 0 0 1-4 4H3" />
    </svg>
  ),
  Lock: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="11" width="16" height="10" rx="2" />
      <path d="M8 11V7a4 4 0 0 1 8 0v4" />
    </svg>
  ),
  Sun: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round">
      <circle cx="12" cy="12" r="4" />
      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
    </svg>
  ),
  Moon: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
    </svg>
  ),
  Mail: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="M3.5 7l8.5 6 8.5-6" />
    </svg>
  ),
  Download: ({ size = 18 }) => (
    <svg className="icon-dl" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v12" />
      <polyline points="7 10 12 15 17 10" />
      <path d="M5 21h14" />
    </svg>
  ),
};

// App icon — used in header, footer, hero
const AppIcon = ({ size = 28, radius }) => {
  const r = radius ?? size * 0.26;
  return (
    <img
      src="snapovo-icon.png"
      alt="Snapovo"
      style={{
        width: size,
        height: size,
        borderRadius: r,
        display: 'block',
        flexShrink: 0,
      }}
    />
  );
};

// A tiny window mockup primitive — used in feature visuals
const Win = ({ style, lines = 4, dim = false, accent = false }) => (
  <div className="win" style={{ ...style, opacity: dim ? 0.55 : 1 }}>
    <div className="win-tb">
      <i style={accent ? { background: 'var(--accent)', opacity: 1 } : null} />
      <i />
      <i />
    </div>
    <div className="win-body">
      {Array.from({ length: lines }).map((_, i) => (
        <div
          key={i}
          className={`win-line ${i === 0 ? 'short' : i === lines - 1 ? 'tiny' : ''}`}
        />
      ))}
    </div>
  </div>
);

// MenuBar hairline progress widget
const MenuBarHairline = ({ percent = 64, label = 'Today' }) => (
  <div style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    padding: '5px 10px 6px',
    borderRadius: 6,
    background: 'var(--surface-2)',
    border: '1px solid var(--border)',
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    color: 'var(--text-muted)',
    position: 'relative',
  }}>
    <AppIcon size={14} />
    <span>{label}</span>
    <span style={{ color: 'var(--text-dim)' }}>2:14</span>
    <span style={{
      position: 'absolute', left: 6, right: 6, bottom: 0,
      height: 1, background: 'var(--hairline)',
    }}>
      <span style={{
        position: 'absolute', left: 0, top: 0, bottom: 0,
        width: `${percent}%`,
        background: 'var(--accent)',
        boxShadow: '0 0 6px var(--accent-glow)',
      }} />
    </span>
  </div>
);

// Strings: minimal EN/VN dictionary — extended copy lives inline in pages
const STR = {
  en: {
    nav_features: 'Features',
    nav_download: 'Download',
    nav_docs: 'Docs',
    nav_changelog: 'Changelog',
    nav_pricing: 'Pricing',
    nav_privacy: 'Privacy',
    nav_beta: 'Pricing',
    cta_download_beta: 'Download free trial',
    cta_see_how: 'See how it works',
    hero_h1_a: 'Capture your perfect',
    hero_h1_b: 'workspace.',
    hero_h1_c: 'Restore it in one click.',
    hero_sub: 'A quiet menu-bar app for macOS. Save your apps, windows and tabs as a preset — bring them back with one click.',
    free_beta: 'Free 7-day trial · no card needed',
    no_telemetry: 'No telemetry · No accounts',
    macos_min: 'macOS 13.5 · Apple Silicon + Intel',
    section_three_pillars_eyebrow: 'How it works',
    section_three_pillars_h: 'Three verbs. One quiet app.',
    pillar_capture_h: 'Capture',
    pillar_capture_p: 'Snapshot every running app, window position, display, browser tab, and Finder path. Name it. Done in a second.',
    pillar_restore_h: 'Restore',
    pillar_restore_p: 'One click — or a hotkey, Spotlight, Apple Shortcuts, or an auto-trigger — puts every window back exactly where it was.',
    pillar_repeat_h: 'Repeat',
    pillar_repeat_p: 'Chain presets into timed, Pomodoro-style sessions (Pro). Morning focus → break → afternoon review. Pause, skip, end at any time.',
    privacy_h: 'No telemetry. No accounts. Your workspace stays on your Mac.',
    privacy_p: 'Everything stays local — presets and settings on your Mac, your license in the Keychain. The only network calls are update checks, license activation, and feedback you send.',
  },
  vi: {
    nav_features: 'Tính năng',
    nav_download: 'Tải về',
    nav_docs: 'Tài liệu',
    nav_changelog: 'Cập nhật',
    nav_pricing: 'Giá',
    nav_privacy: 'Riêng tư',
    nav_beta: 'Giá',
    cta_download_beta: 'Tải bản dùng thử',
    cta_see_how: 'Xem cách hoạt động',
    hero_h1_a: 'Lưu không gian làm việc',
    hero_h1_b: 'lý tưởng.',
    hero_h1_c: 'Khôi phục bằng một cú click.',
    hero_sub: 'Một ứng dụng macOS trên thanh menu. Lưu ứng dụng, cửa sổ và tab thành một preset — gọi lại bằng một cú click.',
    free_beta: 'Dùng thử 7 ngày · không cần thẻ',
    no_telemetry: 'Không telemetry · Không tài khoản',
    macos_min: 'macOS 13.5 · Apple Silicon + Intel',
    section_three_pillars_eyebrow: 'Cách hoạt động',
    section_three_pillars_h: 'Ba động từ. Một ứng dụng thầm lặng.',
    pillar_capture_h: 'Lưu lại',
    pillar_capture_p: 'Chụp toàn bộ ứ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. Đặt tên. Xong trong một giây.',
    pillar_restore_h: 'Khôi phục',
    pillar_restore_p: 'Một cú click — hoặc phím tắt, Spotlight, Apple Shortcuts hay trigger tự động — đặt mọi cửa sổ trở lại đúng vị trí.',
    pillar_repeat_h: 'Lặp lại',
    pillar_repeat_p: 'Kết nối các preset thành phiên Pomodoro có hẹn giờ (Pro). Sáng tập trung → nghỉ → chiều rà soát. Tạm dừng, bỏ qua, kết thúc bất cứ lúc nào.',
    privacy_h: 'Không telemetry. Không tài khoản. Dữ liệu nằm trên máy của bạn.',
    privacy_p: 'Mọi thứ nằm trên máy bạn — preset và cài đặt trên Mac, giấy phép trong Keychain. Kết nối mạng duy nhất là kiểm tra cập nhật, kích hoạt giấy phép và phản hồi bạn gửi.',
  },
};

const useStr = (lang) => STR[lang] || STR.en;

// Expose to other Babel scopes
Object.assign(window, {
  Kbd, Chip, Eyebrow, Arrow, Icon, AppIcon, Win, MenuBarHairline, STR, useStr,
});