// Screens G + G.1–G.6: Channels master + sub-wizards

const channelRows = [
  {key:'tg-bot', name:'Telegram-бот', sub:'@manya_world_bot', status:'active', mandatory:true, pill:'активен', pillKind:'moss', dot:'var(--moss)'},
  {key:'tg-channels', name:'Telegram-каналы', sub:'4 канала · ru, en, es, zh', status:'ready', pill:'готово', pillKind:'moss', dot:'var(--moss)'},
  {key:'vk', name:'ВКонтакте', sub:'группа · Маня · Дневник', status:'ready', pill:'готово', pillKind:'moss', dot:'var(--moss)'},
  {key:'fb', name:'Facebook Page', sub:'требуется ваш Meta-App + App Review', status:'wait-bind', pill:'нужна привязка', pillKind:'warning', dot:'var(--warning)'},
  {key:'ig', name:'Instagram Business', sub:'через FB Page · ждёт', status:'wait-fb', pill:'ждёт FB', pillKind:'warning', dot:'var(--warning)'},
  {key:'dzen', name:'Яндекс Дзен', sub:'Studio API · подключён', status:'ready', pill:'готово', pillKind:'moss', dot:'var(--moss)'},
];

// ============================================================
// G. Channels master
// ============================================================
const ScreenG_Channels = () => (
  <div className="park" style={{display:'flex', flexDirection:'column'}}>
    <OnboardingTopbar step={7} total={18} stepLabel="каналы"/>
    <div style={{padding:'32px 56px 24px', display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
      <div>
        <div className="eyebrow"><BotanicalMark size={14}/>шаг 07 / 18</div>
        <h2 style={{fontSize:30, marginTop:8}}>Куда будем разносить посты.</h2>
        <p style={{color:'var(--bark)', fontSize:14.5, marginTop:6, maxWidth:620}}>
          Telegram-бот обязателен — это ваш «пульт». Остальные каналы можно подключать постепенно или пропустить.
        </p>
      </div>
      <div style={{display:'flex', gap:12, alignItems:'center'}}>
        <span className="mono" style={{fontSize:11, color:'var(--bark-dim)', letterSpacing:'0.08em'}}>4 из 6 подключено</span>
        <div style={{width:120, height:4, background:'var(--paper-deep)', position:'relative'}}>
          <div style={{position:'absolute', left:0, top:0, height:4, width:'66%', background:'var(--moss)'}}/>
        </div>
      </div>
    </div>

    <div style={{padding:'0 56px'}}>
      <table style={{width:'100%', borderCollapse:'collapse', background:'var(--paper-soft)', border:'1px solid var(--hairline)'}}>
        <thead>
          <tr>
            <th style={{padding:'10px 16px', textAlign:'left', borderBottom:'1px solid var(--hairline)', fontFamily:'var(--font-mono)', fontSize:10, color:'var(--bark)', letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:500}}>канал</th>
            <th style={{padding:'10px 16px', textAlign:'left', borderBottom:'1px solid var(--hairline)', fontFamily:'var(--font-mono)', fontSize:10, color:'var(--bark)', letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:500}}>что подключено</th>
            <th style={{padding:'10px 16px', textAlign:'left', borderBottom:'1px solid var(--hairline)', fontFamily:'var(--font-mono)', fontSize:10, color:'var(--bark)', letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:500, width:200}}>статус</th>
            <th style={{padding:'10px 16px', textAlign:'right', borderBottom:'1px solid var(--hairline)', fontFamily:'var(--font-mono)', fontSize:10, color:'var(--bark)', letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:500, width:200}}></th>
          </tr>
        </thead>
        <tbody>
          {channelRows.map(r => (
            <tr key={r.key}>
              <td style={{padding:'18px 16px', borderBottom:'1px solid var(--hairline)', verticalAlign:'top'}}>
                <div style={{display:'flex', alignItems:'center', gap:10}}>
                  <span style={{width:8, height:8, borderRadius:999, background:r.dot, display:'inline-block'}}/>
                  <div>
                    <div style={{fontSize:15, color:'var(--forest-soft)', fontFamily:'var(--font-display)'}}>
                      {r.name} {r.mandatory && <span className="mono" style={{fontSize:10, color:'var(--ochre)', letterSpacing:'0.1em', marginLeft:6}}>· обязательно</span>}
                    </div>
                  </div>
                </div>
              </td>
              <td style={{padding:'18px 16px', borderBottom:'1px solid var(--hairline)', verticalAlign:'top', color:'var(--bark)', fontSize:13}}>
                {r.sub}
              </td>
              <td style={{padding:'18px 16px', borderBottom:'1px solid var(--hairline)', verticalAlign:'top'}}>
                <span className={`pill pill-${r.pillKind}`}>
                  <I.Check size={10}/> {r.pill}
                </span>
              </td>
              <td style={{padding:'18px 16px', borderBottom:'1px solid var(--hairline)', verticalAlign:'top', textAlign:'right'}}>
                <button className="btn btn-link">{r.status === 'wait-bind' ? 'продолжить →' : r.status === 'wait-fb' ? 'нужен FB →' : 'настройки →'}</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* What it does */}
      <div style={{marginTop:28, display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
        <div className="card" style={{padding:20}}>
          <div className="eyebrow"><I.Sprout size={14} color="var(--moss)"/>как это работает</div>
          <p style={{marginTop:10, fontSize:13.5, color:'var(--bark)', lineHeight:1.6}}>
            Пишете пост → пост уходит в ваш Telegram-бот → бот публикует в свой сайт,
            переводит и разносит во все подключённые каналы. Один пост — шесть мест.
          </p>
        </div>
        <div style={{padding:20, background:'#FAF1D7', border:'1px solid var(--ochre-dim)'}}>
          <div className="eyebrow" style={{color:'#6F571B'}}><BotanicalMark size={14} color="#6F571B"/>осталось два шага</div>
          <p style={{marginTop:10, fontSize:13.5, color:'#5F4A1A', lineHeight:1.6}}>
            <strong style={{fontWeight:500}}>Facebook Page</strong> — потребует ~1 часа: мы пройдём вместе через App Review.
            <strong style={{fontWeight:500}}> Instagram</strong> подключится автоматически после FB.
          </p>
        </div>
      </div>
    </div>

    <div style={{padding:'24px 56px', borderTop:'1px solid var(--hairline)', display:'flex', justifyContent:'space-between', marginTop:32}}>
      <button className="btn btn-link"><I.ArrowLeft size={14}/> назад</button>
      <div style={{display:'flex', gap:10}}>
        <button className="btn btn-ghost">Доделаю позже</button>
        <button className="btn btn-primary">Дальше → языки <I.Arrow size={14}/></button>
      </div>
    </div>
    <AssistantFab/>
  </div>
);

// Generic sub-wizard layout used by G.1–G.6
const SubWizard = ({step, label, num, total, title, lede, steps, sidebar, warn}) => (
  <div className="park" style={{display:'flex', flexDirection:'column'}}>
    <OnboardingTopbar step={step} total={18} stepLabel={label}/>

    {/* breadcrumb */}
    <div style={{padding:'18px 56px 0', display:'flex', alignItems:'center', gap:8, fontFamily:'var(--font-mono)', fontSize:11, color:'var(--bark-dim)', letterSpacing:'0.06em'}}>
      <span>каналы</span> <span style={{color:'var(--hairline-strong)'}}>/</span>
      <span style={{color:'var(--forest)'}}>{title}</span>
      <span style={{marginLeft:'auto', color:'var(--bark-dim)'}}>под-шаг {num} / {total}</span>
    </div>

    <div style={{padding:'12px 56px 24px', display:'grid', gridTemplateColumns:'1.2fr 0.8fr', gap:40, flex:1}}>
      <div>
        <h2 style={{fontSize:30}}>{title}</h2>
        <p style={{color:'var(--bark)', fontSize:14.5, marginTop:8, maxWidth:560}}>{lede}</p>

        {warn && (
          <div style={{marginTop:18, padding:'12px 14px', background:'#F4E6BD', border:'1px solid #DCC179', color:'#6F571B', fontSize:13, display:'flex', gap:10}}>
            <I.Eye size={14}/> {warn}
          </div>
        )}

        <ol style={{listStyle:'none', padding:0, marginTop:24, display:'flex', flexDirection:'column', gap:18}}>
          {steps.map((s,i) => (
            <li key={i} style={{display:'grid', gridTemplateColumns:'32px 1fr', gap:14, paddingBottom:18, borderBottom: i < steps.length-1 ? '1px solid var(--hairline)' : 'none'}}>
              <div style={{
                width:28, height:28, borderRadius:999,
                border: s.done ? '1px solid var(--moss)' : '1px solid var(--hairline-strong)',
                background: s.done ? 'var(--moss-tint)' : 'var(--paper-soft)',
                color: s.done ? '#3F5639' : 'var(--bark)',
                display:'flex', alignItems:'center', justifyContent:'center',
                fontSize: s.done ? 12 : 13, fontFamily: s.done ? 'var(--font-ui)' : 'var(--font-display)',
              }}>
                {s.done ? <I.Check size={14}/> : <span style={{fontStyle:'italic'}}>{i+1}</span>}
              </div>
              <div>
                <h4 style={{fontSize:15, fontWeight:500, fontFamily:'var(--font-ui)', color:'var(--forest)'}}>{s.t}</h4>
                {s.d && <p style={{marginTop:6, fontSize:13.5, color:'var(--bark)', lineHeight:1.6}}>{s.d}</p>}
                {s.body}
              </div>
            </li>
          ))}
        </ol>
      </div>

      {sidebar}
    </div>

    <div style={{padding:'18px 56px', borderTop:'1px solid var(--hairline)', display:'flex', justifyContent:'space-between'}}>
      <button className="btn btn-link"><I.ArrowLeft size={14}/> к списку каналов</button>
      <div style={{display:'flex', gap:10}}>
        <button className="btn btn-ghost">Пропустить</button>
        <button className="btn btn-primary">Готово <I.Check size={14}/></button>
      </div>
    </div>
    <AssistantFab/>
  </div>
);

// ============================================================
// G.1 — Telegram bot wizard
// ============================================================
const ScreenG1_TgBot = () => (
  <SubWizard
    step={7} label="telegram-бот" num={1} total={6}
    title="Telegram-бот — ваш пульт"
    lede="Бот будет одной точкой, куда вы пишете пост. Заводится через стандартного BotFather. Нужно потом просто вставить сюда токен."
    steps={[
      {done:true, t:'Откройте чат с @BotFather в Telegram', body:(
        <div style={{marginTop:10}}>
          <button className="btn btn-ghost"><I.Telegram size={14}/> Открыть @BotFather</button>
        </div>
      )},
      {done:true, t:'Отправьте команду /newbot', body:(
        <div style={{marginTop:10}}>
          <MockServiceFrame title="чат с BotFather" host="t.me/botfather" height={140}>
            <div style={{display:'flex', flexDirection:'column', gap:6}}>
              <div style={{alignSelf:'flex-end', background:'#E0DAC8', padding:'6px 10px', fontSize:11.5, borderRadius:'8px 8px 2px 8px'}}>/newbot</div>
              <div style={{alignSelf:'flex-start', background:'#F1ECDC', padding:'6px 10px', fontSize:11.5, borderRadius:'2px 8px 8px 8px', maxWidth:280}}>Окей. Как назовём бота? Это имя будет видно в чате.</div>
              <div style={{alignSelf:'flex-end', background:'#E0DAC8', padding:'6px 10px', fontSize:11.5, borderRadius:'8px 8px 2px 8px'}}>Manya World</div>
              <div style={{alignSelf:'flex-start', background:'#F1ECDC', padding:'6px 10px', fontSize:11.5, borderRadius:'2px 8px 8px 8px', maxWidth:280}}>Теперь юзернейм. Должен оканчиваться на bot.</div>
              <div style={{alignSelf:'flex-end', background:'#E0DAC8', padding:'6px 10px', fontSize:11.5, borderRadius:'8px 8px 2px 8px'}}>manya_world_bot</div>
            </div>
          </MockServiceFrame>
          <div style={{marginTop:10, display:'flex', gap:8}}>
            <button className="btn btn-ghost"><I.Copy size={12}/> копир. имя</button>
            <button className="btn btn-ghost"><I.Copy size={12}/> копир. юзернейм</button>
          </div>
        </div>
      )},
      {done:false, t:'Скопируйте токен и вставьте сюда', d:'BotFather пришлёт строку вида 123456:ABC… — это и есть токен.', body:(
        <div style={{marginTop:12}}>
          <input className="input mono" placeholder="123456789:ABCdef…" style={{fontSize:13}}/>
          <p className="mono" style={{fontSize:11, color:'var(--bark-dim)', marginTop:8, letterSpacing:'0.04em'}}>токен не сохраняется в браузер — шифруется и хранится на сервере</p>
        </div>
      )},
      {done:false, t:'Ждём, пока бот ответит', d:'После вставки токена мы пинганём бота и убедимся, что он работает. Обычно 2–3 секунды.', body:(
        <div style={{marginTop:12, padding:'12px 14px', background:'var(--paper-soft)', border:'1px dashed var(--hairline-strong)', fontFamily:'var(--font-mono)', fontSize:12, color:'var(--bark-dim)', display:'flex', alignItems:'center', gap:10}}>
          <span style={{display:'inline-block', width:8, height:8, borderRadius:999, background:'var(--hairline-strong)'}}/>
          ожидание · auto-detect ответа от бота
        </div>
      )},
    ]}
    sidebar={
      <aside>
        <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:10}}>как это выглядит у вас</div>
        <MockServiceFrame title="ваш бот · превью" host="t.me/manya_world_bot" height={260}>
          <div style={{display:'flex', alignItems:'center', gap:8, paddingBottom:10, borderBottom:'1px solid var(--hairline)'}}>
            <div style={{width:32, height:32, borderRadius:999, background:'var(--ochre-tint)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--forest)'}}><I.Telegram size={14}/></div>
            <div>
              <div style={{fontSize:13, color:'var(--forest)'}}>Manya World</div>
              <div className="mono" style={{fontSize:10, color:'var(--bark-dim)'}}>@manya_world_bot</div>
            </div>
            <span className="pill pill-moss" style={{marginLeft:'auto'}}><span className="dot"/> онлайн</span>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:6, marginTop:12}}>
            <div style={{alignSelf:'flex-start', background:'var(--paper-deep)', padding:'7px 10px', fontSize:11.5, maxWidth:280, borderRadius:'2px 8px 8px 8px'}}>Привет! Я бот вашего дневника. Пишите сюда заметки или статьи — я опубликую их везде, куда подключён.</div>
            <div style={{alignSelf:'flex-start', background:'var(--paper-deep)', padding:'7px 10px', fontSize:11.5, maxWidth:280, borderRadius:'2px 8px 8px 8px'}}>Команды: /post · /preview · /channels · /lang</div>
          </div>
        </MockServiceFrame>
        <div style={{marginTop:18, fontSize:12, color:'var(--bark)'}}>
          <strong style={{color:'var(--forest)', fontWeight:500}}>Что бот будет делать:</strong>
          <ul style={{margin:'8px 0 0', paddingLeft:18, color:'var(--bark)', lineHeight:1.7}}>
            <li>принимать ваши посты текстом и фото</li>
            <li>показывать предпросмотр перед публикацией</li>
            <li>переводить и разносить по каналам</li>
            <li>отвечать на статус «куда выложилось, куда нет»</li>
          </ul>
        </div>
      </aside>
    }
  />
);

// ============================================================
// G.2 — Telegram channels
// ============================================================
const ScreenG2_TgChannels = () => (
  <SubWizard
    step={7} label="telegram-каналы" num={2} total={6}
    title="Каналы по языкам"
    lede="По одному каналу на язык. Создаются в Telegram за минуту — мы покажем как. Бот станет администратором и будет публиковать в них."
    steps={[
      {done:true, t:'Создайте канал в Telegram', d:'Меню → «Создать канал». Назовите по языку — например, Manya World · EN.'},
      {done:true, t:'Добавьте @manya_world_bot админом', d:'В настройках канала → «Администраторы» → «Добавить». Дайте право публиковать сообщения.'},
      {done:false, t:'Привяжите канал к языку', body:(
        <div style={{marginTop:12, display:'flex', flexDirection:'column', gap:8}}>
          {[
            {lang:'RU', name:'@manyaworld', ok:true},
            {lang:'EN', name:'@manyaworld_en', ok:true},
            {lang:'ES', name:'не добавлен', ok:false},
            {lang:'ZH', name:'не добавлен', ok:false},
          ].map(r => (
            <div key={r.lang} style={{display:'flex', alignItems:'center', gap:12, padding:'10px 14px', background:'var(--paper-soft)', border:'1px solid var(--hairline)'}}>
              <span className="mono" style={{fontSize:11, color:'var(--bark)', letterSpacing:'0.1em', width:30}}>{r.lang}</span>
              <span className="mono" style={{fontSize:13, color: r.ok ? 'var(--forest)' : 'var(--bark-dim)', flex:1}}>{r.name}</span>
              {r.ok
                ? <span className="pill pill-moss"><I.Check size={10}/> подключён</span>
                : <button className="btn btn-link">+ привязать канал</button>}
            </div>
          ))}
        </div>
      )},
    ]}
    sidebar={
      <aside>
        <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:10}}>скриншот шага</div>
        <MockServiceFrame title="канал → администраторы" host="telegram desktop" height={300}>
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            <div style={{display:'flex', alignItems:'center', gap:10, paddingBottom:10, borderBottom:'1px solid var(--hairline)'}}>
              <div style={{width:34, height:34, borderRadius:999, background:'var(--paper-deep)'}}/>
              <div>
                <div style={{fontSize:13, color:'var(--forest)'}}>Manya World · EN</div>
                <div className="mono" style={{fontSize:10, color:'var(--bark-dim)'}}>2 administrators</div>
              </div>
            </div>
            {[
              {n:'Ksusha (creator)', tag:'owner'},
              {n:'@manya_world_bot', tag:'post messages', highlight:true},
            ].map((a,i)=>(
              <div key={i} style={{display:'flex', alignItems:'center', gap:10, padding:'8px 0', background: a.highlight ? 'rgba(212,165,92,0.10)' : 'transparent', paddingLeft:8, paddingRight:8, border: a.highlight ? '1px solid var(--ochre-dim)' : '1px solid transparent'}}>
                <div style={{width:26, height:26, borderRadius:999, background:'var(--paper-deep)'}}/>
                <div style={{flex:1, fontSize:12, color:'var(--forest)'}}>{a.n}</div>
                <div className="mono" style={{fontSize:10, color:'var(--bark-dim)'}}>{a.tag}</div>
              </div>
            ))}
            <button className="btn btn-link" style={{justifyContent:'flex-start', fontSize:12}}>+ Add Administrator</button>
          </div>
        </MockServiceFrame>
      </aside>
    }
  />
);

