// Capsule, Settings, Landing, Onboarding — все интерактивные.
// Changes from v1:
//  - CapsuleScreen: показывает реально избранные вопросы (favorite=true)
//  - SettingsScreen: время, категории, интимные, годовщина, пауза, выход —
//    всё редактируется через /api/couple/settings, /pair/leave
//  - LandingScreen: для пользователя без пары — кнопки создать/присоединиться
//    (POST /pair/create, /pair/join) прямо из веба

// ═══════════════════════════════════════════════════════════════════
// CAPSULE
// ═══════════════════════════════════════════════════════════════════
window.CapsuleScreen = function CapsuleScreen({ data, setScreen, reload }) {
  const D = data;
  const favs = D.history.filter(h => h.favorite);
  const progress = Math.min(100, Math.round(D.pair.days_together * 100 / 365));

  return (
    <div className="fade-in">
      <div className="page-head">
        <div>
          <h1 className="page-head__title">Наша капсула</h1>
          <div className="page-head__sub">{D.pair.days_together} дней вместе · ещё {D.pair.capsule_unlock_in} до года</div>
        </div>
        <div className="page-head__actions">
          <button className="btn-ghost" onClick={() => setScreen('archive')}>
            <window.Icon name="archive" size={14}/> В архив
          </button>
        </div>
      </div>

      <div className="capsule-cover">
        <div className="capsule-cover__art">
          <div className="capsule-cover__heart">💕</div>
        </div>
        <div className="capsule-cover__body">
          <div className="capsule-cover__sub">КАПСУЛА ПАРЫ</div>
          <h2 className="capsule-cover__title">{D.me.name} & {D.partner.name}</h2>
          <p className="capsule-cover__text">
            Сборник ваших любимых вопросов и ответов. Откроется через {D.pair.capsule_unlock_in}, когда исполнится год вашей пары в tgplay.
          </p>
          <div className="capsule-cover__progress">
            <div style={{width: `${progress}%`}}></div>
          </div>
          <div style={{display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-4)', marginTop: 8}}>
            <span>{D.pair.days_together} / 365 дней</span>
            <span>{D.pair.capsule_unlock_days > 0 ? `${D.pair.capsule_unlock_in} до открытия` : 'открыта'}</span>
          </div>
        </div>
      </div>

      <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '28px 0 14px', flexWrap: 'wrap', gap: 10}}>
        <h3 style={{font: '600 18px/1.2 var(--font-display)', margin: 0}}>
          {favs.length ? `Избранные вопросы (${favs.length})` : 'Пока нет избранного'}
        </h3>
        {!favs.length && (
          <span style={{fontSize: 12, color: 'var(--text-4)'}}>Добавьте из «Раскрытия» или «Архива»</span>
        )}
      </div>

      {favs.length > 0 ? (
        <div className="favs">
          {favs.map(f => {
            const cat = f.cat_meta;
            return (
              <article key={f.id} className="surface" style={{padding: 20}}>
                <div style={{display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10}}>
                  <span style={{fontSize: 11, color: 'var(--text-4)', fontFamily: 'var(--font-mono)'}}>#{f.number} · {f.date}</span>
                  <span style={{marginLeft: 'auto', fontSize: 12, color: cat.color}}>{cat.emoji} {cat.ru}</span>
                </div>
                <div style={{font: '600 17px/1.4 var(--font-display)', color: 'var(--text-1)', marginBottom: 12}}>«{f.text}»</div>
                <div className="answer-mini answer-mini--you" style={{marginBottom: 8}}>
                  <div className="answer-mini__name"><span className="me-dot"></span>{D.me.name}</div>
                  <div className="answer-mini__text">{f.you || <span style={{color:'var(--text-4)'}}>—</span>}</div>
                </div>
                <div className="answer-mini answer-mini--p">
                  <div className="answer-mini__name"><span className="p-dot"></span>{D.partner.name}</div>
                  <div className="answer-mini__text">{f.partner || <span style={{color:'var(--text-4)'}}>—</span>}</div>
                </div>
              </article>
            );
          })}
        </div>
      ) : (
        <div className="surface" style={{padding: 36, textAlign: 'center'}}>
          <div style={{fontSize: 40, marginBottom: 10}}>⭐</div>
          <div style={{color: 'var(--text-3)', marginBottom: 16, fontSize: 14}}>
            Отмечайте ❤️ избранные вопросы при раскрытии или в архиве — они появятся здесь.
          </div>
          <button className="btn-primary" onClick={() => setScreen('archive')}>
            <window.Icon name="archive" size={14}/> В архив
          </button>
        </div>
      )}
    </div>
  );
};


