/* global React */
(function () {
  const T = window.SC_T;

  function IdleHero() {
    return (
      <div style={{ position: 'relative', width: 200, height: 200 }}>
        <svg width="200" height="200" viewBox="0 0 200 200"
             style={{ filter: 'drop-shadow(0 12px 24px rgba(91,92,246,0.18))' }}>
          <defs>
            <linearGradient id="heroGradA" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#A78BFA" /><stop offset="100%" stopColor="#6366F1" />
            </linearGradient>
            <radialGradient id="heroGradB" cx="0.3" cy="0.3" r="0.8">
              <stop offset="0%" stopColor="#EEF2FF" /><stop offset="100%" stopColor="#C7D2FE" />
            </radialGradient>
          </defs>
          <circle cx="100" cy="100" r="92" fill="none" stroke="#C7D2FE" strokeWidth="1" strokeDasharray="3 5" opacity="0.7">
            <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="50s" repeatCount="indefinite" />
          </circle>
          <circle cx="100" cy="100" r="72" fill="none" stroke="#A5B4FC" strokeWidth="1" opacity="0.5" />
          <circle cx="100" cy="100" r="56" fill="url(#heroGradA)" opacity="0.95" />
          <circle cx="100" cy="100" r="56" fill="url(#heroGradB)" opacity="0.4" />
          <ellipse cx="82" cy="80" rx="22" ry="14" fill="white" opacity="0.4" />
          <circle cx="170" cy="60" r="4" fill="#6366F1" opacity="0.7" />
          <circle cx="40" cy="140" r="3" fill="#A78BFA" opacity="0.6" />
          <circle cx="160" cy="150" r="5" fill="#8B5CF6" opacity="0.5" />
          <circle cx="30" cy="80" r="3" fill="#6366F1" opacity="0.4" />
        </svg>
      </div>
    );
  }

  function IdleScreen() {
    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 40, gap: 22 }}>
        <IdleHero />
        <div style={{ textAlign: 'center', maxWidth: 460 }}>
          <div style={{ fontSize: 24, fontWeight: 700, color: T.ink, letterSpacing: -0.4 }}>
            Введите фразы и запустите сборку
          </div>
          <div style={{ fontSize: 14, color: T.inkMuted, marginTop: 10, lineHeight: 1.55 }}>
            Расширяем затравку через Yandex Suggest, собираем частотности из Wordstat и группируем фразы в кластеры. Обычно 2–5 минут.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
          {['Yandex Suggest', 'Wordstat', 'AI-кластеризация'].map((p) => (
            <div key={p} style={{
              padding: '5px 12px', borderRadius: 999,
              background: T.surface, border: `1px solid ${T.border}`,
              fontSize: 12, fontWeight: 500, color: T.ink,
            }}>{p}</div>
          ))}
        </div>
      </div>
    );
  }

  window.IdleScreen = IdleScreen;
})();