// ============================================================
// G.3 — VK
// ============================================================
const ScreenG3_VK = () => (
  <SubWizard
    step={7} label="вконтакте" num={3} total={6}
    title="ВКонтакте — токен сообщества"
    lede="Нужно создать «Standalone-приложение» и взять токен с offline-доступом. Это разовая процедура, делается раз и навсегда."
    warn="Делается через vk.com/apps — мы пройдём по шагам. Все скриншоты ниже."
    steps={[
      {done:true, t:'Откройте vk.com/apps → «Создать приложение»', d:'Тип — «Standalone-приложение». Название любое: «Manya Diary Publisher» подойдёт.'},
      {done:true, t:'Скопируйте Application ID', d:'После создания вы увидите числовой ID — он понадобится для запроса токена.'},
      {done:false, t:'Запросите токен с правами', body:(
        <div style={{marginTop:12}}>
          <div className="mono" style={{fontSize:11, color:'var(--bark-dim)', marginBottom:6, letterSpacing:'0.06em'}}>откройте URL ниже</div>
          <div style={{background:'#fff', border:'1px solid var(--hairline)', padding:'10px 12px', fontFamily:'var(--font-mono)', fontSize:11, color:'var(--forest)', wordBreak:'break-all', display:'flex', alignItems:'center', gap:10}}>
            <span style={{flex:1}}>https://oauth.vk.com/authorize?client_id=12345&scope=wall,photos,groups,offline&response_type=token</span>
            <button className="btn btn-link" style={{fontSize:11}}><I.Copy size={12}/></button>
          </div>
          <p style={{marginTop:8, fontSize:12.5, color:'var(--bark)'}}>Подтвердите доступ — токен окажется в адресной строке после редиректа. Скопируйте всё после <span className="mono">access_token=</span> до знака &.</p>
        </div>
      )},
      {done:false, t:'Вставьте токен и выберите группу', body:(
        <div style={{marginTop:12, display:'flex', flexDirection:'column', gap:10}}>
          <input className="input mono" placeholder="vk1.a.…" style={{fontSize:12}}/>
          <select className="input" defaultValue="">
            <option value="" disabled>выберите группу из вашего VK</option>
            <option>Маня · Дневник (id 220114)</option>
          </select>
        </div>
      )},
    ]}
    sidebar={
      <aside>
        <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:10}}>скриншот · vk.com/apps</div>
        <MockServiceFrame title="standalone app" host="vk.com/apps" height={300}>
          <div style={{height:24, background:'var(--paper-deep)', marginBottom:10}}/>
          <div style={{display:'grid', gridTemplateColumns:'80px 1fr', gap:'8px 14px', fontSize:11.5, color:'var(--forest)'}}>
            <span className="mono" style={{color:'var(--bark-dim)'}}>имя</span><span>Manya Diary Publisher</span>
            <span className="mono" style={{color:'var(--bark-dim)'}}>тип</span><span>standalone</span>
            <span className="mono" style={{color:'var(--bark-dim)'}}>id</span><span style={{fontFamily:'var(--font-mono)'}}>12345678</span>
            <span className="mono" style={{color:'var(--bark-dim)'}}>scope</span><span>wall, photos, groups, offline</span>
          </div>
          <div style={{marginTop:14, padding:'10px 12px', background:'var(--moss-tint)', color:'#3F5639', fontSize:11}}>
            <I.Check size={12}/> Application ID скопирован
          </div>
        </MockServiceFrame>
        <div style={{marginTop:18, padding:14, background:'var(--paper-soft)', border:'1px solid var(--hairline)', fontSize:12.5, color:'var(--bark)'}}>
          <strong style={{color:'var(--forest)', fontWeight:500}}>Зачем offline?</strong> Чтобы токен не истекал каждый день — без offline вам пришлось бы заново
          разрешать VK раз в сутки.
        </div>
      </aside>
    }
  />
);

