/* eslint-disable */
const { useState, useEffect, useRef } = React;

const STREAM_START = new Date('2026-05-12T17:00:00+03:00');
const streamStartPassed = new Date() >= STREAM_START;

/* ===== Reveal-on-scroll ===== */
function useReveal() {
  useEffect(() => {
    if (!('IntersectionObserver' in window)) return;
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    const els = Array.from(document.querySelectorAll('.reveal'));
    if (els.length === 0) return;

    // Opt elements out of visibility — they'll fade in as the observer fires.
    // If anything goes wrong below, content stays visible (safe default).
    els.forEach((el) => el.classList.add('reveal-pending'));

    const clear = (el) => el.classList.remove('reveal-pending');

    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          clear(e.target);
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.05, rootMargin: '0px 0px -5% 0px' });

    // Reveal anything already in view immediately (covers initial paint).
    const vh = window.innerHeight || document.documentElement.clientHeight;
    els.forEach((el) => {
      const r = el.getBoundingClientRect();
      if (r.top < vh && r.bottom > 0) {
        clear(el);
      } else {
        io.observe(el);
      }
    });

    // Final safety net — never leave anything hidden.
    const timer = setTimeout(() => {
      document.querySelectorAll('.reveal-pending').forEach(clear);
    }, 2000);

    return () => {io.disconnect();clearTimeout(timer);};
  }, []);
}

/* ===== Sticky Nav ===== */
function Nav() {
  return (
    <header className="nav">
      <div className="nav-inner">
        <a href="#top" className="brand" aria-label="Джарвис — на главную">
          <span className="brand-prompt" aria-hidden="true">&gt;</span>
          <span className="brand-name">jarvis</span>
          <span className="brand-cursor" aria-hidden="true">_</span>
        </a>
        <span className="nav-meta">Двухдневный практикум · онлайн</span>
        <a href="#waitlist" className="btn btn-primary">Записаться →</a>
      </div>
    </header>);

}

/* ===== Terminal mock ===== */
function TerminalMock() {
  return (
    <div className="terminal reveal">
      <div className="terminal-bar">
        <span className="term-dot r"></span>
        <span className="term-dot y"></span>
        <span className="term-dot g"></span>
        <span className="term-title">~/jarvis — assistant</span>
        <span style={{ width: 33 }}></span>
      </div>
      <div className="terminal-body">
        <div className="term-line"><span className="term-prompt">$</span><span className="term-cmd">jarvis</span></div>
        <div className="term-spacer"></div>
        <div className="term-line">
          <span className="term-arrow">›</span>
          <span className="term-cmd">
            Найди в моих чатах за 3 дня всех клиентов,<br />
            кто спрашивал про цены. Составь персональные<br />
            ответы и выгрузи в таблицу.<span className="term-cursor"></span>
          </span>
        </div>
        <div className="term-spacer"></div>
        <div className="term-out ok">Найдено 7 клиентов</div>
        <div className="term-out ok">Ответы готовы</div>
        <div className="term-out ok">Таблица: <strong style={{ color: '#00D4FF' }}>3 минуты</strong> вместо 4 часов</div>
      </div>
    </div>);

}

