// Generate flow: source choice → topic + style → loading → handoff to preview.
const { useState: useStateG, useEffect: useEffectG } = React;

const STYLES = [
  { id: 'minimal',  name: 'Минималистичный', sub: 'Большая типографика, много воздуха' },
  { id: 'graphic',  name: 'Графический',     sub: 'Цветные плашки, активные акценты' },
  { id: 'photo',    name: 'С фото',          sub: 'Фон-фото, текст поверх' },
];

const PROPOSED_TOPICS = (org) => {
  const map = {
    studio: [
      { title: 'Палитра 2026: почему все вернулись к охре', src: '@designpub · 12 мин назад' },
      { title: 'Брендинг без AI — манифест на 2026 год', src: 'itsnicethat.com · 2 ч назад' },
      { title: 'Седой минимализм возвращается в lookbook', src: 'sidebar.io · 1 ч назад' },
      { title: 'Как Studio Feixen работают с типографикой', src: '@gloomyowl · 4 ч назад' },
    ],
    finlab: [
      { title: 'AI в финтехе: где реальный ROI, а где гипертайп', src: '@finsight · 8 мин назад' },
      { title: 'Цифровой рубль — что меняется для бизнеса', src: 'ft.com · 22 мин назад' },
      { title: 'Embedded finance в 2026: 5 кейсов', src: 'a16z.com · 1 ч назад' },
      { title: 'BNPL по итогам года: рост или плато', src: 'thefintechtimes.com · 3 ч назад' },
    ],
    velo: [
      { title: 'Подбор седла на 200 км — гайд', src: 'cyclingtips.com · 35 мин назад' },
      { title: 'Bikepacking за выходные: маршруты Подмосковья', src: '@velolife · 7 мин назад' },
      { title: 'Шлем за 5к против шлема за 25к — есть ли разница', src: 'cyclingtips.com · 2 ч назад' },
    ],
  };
  return map[org.id] || map.studio;
};