// ============================================================
// G.4 — Facebook Page (the hard one)
// ============================================================
const ScreenG4_FB = () => (
  <SubWizard
    step={7} label="facebook page" num={4} total={6}
    title="Facebook Page — самый длинный шаг"
    lede="Meta требует, чтобы каждое приложение проходило App Review. Это означает, что вы создадите свой Meta App в developers.facebook.com и проведёте его через ревью. Звучит страшно — на деле час времени."
    warn="Требует App Review · ~60 минут вашего внимания. Можете прерваться в любой момент и вернуться позже — мы помним, где вы остановились."
    steps={[
      {done:true, t:'Создайте FB Page вашего блога', d:'facebook.com/pages/create → выберите «Brand». Имя — Manya World.'},
      {done:true, t:'Зарегистрируйте себя на developers.facebook.com', d:'Это бесплатно. Нужен только подтверждённый телефон.'},
      {done:true, t:'Создайте Meta App типа «Business»', d:'Use case — «Other», тип — «Business». Имя приложения может быть Manya Publisher.'},
      {done:false, t:'Добавьте продукты: Pages API + Facebook Login', body:(
        <div style={{marginTop:10, display:'flex', gap:8, flexWrap:'wrap'}}>
          <span className="pill pill-moss"><I.Check size={10}/> Pages API</span>
          <span className="pill pill-moss"><I.Check size={10}/> Facebook Login for Business</span>
          <span className="pill pill-warning"><span className="dot"/> Page Public Content (review)</span>
        </div>
      )},
      {done:false, t:'Запросите permissions и отправьте на App Review', d:'Permissions: pages_manage_posts, pages_read_engagement, pages_show_list. На каждое нужно объяснение «зачем» — мы заполним за вас.', body:(
        <div style={{marginTop:12, padding:'12px 14px', background:'var(--paper-soft)', border:'1px solid var(--hairline)'}}>
          <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:6}}>авто-заполненные обоснования</div>
          <ul style={{margin:0, paddingLeft:18, fontSize:12.5, color:'var(--bark)', lineHeight:1.7}}>
            <li><span className="mono">pages_manage_posts</span> — публикация постов автора в его собственную Page</li>
            <li><span className="mono">pages_read_engagement</span> — показ статуса «опубликовано» в дашборде</li>
            <li><span className="mono">pages_show_list</span> — выбор Page при подключении</li>
          </ul>
          <button className="btn btn-ghost" style={{marginTop:12}}>Открыть форму App Review →</button>
        </div>
      )},
      {done:false, t:'Дождитесь одобрения · обычно 1–24 часа', d:'Можно идти дальше — Instagram и Дзен не блокируют. Как только Meta пришлёт «approved», мы доделаем привязку автоматически.', body:(
        <div style={{marginTop:10, padding:'10px 14px', border:'1px dashed var(--hairline-strong)', background:'var(--paper-soft)', fontFamily:'var(--font-mono)', fontSize:11.5, color:'var(--bark)', display:'flex', alignItems:'center', gap:10}}>
          <span style={{display:'inline-block', width:8, height:8, borderRadius:999, background:'var(--warning)'}}/>
          ожидаем письмо от Meta · отправили запрос 12 минут назад
        </div>
      )},
    ]}
    sidebar={
      <aside>
        <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:10}}>панель meta · ваше приложение</div>
        <MockServiceFrame title="meta app dashboard" host="developers.facebook.com" height={340}>
          <div style={{height:20, background:'var(--paper-deep)', marginBottom:10}}/>
          <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:18, color:'var(--forest)', marginBottom:8}}>Manya Publisher</div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginBottom:14}}>
            <div style={{padding:'8px 10px', border:'1px solid var(--hairline)', fontSize:11}}>
              <div className="mono" style={{fontSize:9, color:'var(--bark-dim)', letterSpacing:'0.1em', textTransform:'uppercase'}}>app id</div>
              <div style={{fontFamily:'var(--font-mono)', color:'var(--forest)', marginTop:2}}>481922…</div>
            </div>
            <div style={{padding:'8px 10px', border:'1px solid var(--hairline)', fontSize:11}}>
              <div className="mono" style={{fontSize:9, color:'var(--bark-dim)', letterSpacing:'0.1em', textTransform:'uppercase'}}>mode</div>
              <div style={{color:'var(--warning)', marginTop:2}}>development</div>
            </div>
          </div>
          <div className="mono" style={{fontSize:9, color:'var(--bark-dim)', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:6}}>permissions</div>
          {[
            ['pages_manage_posts','review'],
            ['pages_read_engagement','review'],
            ['pages_show_list','granted'],
            ['public_profile','granted'],
          ].map(([p,s]) => (
            <div key={p} style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'6px 10px', borderBottom:'1px dotted var(--hairline)', fontSize:11}}>
              <span style={{fontFamily:'var(--font-mono)', color:'var(--forest)'}}>{p}</span>
              <span className={s==='granted' ? 'pill pill-moss' : 'pill pill-warning'} style={{fontSize:10}}>{s}</span>
            </div>
          ))}
        </MockServiceFrame>
        <div style={{marginTop:18, padding:14, background:'#F4E6BD', border:'1px solid #DCC179', fontSize:12.5, color:'#5F4A1A'}}>
          <strong style={{fontWeight:500}}>Совет:</strong> попросите Claude-помощника справа открыть форму App Review и пройти по полям вместе — он подскажет, что писать в обоснованиях.
        </div>
      </aside>
    }
  />
);

