// Screens A–F: Landing, Sign-up, Brief, Brand, Domain, Hero photo

// ============================================================
// A. Landing — public marketing page
// ============================================================
const ScreenA_Landing = () => (
  <div className="park" style={{overflow:'auto'}}>
    <PaperGrain/>
    {/* Top nav */}
    <div style={{height:64, borderBottom:'1px solid var(--hairline)', display:'flex', alignItems:'center', justifyContent:'space-between', padding:'0 56px', position:'relative', zIndex:1}}>
      <div style={{display:'flex', alignItems:'center', gap:10}}>
        <BotanicalMark size={20} color="var(--forest)"/>
        <span style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:20, color:'var(--forest)'}}>Парник</span>
        <span className="tag" style={{marginLeft:8}}>blogging · sitefarm</span>
      </div>
      <nav style={{display:'flex', gap:28, fontSize:14, color:'var(--bark)'}}>
        <a>как это работает</a>
        <a>каналы</a>
        <a>примеры</a>
        <a>цена</a>
        <a>другие продукты</a>
      </nav>
      <div style={{display:'flex', gap:10, alignItems:'center'}}>
        <button className="btn btn-link">Войти</button>
        <button className="btn btn-primary">Начать <I.Arrow size={14}/></button>
      </div>
    </div>

    {/* Hero */}
    <section style={{padding:'80px 56px 60px', position:'relative', zIndex:1}}>
      <div style={{display:'grid', gridTemplateColumns:'1.05fr .95fr', gap:56, alignItems:'center'}}>
        <div>
          <div className="eyebrow" style={{marginBottom:18}}>
            <BotanicalMark size={14} color="var(--moss)"/>
            <span>Sitefarm · продукт №2</span>
          </div>
          <h1 style={{fontSize:64, lineHeight:1.02, letterSpacing:'-0.02em', color:'var(--forest)'}}>
            Дневник на свой<br/>домен <span style={{fontStyle:'italic', color:'var(--forest-soft)'}}>за один вечер.</span>
          </h1>
          <p style={{marginTop:22, fontSize:17, lineHeight:1.55, color:'var(--bark)', maxWidth:560}}>
            Свой сайт, четыре языка, посты разлетаются в Telegram, VK, Facebook,
            Instagram и Дзен — одним сообщением в&nbsp;ваш собственный бот.
          </p>
          <div style={{marginTop:32, display:'flex', gap:12, alignItems:'center'}}>
            <button className="btn btn-primary" style={{padding:'14px 22px', fontSize:15}}>
              Завести дневник <I.Arrow/>
            </button>
            <button className="btn btn-ghost" style={{padding:'14px 18px'}}>Посмотреть пример — manya.world</button>
          </div>
          <div style={{marginTop:28, display:'flex', gap:24, color:'var(--bark)', fontSize:12, fontFamily:'var(--font-mono)', letterSpacing:'0.06em'}}>
            <span>· один вход через telegram</span>
            <span>· без кода</span>
            <span>· ваш домен или trial</span>
          </div>
        </div>

        {/* Hero illustration — herbarium-style card layout */}
        <div style={{position:'relative', height:520}}>
          {/* Browser mock with manya.world */}
          <div style={{position:'absolute', top:0, right:0, width:480, background:'#fff', border:'1px solid var(--hairline-strong)', boxShadow:'var(--shadow-soft)'}}>
            <div style={{height:28, borderBottom:'1px solid var(--hairline)', background:'var(--paper-deep)', display:'flex', alignItems:'center', padding:'0 10px', gap:6}}>
              <span style={{display:'inline-flex', gap:4}}>
                <span style={{width:8,height:8,borderRadius:999,background:'#d3cdb6'}}/>
                <span style={{width:8,height:8,borderRadius:999,background:'#d3cdb6'}}/>
                <span style={{width:8,height:8,borderRadius:999,background:'#d3cdb6'}}/>
              </span>
              <span className="mono" style={{fontSize:11, color:'var(--bark)'}}>manya.world</span>
            </div>
            <div style={{padding:'32px 32px 28px'}}>
              <div className="eyebrow" style={{color:'var(--bark-dim)', marginBottom:12, fontSize:10}}>дневник · ru en es zh</div>
              <h2 className="serif italic" style={{fontFamily:'var(--font-reading)', fontSize:28, color:'var(--forest)', fontStyle:'italic', fontWeight:400}}>Маня смотрит дождь</h2>
              <div className="mono" style={{fontSize:11, color:'var(--bark-dim)', marginTop:6}}>22 мая · 4 мин</div>
              <div className="img-ph" style={{height:160, marginTop:18}}>фото · maня у окна</div>
              <p className="reading" style={{marginTop:14, fontSize:14, color:'var(--forest)', lineHeight:1.65}}>
                Сегодня небо медленно опускалось на крыши, и Маня
                сидела на подоконнике, разглядывая каждую каплю как
                посетителя…
              </p>
            </div>
          </div>
          {/* Telegram bot mock — overlapping bottom left */}
          <div style={{position:'absolute', bottom:0, left:0, width:280, background:'var(--paper-soft)', border:'1px solid var(--hairline-strong)', padding:18, boxShadow:'var(--shadow-soft)'}}>
            <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:12}}>
              <div style={{width:28, height:28, borderRadius:999, background:'var(--moss-tint)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--moss)'}}><I.Telegram size={14}/></div>
              <div>
                <div style={{fontSize:13, color:'var(--forest)'}}>@manya_world_bot</div>
                <div className="mono" style={{fontSize:10, color:'var(--bark-dim)'}}>ваш персональный композер</div>
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:6}}>
              <div style={{alignSelf:'flex-end', background:'var(--ochre-tint)', padding:'7px 10px', fontSize:12, maxWidth:'80%', borderRadius:'8px 8px 2px 8px'}}>Сегодня Маня смотрела дождь.</div>
              <div style={{alignSelf:'flex-start', background:'#fff', padding:'7px 10px', fontSize:12, border:'1px solid var(--hairline)', borderRadius:'2px 8px 8px 8px'}}>Заметка? RU + 3 перевода + 6 каналов?</div>
              <div style={{alignSelf:'flex-end', background:'var(--moss-tint)', padding:'7px 10px', fontSize:12, borderRadius:'8px 8px 2px 8px'}}>Да 🌱</div>
            </div>
          </div>
          {/* Herbarium tag */}
          <div style={{position:'absolute', top:-8, left:60, transform:'rotate(-4deg)', background:'#fff', border:'1px solid var(--hairline-strong)', padding:'8px 14px'}}>
            <div className="mono" style={{fontSize:10, color:'var(--bark)', letterSpacing:'0.14em'}}>SP. № 0042</div>
            <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:15, color:'var(--forest-soft)'}}>Manya · domestica</div>
          </div>
        </div>
      </div>
    </section>

    {/* Three features with serif numerals */}
    <section style={{padding:'40px 56px 80px', position:'relative', zIndex:1}}>
      <div className="rule" style={{marginBottom:48}}>
        <span className="mono" style={{fontSize:11, letterSpacing:'0.2em'}}>что внутри</span>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:48}}>
        {[
          {n:'01', t:'Свой сайт, без кода', d:'Поговорите с Claude о вашем блоге — он соберёт первый макет: имя, палитру, шрифты, обложку. Меняйте всё в один клик.'},
          {n:'02', t:'Один бот, все каналы', d:'Заводите своего Telegram-бота — он становится единой точкой для постов в TG, VK, FB, IG и Дзен. Без диспетчерских.'},
          {n:'03', t:'Четыре языка автоматически', d:'Пишете на русском — публикуется на RU, EN, ES, ZH одновременно. Переводы редактируются перед отправкой.'},
        ].map(f => (
          <div key={f.n}>
            <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:52, color:'var(--ochre)', lineHeight:1, marginBottom:6}}>{f.n}</div>
            <div style={{height:1, background:'var(--hairline)', marginBottom:18}}/>
            <h3 style={{fontSize:22, marginBottom:10}}>{f.t}</h3>
            <p style={{fontSize:14.5, color:'var(--bark)', lineHeight:1.6}}>{f.d}</p>
          </div>
        ))}
      </div>
    </section>

    {/* Strip with channel list */}
    <section style={{padding:'40px 56px', borderTop:'1px solid var(--hairline)', borderBottom:'1px solid var(--hairline)', background:'var(--paper-soft)'}}>
      <div style={{display:'flex', alignItems:'center', gap:36, flexWrap:'wrap'}}>
        <span className="eyebrow">публикуется в:</span>
        {['Свой сайт','Telegram · RU','Telegram · EN','Telegram · ES','Telegram · ZH','ВКонтакте','Facebook Page','Instagram','Яндекс Дзен'].map(c => (
          <span key={c} style={{fontSize:14, color:'var(--forest-soft)', fontFamily:'var(--font-display)'}}>{c}</span>
        ))}
      </div>
    </section>

    {/* Final CTA */}
    <section style={{padding:'80px 56px 100px', textAlign:'center'}}>
      <BotanicalMark size={28} color="var(--moss)"/>
      <h2 style={{fontSize:44, marginTop:14, color:'var(--forest)'}}>
        Заведите ваш дневник <span style={{fontStyle:'italic'}}>сегодня вечером.</span>
      </h2>
      <p style={{marginTop:14, color:'var(--bark)', fontSize:15.5, maxWidth:560, margin:'14px auto 0'}}>
        18 коротких шагов. Около часа времени. На выходе — настоящий сайт на вашем
        домене и связка из шести каналов, в которые отправляется один пост.
      </p>
      <div style={{marginTop:28, display:'flex', justifyContent:'center', gap:12}}>
        <button className="btn btn-primary" style={{padding:'14px 24px'}}>Начать <I.Arrow/></button>
      </div>
    </section>

    {/* Footer */}
    <footer style={{padding:'28px 56px', borderTop:'1px solid var(--hairline)', display:'flex', justifyContent:'space-between', color:'var(--bark)', fontSize:12, fontFamily:'var(--font-mono)'}}>
      <span>© sitefarm · парник · v0.4</span>
      <span>политика · условия · поддержка</span>
    </footer>

    <AssistantFab/>
  </div>
);

