// Landing + magic-link flow. Export to window.Screens.Landing.
const { useState: useStateL } = React;

function Landing({ onAuthed }) {
  const { Button, TextInput } = window.UI;
  const I = window.Icons;
  const [stage, setStage] = useStateL('input'); // input | sent | landed
  const [email, setEmail] = useStateL('');
  const [error, setError] = useStateL('');

  const submit = () => {
    const e = email.trim();
    if (!e || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(e)) {
      setError('Введите корректный email');
      return;
    }
    setError('');
    setStage('sent');
  };

  const continueAsNew = () => {
    // user clicked the magic link
    onAuthed({ email, firstTime: true });
  };
  const continueAsReturning = () => {
    onAuthed({ email, firstTime: false });
  };

  return (
    <div className="min-h-screen flex flex-col fade-in">
      {/* nav */}
      <header className="px-6 sm:px-10 pt-6 flex items-center justify-between">
        <div className="flex items-center gap-2.5">
          <div className="h-7 w-7 rounded-md bg-ink-900 text-white flex items-center justify-center" style={{ fontFamily: 'Instrument Serif, serif', fontSize: 17 }}>o</div>
          <span className="text-[15px] font-semibold tracking-tight">Omneee</span>
        </div>
        <div className="hidden sm:flex items-center gap-1 text-[13.5px] text-ink-600">
          <a className="px-3 h-9 rounded-full hover:bg-ink-100 inline-flex items-center">Возможности</a>
          <a className="px-3 h-9 rounded-full hover:bg-ink-100 inline-flex items-center">Цены</a>
          <a className="px-3 h-9 rounded-full hover:bg-ink-100 inline-flex items-center">Журнал</a>
          <a className="px-3 h-9 rounded-full hover:bg-ink-100 inline-flex items-center">Помощь</a>
        </div>
      </header>

      <main className="flex-1 grid lg:grid-cols-[1.05fr_1fr] gap-10 lg:gap-16 px-6 sm:px-10 py-10 lg:py-20 max-w-[1280px] mx-auto w-full items-center">
        {/* left: pitch */}
        <div className="max-w-[560px]">
          <div className="inline-flex items-center gap-2 h-7 px-3 rounded-full bg-violet-soft text-violet-ink text-[12px] font-semibold tracking-wide uppercase">
            <span className="h-1.5 w-1.5 rounded-full bg-violet"/> v1.0 · early access
          </div>
          <h1 className="mt-5 text-[44px] sm:text-[64px] leading-[0.98] tracking-tight font-semibold" style={{ textWrap: 'balance' }}>
            Карусели для соцсетей <span className="text-ink-500" style={{ fontFamily: 'Instrument Serif, serif', fontStyle: 'italic', fontWeight: 400 }}>на автопилоте</span>
          </h1>
          <p className="mt-5 text-[16.5px] leading-relaxed text-ink-600 max-w-[480px]" style={{ textWrap: 'pretty' }}>
            Omneee читает ваши источники, предлагает темы по брендбуку и собирает карусели,
            готовые к публикации. От голосовой заметки до ZIP с PNG — за две минуты.
          </p>

          <div className="mt-8 flex items-center gap-3 text-[13px] text-ink-500">
            <div className="flex -space-x-2">
              {['#FF5A1F', '#26C281', '#7C5CFF', '#EF476F'].map((c, i) => (
                <div key={i} className="h-8 w-8 rounded-full border-2 border-paper" style={{ background: c }}/>
              ))}
            </div>
            <span>1 200+ авторов уже пишут с Omneee</span>
          </div>

          <ul className="mt-10 space-y-3.5">
            {[
              ['RSS, Telegram, сайты', 'Подключите источники — мы вытащим темы'],
              ['Идеи в одном месте', 'Текст, ссылки, голосовые — всё попадает в бэклог'],
              ['Брендбук, который слушают', 'Цвета, шрифты, тон — Omneee помнит каждую деталь'],
            ].map(([t, s], i) => (
              <li key={i} className="flex items-start gap-3">
                <span className="mt-1 h-5 w-5 rounded-full bg-ink-900 text-white inline-flex items-center justify-center"><I.Check size={12} strokeWidth={2.5}/></span>
                <span><span className="font-semibold">{t}.</span> <span className="text-ink-600">{s}.</span></span>
              </li>
            ))}
          </ul>
        </div>

        {/* right: auth card */}
        <div className="relative">
          {/* decorative carousel preview behind */}
          <div className="hidden lg:block absolute -right-6 -top-10 rotate-6 opacity-95">
            <CoverPreview color1="#0F0F0F" color2="#FF5A1F"/>
          </div>
          <div className="hidden lg:block absolute -left-12 top-32 -rotate-6">
            <CoverPreview color1="#0B2540" color2="#26C281" v={2}/>
          </div>

          <div className="relative bg-white border border-ink-200 rounded-3xl shadow-pop p-7 sm:p-9 max-w-[440px] mx-auto">
            <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-ink-500">Войти</div>
            <h2 className="mt-2 text-[26px] font-semibold tracking-tight">Без паролей. По ссылке.</h2>
            <p className="mt-2 text-[14px] text-ink-500">Введите email — пришлём ссылку для входа.</p>

            {stage === 'input' && (
              <div className="mt-6 space-y-3">
                <div>
                  <TextInput
                    icon={<I.Mail size={16}/>}
                    value={email}
                    onChange={(v) => { setEmail(v); setError(''); }}
                    placeholder="you@email.com"
                    size="lg"
                    onKeyDown={(e) => e.key === 'Enter' && submit()}
                    autoFocus
                  />
                  {error && <div className="text-[12.5px] text-red-600 mt-2 ml-1">{error}</div>}
                </div>
                <Button size="lg" full onClick={submit} iconRight={<I.Arrow size={16}/>}>Отправить ссылку</Button>
                <p className="text-[12px] text-ink-500 text-center mt-3 leading-relaxed">
                  Нажимая «Отправить», вы соглашаетесь с <span className="text-ink-700 underline underline-offset-2">условиями</span> и <span className="text-ink-700 underline underline-offset-2">политикой</span>.
                </p>
              </div>
            )}

            {stage === 'sent' && (
              <div className="mt-6 space-y-4 fade-in">
                <div className="rounded-2xl border border-ink-200 bg-ink-50 p-5">
                  <div className="h-10 w-10 rounded-xl bg-ink-900 text-white flex items-center justify-center mb-3">
                    <I.Mail size={18}/>
                  </div>
                  <h3 className="text-[16px] font-semibold">Проверьте почту</h3>
                  <p className="text-[13.5px] text-ink-600 mt-1.5 leading-relaxed">
                    Письмо отправлено на <span className="font-semibold text-ink-900">{email}</span>.<br/>
                    Откройте ссылку из письма, чтобы войти.
                  </p>
                </div>

                <div className="rounded-2xl border border-dashed border-ink-300 bg-paper p-4">
                  <div className="text-[11px] font-semibold uppercase tracking-[0.14em] text-ink-500 mb-2">Демо · симулируем клик</div>
                  <div className="flex flex-col sm:flex-row gap-2">
                    <Button size="sm" variant="outline" full onClick={continueAsNew}>Войти как новый пользователь</Button>
                    <Button size="sm" full onClick={continueAsReturning}>Войти как существующий</Button>
                  </div>
                </div>

                <button className="text-[13px] text-ink-500 hover:text-ink-900" onClick={() => setStage('input')}>← Изменить email</button>
              </div>
            )}
          </div>
        </div>
      </main>

      <footer className="px-6 sm:px-10 py-6 text-[12.5px] text-ink-500 flex flex-wrap items-center justify-between gap-3 border-t border-ink-200">
        <div>© 2026 Omneee — сделано в РФ/СНГ для авторов</div>
        <div className="flex items-center gap-4">
          <span>Telegram-бот</span>
          <span>Документация</span>
          <span>Контакты</span>
        </div>
      </footer>
    </div>
  );
}