// ═══════════════════════════════════════════════════════════════════
// SETTINGS
// ═══════════════════════════════════════════════════════════════════
window.SettingsScreen = function SettingsScreen({ data, reload }) {
  const { useState } = React;
  const D = data;
  const [busy, setBusy] = useState(null);   // which field is being saved
  const [error, setError] = useState(null);
  const [flash, setFlash] = useState(null);

  // Local drafts — we commit on blur or explicit save
  const [time, setTime] = useState(D.pair.question_time || '20:00');
  const [anniv, setAnniv] = useState(D.pair.anniversary || '');
  const [pauseDays, setPauseDays] = useState(7);
  const [categories, setCategories] = useState(
    (D.pair.enabled_categories || []).filter(c => c !== 'intimate')
  );
  const [includeIntimate, setIncludeIntimate] = useState(!!D.pair.include_intimate);
  const [confirmModal, setConfirmModal] = useState(null);

  async function save(patch, fieldName) {
    setBusy(fieldName);
    setError(null);
    try {
      await window.API.updateSettings(patch);
      setFlash('Сохранено');
      setTimeout(() => setFlash(null), 1500);
      if (reload) await reload();
    } catch (e) {
      setError(e.message || 'Ошибка');
    } finally {
      setBusy(null);
    }
  }

  function toggleCat(c) {
    const next = categories.includes(c)
      ? categories.filter(x => x !== c)
      : [...categories, c];
    if (next.length === 0) {
      setError('Выберите хотя бы одну категорию');
      return;
    }
    setCategories(next);
    save({ categories: next }, 'categories');
  }

  async function doLeave() {
    setBusy('leave');
    setError(null);
    try {
      await window.API.leavePair();
      if (reload) await reload();
    } catch (e) {
      setError(e.message || 'Ошибка');
    } finally {
      setBusy(null);
    }
  }

  function onLeave() {
    setConfirmModal({
      title: 'Выйти из пары?',
      body: 'История останется в архиве, но новые вопросы перестанут приходить. Партнёр тоже потеряет доступ.',
      confirmLabel: 'Выйти из пары',
      kind: 'danger',
      onConfirm: () => { setConfirmModal(null); doLeave(); }
    });
  }

  function onPause() {
    var n = Number(pauseDays);
    var word = (n % 10 === 1 && n % 100 !== 11) ? 'день'
             : ((n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)) ? 'дня' : 'дней');
    setConfirmModal({
      title: 'Поставить на паузу?',
      body: 'На ' + n + ' ' + word + ' вопросы перестанут приходить. Возобновить можно в любой момент.',
      confirmLabel: 'Поставить на паузу',
      kind: 'primary',
      onConfirm: () => { setConfirmModal(null); save({ pause_days: n }, 'pause'); }
    });
  }

  async function onResume() {
    await save({ resume: true }, 'resume');
  }

  const isPaused = D.pair.state === 'paused';
  const isWaiting = D.pair.is_waiting;

  return (
    <div className="fade-in" style={{maxWidth: 720}}>
      <div className="page-head">
        <div>
          <h1 className="page-head__title">Настройки</h1>
          <div className="page-head__sub">Всё меняется сразу — изменения сохраняются на сервере.</div>
        </div>
      </div>

      {error && (
        <div style={{padding: '10px 14px', borderRadius: 12, background: 'oklch(0.6 0.2 25 / 0.12)', color: 'oklch(0.75 0.2 25)', marginBottom: 14, fontSize: 13}}>
          {error}
        </div>
      )}
      {flash && (
        <div style={{padding: '10px 14px', borderRadius: 12, background: 'oklch(0.65 0.2 var(--hue-primary) / 0.15)', color: 'var(--brand-hi)', marginBottom: 14, fontSize: 13}}>
          ✓ {flash}
        </div>
      )}

      {isWaiting && D.pair.pair_id && (
        <div className="surface" style={{padding: 18, marginBottom: 16, borderLeft: '3px solid var(--brand)'}}>
          <div style={{fontSize: 14, fontWeight: 600, marginBottom: 6}}>Пара ждёт партнёра</div>
          <div style={{fontSize: 13, color: 'var(--text-3)', marginBottom: 10}}>
            Отправьте партнёру код приглашения — пока он не введёт его, вопросы не будут приходить.
          </div>
          <div style={{display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap'}}>
            <span style={{fontFamily: 'var(--font-mono)', fontSize: 20, letterSpacing: 4, padding: '8px 16px', background: 'var(--ink-2)', borderRadius: 10, fontWeight: 700}}>
              {D.pair.pair_id}
            </span>
            <button className="btn-ghost" onClick={() => { try { navigator.clipboard.writeText(D.pair.pair_id); setFlash('Скопировано'); setTimeout(() => setFlash(null), 1200); } catch(_){} }}>
              <window.Icon name="copy" size={13}/> Скопировать
            </button>
          </div>
        </div>
      )}

      <section className="settings-group">
        <div className="settings-group__title">Время и уведомления</div>
        <div className="setting">
          <div>
            <div className="setting__name">Время вопроса</div>
            <div className="setting__desc">Каждый день в это время сервер создаст новый вопрос</div>
          </div>
          <div className="setting__ctrl">
            <input
              type="time"
              value={time}
              onChange={e => setTime(e.target.value)}
              onBlur={() => { if (time !== D.pair.question_time) save({ question_time: time }, 'time'); }}
              disabled={busy === 'time'}
              style={{padding: '8px 12px', borderRadius: 10, border: '1px solid var(--ink-3)', background: 'var(--ink-1)', color: 'var(--text-1)', fontFamily: 'var(--font-mono)', fontSize: 14}}
            />
          </div>
        </div>
      </section>

      <section className="settings-group">
        <div className="settings-group__title">Категории вопросов</div>
        <div style={{padding: '12px 2px', display: 'flex', flexWrap: 'wrap', gap: 8}}>
          {D.allCategories.map(c => {
            const meta = D.cats[c] || D.cats._default;
            const on = categories.includes(c);
            return (
              <button
                key={c}
                className={'chip-btn' + (on ? ' chip-btn--on' : '')}
                onClick={() => toggleCat(c)}
                disabled={busy === 'categories'}
              >
                <span>{meta.emoji}</span> {meta.ru}
              </button>
            );
          })}
        </div>
        <div className="setting" style={{marginTop: 8}}>
          <div>
            <div className="setting__name">Интимные вопросы</div>
            <div className="setting__desc">18+ тема — только с обоюдного согласия</div>
          </div>
          <div className="setting__ctrl">
            <label style={{display: 'inline-flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13}}>
              <input
                type="checkbox"
                checked={includeIntimate}
                onChange={e => { setIncludeIntimate(e.target.checked); save({ include_intimate: e.target.checked }, 'intimate'); }}
                disabled={busy === 'intimate'}
              />
              {includeIntimate ? 'Включены' : 'Выключены'}
            </label>
          </div>
        </div>
      </section>

      <section className="settings-group">
        <div className="settings-group__title">Пара</div>
        <div className="setting">
          <div>
            <div className="setting__name">Партнёр</div>
            <div className="setting__desc">
              {D.partner.name} · с {D.pair.started_at}
            </div>
          </div>
          <div className="setting__ctrl"><span className="chip chip--brand">{D.pair.state}</span></div>
        </div>
        <div className="setting">
          <div>
            <div className="setting__name">Годовщина</div>
            <div className="setting__desc">Дата начала отношений — для специальных вопросов</div>
          </div>
          <div className="setting__ctrl" style={{display: 'flex', gap: 6}}>
            <input
              type="date"
              value={anniv || ''}
              onChange={e => setAnniv(e.target.value)}
              onBlur={() => { if (anniv !== (D.pair.anniversary || '')) save({ anniversary: anniv || '' }, 'anniv'); }}
              disabled={busy === 'anniv'}
              style={{padding: '8px 12px', borderRadius: 10, border: '1px solid var(--ink-3)', background: 'var(--ink-1)', color: 'var(--text-1)', fontSize: 13}}
            />
            {anniv && (
              <button className="btn-ghost" onClick={() => { setAnniv(''); save({ anniversary: '' }, 'anniv'); }} disabled={busy === 'anniv'} style={{padding: '6px 10px', minHeight: 32, fontSize: 12}}>
                ✕
              </button>
            )}
          </div>
        </div>

        <div className="setting">
          <div>
            <div className="setting__name">Пауза</div>
            <div className="setting__desc">
              {isPaused ? `Пара на паузе до ${D.pair.paused_until ? new Date(D.pair.paused_until).toLocaleDateString('ru-RU') : '—'}` : 'Остановить вопросы на время (1–90 дней)'}
            </div>
          </div>
          <div className="setting__ctrl" style={{display: 'flex', gap: 6, flexWrap: 'wrap'}}>
            {isPaused ? (
              <button className="btn-primary" onClick={onResume} disabled={busy === 'resume'} style={{padding: '6px 14px', minHeight: 32, fontSize: 13}}>
                Возобновить
              </button>
            ) : (
              <>
                <input
                  type="number"
                  min={1} max={90}
                  value={pauseDays}
                  onChange={e => setPauseDays(e.target.value)}
                  style={{width: 70, padding: '6px 10px', borderRadius: 10, border: '1px solid var(--ink-3)', background: 'var(--ink-1)', color: 'var(--text-1)', fontSize: 13}}
                />
                <button className="btn-ghost" onClick={onPause} disabled={busy === 'pause'} style={{padding: '6px 12px', minHeight: 32, fontSize: 13}}>
                  Поставить
                </button>
              </>
            )}
          </div>
        </div>

        <div className="setting">
          <div>
            <div className="setting__name" style={{color: 'oklch(0.75 0.2 25)'}}>Выйти из пары</div>
            <div className="setting__desc">История останется в архиве, но новые вопросы перестанут приходить обоим</div>
          </div>
          <div className="setting__ctrl">
            <button className="btn-ghost" onClick={onLeave} disabled={busy === 'leave'} style={{padding: '6px 14px', minHeight: 32, fontSize: 13, color: 'oklch(0.75 0.2 25)'}}>
              Выйти
            </button>
          </div>
        </div>
      </section>

      <section className="settings-group">
        <div className="settings-group__title">Также доступно в Telegram</div>
        <div style={{padding: '10px 2px', fontSize: 13, color: 'var(--text-3)', lineHeight: 1.6}}>
          Бот <a href={'https://t.me/' + D.botUsername} target="_blank" rel="noreferrer" style={{color: 'var(--brand-hi)'}}>@{D.botUsername}</a> присылает уведомления о новых вопросах и напоминания. Всё остальное — прямо здесь.
        </div>
      </section>

      {confirmModal && (
        <div
          onClick={() => setConfirmModal(null)}
          style={{
            position: 'fixed', inset: 0, zIndex: 1000,
            background: 'rgba(0,0,0,0.62)',
            backdropFilter: 'blur(4px)',
            WebkitBackdropFilter: 'blur(4px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 20,
            animation: 'fadeIn 0.15s ease-out'
          }}
        >
          <div
            onClick={e => e.stopPropagation()}
            style={{
              background: 'var(--ink-1, #1a1420)',
              border: '1px solid var(--ink-3, #2a2030)',
              borderRadius: 16,
              padding: 26,
              maxWidth: 440,
              width: '100%',
              boxShadow: '0 24px 64px rgba(0,0,0,0.55)'
            }}
          >
            <div style={{fontSize: 19, fontWeight: 700, marginBottom: 10, color: 'var(--text-1)'}}>
              {confirmModal.title}
            </div>
            <div style={{fontSize: 14, color: 'var(--text-3)', lineHeight: 1.6, marginBottom: 22}}>
              {confirmModal.body}
            </div>
            <div style={{display: 'flex', gap: 10, justifyContent: 'flex-end', flexWrap: 'wrap'}}>
              <button className="btn-ghost" onClick={() => setConfirmModal(null)}>
                Отмена
              </button>
              <button
                className="btn-primary"
                onClick={confirmModal.onConfirm}
                style={confirmModal.kind === 'danger'
                  ? {background: 'oklch(0.6 0.2 25)', color: '#fff', borderColor: 'transparent'}
                  : {}}
              >
                {confirmModal.confirmLabel}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};


// ═══════════════════════════════════════════════════════════════════
// LANDING — для пользователей без пары, с функциональным создать/присоединиться
// ═══════════════════════════════════════════════════════════════════
window.LandingScreen = function LandingScreen({ data, reload }) {
  const { useState } = React;
  const D = data || {};
  const authenticated = !!D.authenticated;
  const [mode, setMode] = useState(null); // 'create' | 'join' | null
  const [code, setCode] = useState('');
  const [joining, setJoining] = useState(false);
  const [error, setError] = useState(null);
  const [createdCode, setCreatedCode] = useState(null);

  async function onCreate() {
    setError(null);
    setJoining(true);
    try {
      const res = await window.API.createPair();
      setCreatedCode(res.pair_id);
      // не вызываем reload сразу: иначе LandingScreen размонтируется и код пропадёт.
      // Партнёр присоединится — пользователь сам нажмёт "Проверить снова" ниже.
    } catch (e) {
      setError(e.message || 'Не удалось создать пару');
    } finally {
      setJoining(false);
    }
  }

  async function onJoin() {
    setError(null);
    if (!code.trim()) { setError('Введите код'); return; }
    setJoining(true);
    try {
      await window.API.joinPair(code.trim().toUpperCase());
      if (reload) await reload();
    } catch (e) {
      setError(e.message || 'Не удалось присоединиться');
    } finally {
      setJoining(false);
    }
  }

  return (
    <div className="fade-in landing">
      <div className="landing__hero">
        <div className="landing__badge">tgplay · игра для пары</div>
        <h1 className="landing__title">Один вопрос в день — и вы узнаёте друг друга заново.</h1>
        <p className="landing__lead">
          Каждый вечер приходит один и тот же вопрос вам обоим. Отвечаете отдельно, ответы открываются, когда оба готовы.
        </p>

        {!authenticated && (
          <div className="landing__cta">
            <a className="btn-primary btn-primary--lg" href="https://tgplay.ru">
              Войти через tgplay.ru
            </a>
          </div>
        )}

        {authenticated && !mode && !createdCode && (
          <div className="landing__cta" style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
            <button className="btn-primary btn-primary--lg" onClick={() => setMode('create')}>
              <window.Icon name="sparkle" size={16}/> Создать пару
            </button>
            <button className="btn-ghost" style={{padding: '12px 20px'}} onClick={() => setMode('join')}>
              У меня есть код →
            </button>
          </div>
        )}

        {authenticated && mode === 'create' && !createdCode && (
          <div className="surface" style={{padding: 22, marginTop: 18, maxWidth: 480}}>
            <div style={{fontSize: 15, fontWeight: 600, marginBottom: 8}}>Создать новую пару</div>
            <div style={{fontSize: 13, color: 'var(--text-3)', marginBottom: 16}}>
              Мы сгенерируем короткий код — отправьте его партнёру, чтобы он присоединился.
            </div>
            <div style={{display: 'flex', gap: 10}}>
              <button className="btn-primary" onClick={onCreate} disabled={joining}>
                {joining ? 'Создаём…' : 'Создать'}
              </button>
              <button className="btn-ghost" onClick={() => { setMode(null); setError(null); }} disabled={joining}>
                Отмена
              </button>
            </div>
            {error && <div style={{marginTop: 12, fontSize: 13, color: 'oklch(0.75 0.2 25)'}}>{error}</div>}
          </div>
        )}

        {authenticated && createdCode && (
          <div className="surface" style={{padding: 22, marginTop: 18, maxWidth: 480, borderLeft: '3px solid var(--brand)'}}>
            <div style={{fontSize: 15, fontWeight: 600, marginBottom: 8}}>Пара создана ✨</div>
            <div style={{fontSize: 13, color: 'var(--text-3)', marginBottom: 14}}>
              Отправьте этот код партнёру. Он вводит его в поле «У меня есть код».
            </div>
            <div style={{display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap'}}>
              <span style={{fontFamily: 'var(--font-mono)', fontSize: 28, letterSpacing: 6, padding: '10px 20px', background: 'var(--ink-2)', borderRadius: 12, fontWeight: 700}}>
                {createdCode}
              </span>
              <button className="btn-ghost" onClick={() => { try { navigator.clipboard.writeText(createdCode); } catch(_){} }}>
                <window.Icon name="copy" size={13}/> Скопировать
              </button>
            </div>
            <div style={{marginTop: 14, fontSize: 12, color: 'var(--text-4)'}}>
              Как только партнёр введёт код, страница обновится и вы увидите свою пару.
            </div>
            <div style={{marginTop: 18, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap'}}>
              <button className="btn-primary" onClick={() => reload && reload()}>
                Перейти в приложение →
              </button>
              <span style={{fontSize: 12, color: 'var(--text-4)'}}>
                партнёр присоединится сам, когда введёт код
              </span>
            </div>
          </div>
        )}

        {authenticated && mode === 'join' && (
          <div className="surface" style={{padding: 22, marginTop: 18, maxWidth: 480}}>
            <div style={{fontSize: 15, fontWeight: 600, marginBottom: 8}}>Присоединиться к паре</div>
            <div style={{fontSize: 13, color: 'var(--text-3)', marginBottom: 14}}>
              Введите код, который дал(а) вам партнёр.
            </div>
            <input
              type="text"
              value={code}
              onChange={e => setCode(e.target.value.toUpperCase())}
              placeholder="ABC123"
              maxLength={16}
              style={{
                width: '100%', padding: '12px 14px', borderRadius: 12,
                border: '1px solid var(--ink-3)', background: 'var(--ink-1)',
                color: 'var(--text-1)', fontFamily: 'var(--font-mono)',
                fontSize: 18, letterSpacing: 3, textAlign: 'center',
                textTransform: 'uppercase'
              }}
            />
            <div style={{display: 'flex', gap: 10, marginTop: 12}}>
              <button className="btn-primary" onClick={onJoin} disabled={joining || !code.trim()}>
                {joining ? 'Присоединяемся…' : 'Присоединиться'}
              </button>
              <button className="btn-ghost" onClick={() => { setMode(null); setCode(''); setError(null); }} disabled={joining}>
                Отмена
              </button>
            </div>
            {error && <div style={{marginTop: 12, fontSize: 13, color: 'oklch(0.75 0.2 25)'}}>{error}</div>}
          </div>
        )}

        <div className="landing__trust">
          <span>Бесплатно</span><i></i>
          <span>Только вы двое</span><i></i>
          <span>Без рекламы</span>
        </div>
      </div>
      <div className="landing__art">
        <div className="phone-mock">
          <div className="phone-mock__screen">
            <div className="phone-mock__time">Сегодня · 21:00</div>
            <div className="phone-mock__bubble">
              <div style={{fontSize: 11, color: 'var(--brand-hi)', fontWeight: 600, letterSpacing: '.06em'}}>ВОПРОС #128</div>
              <div style={{font: '600 16px/1.35 var(--font-display)', marginTop: 6}}>
                «Когда ты в последний раз чувствовал, что я по-настоящему тебя слушаю?»
              </div>
            </div>
            <div className="phone-mock__send">Ответить →</div>
          </div>
        </div>
      </div>
    </div>
  );
};


// ═══════════════════════════════════════════════════════════════════
// ONBOARDING
// ═══════════════════════════════════════════════════════════════════
window.OnboardingScreen = function OnboardingScreen({ data }) {
  const D = data || {};
  const steps = [
    { t: 'Создать пару или ввести код', d: 'На главной — «Создать пару», либо «У меня есть код», если партнёр уже создал.', icon: 'sparkle' },
    { t: 'Выбрать время', d: 'В настройках задайте удобное время вопроса (по умолчанию 20:00).', icon: 'today' },
    { t: 'Отвечать каждый день', d: 'Оба отвечаете на один вопрос. Ответы откроются, когда оба готовы.', icon: 'reveal' }
  ];
  return (
    <div className="fade-in" style={{maxWidth: 560, margin: '24px auto'}}>
      <div className="ob-steps">
        {steps.map((_, i) => <div key={i} className="ob-dot"></div>)}
      </div>
      <div className="surface" style={{padding: 32, textAlign: 'center'}}>
        <div className="ob-icon"><window.Icon name="sparkle" size={28}/></div>
        <h2 style={{font: '600 24px/1.2 var(--font-display)', margin: '20px 0 8px'}}>Как это работает</h2>
        <p style={{color: 'var(--text-3)', margin: '0 0 24px', fontSize: 15}}>
          Вся игра — прямо здесь. Бот Telegram присылает уведомления, но всё остальное — в вебе.
        </p>
        <ol style={{textAlign: 'left', padding: '0 0 0 20px', color: 'var(--text-2)', fontSize: 14, lineHeight: 1.8}}>
          {steps.map((s, i) => <li key={i}><b style={{color:'var(--text-1)'}}>{s.t}.</b> {s.d}</li>)}
        </ol>
      </div>
    </div>
  );
};