// Screens H, I, J, K, L: Languages, About, Composer, Preview, Publish animation

// ============================================================
// H. Languages
// ============================================================
const ScreenH_Languages = () => {
  const langs = [
    {code:'RU', name:'Русский', native:'основной', on:true, primary:true},
    {code:'EN', name:'English', native:'English', on:true},
    {code:'ES', name:'Español', native:'Español', on:true},
    {code:'ZH', name:'中文', native:'中文 (简体)', on:true},
    {code:'DE', name:'Deutsch', native:'Deutsch', on:false},
    {code:'FR', name:'Français', native:'Français', on:false},
  ];
  return (
    <div className="park" style={{display:'flex', flexDirection:'column'}}>
      <OnboardingTopbar step={8} total={18} stepLabel="языки"/>
      <div style={{padding:'32px 56px 24px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, flex:1}}>
        <div>
          <div className="eyebrow"><BotanicalMark size={14}/>шаг 08 / 18</div>
          <h2 style={{fontSize:30, marginTop:8}}>На каких языках выходит блог?</h2>
          <p style={{color:'var(--bark)', fontSize:14.5, marginTop:8, maxWidth:520}}>
            Один язык — основной (вы пишете на нём). Остальные — автоматический перевод
            через Claude. Каждый пост можно править перед отправкой.
          </p>

          <div style={{marginTop:28, display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
            {langs.map(l => (
              <div key={l.code} className={`chip ${l.on?'on':''}`} style={{justifyContent:'space-between', padding:'12px 14px', position:'relative'}}>
                <div style={{display:'flex', alignItems:'center', gap:10}}>
                  <span className="mono" style={{fontSize:11, color:'var(--bark-dim)', letterSpacing:'0.1em'}}>{l.code}</span>
                  <span style={{fontSize:14, color:'var(--forest)'}}>{l.name}</span>
                </div>
                {l.primary && <span className="pill pill-ochre">основной</span>}
                {l.on && !l.primary && <span style={{color:'var(--moss)'}}><I.Check size={14}/></span>}
                {!l.on && <span className="mono" style={{fontSize:10, color:'var(--bark-dim)'}}>+ добавить</span>}
              </div>
            ))}
          </div>

          <div style={{marginTop:28, padding:14, background:'var(--paper-soft)', border:'1px solid var(--hairline)', display:'flex', gap:12, fontSize:13, color:'var(--bark)'}}>
            <I.Eye size={16}/>
            <div>
              <strong style={{color:'var(--forest)', fontWeight:500}}>Как это будет видно читателю.</strong> На сайте появится тонкий переключатель в шапке. URL — <span className="mono">/en/</span>, <span className="mono">/es/</span>, <span className="mono">/zh/</span>.
              Telegram-каналы тоже разделены по языкам.
            </div>
          </div>
        </div>

        {/* Right preview — language switcher on the live site */}
        <div>
          <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:'16px 22px', borderBottom:'1px solid var(--hairline)', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:22, color:'var(--forest)'}}>Manya World</div>
              <div style={{display:'flex', gap:0, border:'1px solid var(--hairline-strong)'}}>
                {['RU','EN','ES','ZH'].map((c,i) => (
                  <button key={c} style={{padding:'4px 10px', border:0, background: i===0?'var(--forest-soft)':'#fff', color: i===0?'var(--paper)':'var(--bark)', fontSize:11, fontFamily:'var(--font-mono)', letterSpacing:'0.06em', borderLeft: i>0?'1px solid var(--hairline-strong)':'none'}}>{c}</button>
                ))}
              </div>
            </div>
            <div style={{padding:'22px 22px 26px'}}>
              <h3 className="reading" style={{fontFamily:'var(--font-reading)', fontStyle:'italic', fontSize:28, color:'var(--forest)', fontWeight:400}}>Маня смотрит дождь</h3>
              <div className="mono" style={{fontSize:11, color:'var(--bark-dim)', marginTop:6}}>22 мая · 4 мин</div>
              <p className="reading" style={{marginTop:14, fontSize:14, color:'var(--forest)', lineHeight:1.7}}>
                Сегодня небо медленно опускалось на крыши, и Маня сидела на подоконнике, разглядывая каждую каплю как посетителя…
              </p>
            </div>
          </div>
          {/* Comparative — EN version preview */}
          <div style={{marginTop:14, border:'1px solid var(--hairline)', background:'#fff', padding:'20px 22px', opacity:0.75}}>
            <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase'}}>EN preview</div>
            <h3 className="reading" style={{fontFamily:'var(--font-reading)', fontStyle:'italic', fontSize:24, color:'var(--forest)', fontWeight:400, marginTop:6}}>Manya watches the rain</h3>
            <p className="reading" style={{marginTop:10, fontSize:13.5, color:'var(--bark)'}}>The sky was slowly settling onto the rooftops today, and Manya sat by the windowsill…</p>
          </div>
        </div>
      </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>
        <button className="btn btn-primary">Дальше → about <I.Arrow size={14}/></button>
      </div>
      <AssistantFab/>
    </div>
  );
};

// ============================================================
// I. About page
// ============================================================
const ScreenI_About = () => (
  <div className="park" style={{display:'flex', flexDirection:'column'}}>
    <OnboardingTopbar step={9} total={18} stepLabel="страница «обо мне»"/>
    <div style={{padding:'24px 56px 0', display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
      <div>
        <div className="eyebrow"><BotanicalMark size={14}/>шаг 09 / 18</div>
        <h2 style={{fontSize:28, marginTop:6}}>Страница «Обо мне»</h2>
        <p style={{color:'var(--bark)', fontSize:14, marginTop:4, maxWidth:520}}>
          Claude собрал черновик из брифа. Можно править прямо здесь — справа подсказки.
        </p>
      </div>
      <div style={{display:'flex', gap:10}}>
        <button className="btn btn-ghost"><I.Spark size={14}/> Перегенерировать</button>
        <button className="btn btn-ghost">Предпросмотр</button>
      </div>
    </div>

    <div style={{padding:'24px 56px 24px', display:'grid', gridTemplateColumns:'1.4fr 0.6fr', gap:32, flex:1}}>
      {/* Editor */}
      <div style={{background:'#fff', border:'1px solid var(--hairline)', overflow:'hidden'}}>
        <div style={{padding:'8px 14px', borderBottom:'1px solid var(--hairline)', display:'flex', alignItems:'center', gap:10, background:'var(--paper-soft)'}}>
          <span className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.12em'}}>about / редактор</span>
          <div style={{flex:1}}/>
          <button className="btn btn-link" style={{fontSize:11}}>H1</button>
          <button className="btn btn-link" style={{fontSize:11}}>H2</button>
          <button className="btn btn-link" style={{fontSize:11}}>B</button>
          <button className="btn btn-link" style={{fontSize:11, fontStyle:'italic'}}>i</button>
          <button className="btn btn-link" style={{fontSize:11}}>—</button>
          <button className="btn btn-link" style={{fontSize:11}}>link</button>
        </div>
        <div style={{padding:'32px 56px', maxWidth:680, margin:'0 auto'}}>
          <h1 className="reading" style={{fontFamily:'var(--font-reading)', fontStyle:'italic', fontSize:36, color:'var(--forest)', fontWeight:400}}>Привет, я Ксюша.</h1>
          <p className="reading" style={{fontFamily:'var(--font-reading)', marginTop:18, fontSize:16, lineHeight:1.7, color:'var(--forest)'}}>
            Этот сайт — дневник про мою кошку Маню. Я завела его, чтобы не складывать
            наблюдения в стол, а делиться ими — с теми, кто читает на русском и
            английском, кому интересно про кошек, окна, дожди, домашние ритуалы.
          </p>
          <p className="reading" style={{fontFamily:'var(--font-reading)', marginTop:14, fontSize:16, lineHeight:1.7, color:'var(--forest)'}}>
            Пишу примерно раз в неделю — короткими заметками, иногда длинными.
            Фото — мои, кадры из дома. Иногда видео.
          </p>
          <p className="reading" style={{fontFamily:'var(--font-reading)', marginTop:14, fontSize:16, lineHeight:1.7, color:'var(--bark)', fontStyle:'italic'}}>
            <span style={{background:'rgba(212,165,92,0.18)', padding:'0 4px'}}>Маня предпочитает солнечные подоконники, шорох пакетов и тихие комнаты.</span>
          </p>
          <div style={{marginTop:24, paddingTop:18, borderTop:'1px solid var(--hairline)'}}>
            <div className="mono" style={{fontSize:11, color:'var(--bark-dim)', letterSpacing:'0.1em', textTransform:'uppercase'}}>контакты</div>
            <p className="reading" style={{marginTop:8, fontSize:15, color:'var(--forest)'}}>
              Telegram · <a style={{color:'var(--forest-soft)', textDecoration:'underline', textUnderlineOffset:3, textDecorationColor:'var(--hairline-strong)'}}>@ksuvision</a><br/>
              Почта · <a style={{color:'var(--forest-soft)', textDecoration:'underline', textUnderlineOffset:3, textDecorationColor:'var(--hairline-strong)'}}>hello@manya.world</a>
            </p>
          </div>
        </div>
      </div>

      {/* Sidebar — suggestions */}
      <aside>
        <div className="eyebrow" style={{marginBottom:12}}><I.Spark size={14} color="var(--moss)"/>подсказки</div>
        <div style={{display:'flex', flexDirection:'column', gap:10}}>
          {[
            {t:'Добавьте короткое био', d:'Пара предложений «кто я и почему пишу про Маню». Сейчас неплохо, но абстрактно.', done:false},
            {t:'Дайте ссылку на ваш Telegram', d:'Читатели смогут написать вам напрямую.', done:true},
            {t:'Ссылка на VK / Instagram', d:'Если завели — добавьте в блок «контакты».', done:false},
            {t:'Фотография — ваше лицо', d:'Не обязательно, но добавит тепла.', done:false},
            {t:'История блога в одной фразе', d:'«Завела дневник, чтобы…» — это часто читают.', done:false},
          ].map((s,i) => (
            <div key={i} style={{padding:'12px 14px', background:'var(--paper-soft)', border:'1px solid var(--hairline)', display:'grid', gridTemplateColumns:'18px 1fr', gap:10}}>
              <div className={`check ${s.done?'on':''}`}>{s.done && <I.Check size={10}/>}</div>
              <div>
                <div style={{fontSize:13.5, color:'var(--forest)', fontWeight:500}}>{s.t}</div>
                <div style={{fontSize:12, color:'var(--bark)', marginTop:4}}>{s.d}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{marginTop:18, padding:14, background:'var(--ochre-tint)', border:'1px solid var(--ochre-dim)', fontSize:12.5, color:'#5F4A1A'}}>
          <strong style={{fontWeight:500}}>Совет.</strong> «Обо мне» — самая часто-открываемая страница после главной. Один абзац о вас живой важнее, чем три абзаца про блог.
        </div>
      </aside>
    </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>
      <button className="btn btn-primary">Дальше → первый пост <I.Arrow size={14}/></button>
    </div>
    <AssistantFab/>
  </div>
);

// ============================================================
// J. First post — composer
// ============================================================
const ScreenJ_Composer = () => (
  <div className="park" style={{display:'flex', flexDirection:'column'}}>
    <OnboardingTopbar step={10} total={18} stepLabel="первый пост"/>
    <div style={{padding:'18px 56px 0', display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
      <div>
        <div className="eyebrow"><BotanicalMark size={14}/>шаг 10 / 18</div>
        <h2 style={{fontSize:28, marginTop:6}}>Ваш первый пост.</h2>
        <p style={{color:'var(--bark)', fontSize:14, marginTop:4, maxWidth:560}}>
          Это репетиция. Можно написать что угодно — главное один раз прогнать пайплайн.
          Опубликуем по-настоящему или сохраним в черновики.
        </p>
      </div>
      <div className="step" style={{gap:14}}>
        <span className="step-done"><I.Check size={12}/> сайт собран</span>
        <span style={{color:'var(--hairline-strong)'}}>·</span>
        <span className="step-done"><I.Check size={12}/> бот подключён</span>
        <span style={{color:'var(--hairline-strong)'}}>·</span>
        <span className="step-active">пишем пост</span>
      </div>
    </div>

    <div style={{padding:'18px 56px 24px', display:'grid', gridTemplateColumns:'1.45fr 0.55fr', gap:32, flex:1, minHeight:0}}>
      {/* Editor */}
      <div style={{background:'#fff', border:'1px solid var(--hairline)', display:'flex', flexDirection:'column'}}>
        <div style={{padding:'8px 14px', borderBottom:'1px solid var(--hairline)', display:'flex', alignItems:'center', gap:10, background:'var(--paper-soft)'}}>
          <span className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.12em'}}>composer / черновик</span>
          <div style={{flex:1}}/>
          <button className="btn btn-link" style={{fontSize:11}}>заметка</button>
          <span style={{color:'var(--hairline-strong)'}}>·</span>
          <button className="btn btn-link" style={{fontSize:11, color:'var(--forest)', textDecorationColor:'var(--forest)'}}>статья</button>
          <span style={{color:'var(--hairline-strong)'}}>·</span>
          <button className="btn btn-link" style={{fontSize:11}}>фото-пост</button>
        </div>
        <div style={{flex:1, padding:'36px 64px', overflow:'auto'}}>
          <input
            placeholder="Заголовок…"
            defaultValue="Маня смотрит дождь"
            style={{
              width:'100%', border:0, outline:0, background:'transparent',
              fontFamily:'var(--font-reading)', fontStyle:'italic', fontWeight:400,
              fontSize:38, color:'var(--forest)',
            }}
          />
          <div className="mono" style={{fontSize:11, color:'var(--bark-dim)', marginTop:6, letterSpacing:'0.06em'}}>22 мая · черновик · 4 мин чтения</div>

          {/* drop zone for photo */}
          <div className="dz" style={{height:170, marginTop:22}}>перетащите фото сюда · jpg, png, до 8 mb</div>

          <textarea
            style={{
              width:'100%', border:0, outline:0, background:'transparent',
              fontFamily:'var(--font-reading)', fontSize:17, color:'var(--forest)',
              lineHeight:1.75, resize:'none', marginTop:22, height:240,
            }}
            defaultValue={
`Сегодня небо медленно опускалось на крыши, и Маня сидела на подоконнике, разглядывая каждую каплю как посетителя. Иногда она оборачивалась — проверить, тут ли я. Я была тут.

Снаружи начался дождь, который кошки слышат раньше людей. Маня закрывает глаза и слушает.

Я завариваю чай и пишу это.`
            }
          />
        </div>
        <div style={{padding:'10px 22px', borderTop:'1px solid var(--hairline)', background:'var(--paper-soft)', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div className="mono" style={{fontSize:11, color:'var(--bark-dim)'}}>87 слов · автосохранение · 12 сек назад</div>
          <div style={{display:'flex', gap:8}}>
            <button className="btn btn-ghost">Сохранить черновик</button>
            <button className="btn btn-primary">Предпросмотр <I.Arrow size={14}/></button>
          </div>
        </div>
      </div>

      {/* Right — "Claude рядом" */}
      <aside style={{display:'flex', flexDirection:'column', gap:18}}>
        <div className="card" style={{padding:16}}>
          <div className="eyebrow"><I.Spark size={14} color="var(--moss)"/>claude рядом</div>
          <p style={{marginTop:10, fontSize:13, color:'var(--bark)', lineHeight:1.55, fontStyle:'italic', fontFamily:'var(--font-display)'}}>
            «Заметка. Тёплый тон, короткая. Хорошо заходит первой публикацией.»
          </p>
        </div>

        <div className="card" style={{padding:16}}>
          <div className="eyebrow" style={{marginBottom:10}}>переводы</div>
          {[
            {l:'RU', s:'оригинал', kind:'moss', icon:<I.Check size={10}/>},
            {l:'EN', s:'готов · 87 слов', kind:'moss', icon:<I.Check size={10}/>},
            {l:'ES', s:'переводится…', kind:'warning', icon:null},
            {l:'ZH', s:'в очереди', kind:'muted', icon:null},
          ].map(t => (
            <div key={t.l} style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'8px 0', borderTop: t.l==='RU'?'none':'1px solid var(--hairline)'}}>
              <span style={{display:'flex', alignItems:'center', gap:8, fontSize:13, color:'var(--forest)'}}>
                <span className="mono" style={{fontSize:11, color:'var(--bark-dim)', width:24}}>{t.l}</span>
                {t.s}
              </span>
              <span className={`pill pill-${t.kind}`}>{t.icon}{t.l==='RU'?'основной':t.kind==='moss'?'готов':t.kind==='warning'?'ждём':'позже'}</span>
            </div>
          ))}
        </div>

        <div className="card" style={{padding:16}}>
          <div className="eyebrow" style={{marginBottom:10}}>куда полетит</div>
          {[
            {n:'свой сайт · manya.world', ok:true},
            {n:'TG · @manyaworld (RU)', ok:true},
            {n:'TG · @manyaworld_en (EN)', ok:true},
            {n:'VK · Маня · Дневник', ok:true},
            {n:'FB Page', ok:false, w:'ждёт ревью'},
            {n:'Instagram', ok:false, w:'через FB'},
            {n:'Яндекс Дзен', ok:true},
          ].map((c,i)=>(
            <div key={i} style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'7px 0', borderTop: i===0?'none':'1px solid var(--hairline)'}}>
              <span style={{display:'flex', alignItems:'center', gap:8, fontSize:13, color: c.ok?'var(--forest)':'var(--bark)'}}>
                <span style={{width:6, height:6, borderRadius:999, background: c.ok?'var(--moss)':'var(--warning)'}}/>
                {c.n}
              </span>
              {!c.ok && <span className="mono" style={{fontSize:10, color:'var(--bark-dim)'}}>{c.w}</span>}
            </div>
          ))}
        </div>

        <div style={{padding:14, background:'var(--ochre-tint)', border:'1px solid var(--ochre-dim)', fontSize:12.5, color:'#5F4A1A'}}>
          <div className="eyebrow" style={{color:'#6F571B'}}><BotanicalMark size={12} color="#6F571B"/>совет</div>
          <p style={{marginTop:6, lineHeight:1.6}}>Первый абзац — самый важный. В TG-канале читатель видит его в превью без раскрытия.</p>
        </div>
      </aside>
    </div>
    <AssistantFab/>
  </div>
);

// ============================================================
// K. Preview — tabs per channel
// ============================================================
const ScreenK_Preview = () => {
  const tabs = ['На сайте','TG · RU','TG · EN','VK','FB Page','Instagram'];
  return (
    <div className="park" style={{display:'flex', flexDirection:'column'}}>
      <OnboardingTopbar step={11} total={18} stepLabel="предпросмотр"/>
      <div style={{padding:'24px 56px 0'}}>
        <div className="eyebrow"><BotanicalMark size={14}/>шаг 11 / 18</div>
        <h2 style={{fontSize:28, marginTop:6}}>Как это будет выглядеть.</h2>
        <p style={{color:'var(--bark)', fontSize:14, marginTop:4}}>
          Каждый канал рендерит пост по-своему. Полистайте табы — если что-то выглядит не так, вернитесь и поправьте.
        </p>
      </div>

      {/* tabs */}
      <div style={{padding:'24px 56px 0', borderBottom:'1px solid var(--hairline)', display:'flex', gap:0}}>
        {tabs.map((t,i) => (
          <button key={t} style={{
            padding:'12px 18px', border:0, background:'transparent',
            borderBottom: i===0 ? '2px solid var(--ochre)' : '2px solid transparent',
            color: i===0 ? 'var(--forest)' : 'var(--bark)',
            fontSize:13, fontWeight: i===0?500:400, cursor:'pointer',
            marginBottom:-1,
          }}>{t}</button>
        ))}
      </div>

      {/* preview area — show site + IG side-by-side as composite for the master frame */}
      <div style={{padding:'24px 56px 24px', display:'grid', gridTemplateColumns:'1.2fr 0.8fr', gap:24, flex:1, minHeight:0, overflow:'auto'}}>
        {/* site preview (main) */}
        <div>
          <MockServiceFrame title="на сайте" host="manya.world/posts/manya-smotrit-dozhd" height={620}>
            <div style={{padding:'18px 28px 28px'}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
                <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:16, color:'var(--forest)'}}>Manya World</div>
                <div style={{display:'flex', gap:0, border:'1px solid var(--hairline-strong)'}}>
                  {['RU','EN','ES','ZH'].map((c,i) => (
                    <span key={c} style={{padding:'2px 8px', fontSize:9.5, fontFamily:'var(--font-mono)', color: i===0?'var(--paper)':'var(--bark)', background: i===0?'var(--forest-soft)':'#fff', borderLeft: i>0?'1px solid var(--hairline-strong)':'none'}}>{c}</span>
                  ))}
                </div>
              </div>
              <div style={{height:1, background:'var(--hairline)', marginBottom:18}}/>
              <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.16em', textTransform:'uppercase'}}>22 мая · заметка</div>
              <h1 className="reading" style={{fontFamily:'var(--font-reading)', fontStyle:'italic', fontSize:34, color:'var(--forest)', fontWeight:400, marginTop:10, lineHeight:1.1}}>Маня смотрит дождь</h1>
              <div className="img-ph" style={{height:220, marginTop:18}}>фото · маня у окна</div>
              <p className="reading" style={{marginTop:14, fontSize:14.5, color:'var(--forest)', lineHeight:1.75}}>
                Сегодня небо медленно опускалось на крыши, и Маня сидела на подоконнике,
                разглядывая каждую каплю как посетителя. Иногда она оборачивалась —
                проверить, тут ли я. Я была тут.
              </p>
              <p className="reading" style={{marginTop:12, fontSize:14.5, color:'var(--forest)', lineHeight:1.75}}>
                Снаружи начался дождь, который кошки слышат раньше людей. Маня
                закрывает глаза и слушает.
              </p>
              <div style={{marginTop:20, paddingTop:16, borderTop:'1px solid var(--hairline)', display:'flex', justifyContent:'space-between', color:'var(--bark)', fontSize:12}}>
                <span>← все записи</span>
                <span>следующая →</span>
              </div>
            </div>
          </MockServiceFrame>
        </div>

        {/* side-by-side channel previews */}
        <div style={{display:'flex', flexDirection:'column', gap:14}}>
          <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase'}}>остальные каналы</div>

          {/* TG */}
          <MockServiceFrame title="TG · RU" host="t.me/manyaworld" height={170}>
            <div style={{background:'#F1ECDC', border:'1px solid var(--hairline)', padding:10, fontSize:12}}>
              <div className="img-ph" style={{height:80, marginBottom:8}}>фото · превью</div>
              <strong style={{fontWeight:500, color:'var(--forest)'}}>Маня смотрит дождь</strong>
              <p style={{marginTop:4, color:'var(--bark)'}}>Сегодня небо медленно опускалось на крыши, и Маня сидела на подоконнике…</p>
              <div className="mono" style={{marginTop:6, fontSize:10, color:'var(--bark-dim)'}}>22 мая · читать на сайте →</div>
            </div>
          </MockServiceFrame>

          {/* VK */}
          <MockServiceFrame title="ВК · группа" host="vk.com/manya.diary" height={150}>
            <div style={{display:'flex', gap:10, alignItems:'flex-start'}}>
              <div className="img-ph" style={{width:80, height:80, flex:'0 0 80px'}}>фото</div>
              <div style={{fontSize:12}}>
                <strong style={{fontWeight:500, color:'var(--forest)'}}>Маня смотрит дождь</strong>
                <p style={{marginTop:4, color:'var(--bark)'}}>Сегодня небо медленно опускалось на крыши, и Маня сидела на подоконнике, разглядывая каждую каплю как посетителя…</p>
                <div className="mono" style={{marginTop:6, fontSize:10, color:'var(--bark-dim)'}}>читать полностью →</div>
              </div>
            </div>
          </MockServiceFrame>

          {/* IG */}
          <MockServiceFrame title="Instagram" host="instagram.com/manya.world" height={210}>
            <div className="img-ph" style={{aspectRatio:'1', height:120}}>квадрат · фото</div>
            <div style={{marginTop:8, fontSize:12, color:'var(--forest)'}}>
              <strong style={{fontWeight:500}}>manya.world</strong> Маня смотрит дождь. Сегодня небо медленно опускалось на крыши…
              <div className="mono" style={{marginTop:4, fontSize:10, color:'var(--bark-dim)'}}>#manyaworld #diary #cat</div>
            </div>
          </MockServiceFrame>
        </div>
      </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.Arrow size={14}/></button>
        </div>
      </div>
      <AssistantFab/>
    </div>
  );
};

// ============================================================
// L. Publish — animated pipeline
// ============================================================
const ScreenL_Publish = () => {
  const groups = [
    {
      label:'переводы',
      time:'12 сек',
      items:[
        {t:'Перевод EN', state:'done', detail:'87 → 91 слов'},
        {t:'Перевод ES', state:'done', detail:'87 → 88 слов'},
        {t:'Перевод ZH', state:'active', detail:'формируется…'},
      ],
    },
    {
      label:'сайт',
      time:'37 сек',
      items:[
        {t:'Сборка сайта', state:'pending'},
        {t:'Выкладываем на Cloudflare Pages', state:'pending'},
      ],
    },
    {
      label:'telegram',
      time:'4 сек',
      items:[
        {t:'Telegram · RU', state:'pending'},
        {t:'Telegram · EN', state:'pending'},
        {t:'Telegram · ES', state:'pending'},
        {t:'Telegram · ZH', state:'pending'},
      ],
    },
    {
      label:'другие каналы',
      time:'5 сек',
      items:[
        {t:'VK', state:'pending'},
        {t:'Facebook', state:'pending', skip:true, detail:'пропущен · ждёт ревью'},
        {t:'Instagram', state:'pending', skip:true, detail:'пропущен · через FB'},
        {t:'Яндекс Дзен', state:'pending'},
      ],
    },
  ];
  return (
    <div className="park" style={{display:'flex', flexDirection:'column'}}>
      <OnboardingTopbar step={12} total={18} stepLabel="публикуем"/>
      <div style={{padding:'40px 56px 24px', display:'grid', gridTemplateColumns:'1.05fr 1fr', gap:48, flex:1, minHeight:0}}>
        <div>
          <div className="eyebrow"><BotanicalMark size={14}/>шаг 12 / 18 · занимает около 100 сек</div>
          <h2 style={{fontSize:34, marginTop:10}}>Высаживаем.</h2>
          <p className="serif italic" style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:18, color:'var(--bark)', marginTop:10, maxWidth:520}}>
            «Переводы → сайт → каналы. Всё параллельно, но мы показываем по порядку, чтобы вы видели жизнь.»
          </p>

          {/* large progress */}
          <div style={{marginTop:36, display:'flex', alignItems:'baseline', gap:14}}>
            <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:88, color:'var(--ochre)', lineHeight:1}}>23<span style={{fontSize:36, color:'var(--bark-dim)'}}>%</span></div>
            <div className="mono" style={{fontSize:12, color:'var(--bark)'}}>23 / 100 сек · этап: переводы</div>
          </div>
          <div style={{marginTop:14, height:3, background:'var(--paper-deep)', position:'relative', maxWidth:520}}>
            <div style={{position:'absolute', left:0, top:0, height:3, width:'23%', background:'var(--ochre)'}}/>
            {[12,49,53,58].map((p,i) => (
              <div key={i} style={{position:'absolute', left:`${p}%`, top:-2, width:1, height:7, background:'var(--hairline-strong)'}}/>
            ))}
          </div>
          <div style={{display:'flex', justifyContent:'space-between', marginTop:8, fontFamily:'var(--font-mono)', fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.06em', maxWidth:520}}>
            <span>0</span><span>переводы</span><span>сайт</span><span>tg</span><span>прочие</span><span>100</span>
          </div>

          {/* small "now playing" */}
          <div style={{marginTop:38, padding:'14px 16px', background:'var(--paper-soft)', border:'1px solid var(--hairline)', display:'flex', alignItems:'center', gap:14, maxWidth:520}}>
            <div style={{width:30, height:30, borderRadius:999, border:'2px solid var(--ochre)', borderTopColor:'transparent', animation:'spin 1s linear infinite'}}/>
            <div>
              <div style={{fontSize:14, color:'var(--forest)'}}>Перевод на 中文…</div>
              <div className="mono" style={{fontSize:11, color:'var(--bark-dim)', marginTop:2}}>осталось ~ 3 сек</div>
            </div>
          </div>
          <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
        </div>

        {/* Right column — itemised log */}
        <aside style={{display:'flex', flexDirection:'column', gap:18, overflow:'auto', paddingRight:8}}>
          {groups.map(g => (
            <div key={g.label}>
              <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8}}>
                <div className="eyebrow">{g.label}</div>
                <span className="mono" style={{fontSize:10, color:'var(--bark-dim)'}}>{g.time}</span>
              </div>
              <ul style={{listStyle:'none', padding:0, margin:0, background:'var(--paper-soft)', border:'1px solid var(--hairline)'}}>
                {g.items.map((it,i) => (
                  <li key={i} style={{display:'flex', alignItems:'center', gap:12, padding:'10px 14px', borderTop: i===0?'none':'1px solid var(--hairline)'}}>
                    {it.state === 'done' && <span style={{width:18, height:18, borderRadius:999, background:'var(--moss)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}><I.Check size={11}/></span>}
                    {it.state === 'active' && <span style={{width:18, height:18, borderRadius:999, border:'2px solid var(--ochre)', borderTopColor:'transparent', animation:'spin 1s linear infinite'}}/>}
                    {it.state === 'pending' && !it.skip && <span style={{width:18, height:18, borderRadius:999, border:'1.5px dashed var(--hairline-strong)'}}/>}
                    {it.state === 'pending' && it.skip && <span style={{width:18, height:18, borderRadius:999, border:'1.5px dashed var(--hairline-strong)', color:'var(--bark-dim)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:10}}>—</span>}
                    <span style={{flex:1, fontSize:13.5, color: it.skip ? 'var(--bark-dim)' : it.state==='pending' ? 'var(--bark)' : 'var(--forest)'}}>{it.t}</span>
                    {it.detail && <span className="mono" style={{fontSize:10.5, color:'var(--bark-dim)'}}>{it.detail}</span>}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </aside>
      </div>
    </div>
  );
};

// L (completed state) — final "готово" screen
const ScreenL_PublishDone = () => (
  <div className="park" style={{display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', textAlign:'center', padding:'60px'}}>
    <OnboardingTopbar step={12} total={18} stepLabel="опубликовано"/>
    <div style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', maxWidth:760}}>
      <BotanicalMark size={64} color="var(--moss)"/>
      <h1 style={{fontSize:64, marginTop:18, lineHeight:1.05}}>Готово.</h1>
      <p className="serif italic" style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:22, color:'var(--bark)', marginTop:14, maxWidth:580}}>
        «Маня смотрит дождь» — теперь живёт на manya.world и улетел в шесть каналов за 96 секунд.
      </p>

      <div style={{marginTop:36, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, width:'100%', maxWidth:720}}>
        {[
          {l:'сайт', v:'manya.world'},
          {l:'telegram', v:'4 канала'},
          {l:'вк', v:'опубликовано'},
          {l:'дзен', v:'опубликовано'},
        ].map(s => (
          <div key={s.l} style={{padding:14, background:'var(--paper-soft)', border:'1px solid var(--hairline)', textAlign:'left'}}>
            <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase'}}>{s.l}</div>
            <div style={{marginTop:6, fontSize:14, color:'var(--forest)'}}>{s.v} <I.Check size={12} color="var(--moss)"/></div>
          </div>
        ))}
      </div>

      <div style={{marginTop:36, display:'flex', gap:12}}>
        <button className="btn btn-primary"><I.Globe size={14}/> Открыть manya.world</button>
        <button className="btn btn-ghost">В дашборд</button>
        <button className="btn btn-link">Поделиться ссылкой</button>
      </div>
    </div>
  </div>
);

Object.assign(window, { ScreenH_Languages, ScreenI_About, ScreenJ_Composer, ScreenK_Preview, ScreenL_Publish, ScreenL_PublishDone });