// ============================================================
// G.5 — Instagram Business
// ============================================================
const ScreenG5_IG = () => (
  <SubWizard
    step={7} label="instagram business" num={5} total={6}
    title="Instagram — через FB Page"
    lede="Instagram подключается «через» вашу Facebook Page. Аккаунт нужно перевести в Business / Creator — иначе API не даст постить."
    warn="Ждёт завершения шага Facebook Page. Когда Meta одобрит App Review — продолжим автоматически."
    steps={[
      {done:true, t:'Переведите Instagram в Business или Creator', d:'IG → Настройки → Тип аккаунта → «Перейти на Business». Категорию выберите «Personal Blog».'},
      {done:true, t:'Свяжите IG с вашей FB Page', d:'IG → Настройки → Связанные аккаунты → Facebook → выберите Manya World.'},
      {done:false, t:'Ждём одобрения FB App Review', d:'Когда Meta даст добро по FB — IG подключится одной кнопкой здесь.', body:(
        <div style={{marginTop:10, display:'flex', alignItems:'center', gap:10, padding:'10px 12px', background:'var(--paper-soft)', border:'1px dashed var(--hairline-strong)'}}>
          <span style={{width:8, height:8, borderRadius:999, background:'var(--warning)'}}/>
          <span style={{fontSize:13, color:'var(--bark)'}}>статус FB · отправлено на ревью</span>
          <button className="btn btn-link" style={{marginLeft:'auto', fontSize:12}}>напомнить мне</button>
        </div>
      )},
    ]}
    sidebar={
      <aside>
        <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:10}}>что будет публиковаться</div>
        <div style={{border:'1px solid var(--hairline)', background:'#fff'}}>
          <div style={{padding:'10px 12px', borderBottom:'1px solid var(--hairline)', display:'flex', alignItems:'center', gap:8}}>
            <div style={{width:24, height:24, borderRadius:999, background:'var(--paper-deep)'}}/>
            <div className="mono" style={{fontSize:11, color:'var(--forest)'}}>manya.world</div>
          </div>
          <div className="img-ph" style={{height:230}}>фото · 1080 × 1080</div>
          <div style={{padding:'12px 14px', fontSize:12.5, color:'var(--forest)'}}>
            <strong style={{fontWeight:500}}>Маня смотрит дождь.</strong> Сегодня небо медленно опускалось на крыши — она сидела…
            <div className="mono" style={{marginTop:6, fontSize:10, color:'var(--bark-dim)'}}>#manyaworld #diary #cat</div>
          </div>
        </div>
        <div style={{marginTop:14, fontSize:12.5, color:'var(--bark)'}}>
          В IG идёт один квадрат + первая фотография поста. Остальное живёт на сайте.
        </div>
      </aside>
    }
  />
);

