// Hero demo: animated reading-mode interaction
// Hover-translate works on the whole paragraph at once (not sentence-by-sentence).
// One language pair per box, depending on UI language:
//   en → 繁中 → EN  (reader reads Chinese, translates to English)
//   zh → EN → 繁中  (reader reads English, translates to Chinese)
//   ja → EN → 日本語 (reader reads English, translates to Japanese)

const HeroDemo = ({ lang }) => {
  const T = (en, zh, ja) => lang === 'zh' ? zh : lang === 'ja' ? ja : en;
  const [step, setStep] = React.useState(0);
  // 0 idle (cursor outside)
  // 1 cursor moved over paragraph (no key yet)
  // 2 modifier held → whole paragraph highlighted, popover open
  // 3 modifier still held (linger)
  // 4 release → fade out, return to idle

  React.useEffect(() => {
    const t = setTimeout(() => {
      setStep(s => (s + 1) % 5);
    }, [1500, 900, 3200, 1500, 700][step]);
    return () => clearTimeout(t);
  }, [step]);

  const isHovering = step >= 1 && step <= 3;
  const isHolding = step === 2 || step === 3;
  const showPop = step === 2 || step === 3;

  // cursor position
  const cursor = isHovering
    ? { x: 60, y: 50 }
    : { x: 24, y: 82 };

  // Paragraph + popover content
  let sourceLang, head, popLang, paragraph, popText;

  if (lang === 'en') {
    sourceLang = 'zh-Hant';
    head = '繁中 → EN';
    popLang = 'en';
    paragraph = "清晨的光線從工作室的窗戶灑進來,帶著一種奇特的質感——比秋天還涼,卻又有一種柔軟,只有借來的時光才會有的那種柔軟。她放下杯子,翻過一頁,譯者在頁邊留下的註記再次吸引了她的目光。";
    popText = "Morning light came through the studio windows with a peculiar quality — cooler than autumn yet somehow softer, the kind of softness only borrowed time can have. She set down her cup, turned the page, and the translator's note in the margin caught her eye again.";
  } else if (lang === 'ja') {
    sourceLang = 'en';
    head = 'EN → 日本語';
    popLang = 'ja';
    paragraph = "The morning light through the studio windows had a peculiar quality to it — cooler than autumn but somehow softer, the way only borrowed time can feel. She set down her cup, turned the page, and the translator's note in the margin caught her attention again.";
    popText = "工房の窓から差し込む朝の光には、どこか奇妙な質感があった——秋よりも涼しく、それでいて柔らかい、借りものの時間だけが持つあの柔らかさ。彼女はカップを置き、ページをめくった。欄外に書かれた訳者の注釈が、再び彼女の目を引いた。";
  } else {
    sourceLang = 'en';
    head = 'EN → 繁中';
    popLang = 'zh-Hant';
    paragraph = "The morning light through the studio windows had a peculiar quality to it — cooler than autumn but somehow softer, the way only borrowed time can feel. She set down her cup, turned the page, and the translator's note in the margin caught her attention again.";
    popText = "工作室窗戶透進來的晨光帶著一種奇特的質感——比秋天還涼,卻又有一種柔軟,只有借來的時光才會有的那種柔軟。她放下杯子,翻過一頁,譯者在頁邊留下的註記再次吸引了她的目光。";
  }

  return (
    <div className="demo-window" aria-label="Reading mode demo">
      <div className="demo-titlebar">
        <div className="lights"><span/><span/><span/></div>
        <div className="title">Notes — chapter_03.md</div>
      </div>
      <div className="demo-body">
        <div className="demo-paragraph" lang={sourceLang}>
          <span className={"target target-block" + (isHolding ? " is-hot" : "")}>{paragraph}</span>
        </div>

        <div
          className="demo-cursor"
          style={{
            left: `${cursor.x}%`,
            top: `${cursor.y}%`,
            transition: 'left .9s cubic-bezier(.5,.05,.2,1), top .9s cubic-bezier(.5,.05,.2,1)',
            opacity: 1,
          }}
        >
          <Icon.Cursor size={20} />
        </div>

        <div className={"translation-popover" + (showPop ? " show" : "")} style={{ left: '8%', right: '8%', top: '52%' }}>
          <div className="pop-head"><span>{head}</span><span className="pop-accent">●</span></div>
          <div className="pop-body" lang={popLang}>{popText}</div>
        </div>

        <div className={"demo-modkey" + (isHolding ? " held" : "")}>
          <span>{T('HOLD', '按住', '長押し')}</span>
          <span className="kbd">⌃</span>
          <span className="kbd">⌥</span>
          <span>{isHolding ? T('translating', '翻譯中', '翻訳中') : T('to translate', '即可翻譯', '押すと翻訳')}</span>
        </div>
      </div>
    </div>
  );
};

window.HeroDemo = HeroDemo;