// Питч — landing app
const { useState, useEffect, useRef, useMemo } = React;

const ACCENTS = {
  mint: { h: 152, label: 'Мята' },
  tang: { h: 50, label: 'Мандарин' },
  violet: { h: 290, label: 'Электрик' }
};

const H1_VARIANTS = {
  fitness: {
    pre: 'Не учи ответы.',
    main: <>Тренируй <em>мышцу</em>.</>,
    sub: 'Голосовой тренажёр продуктовых собесов. 5 минут в день — и ты в форме для любого оффера.',
    label: '«Фитнес для головы»'
  },
  duolingo: {
    pre: <>5 минут в день —</>,
    main: <>и любой собес <em>тебе по плечу</em>.</>,
    sub: 'Лента голосовых карточек с мгновенным AI-разбором. Стрики, лига и карта компетенций.',
    label: '«Duolingo для собесов»'
  },
  metro: {
    pre: <>Питч.</>,
    main: <>Прокачай себя <em>за время в&nbsp;метро</em>.</>,
    sub: 'Короткие голосовые тренировки вместо месяца зубрёжки. Привычка вместо паники.',
    label: '«За время в метро»'
  }
};

const QUESTIONS = [
{ tag: 'Блиц', cat: 'blitz', text: 'Что ты сделаешь в первые 30 дней на должности PM в продукте, который теряет 12% MAU?' },
{ tag: 'Behavioral', cat: 'behavior', text: 'Расскажи о ситуации, когда ты не согласился с дизайнером. Чем закончилось?' },
{ tag: 'Кейс', cat: 'case', text: 'Метрика "время в приложении" выросла на 30%. Это хорошо или плохо? Какие гипотезы?' },
{ tag: 'Mini-theory', cat: 'theory', text: 'Объясни North Star Metric за 30 секунд. Дай 2 примера из ритейла.' },
{ tag: 'Блиц', cat: 'blitz', text: 'Команда говорит «давай зарелизим без AB-теста». Что отвечаешь?' },
{ tag: 'Behavioral', cat: 'behavior', text: 'Самый болезненный продукт-фейл? Что ты вынес из него?' }];


// ---------------------------- Phone Mockup -----------------------------------

function Phone() {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % QUESTIONS.length), 4200);
    return () => clearInterval(t);
  }, []);

  const stack = useMemo(() => {
    const a = [];
    for (let k = -1; k <= 2; k++) {
      const q = QUESTIONS[(idx + k + QUESTIONS.length) % QUESTIONS.length];
      a.push({ q, slot: k });
    }
    return a;
  }, [idx]);

  return (
    <div className="phone-stage">
      <div className="phone">
        <div className="phone-notch" />
        <div className="phone-screen">
          <div className="phone-status">
            <span>9:41</span>
            <span className="right">
              <svg width="16" height="10" viewBox="0 0 16 10"><path d="M1 9 C 4 4, 12 4, 15 9" stroke="#1a1a17" strokeWidth="1.4" fill="none" /></svg>
              <svg width="18" height="10" viewBox="0 0 18 10"><rect x="0.5" y="1.5" width="14" height="7" rx="1.5" stroke="#1a1a17" fill="none" /><rect x="2" y="3" width="10" height="4" rx="0.5" fill="#1a1a17" /><rect x="15" y="3.5" width="1.5" height="3" rx="0.5" fill="#1a1a17" /></svg>
            </span>
          </div>
          <div className="app" data-comment-anchor="e1a64c3d6f-div-70-11">
            <div className="app-top">
              <div className="app-greet">Привет, Аня <span>Сегодня 3 карточки</span></div>
              <div className="app-streak"><span className="flame">🔥</span>14</div>
            </div>

            <div className="q-stack">
              {stack.map(({ q, slot }, i) =>
              <div key={`${idx}-${slot}-${i}`} className={`q-card ${q.cat} idx-${slot}`}>
                  <div className="q-tag"><span className="sq" />{q.tag}</div>
                  <div className="q-text">{q.text}</div>
                  <div className="q-meta">
                    <span>≈ 60 сек ответ</span>
                    <span>{slot === 0 ? '1/3' : ''}</span>
                  </div>
                </div>
              )}
            </div>

            <div className="record">
              <div className="record-btn" />
              <div className="wave">
                {Array.from({ length: 22 }).map((_, i) =>
                <i key={i} style={{ animationDelay: `${i * 0.07 % 1.1}s`, height: `${6 + i * 17 % 18}px` }} />
                )}
              </div>
              <span className="mono" style={{ fontSize: 11, color: '#8B8B85' }}>0:12</span>
            </div>

            <div className="app-nav" style={{ marginTop: 14, marginLeft: -18, marginRight: -18, marginBottom: -18 }}>
              <div className="ni active" />
              <div className="ni" />
              <div className="ni" />
              <div className="ni" />
            </div>
          </div>
        </div>
      </div>

      <div className="float float-1">
        <span className="ic" style={{ background: 'var(--coral-soft)' }}>🔥</span>
        <div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 500 }}>стрик</div>
          <div>14 дней подряд</div>
        </div>
      </div>

      <div className="float float-2">
        <span className="ic" style={{ background: 'var(--accent-soft)', color: 'var(--accent-deep)' }}>✓</span>
        <div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 500 }}>Product Sense</div>
          <div>+12% за неделю</div>
        </div>
      </div>

      <div className="float float-3">
        <span className="ic" style={{ background: 'oklch(0.93 0.07 80)' }}>⚡</span>
        <div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 500 }}>лига</div>
          <div>Топ-3% недели</div>
        </div>
      </div>
    </div>);

}