/* ===== Hero ===== */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow reveal">
              <span className="dot"></span>
              <span>Практикум · 2 вечера · онлайн</span>
            </div>
            <h1 className="reveal hero-headline" style={{ marginTop: 20 }}>
              За 2 вечера у вас будет <span className="hl">личный ассистент,</span>&nbsp;который заменит <span className="gradient-text">5+ сотрудников</span>
            </h1>
            <p className="hero-sub reveal" style={{ fontSize: "18px" }}>
              Не ChatGPT. Не чат-бот. <b>Рабочий инструмент с памятью</b>, который знает ваш бизнес и работает 24/7 — за 2 300 ₽/мес.
            </p>

            <div className="hero-stats reveal">
              <div className="stat">
                <div className="stat-icon"><Icon name="bot" size={26} /></div>
                <div className="stat-value">5 в&nbsp;1</div>
                <div className="stat-label">сотрудников в одном ассистенте</div>
              </div>
              <div className="stat">
                <div className="stat-icon"><Icon name="banknote" size={26} /></div>
                <div className="stat-value accent">2 300 ₽</div>
                <div className="stat-label">в месяц вместо 150 000 ₽</div>
              </div>
              <div className="stat">
                <div className="stat-icon"><Icon name="zap" size={26} /></div>
                <div className="stat-value">1 неделя</div>
                <div className="stat-label">до полной окупаемости</div>
              </div>
            </div>

            <div className="hero-cta-row reveal">
              <a href="#waitlist" className="btn btn-primary btn-large">Записаться на практикум →</a>
              <a href="#program" className="btn btn-ghost btn-large">Что внутри</a>
            </div>
            <div className="hero-microtext reveal">
              <span className="dot"></span>
              <span>Группа до 10 человек. Первые 5 — бонус: персональный разбор задач.</span>
            </div>
          </div>

          <TerminalMock />
        </div>
      </div>
    </section>);

}

/* ===== Pain ===== */
function Pain() {
  const tasks = [
  { ico: 'pencil', task: 'Написать пост в Telegram', time: '40', unit: 'мин' },
  { ico: 'mic', task: 'Скрипт к созвону', time: '30', unit: 'мин' },
  { ico: 'clipboard', task: 'КП для партнёра', time: '60', unit: 'мин' },
  { ico: 'pin', task: 'Объявление на маркетплейсе', time: '20', unit: 'мин' },
  { ico: 'message', task: 'Ответ недовольному клиенту', time: '15', unit: 'мин' }];

  return (
    <section id="pain">
      <div className="container">
        <h2 className="reveal">Вы тратите <span className="gradient-text">60% времени</span> на то, что не требует вашего мозга</h2>
        <div className="pain-grid">
          {tasks.map((t, i) =>
          <div className="pain-card reveal" key={i} style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="pain-icon"><Icon name={t.ico} size={28} /></div>
              <div className="pain-task">{t.task}</div>
              <div className="pain-time">{t.time}<span className="unit">{t.unit}</span></div>
            </div>
          )}
        </div>
        <div className="pain-summary reveal">
          А ваша ставка — <span className="num">1 000–4 000 ₽/час</span>. Считайте сами.
        </div>
      </div>
    </section>);

}