function Generate({ org, data, onGenerated, prefill }) {
  const { Button, IconButton, Card, TextInput, Textarea, Pill } = window.UI;
  const I = window.Icons;

  const [step, setStep] = useStateG(prefill && prefill.topic ? 1 : 0);
  const [source, setSource] = useStateG(prefill ? prefill.source : null); // 'sources' | 'ideas' | 'custom' | 'all-sources'
  const [picked, setPicked] = useStateG(prefill && prefill.topic ? prefill.topic : null);
  const [custom, setCustom] = useStateG('');
  const [customRec, setCustomRec] = useStateG(false);
  const [customRecT, setCustomRecT] = useStateG(0);
  const [style, setStyle] = useStateG('minimal');
  const [prompt, setPrompt] = useStateG('');
  const [promptRec, setPromptRec] = useStateG(false);
  const [promptRecT, setPromptRecT] = useStateG(0);
  const [loadingStep, setLoadingStep] = useStateG(0);

  const proposed = PROPOSED_TOPICS(org);

  // recording timers
  useEffectG(() => {
    if (!customRec) return;
    const t = setInterval(() => setCustomRecT((v) => v + 1), 1000);
    return () => clearInterval(t);
  }, [customRec]);
  useEffectG(() => {
    if (!promptRec) return;
    const t = setInterval(() => setPromptRecT((v) => v + 1), 1000);
    return () => clearInterval(t);
  }, [promptRec]);

  // Loading
  useEffectG(() => {
    if (step !== 3) return;
    setLoadingStep(0);
    const labels = 5;
    const t = setInterval(() => setLoadingStep((s) => {
      if (s + 1 >= labels) {
        clearInterval(t);
        setTimeout(() => onGenerated({ topic: picked || { title: custom, src: source === 'all-sources' ? 'из всех источников' : 'своя тема' }, style, prompt }), 500);
        return s + 1;
      }
      return s + 1;
    }), 700);
    return () => clearInterval(t);
  }, [step]);

  const goConfirm = (topic) => { setPicked(topic); setStep(1); };

  const stopCustomRec = () => {
    if (customRecT > 0) setCustom((custom ? custom + ' ' : '') + `[голос ${Math.floor(customRecT/60)}:${String(customRecT%60).padStart(2,'0')}] расшифровка появится здесь…`);
    setCustomRec(false); setCustomRecT(0);
  };
  const stopPromptRec = () => {
    if (promptRecT > 0) setPrompt((prompt ? prompt + ' ' : '') + `[голос ${Math.floor(promptRecT/60)}:${String(promptRecT%60).padStart(2,'0')}] расшифровка появится здесь…`);
    setPromptRec(false); setPromptRecT(0);
  };

  return (
    <div className="max-w-[1100px] mx-auto px-5 sm:px-8 py-8">
      {/* Steps header */}
      <div className="flex items-center gap-3 mb-8 overflow-x-auto no-scrollbar">
        {['Источник', 'Тема и стиль', 'Промпт', 'Готово'].map((l, i) => (
          <React.Fragment key={i}>
            <div className="flex items-center gap-2 shrink-0">
              <div className={'h-6 w-6 rounded-full flex items-center justify-center text-[11px] font-semibold ' + (i < step ? 'bg-ink-900 text-white' : i === step ? 'bg-ink-900 text-white' : 'bg-ink-200 text-ink-600')}>
                {i < step ? <I.Check size={12} strokeWidth={2.5}/> : i + 1}
              </div>
              <span className={'text-[13px] ' + (i <= step ? 'text-ink-900 font-medium' : 'text-ink-500')}>{l}{i === 2 && <span className="text-ink-400 font-normal"> · опц.</span>}</span>
            </div>
            {i < 3 && <div className="flex-1 min-w-[16px] h-px bg-ink-200"/>}
          </React.Fragment>
        ))}
      </div>

      {step === 0 && (
        <div className="fade-in">
          <h1 className="text-[32px] sm:text-[40px] font-semibold tracking-tight leading-[1.05]" style={{ textWrap: 'balance' }}>
            Откуда возьмём <span style={{ fontFamily: 'Instrument Serif, serif', fontStyle: 'italic', fontWeight: 400 }}>идею</span>?
          </h1>
          <p className="mt-2 text-[15px] text-ink-500 max-w-lg">Выберите начало — дальше Omneee соберёт пост.</p>

          <div className="grid md:grid-cols-3 gap-4 mt-8">
            {/* Sources */}
            <button
              onClick={() => setSource('sources')}
              className={'relative text-left rounded-2xl border p-5 transition-all hover:-translate-y-0.5 hover:shadow-card overflow-hidden ' + (source === 'sources' ? 'border-ink-900 bg-white ring-2 ring-ink-900/10' : 'border-ink-200 bg-lavender-soft/55')}
            >
              <window.Doodles.Sparkle size={10} className="absolute top-4 right-12 text-lavender-ink opacity-60"/>
              <div className="flex items-center gap-2">
                <span className="h-9 w-9 rounded-xl bg-lavender-soft text-lavender-ink flex items-center justify-center"><I.Rss size={16}/></span>
                <span className="text-[10.5px] font-semibold uppercase tracking-[0.16em] text-ink-500">A</span>
              </div>
              <div className="mt-4 text-[16.5px] font-semibold tracking-tight">Из источников</div>
              <div className="text-[13px] text-ink-500 mt-1">Omneee предложит темы из RSS и Telegram</div>
              <div className="mt-3 text-[12px] text-ink-500 font-mono">{proposed.length} свежих тем</div>
            </button>
            {/* Ideas */}
            <button
              onClick={() => setSource('ideas')}
              className={'relative text-left rounded-2xl border p-5 transition-all hover:-translate-y-0.5 hover:shadow-card overflow-hidden ' + (source === 'ideas' ? 'border-ink-900 bg-white ring-2 ring-ink-900/10' : 'border-ink-200 bg-lemon-soft/55')}
            >
              <window.Doodles.ThreeDots className="absolute top-5 right-12 text-lemon-ink opacity-60"/>
              <div className="flex items-center gap-2">
                <span className="h-9 w-9 rounded-xl bg-lemon-soft text-lemon-ink flex items-center justify-center"><I.Lightbulb size={16}/></span>
                <span className="text-[10.5px] font-semibold uppercase tracking-[0.16em] text-ink-500">B</span>
              </div>
              <div className="mt-4 text-[16.5px] font-semibold tracking-tight">Из моих идей</div>
              <div className="text-[13px] text-ink-500 mt-1">Выбрать из бэклога идей</div>
              <div className="mt-3 text-[12px] text-ink-500 font-mono">{data.ideas.length} идей в очереди</div>
            </button>
            {/* Custom */}
            <button
              onClick={() => setSource('custom')}
              className={'relative text-left rounded-2xl border p-5 transition-all hover:-translate-y-0.5 hover:shadow-card overflow-hidden ' + (source === 'custom' ? 'border-ink-900 bg-white ring-2 ring-ink-900/10' : 'border-ink-200 bg-mint-soft/55')}
            >
              <window.Doodles.Squiggle w={50} h={12} className="absolute top-5 right-10 text-mint-ink opacity-60"/>
              <div className="flex items-center gap-2">
                <span className="h-9 w-9 rounded-xl bg-mint-soft text-mint-ink flex items-center justify-center"><I.Edit size={16}/></span>
                <span className="text-[10.5px] font-semibold uppercase tracking-[0.16em] text-ink-500">C</span>
              </div>
              <div className="mt-4 text-[16.5px] font-semibold tracking-tight">Своя тема</div>
              <div className="text-[13px] text-ink-500 mt-1">Опишу всё руками — Omneee соберёт пост</div>
              <div className="mt-3 text-[12px] text-ink-500 font-mono">свободный ввод</div>
            </button>
          </div>

          {/* Pickers */}
          {source === 'sources' && (
            <div className="mt-8 fade-in">
              {/* Use-all CTA */}
              <button
                onClick={() => { setSource('all-sources'); setPicked({ title: 'Сводка по всем источникам — тренды недели', src: `все ${(data.sources || []).filter(s => s.enabled).length} источников · автотема` }); setStep(1); }}
                className="w-full mb-3 group rounded-2xl border border-ink-900 bg-ink-900 text-white p-4 flex items-center gap-3 hover:bg-ink-800 transition-colors text-left"
              >
                <span className="h-10 w-10 rounded-xl bg-white/15 flex items-center justify-center"><I.Spark size={16}/></span>
                <div className="flex-1 min-w-0">
                  <div className="text-[14.5px] font-semibold">Использовать все источники</div>
                  <div className="text-[12px] text-white/70">Omneee соберёт сводную тему из {(data.sources || []).filter(s => s.enabled).length} активных источников и {(data.files || []).length} файлов</div>
                </div>
                <I.Arrow size={16} className="text-white/70 group-hover:translate-x-0.5 transition-transform"/>
              </button>

              <div className="flex items-center justify-between mb-3">
                <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500">или выберите одну из {proposed.length} свежих тем</div>
                <div className="hidden sm:flex items-center gap-1 text-[11px] text-ink-500"><I.Refresh size={11}/> обновлено сейчас</div>
              </div>
              <Card className="overflow-hidden">
                {proposed.map((t, i) => (
                  <button key={i} onClick={() => goConfirm(t)} className={'w-full text-left flex items-center gap-3 px-5 py-4 hover:bg-ink-50 transition-colors ' + (i > 0 ? 'border-t border-ink-200' : '')}>
                    <span className="h-7 w-7 rounded-md bg-violet-soft text-violet-ink flex items-center justify-center shrink-0"><I.Rss size={13}/></span>
                    <div className="flex-1 min-w-0">
                      <div className="text-[14.5px] font-medium">{t.title}</div>
                      <div className="text-[11.5px] text-ink-500 mt-0.5">{t.src}</div>
                    </div>
                    <I.Arrow size={16} className="text-ink-400"/>
                  </button>
                ))}
              </Card>
            </div>
          )}

          {source === 'ideas' && (
            <div className="mt-8 fade-in">
              <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500 mb-3">Из вашего бэклога</div>
              <Card className="overflow-hidden">
                {data.ideas.slice(0, 6).map((idea, i) => {
                  const Icon = idea.type === 'text' ? I.Text : idea.type === 'link' ? I.Link : I.Mic;
                  return (
                    <button key={idea.id} onClick={() => goConfirm({ title: idea.preview, src: 'из бэклога · ' + idea.when })} className={'w-full text-left flex items-center gap-3 px-5 py-4 hover:bg-ink-50 transition-colors ' + (i > 0 ? 'border-t border-ink-200' : '')}>
                      <span className="h-7 w-7 rounded-md bg-amber-50 text-amber-700 flex items-center justify-center shrink-0"><Icon size={13}/></span>
                      <div className="flex-1 min-w-0">
                        <div className="text-[14.5px] font-medium truncate">{idea.preview}</div>
                        <div className="text-[11.5px] text-ink-500 mt-0.5">{idea.when}</div>
                      </div>
                      <I.Arrow size={16} className="text-ink-400"/>
                    </button>
                  );
                })}
              </Card>
            </div>
          )}

          {source === 'custom' && (
            <div className="mt-8 fade-in max-w-2xl">
              <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500 mb-3">Опишите тему</div>
              <div className="relative">
                <Textarea value={custom} onChange={setCustom} rows={5} placeholder="Например: «5 ошибок начинающих фаундеров при оценке unit-экономики». Или нажмите микрофон и надиктуйте."/>
                <button
                  onClick={() => customRec ? stopCustomRec() : setCustomRec(true)}
                  className={'absolute right-3 bottom-3 inline-flex items-center gap-2 h-9 px-3 rounded-full text-[12.5px] font-medium transition-colors ' + (customRec ? 'bg-red-500 text-white' : 'bg-ink-900 text-white hover:bg-ink-800')}
                  title={customRec ? 'Остановить запись' : 'Надиктовать голосом'}
                >
                  {customRec ? <I.Square size={12}/> : <I.Mic size={13}/>}
                  {customRec ? <span className="tabular-nums">{Math.floor(customRecT/60)}:{String(customRecT%60).padStart(2,'0')}</span> : 'Надиктовать'}
                </button>
                {customRec && (
                  <div className="absolute left-3 bottom-3 right-32 flex items-end gap-[2px] h-7 px-2 rounded-full bg-red-50 border border-red-200 py-1.5">
                    {Array.from({ length: 28 }).map((_, i) => (
                      <span key={i} className="wave-bar w-[2px] rounded-full bg-red-500" style={{ height: '100%', animationDelay: `${(i % 7) * 90}ms`, animationDuration: `${800 + (i % 5) * 120}ms` }}/>
                    ))}
                  </div>
                )}
              </div>
              <div className="mt-4 flex items-center gap-2">
                <Button onClick={() => setStep(1)} disabled={!custom.trim()} iconRight={<I.Arrow size={16}/>}>Дальше</Button>
                <span className="text-[12.5px] text-ink-500">Хотите конкретные пункты — перечислите их.</span>
              </div>
            </div>
          )}
        </div>
      )}

      {step === 1 && (
        <div className="grid lg:grid-cols-[1.1fr_1fr] gap-10 fade-in">
          <div>
            <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500">Тема</div>
            <h1 className="mt-2 text-[28px] sm:text-[34px] font-semibold tracking-tight leading-[1.1]" style={{ textWrap: 'balance' }}>
              {picked ? picked.title : custom}
            </h1>
            {picked && <div className="text-[12.5px] text-ink-500 mt-2 font-mono">{picked.src}</div>}

            <div className="mt-8">
              <div className="text-[13px] font-semibold mb-3">Стиль карусели</div>
              <div className="grid sm:grid-cols-3 gap-3">
                {STYLES.map((s) => (
                  <button
                    key={s.id}
                    onClick={() => setStyle(s.id)}
                    className={'text-left rounded-2xl border p-4 transition-all hover:-translate-y-0.5 ' + (style === s.id ? 'border-ink-900 ring-2 ring-ink-900/10 bg-white' : 'border-ink-200 bg-white')}
                  >
                    <StylePreview style={s.id} brand={org.brand}/>
                    <div className="mt-3 text-[14px] font-semibold">{s.name}</div>
                    <div className="text-[12px] text-ink-500 mt-0.5">{s.sub}</div>
                  </button>
                ))}
              </div>
            </div>

            <div className="mt-8">
              <div className="text-[13px] font-semibold mb-3">Подкрутить</div>
              <div className="flex flex-wrap gap-2">
                {['Тон бренда', 'Без эмодзи', '6–8 слайдов', 'Заголовок цифрой', 'Цитата в финале'].map((t) => (
                  <Pill key={t}>{t}</Pill>
                ))}
              </div>
            </div>

            <div className="mt-10 flex items-center gap-3">
              <Button variant="ghost" icon={<I.ChevronLeft size={16}/>} onClick={() => setStep(0)}>Назад</Button>
              <Button size="lg" iconRight={<I.Arrow size={16}/>} onClick={() => setStep(2)}>Дальше</Button>
            </div>
          </div>

          {/* mock brand summary */}
          <div className="rounded-3xl bg-paper border border-ink-200 p-6 self-start">
            <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500 mb-4">из брендбука {org.name}</div>
            <div className="grid grid-cols-4 gap-2 mb-5">
              {org.brand.colors.map((c, i) => (
                <div key={i} className="rounded-lg h-12 ring-1 ring-ink-200" style={{ background: c }}/>
              ))}
            </div>
            <div className="space-y-1 text-[13px]">
              <div><span className="text-ink-500">Заголовки · </span><span style={{ fontFamily: org.brand.fonts[0] }}>{org.brand.fonts[0]}</span></div>
              <div><span className="text-ink-500">Текст · </span><span style={{ fontFamily: org.brand.fonts[1] || org.brand.fonts[0] }}>{org.brand.fonts[1] || org.brand.fonts[0]}</span></div>
            </div>
            <div className="mt-4 text-[12.5px] text-ink-600 leading-relaxed">«{org.brand.tone}»</div>
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="fade-in max-w-2xl">
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500 mb-2">Шаг 03 · опционально</div>
          <h1 className="text-[28px] sm:text-[34px] font-semibold tracking-tight leading-[1.1]" style={{ textWrap: 'balance' }}>
            Что-то добавить <span style={{ fontFamily: 'Instrument Serif, serif', fontStyle: 'italic', fontWeight: 400 }}>от себя</span>?
          </h1>
          <p className="mt-2 text-[14.5px] text-ink-500 max-w-lg">Промпт, акцент, фразы, которые точно должны быть. Можно надиктовать голосом — или пропустить.</p>

          <div className="mt-6 relative">
            <Textarea
              value={prompt}
              onChange={setPrompt}
              rows={6}
              placeholder='Например: «Сделай первый слайд провокационным. Упомяни кейс с Tinkoff. В финале — призыв подписаться. Без эмодзи.»'
            />
            <button
              onClick={() => promptRec ? stopPromptRec() : setPromptRec(true)}
              className={'absolute right-3 bottom-3 inline-flex items-center gap-2 h-9 px-3 rounded-full text-[12.5px] font-medium transition-colors ' + (promptRec ? 'bg-red-500 text-white' : 'bg-ink-900 text-white hover:bg-ink-800')}
              title={promptRec ? 'Остановить запись' : 'Надиктовать голосом'}
            >
              {promptRec ? <I.Square size={12}/> : <I.Mic size={13}/>}
              {promptRec ? <span className="tabular-nums">{Math.floor(promptRecT/60)}:{String(promptRecT%60).padStart(2,'0')}</span> : 'Надиктовать'}
            </button>
            {promptRec && (
              <div className="absolute left-3 bottom-3 right-36 flex items-end gap-[2px] h-7 px-3 rounded-full bg-red-50 border border-red-200 py-1.5">
                {Array.from({ length: 36 }).map((_, i) => (
                  <span key={i} className="wave-bar w-[2px] rounded-full bg-red-500" style={{ height: '100%', animationDelay: `${(i % 7) * 90}ms`, animationDuration: `${800 + (i % 5) * 120}ms` }}/>
                ))}
              </div>
            )}
          </div>

          <div className="mt-5 flex flex-wrap items-center gap-2">
            <span className="text-[11px] font-semibold uppercase tracking-[0.14em] text-ink-500 mr-1">подсказки:</span>
            {[
              'Без эмодзи',
              'Жёстче тон',
              'Добавь цифру в заголовок',
              'Сделай провокационно',
              'Цитата в финале',
            ].map((t) => (
              <Pill key={t} onClick={() => setPrompt((prompt ? prompt + ' ' : '') + t.toLowerCase() + '. ')}>+ {t}</Pill>
            ))}
          </div>

          <div className="mt-10 flex items-center gap-3">
            <Button variant="ghost" icon={<I.ChevronLeft size={16}/>} onClick={() => setStep(1)}>Назад</Button>
            <Button size="lg" icon={<I.Sparkles size={15}/>} onClick={() => setStep(3)}>
              {prompt.trim() ? 'Сгенерировать' : 'Пропустить промпт и сгенерировать'}
            </Button>
          </div>
        </div>
      )}

      {step === 3 && (
        <div className="fade-in max-w-2xl mx-auto py-10 text-center relative">
          {/* Orbiting sparkles */}
          <div className="relative inline-block">
            <div className="absolute inset-0 orbit-slow pointer-events-none">
              <window.Doodles.Sparkle size={16} color="oklch(0.55 0.18 290)" style={{ position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)' }}/>
              <window.Doodles.Sparkle size={12} color="oklch(0.6 0.16 50)"  style={{ position: 'absolute', top: '50%', right: -28, transform: 'translateY(-50%)' }}/>
              <window.Doodles.Sparkle size={14} color="oklch(0.55 0.16 160)" style={{ position: 'absolute', bottom: -22, left: '50%', transform: 'translateX(-50%)' }}/>
              <window.Doodles.Sparkle size={10} color="oklch(0.55 0.15 220)" style={{ position: 'absolute', top: '50%', left: -28, transform: 'translateY(-50%)' }}/>
            </div>
            <div className="absolute inset-0 orbit-rev pointer-events-none">
              <window.Doodles.Sparkle size={8} color="oklch(0.6 0.18 290)" style={{ position: 'absolute', top: -12, right: -12 }}/>
              <window.Doodles.Sparkle size={8} color="oklch(0.6 0.18 50)" style={{ position: 'absolute', bottom: -12, left: -12 }}/>
            </div>
            <div className="inline-flex items-center justify-center h-20 w-20 rounded-3xl bg-ink-900 text-white relative">
              <I.Sparkles size={28}/>
              <span className="absolute inset-0 rounded-3xl border-2 border-violet animate-ping opacity-50"/>
            </div>
          </div>
          <h2 className="mt-8 text-[28px] font-semibold tracking-tight">Генерируем карусель…</h2>
          <p className="mt-2 text-[14px] text-ink-500">Это займёт около минуты. Можно закрыть страницу — пришлём в Telegram.</p>

          <div className="mt-10 max-w-md mx-auto text-left">
            {[
              'Читаем источник',
              'Подбираем тезисы по тону бренда',
              'Складываем структуру слайдов',
              'Применяем цвета и шрифты',
              'Финальная вёрстка',
            ].map((l, i) => (
              <div key={i} className="flex items-center gap-3 py-2.5 border-b border-ink-200 last:border-0">
                <div className={'h-6 w-6 rounded-full flex items-center justify-center shrink-0 ' + (i < loadingStep ? 'bg-emerald-100 text-emerald-700' : i === loadingStep ? 'bg-ink-900 text-white' : 'bg-ink-100 text-ink-500')}>
                  {i < loadingStep ? <I.Check size={12} strokeWidth={2.5}/> : i === loadingStep ? <span className="pulse-dot h-1.5 w-1.5 rounded-full bg-white"/> : <span className="h-1.5 w-1.5 rounded-full bg-ink-400"/>}
                </div>
                <div className={'text-[14px] ' + (i <= loadingStep ? 'text-ink-900' : 'text-ink-500')}>{l}</div>
                {i === loadingStep && <div className="ml-auto text-[11px] font-mono text-ink-500">~{(5 - i) * 6}s</div>}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function StylePreview({ style, brand }) {
  const [c1, c2, c3] = [brand.colors[0] || '#000', brand.colors[1] || '#fff', brand.colors[2] || '#7C5CFF'];
  if (style === 'minimal') {
    return (
      <div className="rounded-xl overflow-hidden" style={{ aspectRatio: '4/5', background: c2, border: '1px solid rgba(0,0,0,0.06)' }}>
        <div className="h-full w-full relative" style={{ padding: 12 }}>
          <div className="font-mono opacity-50" style={{ fontSize: 7 }}>01</div>
          <div className="absolute bottom-3 left-3 right-3" style={{ color: c1 }}>
            <div style={{ height: 2, width: 20, background: c3, marginBottom: 6 }}/>
            <div style={{ fontFamily: brand.fonts[0], fontSize: 14, lineHeight: 1.05, fontWeight: 600 }}>Заголовок поста</div>
          </div>
        </div>
      </div>
    );
  }
  if (style === 'graphic') {
    return (
      <div className="rounded-xl overflow-hidden" style={{ aspectRatio: '4/5', background: c1, color: c2 }}>
        <div className="h-full w-full relative">
          <div style={{ position: 'absolute', top: 8, left: 10, fontSize: 7, fontFamily: 'JetBrains Mono', opacity: 0.6 }}>01</div>
          <div style={{ position: 'absolute', inset: 0, padding: 12 }}>
            <div style={{ background: c3, color: c1, padding: '6px 8px', display: 'inline-block', fontSize: 9, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }}>тема</div>
            <div style={{ marginTop: 28, fontFamily: brand.fonts[0], fontWeight: 700, fontSize: 16, lineHeight: 1.05 }}>
              Большой<br/>заголовок
            </div>
          </div>
        </div>
      </div>
    );
  }
  // photo
  return (
    <div className="rounded-xl overflow-hidden relative placeholder-grid" style={{ aspectRatio: '4/5', background: c1 }}>
      <div className="absolute inset-0" style={{ background: `linear-gradient(180deg, transparent 40%, ${c1}cc 100%)` }}/>
      <div className="absolute bottom-3 left-3 right-3" style={{ color: c2 }}>
        <div style={{ height: 2, width: 20, background: c3, marginBottom: 6 }}/>
        <div style={{ fontFamily: brand.fonts[0], fontSize: 14, lineHeight: 1.05, fontWeight: 700 }}>Поверх фото</div>
      </div>
      <div className="absolute top-2 right-3 text-[8px] font-mono opacity-60" style={{ color: c2 }}>фон-плейсхолдер</div>
    </div>
  );
}

window.Screens = window.Screens || {};
window.Screens.Generate = Generate;