/* ============== Консультация авитолога sections ============== */

/* ===== Hero ===== */
function ConsultationHero() {
  const ft = window.FormulaTheme || {};
  const chips = [
    { icon: <Icon.Users />, text: 'Онлайн-формат — Zoom или Telegram, без выезда' },
    { icon: <Icon.Chart />, text: 'Разбор по 17 параметрам — бесплатный аудит до консультации' },
    { icon: <Icon.Doc />, text: 'Письменное резюме после встречи — готовый план на руках' },
  ];
  return (
    <section id="top" className="shero">
      <div className="shero__grain" aria-hidden></div>
      <div className="wrap shero__wrap">
        <div className="shero__breadcrumbs">
          <a href={ft.homeUrl || '/'}>Главная</a>
          <span>/</span>
          <a href={(ft.urls || {}).services || '#'}>Услуги</a>
          <span>/</span>
          <span className="shero__breadcrumbs-current">Консультация</span>
        </div>
        <div className="shero__content">
          <div className="shero__left">
            <div className="chip shero__chip"><span className="dot-red"></span> Услуга · Консультация</div>
            <h1 className="display shero__h1">
              Консультация авитолога —<br/>
              <span className="shero__h1-big">конкретный план</span><br/>
              действий, не советы
            </h1>
            <p className="lead shero__lead">
              За 1–2 часа разберём ваш аккаунт, нишу и конкурентов. Уйдёте с чётким планом: что изменить, как настроить, куда вложить бюджет. Онлайн — без выезда и потери времени.
            </p>
            <div className="sub-chips">
              {chips.map((c, i) => (
                <Reveal key={i} delay={i * 80} className="sub-chip">
                  <div className="sub-chip__icon">{c.icon}</div>
                  <div className="sub-chip__text">{c.text}</div>
                </Reveal>
              ))}
            </div>
          </div>
          <div className="shero__right">
            <div className="hero-form-card" id="hero-form">
              <div className="hero-form-card__pill"><Icon.Zap /> Свободные слоты — сегодня</div>
              <div className="hero-form-card__title">Записаться на консультацию</div>
              <p className="hero-form-card__sub">Ответим в течение 30 минут и согласуем удобное время</p>
              <LeadForm
                id="consultation-hero-form"
                columns={1}
                small
                fields={[
                  { key: 'name', label: 'Имя', validate: 'name', placeholder: 'Иван', required: true },
                  { key: 'phone', label: 'Телефон', validate: 'phone', placeholder: '+7 (___) ___-__-__', required: true, type: 'tel' },
                  { key: 'niche', label: 'Ваша ниша', placeholder: 'Например, ремонт авто' },
                ]}
                button="Записаться"
              />
              <div className="hero-form-card__guarantee">
                <Icon.Shield /> Консультация — самостоятельный продукт, не продажа
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== Кому нужна консультация ===== */
const CONSULTATION_FOR_WHOM = [
  {
    n: '01',
    title: 'Хочу начать с Авито, но не знаю с чего и сколько это стоит',
    text: 'Разберём конкурентов, рассчитаем прогнозируемый CPL и составим дорожную карту запуска. Вы поймёте, реально ли это в вашей нише — до вложения денег.',
  },
  {
    n: '02',
    title: 'Уже размещаю объявления, но заявок мало или они слишком дорогие',
    text: 'Найдём ошибки в текстах, фотографиях, категориях и стратегии — и покажем конкретно, что нужно изменить. Без общих слов, с данными.',
  },
  {
    n: '03',
    title: 'Не понимаю, почему конкуренты выше в выдаче, а я нет',
    text: 'Проведём разбор их карточек и покажем конкретные отличия — в заголовках, визуале, ценообразовании, стратегии продвижения.',
  },
  {
    n: '04',
    title: 'Хочу масштабироваться, но боюсь блокировок и слить бюджет',
    text: 'Составим безопасный план масштабирования с учётом лимитов Авито и вашего текущего аккаунта. Чёткие шаги без риска.',
  },
];

function ConsultationForWhom() {
  return (
    <section className="section sub-forwhom">
      <div className="wrap">
        <Reveal className="sub-section-head">
          <div className="eyebrow">Кому подходит</div>
          <h2 className="section-title">
            Узнайте себя — кому нужна<br/>
            <span className="text-red">консультация авитолога</span>
          </h2>
          <p className="lead" style={{maxWidth: 640, marginTop: 18}}>
            Консультация подходит не всем — только тем, кто оказался в одной из этих ситуаций:
          </p>
        </Reveal>
        <div className="sub-forwhom__grid">
          {CONSULTATION_FOR_WHOM.map((item, i) => (
            <Reveal key={i} delay={i * 80} className="sub-forwhom__card">
              <div className="sub-forwhom__num">{item.n}</div>
              <div className="sub-forwhom__card-title">{item.title}</div>
              <p className="sub-forwhom__card-text">{item.text}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Что вы получите ===== */
const CONSULTATION_GETS = [
  { icon: <Icon.Chart />, title: 'Аудит текущего аккаунта', text: 'Ошибки в текстах, фото, категориях, ценообразовании — смотрим на ваши данные' },
  { icon: <Icon.Users />, title: 'Анализ конкурентов', text: 'Почему они выше и что конкретно делают — не в общем, а с примерами' },
  { icon: <Icon.Sparkles />, title: 'Стратегия продвижения', text: 'Бесплатные и платные инструменты под вашу нишу и бюджет' },
  { icon: <Icon.Zap />, title: 'Расчёт бюджета', text: 'Сколько реально нужно для результата — и в какие инструменты' },
  { icon: <Icon.Doc />, title: 'SEO-рекомендации', text: 'Конкретные правки для ваших существующих объявлений' },
  { icon: <Icon.ArrowRight />, title: 'Дорожная карта на 30 дней', text: 'Чёткий список шагов с приоритетами — берёте и делаете' },
];

function ConsultationGets() {
  return (
    <section className="section section--dark sub-dark-includes">
      <div className="wrap">
        <Reveal className="sub-section-head">
          <div className="eyebrow">Результат консультации</div>
          <h2 className="section-title">
            Что вы получаете<br/>
            <span className="text-red">за 1–2 часа работы</span>
          </h2>
        </Reveal>
        <div className="sub-dark-includes__grid">
          {CONSULTATION_GETS.map((item, i) => (
            <Reveal key={i} delay={i * 70} className="sub-dark-includes__item">
              <div className="sub-dark-includes__icon">{item.icon}</div>
              <div>
                <div className="sub-dark-includes__title">{item.title}</div>
                <div className="sub-dark-includes__text">{item.text}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Формат ===== */
function ConsultationFormat() {
  return (
    <section className="section sub-format">
      <div className="wrap sub-format__wrap">
        <Reveal className="sub-format__content">
          <div className="eyebrow">Как проходит</div>
          <h2 className="section-title">
            Формат консультации<br/>
            <span className="text-red">— онлайн, с результатом</span>
          </h2>
          <p className="lead sub-format__text">
            Онлайн-встреча в Zoom или Telegram. Длительность: 1–2 часа в зависимости от глубины задач.
          </p>
          <div className="sub-format__steps">
            <div className="sub-format__step">
              <div className="sub-format__step-num">01</div>
              <div>
                <div className="sub-format__step-title">До встречи</div>
                <div className="sub-format__step-text">Бесплатный аудит по 17 пунктам: смотрим ваш аккаунт заранее, чтобы сразу работать с данными, а не «на глаз».</div>
              </div>
            </div>
            <div className="sub-format__step">
              <div className="sub-format__step-num">02</div>
              <div>
                <div className="sub-format__step-title">На встрече</div>
                <div className="sub-format__step-text">Разбор аккаунта, конкурентов, стратегии. Конкретные решения, а не общие советы.</div>
              </div>
            </div>
            <div className="sub-format__step">
              <div className="sub-format__step-num">03</div>
              <div>
                <div className="sub-format__step-title">После встречи</div>
                <div className="sub-format__step-text">Письменное резюме с конкретными рекомендациями. Всё, о чём говорили — зафиксировано и у вас на руках. Запись встречи по запросу.</div>
              </div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={120} className="sub-format__bonus">
          <div className="sub-format__bonus-inner">
            <div className="sub-format__bonus-icon"><Icon.Star /></div>
            <div className="sub-format__bonus-label">Бонус</div>
            <div className="sub-format__bonus-title">Стоимость консультации засчитывается</div>
            <p className="sub-format__bonus-text">
              Если после консультации вы решите работать с нами, стоимость консультации засчитывается в счёт первого месяца ведения.
            </p>
          </div>
          <div className="sub-format__guarantee">
            <Icon.Shield />
            <div>
              <div style={{fontWeight: 800, marginBottom: 4}}>Без «продающего созвона»</div>
              <div style={{fontSize: 13, color: 'var(--ink-60)', lineHeight: 1.45}}>Консультация — самостоятельный продукт. Вы уйдёте с планом, который сможете реализовать сами или с нашей командой — ваш выбор.</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== FAQ ===== */
const CONSULTATION_FAQ = [
  {
    q: 'Консультация — это продажа ваших услуг?',
    a: 'Нет. Это самостоятельный продукт. По итогам вы получаете конкретный план, который сможете реализовать сами или с нашей командой — ваш выбор. Мы не давим и не «дожимаем».',
  },
  {
    q: 'Нужно ли готовить материалы заранее?',
    a: 'Желательно: доступ к аккаунту Авито или скриншоты ваших объявлений. Остальное уточним в коротком брифе перед встречей — занимает 5 минут.',
  },
  {
    q: 'Можно ли после консультации перейти на ведение аккаунта?',
    a: 'Да. Если после консультации вы решите работать с нами, стоимость консультации засчитывается в счёт первого месяца ведения.',
  },
  {
    q: 'Сколько стоит консультация?',
    a: 'Точную стоимость уточняйте при записи — цена может зависеть от сложности задач. Оставьте заявку, и мы свяжемся с вами в течение 30 минут.',
  },
];

function ConsultationFaq() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section faq">
      <div className="wrap faq__wrap">
        <Reveal className="faq__side">
          <div className="eyebrow">FAQ</div>
          <h2 className="section-title">Часто задаваемые<br/><span className="text-red">вопросы</span></h2>
          <p className="lead" style={{marginTop: 20}}>Всё о формате, подготовке и стоимости консультации.</p>
          <button className="btn btn-dark btn-arrow" style={{marginTop: 22}} onClick={() => scrollToId('consultation-final')}>
            Записаться сейчас <Icon.ArrowRight />
          </button>
        </Reveal>
        <div className="faq__list">
          {CONSULTATION_FAQ.map((f, i) => (
            <button key={i} type="button" className={`faq__item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq__item-head">
                <div className="faq__item-num">{String(i + 1).padStart(2, '0')}</div>
                <div className="faq__item-q">{f.q}</div>
                <div className="faq__item-toggle">{open === i ? '−' : '+'}</div>
              </div>
              {open === i && <div className="faq__item-a">{f.a}</div>}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Final CTA ===== */
function ConsultationFinalCta() {
  return (
    <section id="consultation-final" className="section audit">
      <div className="wrap audit__wrap">
        <Reveal className="audit__head">
          <h2 className="audit__title">Запишитесь —<br/>и получите готовый план</h2>
          <p className="audit__lead">
            Не список общих советов, а конкретная дорожная карта под вашу нишу, ваш аккаунт и ваш бюджет. До встречи — бесплатный аудит аккаунта по 17 пунктам.
          </p>
          <div className="audit__principles">
            <span><Icon.Check /> Аудит по 17 пунктам</span>
            <span><Icon.Check /> Без «продающего созвона»</span>
            <span><Icon.Check /> Письменное резюме</span>
          </div>
        </Reveal>
        <Reveal delay={150} className="audit__form-card">
          <LeadForm
            id="consultation-final-form"
            columns={1}
            fields={[
              { key: 'name', label: 'Имя', validate: 'name', required: true, placeholder: 'Иван' },
              { key: 'phone', label: 'Телефон', validate: 'phone', required: true, placeholder: '+7 (___) ___-__-__', type: 'tel' },
              { key: 'niche', label: 'Ваша ниша', placeholder: 'Например, ремонт авто' },
            ]}
            button="Записаться на консультацию"
          />
        </Reveal>
      </div>
    </section>
  );
}

/* ============== Styles ============== */
const consultationStyles = document.createElement('style');
consultationStyles.textContent = `
/* Format section */
.sub-format { background: var(--bg); }
.sub-format__wrap {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 64px; align-items: start;
}
@media (max-width: 900px) { .sub-format__wrap { grid-template-columns: 1fr; gap: 40px; } }
.sub-format__text { font-size: 18px; color: var(--ink-80); margin-top: 22px; max-width: 520px; }
.sub-format__steps {
  display: flex; flex-direction: column; gap: 0;
  margin-top: 36px;
  border-left: 2px solid var(--border);
  padding-left: 28px;
}
.sub-format__step {
  display: flex; gap: 20px; align-items: flex-start;
  padding-bottom: 32px;
  position: relative;
}
.sub-format__step::before {
  content: '';
  position: absolute; left: -37px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--brand-red);
}
.sub-format__step:last-child { padding-bottom: 0; }
.sub-format__step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--brand-red); font-weight: 700;
  letter-spacing: 0.04em; flex-shrink: 0; padding-top: 2px;
}
.sub-format__step-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.sub-format__step-text { font-size: 14px; color: var(--ink-60); line-height: 1.5; }

.sub-format__bonus {
  display: flex; flex-direction: column; gap: 16px;
}
.sub-format__bonus-inner {
  background: var(--ink); color: #fff;
  border-radius: 22px; padding: 32px;
}
.sub-format__bonus-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--brand-red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.sub-format__bonus-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand-orange);
  margin-bottom: 6px;
}
.sub-format__bonus-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.sub-format__bonus-text { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.5; }
.sub-format__guarantee {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px;
}
.sub-format__guarantee > svg { color: var(--brand-red); flex-shrink: 0; margin-top: 2px; }
`;
document.head.appendChild(consultationStyles);

Object.assign(window, {
  ConsultationHero, ConsultationForWhom, ConsultationGets, ConsultationFormat, ConsultationFaq, ConsultationFinalCta,
});