// ============================================================
// G.6 — Yandex Дзен
// ============================================================
const ScreenG6_Dzen = () => (
  <SubWizard
    step={7} label="яндекс дзен" num={6} total={6}
    title="Яндекс Дзен — Studio API"
    lede="Через Yandex ID + Studio API Bridge. Один экран авторизации — и Дзен начинает принимать ваши посты."
    steps={[
      {done:true, t:'Войдите через Yandex ID', d:'Стандартный OAuth: откроется паспорт Яндекса, вы соглашаетесь, возвращаетесь к нам.', body:(
        <div style={{marginTop:10, display:'flex', alignItems:'center', gap:10, padding:'10px 12px', background:'var(--moss-tint)', color:'#3F5639'}}>
          <I.Check size={14}/> авторизованы как ksu@yandex.ru
        </div>
      )},
      {done:true, t:'Подтвердите канал в Дзене', d:'Если канал уже создан — выберите его из списка. Если нет — мы создадим за вас.', body:(
        <div style={{marginTop:10, padding:'10px 12px', background:'var(--paper-soft)', border:'1px solid var(--hairline)'}}>
          <span style={{fontSize:13, color:'var(--forest)'}}>Канал: <strong style={{fontWeight:500}}>Manya World</strong></span>
          <span className="pill pill-moss" style={{marginLeft:10}}>подтверждён</span>
        </div>
      )},
      {done:true, t:'Готово', body:(
        <div style={{marginTop:10, padding:14, background:'var(--moss-tint)', color:'#3F5639', border:'1px solid #C2CEB8', fontSize:13}}>
          Подключение Дзена занимает 30 секунд. Этот шаг — обычно самый приятный 🌿
        </div>
      )},
    ]}
    sidebar={
      <aside>
        <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:10}}>как будет выглядеть в Дзене</div>
        <div style={{border:'1px solid var(--hairline)', background:'#fff', padding:14}}>
          <div className="img-ph" style={{height:140}}>фото обложки</div>
          <h4 style={{marginTop:12, fontSize:16, color:'var(--forest)', fontFamily:'var(--font-display)', fontWeight:500}}>Маня смотрит дождь</h4>
          <p className="reading" style={{marginTop:6, fontSize:13, color:'var(--bark)'}}>Сегодня небо медленно опускалось на крыши, и Маня сидела на подоконнике, разглядывая каждую…</p>
          <div className="mono" style={{marginTop:10, fontSize:10, color:'var(--bark-dim)'}}>Manya World · 4 мин</div>
        </div>
      </aside>
    }
  />
);

Object.assign(window, { ScreenG_Channels, ScreenG1_TgBot, ScreenG2_TgChannels, ScreenG3_VK, ScreenG4_FB, ScreenG5_IG, ScreenG6_Dzen });
