// Conversation setting interactive demo
const ConversationDemo = ({ lang }) => {
  const T = (en, zh, ja) => lang === 'zh' ? zh : lang === 'ja' ? ja : en;
  const [preset, setPreset] = React.useState('client');

  const presets = [
    { id: 'client',   label: T('Client',   '客戶',     'クライアント') },
    { id: 'friend',   label: T('Friend',   '朋友',     '友人') },
    { id: 'coworker', label: T('Coworker', '同事',     '同僚') },
    { id: 'custom',   label: T('Custom…',  '自訂…',    'カスタム…') },
  ];

  // Source is the user's input language (zh or en), target is always Japanese
  // for the keigo demo. JP UI viewers see the same EN→JA demo (it shows them
  // *how Parleur shapes Japanese for them*).
  const source = lang === 'zh'
    ? "明天的會議我可能會晚十分鐘到,先進去開始沒關係。"
    : "I might be ten minutes late to tomorrow's meeting — feel free to start without me.";

  const targets = {
    client:   "明日のお打ち合わせですが、10分ほど遅れて到着する可能性がございます。差し支えなければ、先にお進めいただけますと幸いです。",
    friend:   "明日のミーティング、10分くらい遅れるかも。先に始めちゃってOKだよ〜",
    coworker: "明日のミーティング、10分ほど遅れそうです。先に始めていただいて大丈夫です。",
    custom:   "明日のミーティングなんですが、10分ほど遅れて入る感じになりそうです。先に始めて頂いて構いません。",
  };

  const tags = {
    client:   T('JA · keigo · client',           'JA · 敬語 · 客戶',          'JA · 敬語 · クライアント'),
    friend:   T('JA · casual · close friend',    'JA · 輕鬆 · 好朋友',        'JA · カジュアル · 親しい友人'),
    coworker: T('JA · neutral · coworker',       'JA · 中性 · 同事',          'JA · 中立 · 同僚'),
    custom:   T('JA · "polite, slight age gap"', 'JA ·「有禮貌、年齡差距小」', 'JA ·「丁寧、年齢差わずか」'),
  };

  return (
    <div className="preset-card">
      <div className="preset-list">
        {presets.map(p => (
          <button
            key={p.id}
            className={"preset-chip" + (preset === p.id ? " on" : "")}
            onClick={() => setPreset(p.id)}
          >{p.label}</button>
        ))}
      </div>

      <div className="translation-pair">
        <div className="translation-source">
          <span className="label">{T('Source', '原文', '原文')} · {lang === 'zh' ? '繁中' : 'English'}</span>
          {source}
        </div>
        <div className="translation-target">
          <div className="label">
            <span>{T('Target · Japanese', '譯文 · 日文', '訳文 · 日本語')}</span>
            <span className="preset-tag">{tags[preset]}</span>
          </div>
          <div key={preset} style={{ animation: 'fadeup .35s ease' }}>
            {targets[preset]}
          </div>
        </div>
      </div>

      <style>{`
        @keyframes fadeup {
          from { opacity: 0; transform: translateY(4px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
};

window.ConversationDemo = ConversationDemo;