// Home page
const Home = ({ lang, setRoute }) => {
  // pick(en, zh, ja) — returns the right string/jsx for current lang
  const T = (en, zh, ja) => lang === 'zh' ? zh : lang === 'ja' ? ja : en;

  const heroH1 = T(
    <>Read and write in <em>any language</em>,<br/>without breaking flow.</>,
    <>讀寫任何語言,<br/><em>不打斷</em>你的思緒。</>,
    <>あらゆる言語を、<br/><em>流れを止めずに</em>読み書き。</>
  );

  const heroSub = T(
    <>Press <span className="kbd">⌘</span><span className="kbd">⇧</span><span className="kbd">T</span> to rewrite what you're typing in another language. Hold <span className="kbd">⌃</span><span className="kbd">⌥</span> and hover any paragraph to read it natively.</>,
    <>按 <span className="kbd">⌘</span><span className="kbd">⇧</span><span className="kbd">T</span>,把你正在打的字改寫成另一種語言。按住 <span className="kbd">⌃</span><span className="kbd">⌥</span> hover 任意段落,立刻看到自然的譯文。</>,
    <><span className="kbd">⌘</span><span className="kbd">⇧</span><span className="kbd">T</span> で、入力中の文章を別の言語に書き換え。<span className="kbd">⌃</span><span className="kbd">⌥</span> を押しながら任意の段落にホバーすれば、自然な訳文がその場に表示。</>
  );

  const faqs = T(
    [
      { q: 'Do I need an OpenAI, Anthropic, or Gemini API key?', a: 'No. Your subscription covers all translation costs. Install Parleur, sign in with Apple, and start translating.' },
      { q: 'Which languages are supported?', a: '16 languages including Traditional Chinese, Japanese, Korean, English, Spanish, French, German, Italian, Vietnamese, Thai, and more.' },
      { q: 'Does Parleur work offline?', a: 'No — translations are LLM-powered and require internet. Re-hovering the same paragraph is instant from local cache.' },
      { q: 'Can I cancel anytime?', a: 'Yes. Cancel from your account; you keep access until the end of the billing period.' },
      { q: 'What macOS versions are supported?', a: 'macOS 14 (Sonoma) and later, on both Apple Silicon and Intel.' },
    ],
    [
      { q: '我需要自己的 OpenAI、Anthropic 或 Gemini API key 嗎?', a: '不需要。訂閱費已包含所有翻譯成本。安裝 Parleur、用 Apple 登入,即可開始使用。' },
      { q: '支援哪些語言?', a: '16 種,包含繁體中文、日文、韓文、英文、西班牙文、法文、德文、義大利文、越南文、泰文等。' },
      { q: 'Parleur 可以離線使用嗎?', a: '不行。翻譯由 LLM 提供,需要網路。但重複 hover 同一段落會立即從本機快取讀取。' },
      { q: '可以隨時取消嗎?', a: '可以。從你的帳戶取消即可,在計費週期結束前仍可使用。' },
      { q: '支援哪些 macOS 版本?', a: '需要 macOS 14 (Sonoma) 以上,Apple Silicon 與 Intel 皆支援。' },
    ],
    [
      { q: 'OpenAI、Anthropic、Gemini の API キーは必要ですか?', a: 'いいえ。翻訳費用はすべてサブスクリプションに含まれています。Parleur をインストールし、Apple でサインインすればすぐに使えます。' },
      { q: '対応している言語は?', a: '繁体字中国語、日本語、韓国語、英語、スペイン語、フランス語、ドイツ語、イタリア語、ベトナム語、タイ語など 16 言語。' },
      { q: 'オフラインでも使えますか?', a: '使えません。翻訳は LLM ベースのためインターネット接続が必要です。同じ段落への再ホバーはローカルキャッシュから瞬時に表示されます。' },
      { q: 'いつでも解約できますか?', a: 'はい。アカウントから解約でき、請求期間の終了まで利用可能です。' },
      { q: '対応している macOS は?', a: 'macOS 14(Sonoma)以降。Apple Silicon と Intel の両方に対応します。' },
    ]
  );

  const go = r => e => { e.preventDefault(); setRoute(r); window.scrollTo({ top: 0 }); };

  return (
    <div>
      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-meta">
                <span className="dot"/>
                <span>{T('New · v1.0 for macOS', '新登場 · v1.0 for macOS', '新登場 · v1.0 for macOS')}</span>
              </div>
              <h1 className="h-display">{heroH1}</h1>
              <p className="hero-subtitle">{heroSub}</p>
              <div className="hero-ctas">
                <a href={DOWNLOAD_URL} className="btn btn-primary btn-lg"><Icon.Apple size={14}/>{T('Download for Mac', '下載 Mac 版', 'Mac 版をダウンロード')}</a>
                <a href="#/pricing" onClick={go('/pricing')} className="btn btn-text">{T('See pricing', '查看價格', '料金を見る')} <Icon.ArrowRight size={14}/></a>
              </div>
              <div className="hero-foot">{T('macOS 14+ · Free for 7 days · Early bird limited to first 50', 'macOS 14+ · 免費試用 7 天 · 早鳥限定前 50 名', 'macOS 14+ · 7 日間無料 · 先着 50 名様アーリーバード')}</div>
            </div>
            <div className="hero-visual">
              <HeroDemo lang={lang}/>
            </div>
          </div>
        </div>
      </section>

      {/* TWO MODES — Writing mode first, then Reading mode */}
      <section>
        <div className="container">
          <div className="mode-row">
            <div className="mode-visual"><WritingDemo lang={lang}/></div>
            <div className="mode-text">
              <div className="eyebrow">{T('Writing mode', '寫作模式', '書きモード')}</div>
              <h2 className="h1">{T('Write in your native language. Send it in theirs.', '用母語寫,輸出對方的語言。', '母語のまま書いて、相手の言語で届ける。')}</h2>
              <p className="lede">{T(
                "Type in whatever language is fastest for you, then press the hotkey. Parleur rewrites it in the target language and pastes it back, preserving formatting and tone.",
                '用你最順手的語言打字,按下快捷鍵。Parleur 會改寫成目標語言並貼回原處,保留格式與語氣。',
                '一番打ちやすい言語で入力し、ホットキーを押すだけ。Parleur が書式と語調を保ったまま、相手の言語に書き換えて元の場所に貼り戻します。'
              )}</p>
              <ul className="mode-bullets">
                <li>{T(
                  <><b>Conversation setting</b>: tell Parleur "I'm writing to my client" — register, pronouns, and honorifics adapt</>,
                  <><b>對話情境</b>: 告訴 Parleur「我在寫信給客戶」——語氣、代名詞、敬語都會自動調整</>,
                  <><b>会話の設定</b>:「クライアント宛て」と伝えれば、語調・人称・敬語が自動で調整されます</>
                )}</li>
                <li>{T(
                  <><b>Paragraph-aware</b>: long passages translate paragraph-by-paragraph, with a sliding window keeping context and terminology consistent</>,
                  <><b>按段落處理</b>: 長文逐段翻譯,靠滑動視窗保持上下文與術語一致</>,
                  <><b>段落単位で翻訳</b>:長文も段落ごとに、スライディングウィンドウで文脈と用語を保ったまま翻訳</>
                )}</li>
                <li>{T(
                  <>Works in any text field — Mail, Notes, Slack, Word, browsers</>,
                  <>支援任何文字欄位——Mail、備忘錄、Slack、Word、瀏覽器</>,
                  <>あらゆるテキストフィールドで動作——メール、メモ、Slack、Word、ブラウザ</>
                )}</li>
              </ul>
            </div>
          </div>

          <div className="mode-row flip">
            <div className="mode-text">
              <div className="eyebrow">{T('Reading mode', '閱讀模式', '読みモード')}</div>
              <h2 className="h1">{T('Read in flow, not in another tab.', '就地閱讀,不用切到另一個分頁。', '別タブに飛ばずに、その場で読む。')}</h2>
              <p className="lede">{T(
                "Stop copy-pasting paragraphs into ChatGPT or Gemini and losing your place. Hold the hotkey over any text and a translation appears — reading as if it were originally written in your language.",
                '不用再把段落複製貼上到 ChatGPT 或 Gemini,然後找不回原本看到哪裡。按住快捷鍵 hover 任何文字,譯文就跳出來——讀起來像本來就是用你的語言寫的。',
                '段落を ChatGPT や Gemini にコピペして読みかけの場所を見失う、そんな手間とは無縁です。ホットキーを押しながら文字にホバーすれば、訳文がその場に表示——まるで最初から自分の言語で書かれたかのように読めます。'
              )}</p>
              <ul className="mode-bullets">
                <li>{T(
                  <>Works on <b>any app</b> — Chrome, Notes, Slack, Mail, PDFs, even images via OCR</>,
                  <>適用於<b>任何應用</b>——Chrome、備忘錄、Slack、Mail、PDF,甚至圖片(透過 OCR)</>,
                  <><b>あらゆるアプリで動作</b>——Chrome、メモ、Slack、メール、PDF、画像(OCR 経由)まで</>
                )}</li>
                <li>{T(
                  <><b>Pause, press the hotkey</b> — read any paragraph in your language, instantly</>,
                  <>停下游標、按下快捷鍵——<b>立刻看懂每一段文字</b></>,
                  <>カーソルを止めてホットキーを押すだけ——<b>どの段落も自分の言語で即座に読める</b></>
                )}</li>
                <li>{T(
                  <><b>Translations stay open</b> next to the source so you can compare line by line</>,
                  <><b>譯文浮窗停在原文旁</b>,可以一句一句對照閱讀</>,
                  <><b>訳文ポップオーバーは原文の隣にとどまる</b>ので、行ごとに対照しながら読めます</>
                )}</li>
              </ul>
            </div>
            <div className="mode-visual"><ReadingDemo/></div>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section>
        <div className="container">
          <div className="eyebrow">{T('How it works', '使用方式', '使い方')}</div>
          <h2 className="h1" style={{ marginTop: 12, maxWidth: '20ch' }}>{T('Three steps. No setup beyond signing in.', '三步搞定。除了登入之外,不必設定。', '3 ステップ。サインイン以外、設定は不要。')}</h2>

          <div className="steps">
            <div className="step">
              <div className="step-num">01</div>
              <div className="step-icon"><Icon.Download size={18}/></div>
              <h3>{T('Install Parleur', '安裝 Parleur', 'Parleur をインストール')}</h3>
              <p>{T('Download the .dmg, drag to Applications, and sign in with Apple. No accounts, no passwords.', '下載 .dmg,拖到 Applications,用 Apple 登入。沒有帳號密碼要記。', '.dmg をダウンロードし、Applications にドラッグ、Apple でサインイン。アカウントもパスワードも不要です。')}</p>
            </div>
            <div className="step">
              <div className="step-num">02</div>
              <div className="step-icon"><Icon.Globe size={18}/></div>
              <h3>{T('Pick your language pair', '選擇語言對', '言語ペアを選ぶ')}</h3>
              <p>{T('Choose a default pair like 繁中 ↔ English. Switch on the fly with the menu bar.', '選一組預設語言組合,例如 繁中 ↔ English。隨時可從選單列切換。', '日本語 ↔ English のようにデフォルトのペアを選択。メニューバーからいつでも切り替えできます。')}</p>
            </div>
            <div className="step">
              <div className="step-num">03</div>
              <div className="step-icon"><Icon.Keyboard size={18}/></div>
              <h3>{T('Hover or hotkey', 'Hover 或熱鍵', 'ホバー or ホットキー')}</h3>
              <p>{T(
                <>Press <span className="kbd">⌘⇧T</span> to rewrite. Hold <span className="kbd">⌃⌥</span> to read. That's the whole product.</>,
                <>按 <span className="kbd">⌘⇧T</span> 改寫。按住 <span className="kbd">⌃⌥</span> 閱讀。整個產品就這樣。</>,
                <><span className="kbd">⌘⇧T</span> で書き換え。<span className="kbd">⌃⌥</span> を押しながら読む。それだけです。</>
              )}</p>
            </div>
          </div>
        </div>
      </section>

      {/* CONVERSATION SETTING */}
      <section>
        <div className="container">
          <div className="convo-grid">
            <div>
              <div className="eyebrow">{T('Conversation setting', '對話情境', '会話の設定')}</div>
              <h2 className="h1" style={{ marginTop: 12, maxWidth: '16ch' }}>{T('Translation that knows who you\u2019re talking to.', '會看人說話的翻譯。', '相手に合わせて変わる翻訳。')}</h2>
              <p className="lede" style={{ marginTop: 22 }}>
                {T(
                  <>Switch between presets like <b style={{ color: 'var(--fg)' }}>Client</b>, <b style={{ color: 'var(--fg)' }}>Friend</b>, <b style={{ color: 'var(--fg)' }}>Coworker</b>, or write your own — <em style={{ fontStyle: 'italic' }}>"polite Japanese, recipient is older"</em>, <em style={{ fontStyle: 'italic' }}>"casual Korean, close friend"</em>. Parleur reshapes register, pronouns, and honorifics every time.</>,
                  <>在 <b style={{ color: 'var(--fg)' }}>客戶</b>、<b style={{ color: 'var(--fg)' }}>朋友</b>、<b style={{ color: 'var(--fg)' }}>同事</b> 等預設之間切換,或自己寫——<em style={{ fontStyle: 'italic' }}>「禮貌日文,對方年紀比我大」</em>、<em style={{ fontStyle: 'italic' }}>「韓文,寫給好朋友」</em>。Parleur 每次都會調整語氣、代名詞、敬語。</>,
                  <><b style={{ color: 'var(--fg)' }}>クライアント</b>、<b style={{ color: 'var(--fg)' }}>友人</b>、<b style={{ color: 'var(--fg)' }}>同僚</b> といったプリセットを切り替えるか、自分で書く——<em style={{ fontStyle: 'italic' }}>「丁寧な日本語、相手は年上」</em>、<em style={{ fontStyle: 'italic' }}>「カジュアルな韓国語、親しい友人」</em>。Parleur は語調・人称・敬語を毎回調整します。</>
                )}
              </p>
            </div>
            <ConversationDemo lang={lang}/>
          </div>
        </div>
      </section>

      {/* PRIVACY */}
      <section>
        <div className="container">
          <div className="privacy-row">
            <div>
              <div className="eyebrow">{T('Privacy', '隱私', 'プライバシー')}</div>
              <h2 className="h1" style={{ marginTop: 12, maxWidth: '16ch' }}>{T('Privacy is a default, not a feature.', '隱私是內建的,不是附加功能。', 'プライバシーは機能ではなく、当たり前のことです。')}</h2>
              <p className="lede" style={{ marginTop: 22 }}>
                {T(
                  "Parleur routes translations through our backend to the LLM provider \u2014 nothing more. We don't train on your text, sell anything to anyone, or share data with advertisers.",
                  'Parleur 透過我們的後端把請求送到 LLM 服務商,僅此而已。我們不拿你的文字訓練模型、不賣給任何人、也不會把資料給廣告商。',
                  'Parleur は翻訳リクエストを当社のバックエンド経由で LLM プロバイダに送るだけです。お客様のテキストでモデルを学習させたり、第三者に販売したり、広告主と共有したりすることはありません。'
                )}
              </p>
              <a href="#/privacy" onClick={go('/privacy')} className="btn btn-text" style={{ paddingLeft: 0, marginTop: 16 }}>
                {T('Read full privacy policy', '閱讀完整隱私政策', 'プライバシーポリシー全文を読む')} <Icon.ArrowRight size={14}/>
              </a>
            </div>
            <ul className="privacy-list">
              <li>
                <span className="pl-icon"><Icon.Check size={14}/></span>
                <span>{T(<><b>Translation requests</b> pass through our backend on the way to the LLM provider.</>, <><b>翻譯請求</b>會經過我們的後端,再轉送給 LLM 服務商。</>, <><b>翻訳リクエスト</b>は当社バックエンドを経由して LLM プロバイダに送信されます。</>)}</span>
              </li>
              <li>
                <span className="pl-icon"><Icon.Check size={14}/></span>
                <span>{T(<>Local cache lives <b>only on your Mac</b>.</>, <>本機快取<b>只存在你的 Mac 上</b>。</>, <>ローカルキャッシュは<b>お使いの Mac 内にだけ</b>保存されます。</>)}</span>
              </li>
              <li className="pl-no">
                <span className="pl-icon"><Icon.X size={14}/></span>
                <span>{T(<>We keep <b>only what we need</b> to bill and run the service — see the privacy policy.</>, <>我們<b>只保留</b>計費與服務運作所需的最低限度的資料——詳見隱私政策。</>, <>当社は<b>請求とサービス運用に必要な最小限</b>のデータのみを保持します——詳細はプライバシーポリシーをご覧ください。</>)}</span>
              </li>
              <li className="pl-no">
                <span className="pl-icon"><Icon.X size={14}/></span>
                <span>{T(<>We <b>don't train</b> models on your text.</>, <>我們<b>不會</b>拿你的文字去訓練模型。</>, <>お客様のテキストでモデルを<b>学習させません</b>。</>)}</span>
              </li>
              <li className="pl-no">
                <span className="pl-icon"><Icon.X size={14}/></span>
                <span>{T(<>We <b>don't sell</b> anything to anyone.</>, <>我們<b>不販售</b>任何資料。</>, <>いかなるデータも<b>販売しません</b>。</>)}</span>
              </li>
            </ul>
          </div>
        </div>
      </section>

      {/* PRICING TEASER */}
      <section>
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="eyebrow">{T('Pricing', '價格', '料金')}</div>
          <h2 className="h1" style={{ marginTop: 12 }}>{T('Seven-day trial. Cancel anytime.', '七天試用,隨時取消。', '7 日間の無料トライアル。いつでも解約可能。')}</h2>

          <div className="pricing-card">
            <span className="ribbon">{T('Early bird · first 50 only', '早鳥 · 限定 50 名', 'アーリーバード · 先着 50 名')}</span>
            <h3>Parleur Pro</h3>
            <div className="price">
              <span style={{ textDecoration: 'line-through', color: 'var(--fg-dim)', fontSize: 24, marginRight: 8, fontFamily: 'var(--font-headline)' }}>$12.99</span>
              <span className="num">$10.99</span>
              <span className="per">/ MONTH · USD</span>
            </div>
            <p className="trial-line">{T('Locked-in for life · 7-day free trial · Cancel anytime', '價格永遠鎖定 · 免費試用 7 天 · 隨時取消', '価格を生涯ロック · 7 日間無料 · いつでも解約可')}</p>
            <ul className="feat">
              <li><Icon.Check/><span>{T('Writing mode (⌘⇧T rewrite)', '寫作模式 (⌘⇧T 改寫)', '書きモード(⌘⇧T で書き換え)')}</span></li>
              <li><Icon.Check/><span>{T('Reading mode (unlimited hover translations)', '閱讀模式 (無限制 hover 翻譯)', '読みモード(ホバー翻訳は無制限)')}</span></li>
              <li><Icon.Check/><span>{T('All 16 languages', '16 種語言', '16 言語に対応')}</span></li>
              <li><Icon.Check/><span>{T('Conversation settings (presets + custom)', '對話情境 (預設 + 自訂)', '会話の設定(プリセット + カスタム)')}</span></li>
              <li><Icon.Check/><span>{T('Local history & cache', '本機歷史與快取', 'ローカル履歴とキャッシュ')}</span></li>
            </ul>
            <a href={DOWNLOAD_URL} className="btn btn-primary btn-lg"><Icon.Apple size={14}/>{T('Download for Mac', '下載 Mac 版', 'Mac 版をダウンロード')}</a>
          </div>

          <div className="pricing-foot">
            <a href="#/pricing" onClick={go('/pricing')}>{T('See annual, BYOK, and full feature comparison', '查看年付、BYOK 與完整功能比較', '年額・BYOK・機能比較を見る')} →</a>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section>
        <div className="container">
          <div className="eyebrow">{T('FAQ', '常見問題', 'よくある質問')}</div>
          <h2 className="h1" style={{ marginTop: 12, maxWidth: '16ch' }}>{T('Things people ask before downloading.', '下載前常見的問題。', 'ダウンロード前によく聞かれること。')}</h2>
          <FAQ items={faqs}/>
        </div>
      </section>
    </div>
  );
};

window.Home = Home;