// homes.jsx — Home B (Animated Hero) — empty state, no fake data

const { useState: _useStateH, useEffect: _useEffectH } = React;

function HomeB({ t, str, dark, lang, setLang, navigate }) {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(x => x + 1), 60);
    return () => clearInterval(id);
  }, []);
  const rotating = ['миры', 'игры', 'опыт', 'друзей'];
  const rotatingEn = ['worlds', 'games', 'experiences', 'friends'];
  const words = lang === 'ru' ? rotating : rotatingEn;
  const word = words[Math.floor(tick / 35) % words.length];

  return (
    <div style={{ width: '100%', minHeight: 1100, background: t.bg, color: t.text, fontFamily: '"Inter", system-ui, sans-serif' }}>
      <Nav t={t} str={str} dark={dark} lang={lang} setLang={setLang} active="discover" navigate={navigate} />

      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '80px 28px 80px', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 380px', gap: 40, alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 12, fontFamily: 'ui-monospace, monospace', color: t.muted, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 24 }}>
              ● {lang === 'ru' ? 'скоро · ранний доступ' : 'soon · early access'}
            </div>
            <h1 style={{
              margin: 0, fontFamily: '"Inter Tight", Inter, sans-serif',
              fontSize: 'clamp(56px, 8vw, 110px)', lineHeight: 0.92, fontWeight: 700, letterSpacing: '-0.045em',
            }}>
              {lang === 'ru' ? 'Создавай ' : 'Build '}
              <span style={{
                display: 'inline-block', padding: '0 14px',
                background: t.accent, color: t.accentInk, borderRadius: 14,
                transform: `rotate(${(Math.sin(tick / 20) * 1.2).toFixed(2)}deg)`,
                transition: 'transform 0.06s',
              }}>{word}</span>.
              <br />{lang === 'ru' ? 'Играй с миром.' : 'Play with the world.'}
            </h1>
            <div style={{ marginTop: 28, fontSize: 17, color: t.muted, maxWidth: 560, lineHeight: 1.5 }}>
              {str.hero_sub}
            </div>
            <div style={{ marginTop: 32, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <Btn t={t} kind="primary" size="lg" onClick={() => navigate && navigate('download')}>↓ {str.download} Craftix Player</Btn>
              <Btn t={t} kind="outline" size="lg" onClick={() => navigate && navigate('studio')}>{str.studio} →</Btn>
            </div>
          </div>

          <div style={{ position: 'relative', width: 380, height: 380, justifySelf: 'end' }}>
            {[18, 285, 50, 130].map((hue, i) => {
              const positions = [
                { x: 0, y: 10, w: 200, h: 200, r: -4 },
                { x: 200, y: 50, w: 160, h: 120, r: 3 },
                { x: 60, y: 220, w: 140, h: 140, r: -2 },
                { x: 220, y: 200, w: 140, h: 160, r: 5 },
              ][i];
              return (
                <div key={i} style={{
                  position: 'absolute', left: positions.x, top: positions.y,
                  width: positions.w, height: positions.h,
                  transform: `rotate(${positions.r + Math.sin((tick + i * 30) / 40) * 1.5}deg)`,
                  transition: 'transform 0.06s',
                  boxShadow: dark ? '0 20px 60px rgba(0,0,0,0.5)' : '0 20px 60px rgba(0,0,0,0.12)',
                  borderRadius: 12,
                }}>
                  <Placeholder hue={hue} pattern={['stripes', 'grid', 'dots', 'noise'][i]} dark={dark} radius={12} label={`place ${i + 1}`} />
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Two-column intro */}
      <div style={{ borderTop: `1px solid ${t.border}`, borderBottom: `1px solid ${t.border}` }}>
        <div style={{
          maxWidth: 1280, margin: '0 auto', padding: '60px 28px',
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
        }}>
          {[
            { h: lang === 'ru' ? 'Player' : 'Player',  d: lang === 'ru' ? 'Десктопный клиент для запуска миров. Один аккаунт — все игры.' : 'Desktop client for running worlds. One account — every game.', cta: lang === 'ru' ? 'Скачать' : 'Get it', route: 'download' },
            { h: lang === 'ru' ? 'Studio' : 'Studio',  d: lang === 'ru' ? 'Редактор миров с Lua-скриптингом и встроенной сетевой игрой.' : 'World editor with Lua scripting and built-in multiplayer.', cta: lang === 'ru' ? 'Узнать' : 'Learn', route: 'studio' },
            { h: lang === 'ru' ? 'Каталог' : 'Catalog', d: lang === 'ru' ? 'Все опубликованные миры в одном месте. Скоро откроем доступ.' : 'All published worlds in one place. Opening soon.', cta: lang === 'ru' ? 'Открыть' : 'Open', route: 'catalog' },
          ].map(c => (
            <div key={c.h} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ fontSize: 11, color: t.faint, fontFamily: 'ui-monospace, monospace', textTransform: 'uppercase', letterSpacing: '0.08em' }}>{c.h.toLowerCase()}</div>
              <div style={{ fontFamily: '"Inter Tight", sans-serif', fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em' }}>{c.h}</div>
              <div style={{ fontSize: 14, color: t.muted, lineHeight: 1.55 }}>{c.d}</div>
              <button onClick={() => navigate(c.route)} style={{
                marginTop: 8, alignSelf: 'flex-start', padding: '6px 0', background: 'transparent', border: 'none',
                color: t.text, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
                borderBottom: `1px solid ${t.text}`,
              }}>{c.cta} →</button>
            </div>
          ))}
        </div>
      </div>

      {/* Empty popular section */}
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '60px 28px' }}>
        <SectionHead t={t} kicker="catalog" title={str.popular} />
        <EmptyState
          t={t} height={300}
          title={lang === 'ru' ? 'Скоро здесь появятся миры' : 'Worlds will appear here soon'}
          sub={lang === 'ru' ? 'Мы открываем платформу для авторов. Первые опубликованные плейсы окажутся в этом разделе.' : 'We\u2019re opening the platform for creators. The first published places will land in this section.'}
          action={lang === 'ru' ? 'Открыть Studio' : 'Open Studio'}
          onAction={() => navigate('studio')}
        />
      </div>
    </div>
  );
}

Object.assign(window, { HomeB });