// Reading mode demo (more elaborate, with multiple paragraphs and re-hover cache hint)
const ReadingDemo = ({ lang = 'en' }) => {
  const T = (en, zh, ja) => lang === 'zh' ? zh : lang === 'ja' ? ja : en;
  const [active, setActive] = React.useState(null); // index of hot target

  React.useEffect(() => {
    const seq = [
      { i: 0, ms: 1500 },
      { i: null, ms: 800 },
      { i: 1, ms: 2000 },
      { i: null, ms: 700 },
      { i: 2, ms: 2000 },
      { i: null, ms: 900 },
    ];
    let cancelled = false;
    let idx = 0;
    const tick = () => {
      if (cancelled) return;
      const s = seq[idx % seq.length];
      setActive(s.i);
      setTimeout(() => { idx++; tick(); }, s.ms);
    };
    tick();
    return () => { cancelled = true; };
  }, []);

  // Three corpora keyed by source language. UI lang picks which pair to show.
  // EN UI → user reads 繁中, popover in EN
  // ZH UI → user reads EN,  popover in 繁中
  // JA UI → user reads EN,  popover in 日本語
  const lines_EN_to_ZH = [
    { src: 'The deadline pressure was building, and every email felt like another small fire to put out.', pop: '截止日的壓力正在累積,每封信都像是另一場要撲滅的小火。' },
    { src: 'She drafted a reply, then deleted it, then drafted another one — gentler this time.', pop: '她寫了一封回信,刪掉,又寫了一封——這次語氣溫和一些。' },
    { src: 'There was a particular skill in saying no without sounding like you were saying no.', pop: '說「不」而聽起來不像在說「不」,這裡頭有一門特別的功夫。' },
  ];
  const lines_EN_to_JA = [
    { src: 'The deadline pressure was building, and every email felt like another small fire to put out.', pop: '締切のプレッシャーが膨らんでいて、どのメールも、消し止めるべき小さな火のように感じられた。' },
    { src: 'She drafted a reply, then deleted it, then drafted another one — gentler this time.', pop: '彼女は返信を書き、消し、もう一度書き直した——今度はもう少し柔らかく。' },
    { src: 'There was a particular skill in saying no without sounding like you were saying no.', pop: '「いいえ」と聞こえないように「いいえ」と言う——そこには特別な技がある。' },
  ];
  const lines_ZH_to_EN = [
    { src: '截止日的壓力一點一點堆上來,每一封信都像是另一場要撲滅的小火。', pop: 'The deadline pressure was steadily mounting, and every email felt like another small fire to put out.' },
    { src: '她寫了封回信,刪掉,又寫了一封——這次語氣放軟了些。', pop: 'She drafted a reply, then deleted it, then drafted another — gentler this time.' },
    { src: '說「不」而聽起來不像在說「不」,裡頭有一門特別的功夫。', pop: 'There\u2019s a particular skill to saying no without it sounding like you\u2019re saying no.' },
  ];

  let lines, headLabel;
  if (lang === 'zh') {
    lines = lines_EN_to_ZH;
    headLabel = 'EN → 繁中';
  } else if (lang === 'ja') {
    lines = lines_EN_to_JA;
    headLabel = 'EN → 日本語';
  } else {
    lines = lines_ZH_to_EN;
    headLabel = '繁中 → EN';
  }

  return (
    <div className="demo-window" style={{ aspectRatio: '16 / 11' }}>
      <div className="demo-titlebar">
        <div className="lights"><span/><span/><span/></div>
        <div className="title">Mail — Re: campaign launch</div>
      </div>
      <div className="demo-body">
        <div className="demo-paragraph" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {lines.map((l, i) => (
            <p key={i} style={{ margin: 0 }}>
              <span className={"target" + (active === i ? " is-hot" : "")}>{l.src}</span>
            </p>
          ))}
        </div>

        {lines.map((l, i) => (
          <div
            key={i}
            className={"translation-popover" + (active === i ? " show" : "")}
            style={{
              left: i === 0 ? '46%' : i === 1 ? '38%' : '52%',
              top: i === 0 ? '20%' : i === 1 ? '42%' : '64%',
            }}
          >
            <div className="pop-head">
              <span>{headLabel}</span>
              <span className="pop-accent">{i === 2 ? T('⚡ cached', '⚡ 快取', '⚡ キャッシュ') : '●'}</span>
            </div>
            <div className="pop-body">{l.pop}</div>
          </div>
        ))}

        <div className={"demo-modkey held"}>
          <span>{T('HOLD', '按住', '長押し')}</span>
          <span className="kbd">⌃</span>
          <span className="kbd">⌥</span>
          <span>{T('hover to read', 'hover 即可閱讀', 'ホバーで読む')}</span>
        </div>
      </div>
    </div>
  );
};

window.ReadingDemo = ReadingDemo;