// ---------------------------- Nav --------------------------------------------

function Nav({ onCta }) {
  return (
    <div className="nav">
      <div className="nav-inner">
        <div className="brand">
          <div className="brand-mark">П</div>
          Питч
        </div>
        <div className="nav-links">
          <a href="#how">Как это работает</a>
          <a href="#features">Что внутри</a>
          <a href="#pricing">Цены</a>
          <a href="#faq">FAQ</a>
        </div>
        <button className="btn btn-accent" onClick={onCta}>Ранний доступ →</button>
      </div>
    </div>);

}

// ---------------------------- Hero -------------------------------------------

function Hero({ variant, onCta }) {
  const v = H1_VARIANTS[variant];
  return (
    <section className="hero hero-solo">
      <div className="wrap">
        <div className="hero-solo-inner">
          <div className="eyebrow"><span className="dot"></span> Запуск весной 2026 · Waitlist открыт</div>
          <h1 className="h1 h1-center">{v.pre} {v.main}</h1>
          <p className="lead lead-center">{v.sub}</p>
          <div className="hero-ctas hero-ctas-center">
            <button className="btn btn-accent btn-lg" onClick={onCta}>Получить ранний доступ</button>
            <a href="#how" className="btn btn-ghost btn-lg">Как это работает</a>
          </div>
          <div className="hero-meta hero-meta-center">
            <span className="pill"><span className="check">✓</span> Бесплатный план навсегда</span>
            <span className="pill"><span className="check">✓</span> -50% для первых 500</span>
            <span className="pill"><span className="check">✓</span> iOS · Android</span>
          </div>
        </div>
      </div>
    </section>);

}

// ---------------------------- How it works -----------------------------------