/* ===== Compare ===== */
function Compare() {
  const left = [
  '«А вы кто? А что продаёте?»',
  'Каждый раз — заново',
  'Результат — 50/50',
  'Пишет как робот'];

  const right = [
  'Знает ваш бизнес и нишу',
  'Помнит всё навсегда',
  'Готовый результат за 30 секунд',
  'Пишет в вашем стиле'];

  const examples = [
  { p: '«Напиши пост про нетворкинг»', r: 'готовый текст в вашем стиле', n: '30 сек', o: 'вместо 40 мин' },
  { p: '«Клиент говорит: дорого»', r: '3 варианта ответа', n: '20 сек', o: 'вместо 15 мин' },
  { p: '«КП для салона красоты»', r: 'персональное предложение с цифрами', n: '45 сек', o: 'вместо 60 мин' }];

  return (
    <section id="compare">
      <div className="container">
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 8 }}>
          <span className="eyebrow"><span className="dot"></span>Решение</span>
        </div>
        <h2 className="reveal" style={{ textAlign: 'center', marginTop: 16 }}>
          Ваш <span className="gradient-text">Джарвис</span> <span style={{ color: 'var(--text-mute)' }}>≠ ChatGPT</span>
        </h2>
        <div className="compare-wrap reveal">
          <div className="compare-col left">
            <div className="compare-head"><Icon name="meh" size={22} /><span>Обычный AI-чат</span></div>
            {left.map((t, i) =>
            <div className="compare-row" key={i}>
                <span className="marker"></span><span>{t}</span>
              </div>
            )}
          </div>
          <div className="compare-col right">
            <div className="compare-head"><Icon name="rocket" size={22} /><span>Ваш Джарвис</span></div>
            {right.map((t, i) =>
            <div className="compare-row" key={i}>
                <span className="marker"></span><span>{t}</span>
              </div>
            )}
          </div>
        </div>
        <div className="compare-examples">
          {examples.map((e, i) =>
          <div className="example reveal" key={i} style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="example-prompt">{e.p}</div>
              <div className="example-result">→ {e.r}</div>
              <div className="example-time">
                <span className="new">{e.n}</span>
                <span className="old">{e.o}</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ===== Cases ===== */
function Cases() {
  const cases = [
  {
    initials: 'В', name: 'Выпускница, 2 поток', asst: 'Сола',
    quote: 'Сола работает, я отдыхаю. Разорвала мне директ — 47 сообщений за день, на часть уже ответила сама.'
  },
  {
    initials: 'Е', name: 'Елена, 2 поток', asst: 'Барбара',
    quote: 'Подключила рабочую почту и попросила собрать данные из писем за 3 месяца в таблицу. Готовая таблица за минуты. Потом настроила Битрикс24 — ассистент сам разобрал задачи и расставил приоритеты. Нулевой опыт в программировании.'
  },
  {
    initials: 'Л', name: 'Людмила', asst: 'Топочка',
    quote: 'Сейчас пишем грант: Топочка изучила всю документацию, предложила варианты, составила смету со сравнительными показателями. Параллельно собираем образовательную игру по моему продукту — упакуем в мобильное приложение и выложим на Рустор.'
  },
  {
    initials: 'АГ', name: 'Анатолий Гайворонский', asst: 'Жора',
    quote: '«Сегодня я сам прошёл полный цикл с новым клиентом. Принял заявку в Telegram, опросил по 7 блокам, зарегистрировал в самописной CRM через Selenium, заполнил карточку, создал рабочую TG-группу для дела, подготовил отчёт со стратегией. Всю судебную практику поднял — АБ почти 90% одобрил. Раньше эту работу делали 3 сотрудника». — пишет в чат сам ассистент Жора.'
  }];

  const results = [
  { ico: 'chart', what: <><b>161 отчёт бизнес-школы</b> → 938 задач за 3 минуты</>, was: 'вместо 2–3 дней' },
  { ico: 'contact', what: <><b>1 121 визитка</b> → полная аналитика за 2 часа</>, was: 'вместо 5–7 дней' },
  { ico: 'message', what: <><b>100 сообщений после нетворкинга</b> → 46 контактов в базу + 15 заявок за 20 минут</>, was: 'вместо 4 часов' },
  { ico: 'mail', what: <><b>38 персональных рассылок</b> → 10 минут</>, was: 'вместо 3–4 часов' },
  { ico: 'broom', what: <><b>Чистка 13 000 контактов</b> → 20 минут</>, was: 'вместо 2–3 дней' },
  { ico: 'mic', what: <><b>Транскрибация часовой записи</b> → 5 минут</>, was: 'вместо 3–4 часов' }];

  return (
    <section id="cases">
      <div className="container">
        <h2 className="reveal">За 2 недели после практикума они сделали то, <span className="gradient-text">что откладывали годами</span></h2>
        <div className="case-grid">
          {cases.map((c, i) =>
          <div className="case reveal" key={i} style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="case-head">
                <div className="avatar">{c.initials}</div>
                <div>
                  <div className="case-name">{c.name}</div>
                  <div className="case-asst">ассистент <b>«{c.asst}»</b></div>
                </div>
              </div>
              <div className="case-quote">{c.quote}</div>
            </div>
          )}
        </div>

        <div className="results-plate reveal">
          <div className="results-plate-head">
            <h3>Личный результат за 2 недели работы с Джарвисом</h3>
            <div className="who">— Михаил Старостин, ведущий практикума</div>
          </div>
          <div className="results-list">
            {results.map((r, i) =>
            <div className="result-row" key={i}>
                <span className="ico"><Icon name={r.ico} size={20} /></span>
                <span className="what">{r.what}</span>
                <span className="new">{r.was}</span>
              </div>
            )}
          </div>
          <div className="results-total">
            Итого: <span className="em">~40 часов работы ассистента</span> = 3–4 недели работы сотрудника.
          </div>
        </div>
      </div>
    </section>);

}

/* ===== Program ===== */
function Program() {
  const day1 = [
  { time: '0:00', text: <><b>Установка</b> Claude Code на ваш компьютер</> },
  { time: '0:35', text: <>Первый рабочий <b>скилл</b></> },
  { time: '1:05', text: <><b>Интеграция:</b> подключаем Telegram. «Спроси, что писал тебе клиент за 3 дня»</> }];

  const day2 = [
  { time: '0:00', text: <>Теория: <b>MCP-интеграции</b>, выбор моделей, память CLAUDE.md</> },
  { time: '0:55', text: <><b>Ваши живые задачи (60 минут)</b> — ведущий решает их в Джарвисе прямо в эфире</> },
  { time: '1:55', text: <>План: что хотите автоматизировать дальше</> }];

  const services = ['Telegram', 'Gmail', 'Google Sheets', 'Google Docs', 'Calendar', 'Notion', 'Яндекс.Диск', 'VK', 'Битрикс24', 'AmoCRM', 'Контур.Толк', 'Airtable', 'MAX', 'Банк-API', '+ ещё 6'];
  return (
    <section id="program">
      <div className="container">
        <h2 className="reveal">Что будет на <span className="gradient-text">двух днях практикума</span></h2>
        <div className="program-grid">
          <div className="day-card reveal">
            <span className="day-tag">День 1 · 2 часа</span>
            <div className="day-title">Установка ИИ-ассистента</div>
            <div className="day-duration">От нуля до рабочего ассистента в Telegram</div>
            <div className="timeline">
              {day1.map((it, i) =>
              <div className="tl-item" key={i}>
                  <div className="tl-dot"></div>
                  <div>
                    <div className="tl-time">{it.time}</div>
                    <div className="tl-text">{it.text}</div>
                  </div>
                </div>
              )}
            </div>
            <div className="day-result">
              <span className="label">Результат вечера</span>
              Рабочий Джарвис в Telegram уже вечером.
            </div>
          </div>
          <div className="day-card day-2 reveal" style={{ transitionDelay: '120ms' }}>
            <span className="day-tag">День 2 · 2,5 часа</span>
            <div className="day-title">Кастомизация под ваш бизнес</div>
            <div className="day-duration">Ваши задачи — в эфире, на ваших глазах</div>
            <div className="timeline">
              {day2.map((it, i) =>
              <div className="tl-item" key={i}>
                  <div className="tl-dot"></div>
                  <div>
                    <div className="tl-time">{it.time}</div>
                    <div className="tl-text">{it.text}</div>
                  </div>
                </div>
              )}
            </div>
            <div className="day-result">
              <span className="label">РЕЗУЛЬТАТ ВТОРОГО ДНЯ</span>
              Знаете куда расти. Ассистент решает реальные задачи вашего бизнеса.
            </div>
          </div>
        </div>

        <div className="integrations reveal">
          <div className="integrations-text">
            <b>20+ сервисов подключаются к Джарвису</b> одной командой.<br />
            Telegram, Gmail, Google календарь, Notion, Яндекс.Диск, VK, Битрикс24, AmoCRM, выписки из банка и не только.
          </div>
          <div className="int-icons">
            {services.map((s, i) =>
            <span className="int-chip" key={i}>
                <span className="ico"></span>
                {s}
              </span>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ===== Speakers ===== */
function Speakers() {
  return (
    <section id="speakers">
      <div className="container">
        <h2 className="reveal">Мы используем этот инструмент <span className="gradient-text">сами. Каждый день.</span></h2>
        <div className="speakers-grid">
          <div className="speaker reveal">
            <div className="speaker-head">
              <div className="speaker-avatar a1">МС</div>
              <div>
                <div className="speaker-name">Михаил Старостин</div>
                <div className="speaker-role">Бизнес-консультант · школа бизнеса</div>
              </div>
            </div>
            <div className="speaker-bio">
              Реализовал орг.структуры в <b>40+ компаниях</b>. Telegram-канал на 1 000+ участников, своя бизнес-школа, нетворкинги по всей России. Использует Джарвиса в консалтинге каждый день.
            </div>
            <a className="speaker-link" href="#" onClick={(e) => e.preventDefault()}>@Starostin_expert →</a>
          </div>
          <div className="speaker reveal" style={{ transitionDelay: '120ms' }}>
            <div className="speaker-head">
              <div className="speaker-avatar a2">АС</div>
              <div>
                <div className="speaker-name">Антон Сафин</div>
                <div className="speaker-role">Архитектор агентных систем · основатель Dialext</div>
              </div>
            </div>
            <div className="speaker-bio">
              Речевая аналитика для бизнеса. Внедряет Claude Code в реальные процессы. Автор канала <b>@ai_raider</b> про практическое применение AI.
            </div>
            <a className="speaker-link" href="#" onClick={(e) => e.preventDefault()}>@ai_raider →</a>
          </div>
        </div>
        <div className="speakers-quote reveal">«То, что мы покажем на практикуме, — мы делаем сами, и видим результат.»

        </div>
      </div>
    </section>);

}

/* ===== Waitlist Form ===== */
function WaitlistForm() {
  const [data, setData] = useState({ name: '', tg: '', niche: '', website: '' });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [serverError, setServerError] = useState('');

  const onSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;

    const errs = {};
    if (!data.name.trim()) errs.name = 'Укажите имя';
    if (!data.tg.trim()) errs.tg = 'Укажите Telegram';
    else if (!/^@?[A-Za-z0-9_]{3,32}$/.test(data.tg.trim())) errs.tg = 'Формат: @username (буквы, цифры, _)';
    if (!data.niche.trim()) errs.niche = 'Опишите кратко вашу нишу';
    setErrors(errs);
    if (Object.keys(errs).length > 0) return;

    setSubmitting(true);
    setServerError('');
    try {
      const body = new URLSearchParams({
        name: data.name.trim(),
        tg: data.tg.trim(),
        niche: data.niche.trim(),
        website: data.website
      });
      const res = await fetch('/submit.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
        body
      });
      const json = await res.json().catch(() => ({}));
      if (res.ok && json.ok) {
        setSent(true);
        if (window.ym) window.ym(108769274, 'reachGoal', 'waitlist_submit');
      } else if (res.status === 422 && Array.isArray(json.errors)) {
        const map = { name: 'Проверьте имя', tg: 'Проверьте Telegram', niche: 'Проверьте нишу' };
        const fieldErrs = {};
        json.errors.forEach((f) => fieldErrs[f] = map[f] || 'Проверьте поле');
        setErrors(fieldErrs);
      } else if (res.status === 429) {
        setServerError('Слишком много попыток. Попробуйте через минуту.');
      } else {
        setServerError('Не получилось отправить. Попробуйте ещё раз или напишите @Oldinfree.');
      }
    } catch (_) {
      setServerError('Нет связи с сервером. Проверьте интернет и попробуйте ещё раз.');
    } finally {
      setSubmitting(false);
    }
  };

  if (sent) {
    return (
      <div className="waitlist" id="waitlist">
        <div className="waitlist-success">
          <div className="success-check">✓</div>
          <h4>Вы в списке.</h4>
          <p>Напишем в Telegram <b>{data.tg.startsWith('@') ? data.tg : '@' + data.tg}</b>, как только откроем набор.</p>
        </div>
      </div>);

  }

  return (
    <div className="waitlist" id="waitlist">
      <h3>Записаться на следующий поток</h3>
      <p className="waitlist-sub">
        {streamStartPassed
          ? 'Без спама, без рассрочек, без «успей за 24 часа».'
          : <>Старт — <b>12 мая в 17:00 МСК</b>. Без спама, без рассрочек, без «успей за 24 часа».</>}
      </p>
      <form className="waitlist-form" onSubmit={onSubmit} noValidate>
        <div className="field">
          <label htmlFor="f-name">Имя</label>
          <input id="f-name" type="text" placeholder="Как к вам обращаться" autoComplete="name"
          value={data.name} onChange={(e) => setData({ ...data, name: e.target.value })} disabled={submitting} />
          <div className="field-error">{errors.name || ''}</div>
        </div>
        <div className="field">
          <label htmlFor="f-tg">Telegram-username</label>
          <input id="f-tg" type="text" placeholder="@username" autoComplete="off"
          value={data.tg} onChange={(e) => setData({ ...data, tg: e.target.value })} disabled={submitting} />
          <div className="field-error">{errors.tg || ''}</div>
        </div>
        <div className="field">
          <label htmlFor="f-niche">Ваша деятельность / ниша</label>
          <input id="f-niche" type="text" placeholder="Психолог, маркетолог, владелец салона…"
          value={data.niche} onChange={(e) => setData({ ...data, niche: e.target.value })} disabled={submitting} />
          <div className="field-error">{errors.niche || ''}</div>
        </div>
        {/* Honeypot — hidden from real users, submitted by simple bots */}
        <div style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, overflow: 'hidden' }} aria-hidden="true">
          <label>Сайт<input type="text" tabIndex={-1} autoComplete="off"
            value={data.website} onChange={(e) => setData({ ...data, website: e.target.value })} /></label>
        </div>
        <button type="submit" className="btn btn-primary btn-large btn-block" style={{ marginTop: 8 }} disabled={submitting}>
          {submitting ? 'Отправляем…' : 'Записаться на практикум →'}
        </button>
        {serverError && <div className="field-error" style={{ marginTop: 12, textAlign: 'center' }}>{serverError}</div>}
      </form>
      <div className="waitlist-fineprint">
        Группа до 10 человек. Первые 5 — бонус: персональный разбор задач.<br />Напишем в Telegram, как только откроем набор.
      </div>
      <div style={{ textAlign: 'center', marginTop: 16 }}>
        <a href="https://t.me/+pMWeBQH424lhOTdi" target="_blank" rel="noopener"
           style={{ color: 'var(--accent-2)', fontSize: 14 }}>
          Вступить в чат практикума →
        </a>
      </div>
    </div>);

}

/* ===== Pricing ===== */
function Pricing() {
  return (
    <section id="pricing">
      <div className="container">
        <h2 className="reveal">Сколько стоит <span style={{ color: 'var(--text-mute)' }}>и</span> <span className="gradient-text">когда отбивается</span></h2>
        <div className="pricing-grid">
          <div className="price-card reveal">
            <h3>Стоимость</h3>
            <div className="price-rows">
              <div className="price-row">
                <span className="label">Практикум</span>
                <span className="val"><span className="strike">20 000 ₽</span><span className="now">15 700 ₽</span></span>
              </div>
              <div className="price-row">
                <span className="label">Claude Pro</span>
                <span className="val">~2 500 ₽<span style={{ color: 'var(--text-mute)', fontWeight: 400, marginLeft: 4 }}>/мес</span></span>
              </div>
              <div className="price-row">
                <span className="label">VPN</span>
                <span className="val">~500 ₽<span style={{ color: 'var(--text-mute)', fontWeight: 400, marginLeft: 4 }}>/мес</span></span>
              </div>
            </div>
            <div className="price-total">
              <span className="label">Итого 1-й месяц</span>
              <span className="val">18 700 ₽</span>
            </div>
          </div>
          <div className="roi-card reveal" style={{ transitionDelay: '120ms' }}>
            <h3>Окупаемость</h3>
            <div className="roi-body">
              При 5 автоматизируемых задачах в день вы экономите <b className="big">20 часов/мес</b>.<br /><br />
              При Вашей ставке 1 000–4 000 ₽/час это <b className="big">20 000–80 000 ₽</b> прибыли в месяц.
            </div>
            <div className="roi-list">
              <div className="row"><Icon name="check" size={16} style={{ color: '#34D399', flexShrink: 0 }} /><span><b>Неделя 1</b> — отбили вложения</span></div>
              <div className="row"><Icon name="check" size={16} style={{ color: '#34D399', flexShrink: 0 }} /><span><b>Неделя 2+</b> — чистая прибыль</span></div>
            </div>
          </div>
        </div>

        <WaitlistForm />
      </div>
    </section>);}

/* ===== FAQ ===== */
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
  { q: 'Это сложно? Я не программист.', a: 'Claude работает на русском. Интерфейс проще Word. На первом вечере всё настроим вместе — готовиться не нужно.' },
  { q: 'Это не дорого?', a: '2 500 ₽/мес — цена двух бизнес-ланчей. Экономит 3–4 часа в день. В первую неделю отбивается.' },
  { q: 'Чем это отличается от ChatGPT?', a: 'Claude — рабочий инструмент с памятью. Не чат-бот для развлечений. Он знает вас, ваш бизнес, ваш стиль.' },
  { q: 'Безопасность данных?', a: 'Anthropic — мировой лидер AI Safety. Данные не утекут.' }];

  return (
    <section className="faq" id="faq">
      <div className="container">
        <h3 className="reveal" style={{ textAlign: 'center', fontSize: 'clamp(24px,3vw,32px)', fontWeight: 800, letterSpacing: '-0.02em' }}>Что обычно спрашивают</h3>
        <div className="faq-list reveal">
          {items.map((it, i) =>
          <div className={`faq-item ${open === i ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <Icon name="help" size={20} style={{ color: 'var(--accent-2)', flexShrink: 0 }} />
                  <span>{it.q}</span>
                </span>
                <span className="arrow">
                  <svg viewBox="0 0 12 12" fill="none"><path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ===== Footer ===== */
function Footer() {
  return (
    <footer>
      <div className="links">
        <a href="#waitlist">Waitlist</a>
        <a href="#program">Программа</a>
        <a href="#speakers">Кто ведёт</a>
        <a href="#" onClick={(e) => e.preventDefault()}>Политика конфиденциальности</a>
        <a href="/lk/">Личный кабинет</a>
      </div>
      <div>© 2026 Практикум «Джарвис» · Михаил Старостин & Антон Сафин</div>
    </footer>);

}

/* ===== Mobile sticky CTA ===== */
function MobileCTA() {
  return (
    <div className="mobile-cta">
      <a href="#waitlist" className="btn btn-primary">Записаться на практикум →</a>
    </div>);

}

/* ===== Hide mobile sticky CTA when the waitlist form is on screen ===== */
function useMobileCtaWhenAway() {
  useEffect(() => {
    if (!('IntersectionObserver' in window)) return;
    const cta = document.querySelector('.mobile-cta');
    const target = document.querySelector('#waitlist');
    if (!cta || !target) return;
    const io = new IntersectionObserver(
      ([entry]) => cta.classList.toggle('mobile-cta--hidden', entry.isIntersecting),
      { threshold: 0.15 }
    );
    io.observe(target);
    return () => io.disconnect();
  }, []);
}

/* ===== App ===== */
function App() {
  useReveal();
  useMobileCtaWhenAway();
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Pain />
        <Compare />
        <Cases />
        <Program />
        <Speakers />
        <Pricing />
        <FAQ />
      </main>
      <Footer />
      <MobileCTA />
    </>);

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);