// Pricing page
const Pricing = ({ lang, setRoute }) => {
  const T = (en, zh, ja) => lang === 'zh' ? zh : lang === 'ja' ? ja : en;
  const [billing, setBilling] = React.useState('monthly');
  const isMonth = billing === 'monthly';

  const faqs = T(
    [
      { q: 'How does the early bird pricing work?', a: 'The first 50 customers lock in $10.99/month (or $109/year) for life. As long as you don\u2019t cancel, you\u2019ll never be re-priced. Once all 50 spots are claimed, the price returns to the standard $12.99/month.' },
      { q: 'What is BYOK and who is it for?', a: 'BYOK (Bring Your Own Key) is a one-time lifetime license that lets you use your own OpenAI, Anthropic, or Gemini API key. You pay model providers directly — we handle none of the translation cost. The first 50 BYOK buyers get it for $59. After that it returns to the standard $99 one-time price.' },
      { q: 'Can I switch from Pro to BYOK later?', a: 'Yes. If you started on Pro and BYOK early-bird spots are still available, contact us and we\u2019ll convert your account and credit any unused subscription time toward the BYOK license.' },
      { q: 'What\u2019s your refund policy?', a: 'Full refund within 14 days for new subscribers. Annual plans are pro-rated. BYOK refundable within 14 days. Email support@parleur.app.' },
      { q: 'Will I get a receipt for expense reports?', a: 'Yes — every charge generates a downloadable PDF invoice through our payment provider, Paddle.' },
      { q: 'Do you offer student or education discounts?', a: 'Coming soon. Email support@parleur.app from your .edu address and we\u2019ll keep you posted.' },
      { q: 'How many devices can I use one license on?', a: 'Unlimited devices signed in with the same Apple ID.' },
      { q: 'Is there a free version?', a: 'No free tier — but every new account gets full access for seven days, no card required.' },
    ],
    [
      { q: '早鳥方案如何運作?', a: '前 50 位訂戶可鎖定 $10.99/月(或 $109/年),終身有效。只要不取消,我們不會把價格調回標準價。50 個名額額滿後,價格恢復標準價 $12.99/月。' },
      { q: 'BYOK 是什麼?適合誰?', a: 'BYOK(自帶 API Key)是一次性終身授權,讓你用自己的 OpenAI、Anthropic 或 Gemini API key。模型費用直接付給供應商,我們不收取翻譯費用。前 50 位 BYOK 買家可享 $59,之後恢復標準價 $99。' },
      { q: '可以從 Pro 轉換到 BYOK 嗎?', a: '可以。若 BYOK 早鳥名額仍未額滿,聯絡我們,我們會幫你轉換帳號,未使用的訂閱費用會折抵到 BYOK 授權。' },
      { q: '退款政策?', a: '新訂戶 14 天內可全額退款。年付按月比例退款。BYOK 14 天內可退。聯絡 support@parleur.app。' },
      { q: '會有付款收據嗎?', a: '會。每筆扣款都會由金流商 Paddle 產生 PDF 收據 (receipt),可下載作為扣款證明。注意:Paddle 不開立台灣統一發票。' },
      { q: '有學生或教育折扣嗎?', a: '即將推出。請用你的 .edu 信箱寫信到 support@parleur.app,我們會通知你。' },
      { q: '一個帳號可以用幾台裝置?', a: '同一 Apple ID 內無限制。' },
      { q: '有免費版嗎?', a: '沒有免費版,但所有新帳號都有 7 天完整功能試用,不需信用卡。' },
    ],
    [
      { q: 'アーリーバード価格はどう機能しますか?', a: '先着 50 名様は $10.99/月(または $109/年)を生涯ロック。解約しない限り通常価格に変更されることはありません。50 名様が埋まり次第、通常価格 $12.99/月に戻ります。' },
      { q: 'BYOK とは何ですか?誰向けですか?', a: 'BYOK(独自キー持込)は買い切りの生涯ライセンスで、OpenAI、Anthropic、Gemini の API キーを自分で使用できます。モデル料金はプロバイダに直接支払い、当社は翻訳コストを負担しません。先着 50 名様は $59、以降は通常価格の買い切り $99 に戻ります。' },
      { q: 'Pro から BYOK に切り替えできますか?', a: 'はい。BYOK のアーリーバード枠が残っていれば、ご連絡いただければアカウントを変換し、未使用のサブスクリプション期間を BYOK ライセンスに充当します。' },
      { q: '返金ポリシーは?', a: '新規ご登録から 14 日以内であれば全額返金。年額プランは月割計算。BYOK は 14 日以内返金可。support@parleur.app までご連絡ください。' },
      { q: '経費精算用の領収書はもらえますか?', a: 'はい。決済プロバイダ Paddle を通じて、毎回の請求ごとに PDF 領収書を発行できます。' },
      { q: '学生・教育機関向け割引はありますか?', a: '近日提供予定です。.edu などの所属メールアドレスから support@parleur.app までご連絡いただければ、開始時にお知らせします。' },
      { q: '1 ライセンスで何台まで利用できますか?', a: '同じ Apple ID でサインインしていれば台数制限はありません。' },
      { q: '無料版はありますか?', a: '無料プランはありません。ただし、すべての新規アカウントで 7 日間フル機能をお試しいただけます(カード不要)。' },
    ]
  );

  return (
    <div>
      <section className="pricing-hero">
        <div className="container">
          <div className="eyebrow">{T('Pricing', '價格', '料金')}</div>
          <h1 className="h-display" style={{ marginTop: 18 }}>{T('Simple pricing, no surprises', '簡單清楚的價格', 'シンプルな料金、驚きなし')}</h1>
          <p className="lede" style={{ margin: '18px auto 0' }}>{T('Three plans. Cancel anytime. No upsells, no add-ons.', '三種方案,隨時取消,不會推銷升級、沒有加購功能。', '3 つのプラン。いつでも解約可能。アップセルなし、追加オプションなし。')}</p>

          <div className="billing-toggle" role="group" aria-label="Billing">
            <button className={isMonth ? 'on' : ''} onClick={() => setBilling('monthly')}>{T('Monthly', '月付', '月額')}</button>
            <button className={!isMonth ? 'on' : ''} onClick={() => setBilling('annual')}>
              {T('Annual', '年付', '年額')}<span className="save">SAVE 17%</span>
            </button>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 0, borderTop: 0 }}>
        <div className="container">
          <div className="plans">

            <div className="plan">
              <h3>{T('7-Day Free Trial', '7 天試用', '7 日間無料')}</h3>
              <p className="plan-blurb">{T('Full access. No card.', '完整功能。無需信用卡。', 'フル機能。カード不要。')}</p>
              <div className="plan-price">
                <span className="num">$0</span>
                <span className="per">/ {T('7 days', '7 天', '7 日間')}</span>
              </div>
              <ul className="feat">
                <li><Icon.Check/><span>{T('Every Pro feature', '所有 Pro 功能', 'Pro の全機能')}</span></li>
                <li><Icon.Check/><span>{T('100 translations / day', '每日 100 次', '1 日 100 回')}</span></li>
                <li><Icon.Check/><span>{T('No auto-charge', '不自動扣款', '自動課金なし')}</span></li>
              </ul>
              <div className="plan-foot">
                <a href={DOWNLOAD_URL} className="btn btn-ghost"><Icon.Apple size={14}/>{T('Download for Mac', '下載 Mac 版', 'Mac 版をダウンロード')}</a>
              </div>
            </div>

            <div className="plan featured">
              <span className="plan-badge">{T('Early Bird', '早鳥', 'アーリーバード')}</span>
              <h3>Parleur Pro</h3>
              <p className="plan-blurb">{T('First 50 customers only. Locked-in rate, forever.', '限定前 50 名。價格永遠鎖定。', '先着 50 名様のみ。生涯この価格。')}</p>
              <div className="plan-price">
                <span className="plan-strike">{isMonth ? '$12.99' : '$129'}</span>
                <span className="num">{isMonth ? '$10.99' : '$109'}</span>
                <span className="per">/ {isMonth ? T('mo', '月', '月') : T('yr', '年', '年')}</span>
              </div>
              <p className="plan-limit">{T('Early bird · first 50 only', '早鳥 · 限定 50 名', 'アーリーバード · 先着 50 名')}</p>
              <ul className="feat">
                <li><Icon.Check/><span>{T('Unlimited Writing mode', '無限制寫作模式', '書きモード無制限')}</span></li>
                <li><Icon.Check/><span>{T('Unlimited Reading mode', '無限制閱讀模式', '読みモード無制限')}</span></li>
                <li><Icon.Check/><span>{T('16 languages, Vision OCR', '16 種語言、Vision OCR', '16 言語、Vision OCR')}</span></li>
                <li><Icon.Check/><span>{T('Lock-in price for life', '價格永遠鎖定', '価格を生涯ロック')}</span></li>
                <li><Icon.Check/><span>{T('Early-adopter badge', '早期支持者徽章', 'アーリーアダプターバッジ')}</span></li>
              </ul>
              <p style={{ fontSize: 11.5, color: 'var(--fg-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', margin: '0 0 14px', lineHeight: 1.4 }}>{T('After 50 spots claimed: $12.99/mo standard rate', '名額額滿後恢復標準價 $12.99/月', '50 名様達成後は通常価格 $12.99/月に戻ります')}</p>
              <div className="plan-foot">
                <a href={DOWNLOAD_URL} className="btn btn-primary"><Icon.Apple size={14}/>{T('Download for Mac', '下載 Mac 版', 'Mac 版をダウンロード')}</a>
              </div>
            </div>

            <div className="plan">
              <span className="plan-badge">{T('BYOK', 'BYOK', 'BYOK')}</span>
              <h3>{T('Bring Your Own Key', '自帶 API Key', '独自キー持込')}</h3>
              <p className="plan-blurb">{T('Use your own OpenAI / Anthropic / Gemini key.', '用自己的 OpenAI / Anthropic / Gemini key。', 'OpenAI / Anthropic / Gemini キーを持込。')}</p>
              <div className="plan-price">
                <span className="plan-strike">$99</span>
                <span className="num">$59</span>
                <span className="per">{T('one-time', '一次付清', '買い切り')}</span>
              </div>
              <p className="plan-limit">{T('Early bird · first 50 only', '早鳥 · 限定 50 名', 'アーリーバード · 先着 50 名')}</p>
              <ul className="feat">
                <li><Icon.Check/><span>{T('Lifetime access, no subscription', '終身使用、無訂閱', '生涯利用、サブスク不要')}</span></li>
                <li><Icon.Check/><span>{T('All Pro features', 'Pro 全功能', 'Pro 全機能')}</span></li>
                <li><Icon.Check/><span>{T('Pay model providers directly', '模型費用付給供應商', 'モデル料金は直接支払い')}</span></li>
                <li><Icon.Check/><span>{T('Maximum privacy & control', '最高隱私與控制權', '最高のプライバシーと制御')}</span></li>
              </ul>
              <p style={{ fontSize: 11.5, color: 'var(--fg-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', margin: '0 0 14px', lineHeight: 1.4 }}>{T('After 50 spots claimed: $99 one-time', '名額額滿後恢復 $99 一次付清', '50 名様達成後は買い切り $99 に戻ります')}</p>
              <div className="plan-foot">
                <a href={DOWNLOAD_URL} className="btn btn-ghost"><Icon.Apple size={14}/>{T('Download for Mac', '下載 Mac 版', 'Mac 版をダウンロード')}</a>
              </div>
            </div>

          </div>

          {/* COMPARE */}
          <div className="compare">
            <h2>{T('What\u2019s included', '功能對照', '含まれているもの')}</h2>
            <table>
              <thead>
                <tr>
                  <th>{T('Feature', '功能', '機能')}</th>
                  <th>{T('Trial', '試用', 'トライアル')}</th>
                  <th>Pro</th>
                  <th>BYOK</th>
                </tr>
              </thead>
              <tbody>
                <tr><td className="ft-label">{T('Writing mode (⌘⇧T rewrite)', '寫作模式 (⌘⇧T 改寫)', '書きモード(⌘⇧T で書き換え)')}</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td></tr>
                <tr><td className="ft-label">{T('Reading mode (hover translation)', '閱讀模式 (hover 翻譯)', '読みモード(ホバー翻訳)')}</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td></tr>
                <tr><td className="ft-label">{T('16 languages', '16 種語言', '16 言語')}</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td></tr>
                <tr><td className="ft-label">{T('Conversation settings', '對話情境', '会話の設定')}</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td></tr>
                <tr><td className="ft-label">{T('Vision OCR for images / PDFs', '圖片 / PDF 的 Vision OCR', '画像 / PDF の Vision OCR')}</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td></tr>
                <tr><td className="ft-label">{T('Local translation history & cache', '本機翻譯歷史與快取', 'ローカル翻訳履歴とキャッシュ')}</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td></tr>
                <tr><td className="ft-label">{T('Daily translation limit', '每日翻譯上限', '1 日の翻訳上限')}</td><td>100</td><td><span style={{ whiteSpace: 'nowrap' }}>{T('Soft cap 2,000/day*', '軟性上限 2,000/日*', 'ソフト上限 2,000/日*')}</span></td><td>{T('Unlimited', '無限制', '無制限')}</td></tr>
                <tr><td className="ft-label">{T('Translation costs included', '翻譯費用內含', '翻訳料金込み')}</td><td><span className="check">✓</span></td><td><span className="check">✓</span></td><td><span className="dash">—</span></td></tr>
                <tr><td className="ft-label">{T('Priority customer support', '優先客戶支援', '優先カスタマーサポート')}</td><td><span className="dash">—</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td></tr>
                <tr><td className="ft-label">{T('Future Parleur features', '未來 Parleur 新功能', 'Parleur の今後の新機能')}</td><td><span className="dash">—</span></td><td><span className="check">✓</span></td><td><span className="check">✓</span></td></tr>
              </tbody>
            </table>
            <p style={{ fontSize: 12, color: 'var(--fg-dim)', marginTop: 14, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>
              {T('* Soft cap is a fair-use threshold; above it we\u2019ll route requests to a smaller, faster model — never charge you extra.', '* 軟性上限為公平使用機制,超量時會切換到較輕量的模型,但不會額外收費。', '* ソフト上限はフェアユース基準です。これを超えた分はより軽量で高速なモデルに切り替えます——追加請求はありません。')}
            </p>
          </div>

          <div className="compare" style={{ marginTop: 80 }}>
            <h2>{T('Billing FAQ', '計費常見問題', '請求に関するよくある質問')}</h2>
            <FAQ items={faqs}/>
          </div>
        </div>
      </section>
    </div>
  );
};

window.Pricing = Pricing;
