// detail-pages.jsx — Game + Profile placeholder pages

function GamePage({ t, str, dark, lang, setLang, gameId, navigate }) {
  return (
    <div style={{ width: '100%', minHeight: '100vh', 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: '60px 28px' }}>
        <div style={{ fontSize: 11, color: t.muted, fontFamily: 'ui-monospace, monospace', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 18 }}>
          {str.nav_discover} / <span style={{ color: t.text }}>place</span>
        </div>
        <h1 style={{ margin: 0, fontFamily: '"Inter Tight", sans-serif', fontSize: 56, fontWeight: 700, letterSpacing: '-0.03em' }}>
          {lang === 'ru' ? 'Страница игры' : 'Place page'}
        </h1>
        <p style={{ marginTop: 14, fontSize: 15, color: t.muted, maxWidth: 580, lineHeight: 1.6 }}>
          {lang === 'ru'
            ? 'Здесь будет hero, описание, серверы, лидерборд, бейджи и пропуска для каждого опубликованного плейса.'
            : 'This is where the hero, description, servers, leaderboard, badges and passes will live for each published place.'}
        </p>

        <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 380px', gap: 24 }}>
          <div>
            <div style={{ height: 460, marginBottom: 10 }}>
              <Placeholder hue={130} pattern="grid" dark={dark} label="place hero · 1920x1080" radius={14} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
              {[0, 1, 2, 3, 4].map(i => (
                <div key={i} style={{ height: 78 }}>
                  <Placeholder hue={(130 + i * 30) % 360} pattern={['stripes','grid','dots','noise','stripes'][i]} dark={dark} label={`shot ${i + 1}`} />
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32 }}>
              <EmptyState t={t} title={lang === 'ru' ? 'Контент появится после публикации' : 'Content shows up after publish'}
                sub={lang === 'ru' ? 'Описание, фото, серверы, лидерборд и бейджи подтянутся автоматически.' : 'Description, screenshots, servers, leaderboard and badges populate automatically.'} />
            </div>
          </div>

          <aside style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div>
              <div style={{ fontSize: 11, color: t.muted, fontFamily: 'ui-monospace, monospace', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                {str.by} <span style={{ color: t.faint }}>—</span>
              </div>
              <h2 style={{ margin: '6px 0 0', fontFamily: '"Inter Tight", sans-serif', fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.05 }}>
                {lang === 'ru' ? 'Название плейса' : 'Place title'}
              </h2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <Btn t={t} kind="primary" size="lg" fullWidth>▶ {str.play_now}</Btn>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                <Btn t={t} kind="outline" size="md">☆ {lang === 'ru' ? 'В избранное' : 'Favorite'}</Btn>
                <Btn t={t} kind="outline" size="md">↗ {lang === 'ru' ? 'Поделиться' : 'Share'}</Btn>
              </div>
            </div>
            <div style={{ padding: 16, background: t.surface, border: `1px solid ${t.border}`, borderRadius: 12, fontSize: 13, color: t.muted, lineHeight: 1.7 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>{str.genre}</span><span style={{ color: t.faint, fontFamily: 'ui-monospace, monospace' }}>—</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>{str.max_players}</span><span style={{ color: t.faint }}>—</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>{str.updated}</span><span style={{ color: t.faint }}>—</span></div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

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

      <div style={{ position: 'relative', height: 220 }}>
        <Placeholder hue={285} pattern="grid" dark={dark} label="profile banner" radius={0} />
        <div style={{ position: 'absolute', inset: 0, background: dark ? 'linear-gradient(0deg, rgba(0,0,0,0.6), transparent)' : 'linear-gradient(0deg, rgba(255,255,255,0.6), transparent)' }} />
      </div>

      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 28px 48px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 20, marginTop: -56 }}>
          <div style={{ width: 128, height: 128, borderRadius: 16, background: t.bg, padding: 4 }}>
            <Placeholder hue={285} pattern="dots" dark={dark} label="avatar" radius={12} />
          </div>
          <div style={{ flex: 1, paddingBottom: 12 }}>
            <div style={{ fontSize: 11, fontFamily: 'ui-monospace, monospace', color: t.muted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
              @username
            </div>
            <h1 style={{ margin: '4px 0 0', fontFamily: '"Inter Tight", sans-serif', fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em' }}>
              {lang === 'ru' ? 'Никнейм' : 'Display name'}
            </h1>
          </div>
          <div style={{ display: 'flex', gap: 8, paddingBottom: 12 }}>
            <Btn t={t} kind="outline" size="md">+ {str.follow}</Btn>
            <Btn t={t} kind="outline" size="md" onClick={() => navigate('settings')}>{str.edit_profile}</Btn>
          </div>
        </div>

        <div style={{ marginTop: 40 }}>
          <EmptyState t={t} height={280}
            title={lang === 'ru' ? 'Профиль пока пуст' : 'Profile is empty'}
            sub={lang === 'ru' ? 'Здесь появятся твои творения, инвентарь, друзья и бейджи. Создай свой первый мир в Studio.' : 'Your creations, inventory, friends and badges show up here. Build your first world in Studio.'}
            action={lang === 'ru' ? 'Открыть Studio' : 'Open Studio'}
            onAction={() => navigate('studio')}
          />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { GamePage, ProfilePage });