function CoverPreview({ color1, color2, v = 1 }) {
  const isV1 = v === 1;
  return (
    <div className="rounded-2xl overflow-hidden shadow-pop" style={{ width: 240, height: 300, background: color1, color: 'white' }}>
      <div className="absolute" />
      <div className="h-full w-full relative p-5 flex flex-col justify-end" style={{ fontFamily: 'Manrope' }}>
        <div className="absolute top-4 left-5 font-mono text-[9px] tracking-[0.2em] opacity-70">{isV1 ? '01 · ВВЕДЕНИЕ' : '03 · ЦИФРА'}</div>
        <div className="absolute top-4 right-5 font-mono text-[9px] tracking-[0.2em] opacity-70">OMNEEE</div>
        {isV1 ? (
          <>
            <div className="h-[3px] w-12 mb-3" style={{ background: color2 }}/>
            <div className="text-[26px] leading-[1.02] font-semibold tracking-tight" style={{ fontFamily: 'Instrument Serif, serif', fontWeight: 500 }}>
              Дизайн без AI
            </div>
            <div className="text-[12px] opacity-80 mt-2">Манифест на 2026 год</div>
          </>
        ) : (
          <>
            <div className="text-[78px] leading-[0.8] font-bold tracking-tight mb-2" style={{ color: color2, fontFamily: 'DM Serif Display, serif' }}>3×</div>
            <div className="text-[12px] opacity-85 leading-snug">рост ARR за квартал — что мы сделали</div>
          </>
        )}
        <div className="absolute bottom-4 left-5 h-[2px] w-7" style={{ background: color2 }}/>
        <div className="absolute bottom-4 right-5 font-mono text-[9px] tracking-[0.2em] opacity-50">@brand</div>
      </div>
    </div>
  );
}

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