// ============================================================
// B. Sign-up
// ============================================================
const ScreenB_SignUp = () => (
  <div className="park" style={{display:'flex', flexDirection:'column'}}>
    <OnboardingTopbar step={1} total={18} stepLabel="вход"/>
    <div style={{flex:1, display:'grid', gridTemplateColumns:'1fr 1fr'}}>
      {/* Left: form */}
      <div style={{padding:'80px 64px', display:'flex', flexDirection:'column', justifyContent:'center'}}>
        <div className="eyebrow" style={{marginBottom:16}}><BotanicalMark size={14}/>посадим семя</div>
        <h1 style={{fontSize:42, lineHeight:1.05, marginBottom:14}}>
          Войдите, чтобы<br/><span style={{fontStyle:'italic'}}>начать дневник.</span>
        </h1>
        <p style={{color:'var(--bark)', fontSize:15, maxWidth:440, marginBottom:36}}>
          Один тап через Telegram. Без паролей и кодов на почту.
          Telegram нужен для бота позже — лишних аккаунтов не плодим.
        </p>

        <button className="btn" style={{padding:'14px 18px', background:'#fff', border:'1px solid var(--forest-soft)', color:'var(--forest)', justifyContent:'center', width:340}}>
          <I.Telegram size={18}/>
          <span style={{fontSize:15, fontWeight:500}}>Войти через Telegram</span>
        </button>

        <div style={{display:'flex', alignItems:'center', gap:12, margin:'28px 0 16px', width:340}}>
          <span style={{flex:1, height:1, background:'var(--hairline)'}}/>
          <span className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.16em'}}>ИЛИ</span>
          <span style={{flex:1, height:1, background:'var(--hairline)'}}/>
        </div>

        <button className="btn btn-link" style={{fontSize:14}}>Войти по email →</button>

        <div style={{marginTop:64, paddingTop:18, borderTop:'1px solid var(--hairline)', maxWidth:440}}>
          <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:8}}>что мы возьмём</div>
          <ul style={{listStyle:'none', padding:0, margin:0, fontSize:13, color:'var(--bark)', display:'flex', flexDirection:'column', gap:6}}>
            <li>· ваше имя и аватар из Telegram</li>
            <li>· ID, чтобы вы могли войти снова</li>
            <li>· ничего больше — переписку не читаем</li>
          </ul>
        </div>
      </div>

      {/* Right: herbarium-style decoration */}
      <div style={{background:'var(--paper-soft)', borderLeft:'1px solid var(--hairline)', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', top:60, left:60, right:60, bottom:60}}>
          <div style={{border:'1px solid var(--hairline-strong)', background:'#fff', padding:32, height:'100%', position:'relative'}}>
            <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.18em', position:'absolute', top:16, left:16}}>EXEMPLAR № 0001</div>
            <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.18em', position:'absolute', top:16, right:16}}>SITEFARM · BLOGGING</div>
            <div style={{display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', height:'100%', gap:18}}>
              <BotanicalMark size={120} color="var(--moss)"/>
              <div style={{textAlign:'center'}}>
                <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:32, color:'var(--forest)'}}>Diarium domesticum</div>
                <div className="mono" style={{marginTop:6, color:'var(--bark)', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase'}}>дневник · v. domesticum</div>
              </div>
              <div style={{width:140, height:1, background:'var(--hairline-strong)'}}/>
              <div style={{textAlign:'center', maxWidth:280}}>
                <p style={{fontSize:13, color:'var(--bark)', fontStyle:'italic', lineHeight:1.6}}>
                  «Растёт быстро при умеренном поливе. Любит ясные заголовки.
                  Предпочитает один вечер тишины.»
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

// ============================================================
// C. Brief — chat with Claude + live sidebar
// ============================================================
const ScreenC_Brief = () => {
  const messages = [
    {from:'ai', text:'Расскажите про блог в трёх-четырёх фразах. Кто герой? О чём пишете?'},
    {from:'me', text:'Это будет дневник про мою кошку Маню. Хочу записывать её повадки, наши прогулки, фото. Чтобы было уютно и не слишком серьёзно.'},
    {from:'ai', text:'Поняла. Уютно — это какие соседи по вайбу? Подойдёт «личный блог художника» или ближе к «домашнему журналу»?'},
    {from:'me', text:'Скорее личный блог. Видела oharra.world — что-то такое, но про Маню.'},
    {from:'ai', text:'Запомнила. На каких языках пишете? И будете ли вести соцсети рядом — VK, Telegram-канал?'},
    {from:'me', text:'Русский основной. Хочется ещё английский для друзей. Бы стоило завести TG-канал.'},
    {from:'ai', text:'Отлично. Сейчас уточню ещё пару деталей — а потом покажу первые варианты бренда. Кто пишет: только вы, или будут гости?'},
  ];
  const captured = [
    {k:'герой', v:'кошка Маня', filled:true},
    {k:'тон', v:'уютно, личный', filled:true},
    {k:'формат', v:'дневник, короткие заметки + фото', filled:true},
    {k:'референс', v:'oharra.world', filled:true},
    {k:'языки', v:'RU, EN', filled:true},
    {k:'каналы', v:'TG-канал — да', filled:true},
    {k:'авторство', v:'…', filled:false},
    {k:'периодичность', v:'…', filled:false},
    {k:'аудитория', v:'…', filled:false},
    {k:'имя домен', v:'…', filled:false},
  ];
  return (
    <div className="park" style={{display:'flex', flexDirection:'column'}}>
      <OnboardingTopbar step={3} total={18} stepLabel="бриф"/>
      <div style={{flex:1, display:'grid', gridTemplateColumns:'1fr 380px'}}>
        {/* Chat column */}
        <div style={{padding:'32px 56px 0', display:'flex', flexDirection:'column', minHeight:0}}>
          <div style={{display:'flex', alignItems:'baseline', gap:12, marginBottom:6}}>
            <div className="eyebrow"><BotanicalMark size={14}/>шаг 03 / 18</div>
          </div>
          <h2 style={{fontSize:30, marginBottom:6}}>Сначала — несколько вопросов.</h2>
          <p style={{color:'var(--bark)', fontSize:14, maxWidth:580}}>
            Это будет основа для имени, дизайна и первого поста. Можно сначала набросать как угодно — поправим.
          </p>

          <div style={{marginTop:24, flex:1, overflow:'auto', paddingRight:8, display:'flex', flexDirection:'column', gap:14, paddingBottom:160}}>
            {messages.map((m,i) => m.from === 'ai' ? (
              <div key={i} style={{display:'flex', gap:12, maxWidth:560}}>
                <div style={{width:28, height:28, borderRadius:999, background:'var(--moss-tint)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--moss)', flex:'0 0 28px'}}>
                  <I.Spark size={14}/>
                </div>
                <div style={{background:'var(--paper-soft)', border:'1px solid var(--hairline)', padding:'12px 14px', fontSize:14, color:'var(--forest)', lineHeight:1.55}}>
                  {m.text}
                </div>
              </div>
            ) : (
              <div key={i} style={{display:'flex', justifyContent:'flex-end'}}>
                <div style={{maxWidth:480, background:'var(--ochre-tint)', border:'1px solid var(--ochre-dim)', padding:'12px 14px', fontSize:14, color:'var(--forest)', lineHeight:1.55}}>
                  {m.text}
                </div>
              </div>
            ))}
          </div>

          {/* Composer */}
          <div style={{position:'sticky', bottom:0, padding:'16px 0 24px', background:'linear-gradient(to top, var(--paper) 70%, rgba(247,244,237,0))'}}>
            <div style={{display:'flex', alignItems:'flex-end', gap:10, border:'1px solid var(--hairline-strong)', background:'#fff', padding:10}}>
              <textarea placeholder="Ответ…" style={{flex:1, border:0, outline:0, resize:'none', fontFamily:'inherit', fontSize:14, lineHeight:1.5, color:'var(--forest)', height:48, background:'transparent'}} defaultValue="Только я, пока что"/>
              <button className="btn btn-primary" style={{padding:'10px 14px'}}><I.Send size={14}/></button>
            </div>
            <div style={{display:'flex', justifyContent:'space-between', marginTop:8, color:'var(--bark-dim)', fontSize:11, fontFamily:'var(--font-mono)', letterSpacing:'0.06em'}}>
              <span>shift + enter — новая строка</span>
              <span>осталось примерно 4 вопроса</span>
            </div>
          </div>
        </div>

        {/* Sticky sidebar */}
        <aside style={{borderLeft:'1px solid var(--hairline)', background:'var(--paper-soft)', padding:'32px 28px', overflow:'auto'}}>
          <div className="eyebrow" style={{marginBottom:10}}>что мы знаем о вас</div>
          <div className="mono" style={{fontSize:11, color:'var(--bark-dim)', marginBottom:18, letterSpacing:'0.08em'}}>заполняется в реальном времени</div>

          <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column'}}>
            {captured.map(c => (
              <li key={c.k} style={{display:'grid', gridTemplateColumns:'110px 1fr 14px', gap:10, padding:'10px 0', borderTop:'1px solid var(--hairline)', alignItems:'baseline'}}>
                <span className="mono" style={{fontSize:11, color:'var(--bark-dim)', letterSpacing:'0.06em'}}>{c.k}</span>
                <span style={{fontSize:13.5, color: c.filled ? 'var(--forest)' : 'var(--bark-dim)', fontStyle: c.filled ? 'normal' : 'italic'}}>{c.v}</span>
                {c.filled ? <span style={{color:'var(--moss)'}}><I.Check size={12}/></span> : <span/>}
              </li>
            ))}
          </ul>

          <div style={{marginTop:24, padding:14, background:'#fff', border:'1px solid var(--hairline)'}}>
            <div className="eyebrow" style={{color:'var(--moss)'}}><I.Sprout size={14}/>предварительно</div>
            <div style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:22, color:'var(--forest)', marginTop:8}}>Manya World</div>
            <div className="mono" style={{color:'var(--bark)', fontSize:11, marginTop:4}}>manya.world · ru, en</div>
          </div>

          <div style={{marginTop:24}}>
            <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.12em', textTransform:'uppercase', marginBottom:8}}>дальше</div>
            <ol style={{listStyle:'none', padding:0, margin:0, fontSize:12.5, color:'var(--bark)', display:'flex', flexDirection:'column', gap:4}}>
              <li>04 — бренд (3 варианта)</li>
              <li>05 — домен</li>
              <li>06 — обложка</li>
              <li>07 — каналы</li>
            </ol>
          </div>
        </aside>
      </div>
      <AssistantFab/>
    </div>
  );
};

// ============================================================
// D. Brand — 3 cards from Claude
// ============================================================
const ScreenD_Brand = () => {
  const cards = [
    {
      name:'Manya World',
      slogan:'Маня смотрит дождь — мы рядом.',
      palette:['#F1E9D4','#3A4A2E','#B5552E'],
      font:'Cormorant + Inter',
      tone:'уютно, личный, без иронии',
      layout:'editorial: крупная типографика + одна фотография',
      mark:'⌘',
      highlighted:true,
    },
    {
      name:'Дом · Маня',
      slogan:'Домашний журнал, не дневник.',
      palette:['#FBF5E9','#2C3A2A','#7D8B61'],
      font:'Fraunces + IBM Plex',
      tone:'тёплый, наблюдательный',
      layout:'двухколоночный, плотные подписи к фото',
      mark:'•',
      highlighted:false,
    },
    {
      name:'manya.notes',
      slogan:'Заметки про кошку. И больше ничего.',
      palette:['#F7F4ED','#1F1F1F','#D4A55C'],
      font:'Newsreader + JetBrains',
      tone:'сухой, минималистичный, читаемый',
      layout:'одна колонка, mono-заголовки',
      mark:'/',
      highlighted:false,
    },
  ];
  return (
    <div className="park" style={{display:'flex', flexDirection:'column'}}>
      <OnboardingTopbar step={4} total={18} stepLabel="бренд"/>
      <div style={{padding:'32px 56px 24px', display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
        <div>
          <div className="eyebrow"><BotanicalMark size={14}/>шаг 04 / 18</div>
          <h2 style={{fontSize:30, marginTop:8}}>Три направления для бренда.</h2>
          <p style={{color:'var(--bark)', fontSize:14, marginTop:6, maxWidth:560}}>
            Из брифа Claude собрал три варианта. Выберите близкий — потом можно править отдельно: имя, шрифт, палитру.
          </p>
        </div>
        <div style={{display:'flex', gap:10}}>
          <button className="btn btn-ghost">Сгенерировать ещё</button>
          <button className="btn btn-link">Свой вариант…</button>
        </div>
      </div>

      <div style={{padding:'8px 56px 24px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:24}}>
        {cards.map((c,i) => (
          <div key={c.name} style={{
            background:'var(--paper-soft)',
            border: c.highlighted ? '1px solid var(--ochre-dim)' : '1px solid var(--hairline)',
            padding:24,
            boxShadow: c.highlighted ? '0 8px 28px rgba(31,58,40,0.10)' : 'none',
            transform: c.highlighted ? 'translateY(-4px)' : 'none',
            position:'relative',
            transition:'all .15s',
          }}>
            {c.highlighted && (
              <div className="mono" style={{position:'absolute', top:12, right:14, fontSize:10, color:'var(--ochre)', letterSpacing:'0.16em'}}>выбрано</div>
            )}
            <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.18em'}}>VAR · 0{i+1}</div>

            <div style={{marginTop:20, paddingBottom:18, borderBottom:'1px solid var(--hairline)'}}>
              <h3 style={{fontSize:30, lineHeight:1.0}}>{c.name}</h3>
              <p className="serif italic" style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:16, color:'var(--bark)', marginTop:8}}>«{c.slogan}»</p>
            </div>

            <div style={{display:'flex', gap:8, marginTop:18}}>
              {c.palette.map(p => (
                <div key={p} style={{flex:1}}>
                  <div style={{width:'100%', aspectRatio:'1', background:p, border:'1px solid rgba(0,0,0,0.05)'}}/>
                  <div className="mono" style={{fontSize:9, color:'var(--bark-dim)', marginTop:6, textAlign:'center', letterSpacing:'0.04em'}}>{p}</div>
                </div>
              ))}
            </div>

            <dl style={{margin:'22px 0 0', display:'grid', gridTemplateColumns:'80px 1fr', gap:'10px 14px', fontSize:12.5}}>
              <dt className="mono" style={{color:'var(--bark-dim)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase'}}>шрифт</dt><dd style={{margin:0, color:'var(--forest)'}}>{c.font}</dd>
              <dt className="mono" style={{color:'var(--bark-dim)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase'}}>тон</dt><dd style={{margin:0, color:'var(--forest)'}}>{c.tone}</dd>
              <dt className="mono" style={{color:'var(--bark-dim)', fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase'}}>раскладка</dt><dd style={{margin:0, color:'var(--forest)'}}>{c.layout}</dd>
            </dl>

            {/* mini-preview swatch */}
            <div style={{marginTop:22, padding:14, background: c.palette[0], color: c.palette[1], border:'1px solid var(--hairline)'}}>
              <div style={{fontFamily: c.font.includes('Fraunces') ? 'var(--font-display)' : c.font.includes('Cormorant') ? 'Cormorant Garamond, serif' : c.font.includes('Newsreader') ? 'Newsreader, serif' : 'serif', fontSize:18}}>Маня смотрит дождь</div>
              <div className="mono" style={{fontSize:10, opacity:0.7, marginTop:4}}>22 мая · 4 мин чтения</div>
            </div>

            <div style={{marginTop:18, display:'flex', gap:8}}>
              <button className="btn btn-primary" style={{flex:1, justifyContent:'center'}}>{c.highlighted ? 'Выбрано' : 'Взять этот'}</button>
              <button className="btn btn-ghost"><I.Pencil size={14}/></button>
            </div>
          </div>
        ))}
      </div>
      <AssistantFab/>
    </div>
  );
};

// ============================================================
// E. Domain
// ============================================================
const ScreenE_Domain = () => (
  <div className="park" style={{display:'flex', flexDirection:'column'}}>
    <OnboardingTopbar step={5} total={18} stepLabel="домен"/>
    <div style={{padding:'32px 56px', display:'grid', gridTemplateColumns:'1.1fr 0.9fr', gap:48, flex:1}}>
      <div>
        <div className="eyebrow"><BotanicalMark size={14}/>шаг 05 / 18</div>
        <h2 style={{fontSize:32, marginTop:8}}>Куда поселим дневник?</h2>
        <p style={{color:'var(--bark)', fontSize:14.5, marginTop:8, maxWidth:520}}>
          Можно сразу взять свой адрес — это надёжнее. Если не хочется заморачиваться,
          возьмите trial-домен и перенесите позже. Один клик.
        </p>

        <div style={{marginTop:28, display:'inline-flex'}}>
          <div className="switch">
            <button className="on">Свой домен</button>
            <button>Trial на pages.dev</button>
          </div>
        </div>

        {/* Own-domain form */}
        <div style={{marginTop:24, maxWidth:480}}>
          <label className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase'}}>ваш домен</label>
          <input className="input mono" defaultValue="manya.world" style={{marginTop:8, fontSize:15}}/>
          <div style={{marginTop:6, fontSize:12, color:'var(--moss)', display:'flex', alignItems:'center', gap:6}}>
            <I.Check size={12}/> свободен, можно использовать
          </div>
        </div>

        {/* DNS instruction */}
        <div style={{marginTop:28, border:'1px solid var(--hairline)', background:'var(--paper-soft)', padding:20, maxWidth:560}}>
          <div style={{display:'flex', alignItems:'center', gap:10}}>
            <div style={{width:22, height:22, borderRadius:999, background:'var(--ochre-tint)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--forest-soft)', fontSize:11, fontFamily:'var(--font-display)'}}>1</div>
            <h4 style={{fontSize:15, fontFamily:'var(--font-ui)', fontWeight:500, color:'var(--forest)'}}>Добавьте две DNS-записи у регистратора</h4>
          </div>
          <p style={{marginTop:10, fontSize:13, color:'var(--bark)', maxWidth:480, marginLeft:32}}>
            Откройте панель Cloudflare или Namecheap — раздел <span className="mono">DNS</span>. Скопируйте отсюда:
          </p>
          <div style={{marginTop:14, background:'#fff', border:'1px solid var(--hairline)', overflow:'hidden'}}>
            <div style={{display:'grid', gridTemplateColumns:'60px 110px 1fr 90px', fontFamily:'var(--font-mono)', fontSize:12, color:'var(--forest)'}}>
              <div style={{padding:'8px 12px', background:'var(--paper-deep)', borderBottom:'1px solid var(--hairline)', fontSize:10, color:'var(--bark)', letterSpacing:'0.1em', textTransform:'uppercase'}}>тип</div>
              <div style={{padding:'8px 12px', background:'var(--paper-deep)', borderBottom:'1px solid var(--hairline)', fontSize:10, color:'var(--bark)', letterSpacing:'0.1em', textTransform:'uppercase'}}>имя</div>
              <div style={{padding:'8px 12px', background:'var(--paper-deep)', borderBottom:'1px solid var(--hairline)', fontSize:10, color:'var(--bark)', letterSpacing:'0.1em', textTransform:'uppercase'}}>значение</div>
              <div style={{padding:'8px 12px', background:'var(--paper-deep)', borderBottom:'1px solid var(--hairline)'}}/>
              <div style={{padding:'10px 12px', borderBottom:'1px solid var(--hairline)'}}>A</div>
              <div style={{padding:'10px 12px', borderBottom:'1px solid var(--hairline)'}}>@</div>
              <div style={{padding:'10px 12px', borderBottom:'1px solid var(--hairline)'}}>76.76.21.21</div>
              <div style={{padding:'8px 12px', borderBottom:'1px solid var(--hairline)', textAlign:'right'}}><button className="btn btn-link" style={{fontSize:11}}><I.Copy size={12}/> копир.</button></div>

              <div style={{padding:'10px 12px'}}>CNAME</div>
              <div style={{padding:'10px 12px'}}>www</div>
              <div style={{padding:'10px 12px'}}>parnik.sitefarm.build</div>
              <div style={{padding:'8px 12px', textAlign:'right'}}><button className="btn btn-link" style={{fontSize:11}}><I.Copy size={12}/> копир.</button></div>
            </div>
          </div>
          <div style={{marginTop:16, padding:'10px 12px', background:'var(--ochre-tint)', border:'1px solid var(--ochre-dim)', display:'flex', alignItems:'center', gap:10, fontSize:12.5, color:'var(--forest)'}}>
            <I.Eye size={14}/>
            Не знаете, где это? Покажу пошагово со скриншотом панели — спросите помощника справа.
          </div>
        </div>
      </div>

      {/* Right side — screenshot of DNS panel */}
      <div>
        <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase', marginBottom:10}}>пример · cloudflare → dns</div>
        <MockServiceFrame title="dns records" host="dash.cloudflare.com" height={420}>
          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            <div style={{height:36, background:'#F1ECDC', border:'1px solid var(--hairline)'}}/>
            <div style={{height:36, background:'#fff', border:'1px solid var(--hairline)', display:'flex', alignItems:'center', padding:'0 12px', gap:14, fontFamily:'var(--font-mono)', fontSize:11, color:'var(--forest)'}}>
              <span style={{width:30, color:'var(--bark)'}}>A</span><span style={{width:24}}>@</span><span style={{flex:1}}>76.76.21.21</span><span style={{color:'var(--moss)'}}>● Proxied</span>
            </div>
            <div style={{height:36, background:'#fff', border:'1px solid var(--hairline)', display:'flex', alignItems:'center', padding:'0 12px', gap:14, fontFamily:'var(--font-mono)', fontSize:11, color:'var(--forest)'}}>
              <span style={{width:30, color:'var(--bark)'}}>CNAME</span><span style={{width:24}}>www</span><span style={{flex:1}}>parnik.sitefarm.build</span><span style={{color:'var(--moss)'}}>● Proxied</span>
            </div>
            <div style={{height:24, background:'var(--paper-deep)', marginTop:18}}/>
            <div style={{height:24, background:'#fff', border:'1px solid var(--hairline)'}}/>
            <div style={{height:24, background:'#fff', border:'1px solid var(--hairline)'}}/>
            <div style={{marginTop:12, position:'relative'}}>
              <div style={{position:'absolute', left:'40%', top:-90, width:90, height:90, borderRadius:999, border:'1.5px solid var(--ochre)', background:'transparent'}}/>
              <div style={{position:'absolute', left:'52%', top:-12, fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:14, color:'var(--ochre)'}}>сюда</div>
            </div>
          </div>
        </MockServiceFrame>

        <div style={{marginTop:24, padding:'14px 16px', background:'var(--moss-tint)', border:'1px solid #C2CEB8', color:'#3F5639', fontSize:13, display:'flex', gap:10, alignItems:'flex-start'}}>
          <I.Check size={16}/>
          <div>
            <strong style={{fontWeight:500}}>Записи добавятся в течение 5–20 минут.</strong> Мы пингуем сами — как
            только домен «увидит» нас, выдадим зелёную галочку и поедем дальше.
          </div>
        </div>
      </div>
    </div>

    <div style={{padding:'16px 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>
);

// ============================================================
// F. Hero photo
// ============================================================
const ScreenF_HeroPhoto = () => {
  return (
    <div className="park" style={{display:'flex', flexDirection:'column'}}>
      <OnboardingTopbar step={6} total={18} stepLabel="обложка"/>
      <div style={{padding:'32px 56px 24px'}}>
        <div className="eyebrow"><BotanicalMark size={14}/>шаг 06 / 18</div>
        <h2 style={{fontSize:30, marginTop:8}}>Обложка для главной страницы.</h2>
        <p style={{color:'var(--bark)', fontSize:14.5, marginTop:6, maxWidth:580}}>
          Большое изображение, которое видят все, кто открывает manya.world. Загрузите своё или сгенерируйте.
        </p>
      </div>

      <div style={{padding:'0 56px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:20}}>
        {[
          {
            t:'Загрузить фото',
            sub:'jpg, png, до 8 MB. Можно перетащить.',
            icon:<I.Image size={20}/>,
            body:(
              <div className="dz" style={{height:200, marginTop:16}}>перетащите файл сюда<br/>или нажмите для выбора</div>
            ),
          },
          {
            t:'Сгенерировать через DALL·E',
            sub:'Опишите кадр — мы сделаем 4 варианта.',
            icon:<I.Spark size={20}/>,
            body:(
              <div style={{marginTop:16, display:'flex', flexDirection:'column', gap:10}}>
                <textarea className="input" style={{height:70, fontSize:13, resize:'none'}} defaultValue="чёрно-белая кошка на подоконнике смотрит дождь, тёплый домашний свет, плёночное зерно"/>
                <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
                  {['тёплый плёночный','графитная гравюра','акварель','документальный'].map(s => (
                    <span key={s} className="pill">{s}</span>
                  ))}
                </div>
                <button className="btn btn-ghost" style={{justifyContent:'center'}}>Сгенерировать 4 варианта</button>
              </div>
            ),
          },
          {
            t:'SVG-графика через Claude',
            sub:'Геометричная иллюстрация в палитре сайта.',
            icon:<I.Pen size={20}/>,
            body:(
              <div style={{marginTop:16, display:'flex', flexDirection:'column', gap:10}}>
                <div className="img-ph" style={{height:140}}>пример · ботанический штрих в палитре парник</div>
                <button className="btn btn-ghost" style={{justifyContent:'center'}}>Попробовать</button>
              </div>
            ),
          },
        ].map((c,i) => (
          <div key={i} className="card" style={{padding:20}}>
            <div style={{display:'flex', alignItems:'center', gap:10, color:'var(--forest-soft)'}}>
              {c.icon}
              <h3 style={{fontSize:18}}>{c.t}</h3>
            </div>
            <p style={{fontSize:12.5, color:'var(--bark)', marginTop:6}}>{c.sub}</p>
            {c.body}
          </div>
        ))}
      </div>

      {/* Preview block — currently selected */}
      <div style={{padding:'32px 56px 0'}}>
        <div className="rule" style={{marginBottom:18}}><span className="mono" style={{fontSize:11, letterSpacing:'0.2em'}}>предпросмотр</span></div>
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:24}}>
          <div style={{background:'#fff', border:'1px solid var(--hairline)', padding:0}}>
            <div className="img-ph" style={{height:280}}>обложка · 1600 × 900</div>
            <div style={{padding:'18px 22px'}}>
              <h3 style={{fontFamily:'var(--font-reading)', fontStyle:'italic', fontSize:28, color:'var(--forest)', fontWeight:400}}>Manya World</h3>
              <p className="mono" style={{fontSize:11, color:'var(--bark-dim)', marginTop:4}}>дневник кошки маню · ru en</p>
            </div>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            <div className="mono" style={{fontSize:10, color:'var(--bark-dim)', letterSpacing:'0.14em', textTransform:'uppercase'}}>предложенные альтернативы</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:10}}>
              {[1,2,3,4].map(i => (
                <div key={i} style={{position:'relative'}}>
                  <div className="img-ph" style={{height:108}}>вариант 0{i}</div>
                  {i===1 && <div className="pill pill-ochre" style={{position:'absolute', top:6, left:6}}>выбран</div>}
                </div>
              ))}
            </div>
            <button className="btn btn-ghost" style={{marginTop:6, justifyContent:'center'}}><I.Spark size={14}/> Сгенерировать ещё 4</button>
          </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>
        <button className="btn btn-primary">Дальше → каналы <I.Arrow size={14}/></button>
      </div>
      <AssistantFab/>
    </div>
  );
};

Object.assign(window, { ScreenA_Landing, ScreenB_SignUp, ScreenC_Brief, ScreenD_Brand, ScreenE_Domain, ScreenF_HeroPhoto });