// hero.jsx — the capture → restore loop visual (clean arranged macOS desktop)

const HeroStageReal = ({ lang }) => {
  const vi = lang === 'vi';
  const L = (en, v) => (vi ? v : en);
  const reduceMotion = typeof window !== 'undefined'
    && window.matchMedia
    && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  const [runId, setRunId] = React.useState(0);
  const replay = () => setRunId((k) => k + 1);

  const [tab, setTab] = React.useState(0);
  React.useEffect(() => {
    if (reduceMotion) return;
    setTab(0);
    const t = setInterval(() => setTab((v) => (v + 1) % 3), 2600);
    return () => clearInterval(t);
  }, [runId, reduceMotion]);
  const TAB_IMG = [
    'linear-gradient(135deg,color-mix(in oklab,var(--accent) 48%,var(--surface-3)),color-mix(in oklab,#4A8FE7 38%,var(--surface-3)))',
    'linear-gradient(135deg,color-mix(in oklab,#3E9E72 46%,var(--surface-3)),color-mix(in oklab,#39B8A8 36%,var(--surface-3)))',
    'linear-gradient(135deg,color-mix(in oklab,#E0885C 46%,var(--surface-3)),color-mix(in oklab,#C96A9E 36%,var(--surface-3)))',
  ];
  const TAB_W = [['58%', '86%', '64%'], ['44%', '72%', '52%'], ['66%', '90%', '74%']];

  const TB = ({ title }) => (
    <div className="win-tb"><i /><i /><i /><span className="win-title">{title}</span></div>
  );

  return (
    <div className={`hero-stage ${reduceMotion ? '' : 'is-animated'}`}
         role="button" tabIndex={0}
         aria-label={L('Replay the capture-and-restore animation', 'Xem lại hoạt ảnh lưu và khôi phục')}
         onClick={replay}
         onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); replay(); } }}>
      <div className="desk" key={runId}>
        <div className="desk-bar">
          <span className="desk-menus" aria-hidden><b>Finder</b><span>File</span><span>Edit</span><span>View</span></span>
          <span className="desk-bar-spacer" />
          <span className="desk-status">
            <AppIcon size={11} />
            <span className="ds-name">{L('Morning focus', 'Tập trung buổi sáng')}</span>
            <span className="ds-time">25:00</span>
            <span className="ds-sep" />
            <span>9:41</span>
          </span>
          <span className="desk-bar-hairline" />
        </div>

        <div className="desk-windows">
          <div className="win win-3 win--term" style={{ left: '1.5%', top: '1.5%', width: '46.5%', height: '84%', zIndex: 1, opacity: 0.9 }}>
            <TB title="zsh" />
            <div className="win-term">
              <i className="p" style={{ width: '32%' }} />
              <i style={{ width: '64%' }} />
              <i className="ok" style={{ width: '38%' }} />
              <i className="p" style={{ width: '20%' }} />
            </div>
          </div>
          <div className="win win-1" style={{ left: '4.5%', top: '6%', width: '46.5%', height: '84%', zIndex: 2 }}>
            <TB title="main.swift" />
            <div className="wb">
              <div className="wb-side"><i /><i /><i /><i /><i /><i /><i /><i /></div>
              <div className="wb-main">
                <i className="ln-k" style={{ width: '50%' }} />
                <i style={{ width: '74%', marginLeft: '8%' }} />
                <i className="ln-g" style={{ width: '36%', marginLeft: '16%' }} />
                <i style={{ width: '58%', marginLeft: '16%' }} />
                <i style={{ width: '44%', marginLeft: '16%' }} />
                <i style={{ width: '28%', marginLeft: '8%' }} />
                <i className="ln-k" style={{ width: '42%' }} />
                <i style={{ width: '66%', marginLeft: '8%' }} />
                <i style={{ width: '52%', marginLeft: '8%' }} />
                <i className="ln-g" style={{ width: '30%', marginLeft: '16%' }} />
                <i style={{ width: '60%', marginLeft: '8%' }} />
                <i style={{ width: '38%' }} />
              </div>
            </div>
          </div>
          <div className="win win-2" style={{ left: '52.5%', top: '6%', width: '43%', height: '84%', zIndex: 2 }}>
            <TB title={L('Browser — docs', 'Trình duyệt — tài liệu')} />
            <div className="wb wb-col">
              <div className="wb-bar">
                {[0, 1, 2].map((i) => (
                  <span key={i} className={`wb-tab ${tab === i ? 'is-on' : ''}`}><s className="wb-fav" /><i /></span>
                ))}
                <span className="wb-plus">+</span>
                <span className="wb-url" />
              </div>
              <span className="wb-img" style={{ flex: 'none', height: '34%', background: TAB_IMG[tab], transition: 'background .45s var(--easing)' }} />
              <i style={{ width: TAB_W[tab][0], height: 4, transition: 'width .45s var(--easing)' }} />
              <i style={{ width: TAB_W[tab][1], transition: 'width .45s var(--easing)' }} />
              <i style={{ width: '86%' }} />
              <i style={{ width: TAB_W[tab][2], transition: 'width .45s var(--easing)' }} />
              <i style={{ width: '78%' }} />
              <i style={{ width: '40%' }} />
            </div>
          </div>
        </div>

        <div className="morph-icon" aria-hidden><img src="snapovo-icon.png" alt="" /></div>
      </div>

      <div className="preset-tag" style={{ left: 16, bottom: 6 }}>
        <span className="preset-tag-dot" />
        <span style={{ fontWeight: 600 }}>{L('Morning focus', 'Tập trung buổi sáng')}</span>
        <span style={{ color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', fontSize: 10 }}>⌃⌥⌘1</span>
      </div>
      <div className="preset-tag" style={{ right: 16, top: 6 }}>
        <span className="preset-tag-dot" style={{ background: 'var(--accent-soft)' }} />
        <span style={{ color: 'var(--text-muted)', fontWeight: 500 }}>{L('3 apps · 2 displays', '3 app · 2 màn hình')}</span>
      </div>
      <span className="replay-hint"><Icon.Restore size={11} /> {L('Replay', 'Xem lại')}</span>
    </div>
  );
};

window.HeroStage = HeroStageReal;