function HowItWorks() {
  return (
    <section id="how">
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">01</span> Как это устроено</div>
        <h2 className="section-title">Три шага. Никакой теории — сразу практика.</h2>
        <p className="section-sub">Открыл, ответил, получил разбор. Дальше — следующая карточка.</p>

        <div className="how-grid">
          <div className="how-card">
            <div className="how-vis">
              <div className="q-card" style={{ minHeight: 0, padding: 12 }}>
                <div className="q-tag"><span className="sq" />Блиц</div>
                <div className="q-text" style={{ fontSize: 13 }}>Метрика просмотров выросла на 30%. Хорошо или плохо?</div>
              </div>
              <div className="q-card behavior" style={{ minHeight: 0, padding: 12, opacity: .6 }}>
                <div className="q-tag"><span className="sq" />Behavioral</div>
                <div className="q-text" style={{ fontSize: 13 }}>Конфликт с дизайнером — расскажи кейс.</div>
              </div>
            </div>
            <div>
              <div className="how-num">01 / Открой</div>
              <div className="how-h">Лента карточек</div>
              <div className="how-p">Свайпай и выбирай. Блиц, поведенческие, кейсы, мини-теория — всё перемешано как реальный собес.</div>
            </div>
          </div>

          <div className="how-card">
            <div className="how-vis" style={{ alignItems: 'center', justifyContent: 'center', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div className="record-btn" style={{ width: 70, height: 70 }} />
              <div className="wave" style={{ width: '100%', height: 36, textAlign: "center", alignItems: "center" }}>
                {Array.from({ length: 28 }).map((_, i) =>
                <i key={i} style={{ animationDelay: `${i * 0.06 % 1.1}s`, height: `${6 + Math.abs(Math.sin(i * 0.7)) * 28}px`, background: 'var(--ink)' }} />
                )}
              </div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>0:42 / 1:30</div>
            </div>
            <div>
              <div className="how-num">02 / Запиши</div>
              <div className="how-h">Голосовой ответ</div>
              <div className="how-p">До 90 секунд. Говори вслух — так же, как сказал бы на реальном собесе.</div>
            </div>
          </div>

          <div className="how-card">
            <div className="how-vis">
              <div className="review">
                <div className="review-item">
                  <div className="review-tag good">SOLID</div>
                  <div className="review-text">Чёткая структура «проблема → гипотеза → метрика».</div>
                </div>
                <div className="review-item">
                  <div className="review-tag warn">WEAK</div>
                  <div className="review-text">Не назвал ни одного контр-кейса. Звучит слишком уверенно.</div>
                </div>
                <div className="review-item">
                  <div className="review-tag tip">FIX</div>
                  <div className="review-text">Добавь сегментацию: «для каких юзеров рост — это плохо?»</div>
                </div>
              </div>
            </div>
            <div>
              <div className="how-num">03 / Получи</div>
              <div className="how-h">Разбор за 5 секунд</div>
              <div className="how-p">Три конкретных пункта от AI: что сильно, что слабо, что улучшить. Плюс эталон от senior PM.</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ---------------------------- Features ---------------------------------------

const SKILLS = [
{ name: 'Product Sense', pct: 78 },
{ name: 'Analytics', pct: 64 },
{ name: 'Leadership', pct: 52 },
{ name: 'Communication', pct: 81 }];


function Features() {
  return (
    <section id="features" style={{ paddingTop: 40 }}>
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">02</span> Что внутри</div>
        <h2 className="section-title">Не курс. Не книжка. Инструмент, который встроится в твой день.</h2>

        <div className="feat-grid">
          <div className="feat">
            <div className="feat-ic">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="6" rx="2" /><rect x="3" y="14" width="18" height="6" rx="2" /></svg>
            </div>
            <div className="feat-h">Бесконечная лента вопросов</div>
            <div className="feat-p">Блиц, поведенческие, кейсы, мини-теория. Свайпай, отвечай, тренируйся — как тренируют мышцы в зале, по одной за подход.</div>
            <div className="feat-vis">
              <div className="tags">
                <span className="tagi">Блиц</span>
                <span className="tagi">Behavioral</span>
                <span className="tagi">Кейс-интервью</span>
                <span className="tagi">Метрики</span>
                <span className="tagi">North Star</span>
                <span className="tagi">Prioritization</span>
                <span className="tagi">Stakeholder mgmt</span>
                <span className="tagi">RICE/ICE</span>
                <span className="tagi">Discovery</span>
                <span className="tagi">A/B-тесты</span>
                <span className="tagi">+ ещё 120 тегов</span>
              </div>
            </div>
          </div>

          <div className="feat">
            <div className="feat-ic">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l1.5 5.5L19 9l-5 4 1.5 6L12 16l-3.5 3L10 13 5 9l5.5-1.5z" /></svg>
            </div>
            <div className="feat-h">AI-разбор за 5 секунд</div>
            <div className="feat-p">Не лекция, а три конкретных пункта: что сильно, что слабо, что улучшить. Без занудства и «давайте поговорим о том, что вы сказали».</div>
            <div className="feat-vis">
              <div className="review">
                <div className="review-item"><div className="review-tag good">+</div><div className="review-text">Структурный ответ, чёткие метрики.</div></div>
                <div className="review-item"><div className="review-tag warn">−</div><div className="review-text">Нет рисков и контр-аргументов.</div></div>
                <div className="review-item"><div className="review-tag tip">→</div><div className="review-text">Добавь сегментацию по аудитории.</div></div>
              </div>
            </div>
          </div>

          <div className="feat">
            <div className="feat-ic">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" /></svg>
            </div>
            <div className="feat-h">Эталонные ответы от senior PM</div>
            <div className="feat-p">Послушай, как бы ответил sr PM из крупного маркетплейса или банка. Учись на примерах, а не в вакууме.</div>
            <div className="feat-vis" style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center', background: 'var(--card)', padding: 10, borderRadius: 10, border: '1px solid var(--line)' }}>
                <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--accent)', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 13, color: '#0c1f14' }}>01</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 13 }}>Эталонный ответ</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>0:48 · структурный разбор</div>
                </div>
                <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--ink)', display: 'grid', placeItems: 'center', color: 'var(--bg)' }}>▶</div>
              </div>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center', background: 'var(--card)', padding: 10, borderRadius: 10, border: '1px solid var(--line)' }}>
                <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'oklch(0.72 0.17 280)', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 13, color: 'oklch(0.2 0.1 280)' }}>02</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 13 }}>Альтернативный ответ</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>1:02 · взгляд под другим углом</div>
                </div>
                <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--line)', display: 'grid', placeItems: 'center' }}>▶</div>
              </div>
            </div>
          </div>

          <div className="feat">
            <div className="feat-ic">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 20h18" /><path d="M6 16v4M11 10v10M16 13v7M21 6v14" /></svg>
            </div>
            <div className="feat-h">Стрики и карта компетенций</div>
            <div className="feat-p">Прокачивай Product Sense, Analytics, Leadership и Communication. Видишь прогресс — двигаешься дальше.</div>
            <div className="feat-vis" style={{ padding: 16 }}>
              <div className="skills-grid">
                {SKILLS.map((s) =>
                <div key={s.name} className="skill-row" style={{ flexDirection: 'column', alignItems: 'stretch', gap: 4 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span>{s.name}</span>
                      <span className="skill-pct">{s.pct}%</span>
                    </div>
                    <div className="skill-bar"><div className="skill-fill" style={{ width: `${s.pct}%` }} /></div>
                  </div>
                )}
              </div>
              <div style={{ marginTop: 14, fontSize: 11, color: 'var(--ink-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.05 }}>Стрик · 14 дней</div>
              <div className="streak-grid" style={{ marginTop: 6 }}>
                {Array.from({ length: 60 }).map((_, i) => {
                  const lvl = [0, 0, 0, 1, 2, 3, 3, 2, 1, 3, 3, 2, 3, 3][i % 14];
                  return <i key={i} className={lvl ? `l${lvl}` : ''} />;
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ---------------------------- Why it works -----------------------------------

function Why() {
  return (
    <section style={{ padding: '20px 0 40px' }}>
      <div className="wrap">
        <div className="why">
          <div className="section-eyebrow"><span className="num">03</span> Почему это работает</div>
          <h2 className="section-title" style={{ color: 'var(--bg)' }}>Регулярность бьёт интенсивность. <span className="why-big">Всегда.</span></h2>
          <div className="why-grid">
            <div>
              <h3>Маленькие сессии,<br /><span className="why-big">большой эффект.</span></h3>
              <p>5 минут в день надёжнее, чем выходной за день до собеса. Мозг учится повторением, а не марафоном.</p>
            </div>
            <div>
              <h3>Голос <span className="why-big">важнее</span> текста.</h3>
              <p>На собесе ты говоришь, а не печатаешь. Тренируй то, что реально сдаёшь — формулировки, темп, паузы.</p>
            </div>
            <div>
              <h3>Привычка <span className="why-big">вместо</span> паники.</h3>
              <p>Не готовься к собесу — будь готов к нему всегда. Тогда оффер мечты не застанет тебя врасплох.</p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ---------------------------- Social proof -----------------------------------

function Social() {
  return (
    <section style={{ paddingTop: 40 }}>
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">04</span> Кто за этим стоит</div>
        <h2 className="section-title">Сделано продактами для продактов.</h2>

        <div className="social">
          <div className="founder">
            <div className="founder-pic"><img src="founder.jpeg" alt="Ярослав Салтыков" style={{ objectFit: "cover", width: "96px", height: "96px" }} /></div>
            <div>
              <div className="founder-name">Ярослав Салтыков · автор Питча</div>
              <div className="founder-bio">9 лет в продукте. Проходил собесы и нанимал PM-ов. Знаю, в каком месте обычно «плывут» кандидаты — и собрал инструмент, который тренирует именно это.</div>
            </div>
          </div>
          <div className="quote">
            <div>
              <span className="mark">"</span>
              <div style={{ marginTop: -16 }}>За две недели в Питче перестал «плавать» на behavioral. На собесе в Озоне это сразу заметили.</div>
            </div>
            <div className="by">— Михаил, PM · бета-тестер</div>
          </div>
        </div>
      </div>
    </section>);

}

// ---------------------------- Comparison -------------------------------------

function Compare() {
  const rows = [
  ['Регулярность', 'Сложно', 'Раз в неделю', 'Скучно', 'Каждый день'],
  ['Цена за месяц', '0–5 000 ₽', '15 000–40 000 ₽', '2 000 ₽', '990 ₽'],
  ['Голосовая практика', '—', 'да', '—', 'да'],
  ['Привычка', '—', '—', '—', 'да'],
  ['Прогресс виден', '—', 'субъективно', '—', 'карта компетенций']];

  const mark = (s) => s === '—' ? <span className="no">—</span> : <span className={s === 'да' || s.includes('каждый') || s.includes('карта') ? 'yes' : ''}>{s}</span>;
  return (
    <section>
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">05</span> Сравнение</div>
        <h2 className="section-title">Как PM-ы готовятся обычно — и где здесь Питч.</h2>

        <div className="compare">
          <table>
            <thead>
              <tr>
                <th></th>
                <th>Книги и курсы</th>
                <th>Ментор</th>
                <th>ChatGPT</th>
                <th className="us">Питч</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) =>
              <tr key={i}>
                  <td>{r[0]}</td>
                  <td>{mark(r[1])}</td>
                  <td>{mark(r[2])}</td>
                  <td>{mark(r[3])}</td>
                  <td className="us">{mark(r[4])}</td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </section>);

}

// ---------------------------- Demo -------------------------------------------

function Demo() {
  return (
    <section>
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">06</span> Посмотреть в деле</div>
        <h2 className="section-title">30 секунд — и ты понял, как это работает.</h2>

        <div className="demo">
          <div>
            <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', marginBottom: 12 }}>Один экран. Одна карточка. Одна минута.</div>
            <p style={{ color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.55 }}>
              Открой ленту → нажми запись → ответь голосом → получи разбор и эталон. Никаких форм, чек-листов и «давай поговорим».
            </p>
            <div style={{ display: 'flex', gap: 24, marginTop: 28 }}>
              <div>
                <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>00:00 — 00:05</div>
                <div style={{ fontWeight: 700, fontSize: 15 }}>Свайп карточки</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>00:05 — 00:35</div>
                <div style={{ fontWeight: 700, fontSize: 15 }}>Голосовой ответ</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>00:35 — 00:45</div>
                <div style={{ fontWeight: 700, fontSize: 15 }}>AI-разбор + эталон</div>
              </div>
            </div>
          </div>
          <div className="demo-vid">
            <div className="demo-time">0:42</div>
            <div className="demo-play" />
            <div className="demo-cap">«Опиши метрику, по которой Авто.ру понимает, что новый поиск работает...»</div>
          </div>
        </div>
      </div>
    </section>);

}

// ---------------------------- Pricing ----------------------------------------

function Pricing({ onCta }) {
  return (
    <section id="pricing">
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">06</span> Цены</div>
        <h2 className="section-title">Выбери комфортный темп. Менять можно когда угодно.</h2>

        <div className="price-grid">
          <div className="plan">
            <div className="plan-name">Free</div>
            <div className="plan-price">0 ₽<small> / навсегда</small></div>
            <div className="plan-desc">Полноценный free tier, не пробник на 7 дней.</div>
            <ul className="plan-feat">
              <li>10 ответов в день</li>
              <li>Базовые категории вопросов</li>
              <li>Стрики и дневной прогресс</li>
              <li className="dim">AI-разборы — короткая версия</li>
              <li className="dim">Эталоны senior PM</li>
              <li className="dim">Карта компетенций</li>
            </ul>
            <button className="btn btn-ghost plan-cta" onClick={onCta}>Начать бесплатно</button>
          </div>

          <div className="plan featured">
            <div className="plan-tag">Популярный</div>
            <div className="plan-name">Pro</div>
            <div className="plan-price">990 ₽<small> / мес</small></div>
            <div className="plan-desc">Для тех, кто хочет держать форму без спешки.</div>
            <ul className="plan-feat">
              <li>Безлимит ответов</li>
              <li>Все категории и теги</li>
              <li>Полные AI-разборы по 3 пунктам</li>
              <li>Эталонные ответы от senior PM</li>
              <li>Карта компетенций и лиги</li>
              <li>1 mock-собес в месяц</li>
            </ul>
            <button className="btn btn-accent plan-cta" onClick={onCta}>Получить ранний доступ</button>
          </div>

          <div className="plan">
            <div className="plan-name">Pro+</div>
            <div className="plan-price">2 490 ₽<small> / мес</small></div>
            <div className="plan-desc">Для тех, кто прямо сейчас активно собеседуется.</div>
            <ul className="plan-feat">
              <li>Всё из Pro</li>
              <li>4 mock-собеса в месяц</li>
              <li>Интервью под конкретные компании</li>
              <li>Персональный фокус по слабым местам</li>
              <li>Приоритетная поддержка</li>
              <li>Доступ к закрытому чату</li>
            </ul>
            <button className="btn btn-ghost plan-cta" onClick={onCta}>Получить ранний доступ</button>
          </div>
        </div>

        <div style={{ textAlign: 'center', marginTop: 28, color: 'var(--ink-3)', fontSize: 13 }}>
          Деньги возвращаем в первые 14 дней без вопросов. Без автоматического продления — отменить можно в один клик.
        </div>
      </div>
    </section>);

}

// ---------------------------- FAQ --------------------------------------------

const FAQS = [
{ q: 'Это правда работает за 5 минут в день?', a: 'Да, если эти 5 минут — каждый день. Мы не обещаем, что за неделю ты выйдешь на оффер senior PM в Яндексе. Но через месяц регулярных сессий ты перестанешь «плыть» на behavioral и научишься структурировать ответ за 30 секунд.' },
{ q: 'Что лучше — ваше приложение или живой ментор?', a: 'Это разные инструменты. Ментор даёт глубокий разбор раз в неделю и стоит 15–40 тысяч в месяц. Питч даёт ежедневный объём практики за 990 ₽. Идеально — комбинировать: с ментором обсуждать карьеру и подходы, в Питче нарабатывать рефлекс отвечать.' },
{ q: 'На каких компаниях вы фокусируетесь?', a: 'Российский продуктовый рынок: маркетплейсы, банки, ритейл, B2C-сервисы. Контент собран с senior PM-ами из ведущих компаний РФ. Mock-интервью на Pro+ можно настраивать под конкретные компании.' },
{ q: 'Работает на iPhone и Android?', a: 'Да, обе платформы. На запуске сначала выйдет iOS, Android — через 2–4 недели. Подпишись на waitlist, чтобы получить инвайт первым.' },
{ q: 'Когда запуск?', a: 'Закрытая бета — в феврале 2026, открытый запуск — весной 2026. Первые 500 подписчиков waitlist получают Pro по 490 ₽/мес на год.' },
{ q: 'Что если мне не понравится — вернёте деньги?', a: 'Да, в первые 14 дней — без вопросов и анкет. Просто напиши в поддержку, вернём 100% оплаты.' }];


function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="wrap">
        <div className="section-eyebrow"><span className="num">07</span> FAQ</div>
        <h2 className="section-title">Главные вопросы — сразу.</h2>

        <div className="faq">
          {FAQS.map((item, i) =>
          <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="ico">+</span>
              </button>
              <div className="faq-a">{item.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------------------------- Final CTA + Form ------------------------------

function Final({ formRef }) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({ email: '', role: '', when: '', platform: '', company: '' });
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (!data.email || submitting) return;
    setSubmitting(true);
    setError('');
    try {
      const res = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: data.email })
      });
      if (!res.ok) throw new Error('bad_status');
      setStep(1);
    } catch (err) {
      setError('Не удалось отправить. Попробуй ещё раз.');
    } finally {
      setSubmitting(false);
    }
  };

  const sendDetails = async () => {
    try {
      await fetch('/api/waitlist', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: data.email,
          role: data.role,
          when: data.when,
          platform: data.platform,
          company: data.company
        })
      });
    } catch (_) {}
    setStep(2);
  };

  return (
    <section className="final" id="signup" ref={formRef}>
      <div className="wrap">
        <div className="final-card">
          {step === 0 ?
          <>
              <h2>Запуск весной 2026.<br />Подпишись — пришлём <em style={{ fontStyle: 'italic', fontFamily: "'Instrument Serif', serif", fontWeight: 400, color: 'var(--accent)' }}>приглашение</em> первым.</h2>
              <p>И скидку 50% на первый год Pro. Без спама — только апдейты по запуску.</p>
              <form className="final-form" onSubmit={submit}>
                <input type="email" required placeholder="ты@почта.рф" value={data.email} onChange={(e) => setData({ ...data, email: e.target.value })} disabled={submitting} />
                <button className="btn btn-accent" type="submit" disabled={submitting}>{submitting ? 'Отправляем…' : 'Получить инвайт →'}</button>
              </form>
              {error && <div style={{ marginTop: 12, color: '#ff6b6b', fontSize: 13 }}>{error}</div>}
              <div className="final-stores">
                <span className="store-pill">🍎 Скоро в App Store</span>
                <span className="store-pill">▶ Скоро в Google Play</span>
              </div>
            </> :

          <>
              <h2 style={{ marginBottom: 12 }}>Готово. <em style={{ fontStyle: 'italic', fontFamily: "'Instrument Serif', serif", fontWeight: 400, color: 'var(--accent)' }}>Ты в списке.</em></h2>
              <p style={{ marginBottom: 32 }}>Расскажи чуть больше — мы соберём контент именно под твою роль и таймлайн.</p>

              <div className="form-card" style={{ background: 'rgba(255,255,255,.04)', borderColor: 'rgba(255,255,255,.1)', margin: '0 auto', textAlign: 'left' }}>
                <FormFields data={data} setData={setData} onDone={sendDetails} />
              </div>
            </>
          }

          {step === 2 &&
          <div style={{ marginTop: 24, padding: 24, background: 'rgba(255,255,255,.04)', borderRadius: 16, textAlign: 'center' }}>
              <div style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>Спасибо 🔥</div>
              <p style={{ margin: '0 auto', maxWidth: 480 }}>Ты в списке. Пришлём инвайт первым, как только откроем бету.</p>
            </div>
          }
        </div>
      </div>
    </section>);

}

function FormFields({ data, setData, onDone }) {
  const roles = ['PM', 'Senior PM', 'Group / Lead PM', 'Head of Product', 'Аналитик', 'Дизайнер', 'Другое'];
  const whens = ['Уже сейчас', '1–3 месяца', '3–6 месяцев', 'Просто держу форму'];
  const platforms = ['iPhone', 'Android', 'Обе'];

  const valid = data.role && data.when && data.platform;

  return (
    <form onSubmit={(e) => {e.preventDefault();if (valid) onDone();}}>
      <div className="form-row">
        <label>На какую роль готовишься?</label>
        <div className="chips">
          {roles.map((r) =>
          <button type="button" key={r} className={`chip ${data.role === r ? 'on' : ''}`} onClick={() => setData({ ...data, role: r })}>{r}</button>
          )}
        </div>
      </div>
      <div className="form-row">
        <label>Когда планируешь активно собеседоваться?</label>
        <div className="chips">
          {whens.map((w) =>
          <button type="button" key={w} className={`chip ${data.when === w ? 'on' : ''}`} onClick={() => setData({ ...data, when: w })}>{w}</button>
          )}
        </div>
      </div>
      <div className="form-row">
        <label>Какая платформа?</label>
        <div className="chips">
          {platforms.map((p) =>
          <button type="button" key={p} className={`chip ${data.platform === p ? 'on' : ''}`} onClick={() => setData({ ...data, platform: p })}>{p}</button>
          )}
        </div>
      </div>
      <div className="form-row">
        <label>В какую компанию метишь? <span style={{ color: 'var(--ink-3)', fontWeight: 500 }}>(опционально)</span></label>
        <input type="text" placeholder="например, Авито или Самокат" value={data.company} onChange={(e) => setData({ ...data, company: e.target.value })} style={{ background: 'rgba(255,255,255,.05)', color: 'var(--bg)', border: '1px solid rgba(255,255,255,.15)' }} />
      </div>
      <button type="submit" className="btn btn-accent btn-lg" disabled={!valid} style={{ opacity: valid ? 1 : 0.4, width: '100%', justifyContent: 'center' }}>
        Отправить и забрать -50% →
      </button>
    </form>);

}

// ---------------------------- Footer -----------------------------------------

function Footer() {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <div className="brand" style={{ marginBottom: 12 }}>
              <div className="brand-mark">П</div>
              Питч
            </div>
            <div style={{ maxWidth: 280, fontSize: 13, color: 'var(--ink-3)' }}>
              Голосовой тренажёр продуктовых собесов. 5 минут в день — и ты в форме.
            </div>
          </div>
        </div>
      </div>
    </footer>);

}

// ---------------------------- App + Tweaks -----------------------------------

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "fitness",
  "accent": "mint",
  "dark": false
} /*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const formRef = useRef(null);

  // apply accent
  useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS.mint;
    document.documentElement.style.setProperty('--accent', `oklch(0.72 0.17 ${a.h})`);
    document.documentElement.style.setProperty('--accent-deep', `oklch(0.45 0.18 ${a.h})`);
    document.documentElement.style.setProperty('--accent-soft', `oklch(0.93 0.07 ${a.h})`);
  }, [t.accent]);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.dark ? 'dark' : 'light');
  }, [t.dark]);

  const scrollToForm = () => {
    const el = document.getElementById('signup');
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 20;
    window.scrollTo({ top, behavior: 'smooth' });
  };

  return (
    <>
      <Nav onCta={scrollToForm} />
      <Hero variant={t.headline} onCta={scrollToForm} />
      <HowItWorks />
      <Features />
      <Why />
      <Social />
      <Compare />
      <Pricing onCta={scrollToForm} />
      <FAQ />
      <Final formRef={formRef} />
      <Footer />

      <TweaksPanel title="Tweaks" defaultPosition={{ x: 24, y: 24 }}>
        <TweakSection title="Позиционирование">
          <TweakRadio
            label="H1"
            value={t.headline}
            options={[
            { value: 'fitness', label: 'Мышца' },
            { value: 'duolingo', label: '5 минут' },
            { value: 'metro', label: 'Метро' }]
            }
            onChange={(v) => setTweak('headline', v)} />
          
          <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4 }}>{H1_VARIANTS[t.headline].label}</div>
        </TweakSection>

        <TweakSection title="Визуал">
          <TweakRadio
            label="Акцент"
            value={t.accent}
            options={[
            { value: 'mint', label: 'Мята' },
            { value: 'tang', label: 'Мандарин' },
            { value: 'violet', label: 'Электрик' }]
            }
            onChange={(v) => setTweak('accent', v)} />
          
          <TweakToggle label="Тёмная тема" value={t.dark} onChange={(v) => setTweak('dark', v)} />
        </TweakSection>
      </TweaksPanel>
    </>);

}

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