/* ============== Продвижение через Яндекс.Директ sections ============== */

/* ===== Hero ===== */
function DirectHero() {
  const ft = window.FormulaTheme || {};
  const chips = [
    { icon: <Icon.Zap />, text: 'Трафик из поиска Яндекса прямо на ваши объявления Авито' },
    { icon: <Icon.Shield />, text: 'Без конкуренции с платным продвижением внутри Авито' },
    { icon: <Icon.Chart />, text: 'Лид от 115 ₽ в нашей практике' },
  ];
  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">
              Запускаем контекстную рекламу в Яндекс.Директ, которая ведёт покупателей напрямую на ваши объявления Авито. Обходите конкурентов внутри платформы — приводите трафик извне.
            </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">Анализ конкурентов и медиаплан бесплатно</p>
              <LeadForm
                id="direct-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 DIRECT_WHY = [
  {
    icon: <Icon.Users />,
    title: 'Внутреннее продвижение vs Директ — разные аудитории',
    text: 'X10 и X20 на Авито показывают вас тем, кто уже зашёл на площадку и ищет в ней. Директ — это те, кто ещё только вводит запрос в Яндексе. Они не видят ваших конкурентов в ленте Авито. Вы получаете тёплую аудиторию с намерением купить.',
  },
  {
    icon: <Icon.Chart />,
    title: 'Директ усиливает позиции объявлений на самом Авито',
    text: 'Внешний трафик увеличивает просмотры и поведенческие факторы объявления. Алгоритм Авито замечает рост кликабельности и органически поднимает карточку выше. Получается двойной эффект: платный трафик из Директа + органический рост внутри Авито.',
  },
  {
    icon: <Icon.Zap />,
    title: 'Когда Директ выгоднее платных инструментов Авито',
    text: 'Особенно эффективен в нишах с высоким чеком: аренда спецтехники, ремонт, строительство, B2B-услуги. Там стоимость X10 высока, а конкуренция за показы растёт каждый месяц. Директ даёт более горячую аудиторию — и нередко по меньшей стоимости лида.',
  },
];

function DirectWhy() {
  return (
    <section className="section sub-cards-section">
      <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: 660, marginTop: 18}}>
            Внутри Авито вы конкурируете за внимание с десятками аналогичных продавцов. Яндекс.Директ — принципиально другой инструмент: вы перехватываете покупателей раньше, чем они попали на Авито.
          </p>
        </Reveal>
        <div className="sub-cards-grid sub-cards-grid--3">
          {DIRECT_WHY.map((a, i) => (
            <Reveal key={i} delay={i * 100} className="sub-card">
              <div className="sub-card__icon">{a.icon}</div>
              <h3 className="h3 sub-card__title">{a.title}</h3>
              <p className="sub-card__text">{a.text}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Что настраиваем ===== */
const DIRECT_INCLUDES = [
  { icon: <Icon.Chart />, title: 'Анализ ключевых запросов', text: 'Для вашей ниши и региона — горячие запросы с коммерческим интентом' },
  { icon: <Icon.Zap />, title: 'Настройка поисковых кампаний', text: 'Объявления показываются тем, кто прямо сейчас ищет ваш продукт в Яндексе' },
  { icon: <Icon.Users />, title: 'Настройка РСЯ', text: 'Ретаргетинг и look-alike аудитории — догоняем тех, кто уже смотрел похожие объявления' },
  { icon: <Icon.Doc />, title: 'UTM-разметка и аналитика', text: 'Точно знаем, какое объявление в Директе принесло заявку' },
  { icon: <Icon.Sparkles />, title: 'A/B-тесты', text: 'Тестируем заголовки и описания в Директе, оставляем то, что даёт лучший CTR' },
  { icon: <Icon.Shield />, title: 'Еженедельная оптимизация ставок', text: 'Снижаем стоимость клика по мере накопления статистики' },
];

function DirectIncludes() {
  return (
    <section className="section sub-includes">
      <div className="wrap">
        <Reveal className="sub-section-head">
          <div className="eyebrow">Состав услуги</div>
          <h2 className="section-title">
            Что входит в настройку Яндекс.Директ<br/>
            <span className="text-red">под Авито</span>
          </h2>
        </Reveal>
        <div className="sub-includes__grid">
          {DIRECT_INCLUDES.map((item, i) => (
            <Reveal key={i} delay={i * 80} className="sub-includes__item">
              <div className="sub-includes__item-icon">{item.icon}</div>
              <div>
                <div className="sub-includes__item-title">{item.title}</div>
                <div className="sub-includes__item-text">{item.text}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Кейс ===== */
function DirectCase() {
  return (
    <section className="section section--dark sub-case-dark-full">
      <div className="wrap">
        <Reveal className="sub-section-head">
          <div className="eyebrow">Кейс</div>
          <h2 className="section-title">
            Как связка Авито + Директ<br/>
            <span className="text-red">генерирует лиды по 115 ₽</span>
          </h2>
        </Reveal>
        <Reveal delay={120} className="sub-case-dark-full__card">
          <div className="sub-case-dark-full__left">
            <div className="sub-cases-dark__head">
              <div className="sub-cases-dark__niche">Нерудные материалы</div>
              <div className="sub-cases-dark__name">Вся Доставка</div>
            </div>
            <div className="sub-cases-dark__row">
              <div className="sub-cases-dark__label">Ситуация</div>
              <div className="sub-cases-dark__value">Внутренние инструменты продвижения давали нестабильный результат.</div>
            </div>
            <div className="sub-cases-dark__row">
              <div className="sub-cases-dark__label">Директ</div>
              <div className="sub-cases-dark__value">Поисковые кампании по целевым запросам. Параллельно — РСЯ-ретаргетинг.</div>
            </div>
            <div className="sub-cases-dark__row">
              <div className="sub-cases-dark__label">Авито</div>
              <div className="sub-cases-dark__value">SEO-оптимизированные карточки товаров — Директ вёл трафик именно на них, повышая поведенческие факторы.</div>
            </div>
          </div>
          <div className="sub-case-dark-full__metrics">
            <div className="sub-case-dark-full__metric">
              <div className="sub-cases-dark__metric-v">3 500</div>
              <div className="sub-cases-dark__metric-l">целевых обращений</div>
            </div>
            <div className="sub-case-dark-full__metric">
              <div className="sub-cases-dark__metric-v">115 ₽</div>
              <div className="sub-cases-dark__metric-l">стоимость лида</div>
            </div>
            <div className="sub-case-dark-full__metric direct-highlight">
              <div className="sub-case-dark-full__highlight-label">Почему так дёшево</div>
              <div className="sub-case-dark-full__highlight-text">Сверхнизкая стоимость достигнута за счёт синергии двух площадок: Директ + органика Авито</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== FAQ ===== */
const DIRECT_FAQ = [
  {
    q: 'Авито разрешает рекламировать свои объявления через Яндекс.Директ?',
    a: 'Да, это абсолютно законная практика. Вы рекламируете ваше объявление на Авито как внешнюю страницу — Яндекс не запрещает рекламировать страницы Авито, а Авито не запрещает получать внешний трафик на объявления.',
  },
  {
    q: 'Нужен ли отдельный сайт для запуска Директа под Авито?',
    a: 'Нет. Объявление Авито само по себе является целевой страницей. Настраиваем Директ так, что он ведёт прямо на ваше объявление или на профиль.',
  },
  {
    q: 'Какой минимальный рекламный бюджет нужен для старта?',
    a: 'Зависит от ниши и региона. Для теста достаточно 10 000–15 000 ₽/мес. Мы рассчитываем прогнозируемый бюджет после анализа конкуренции в вашем направлении.',
  },
  {
    q: 'Что произойдёт, если объявление заблокируют в момент рекламной кампании?',
    a: 'Мы следим за статусом объявлений и оперативно восстанавливаем или заменяем их. Обязательства прописаны в договоре. Такой риск минимален, если соблюдать правила Авито — это наша забота.',
  },
];

function DirectFaq() {
  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('direct-final')}>
            Задать свой вопрос <Icon.ArrowRight />
          </button>
        </Reveal>
        <div className="faq__list">
          {DIRECT_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 DirectFinalCta() {
  return (
    <section id="direct-final" className="section audit">
      <div className="wrap audit__wrap">
        <Reveal className="audit__head">
          <h2 className="audit__title">Готовы получить трафик из Яндекса<br/>прямо на ваши карточки?</h2>
          <p className="audit__lead">
            Оставьте заявку — рассчитаем бюджет и дадим прогноз по заявкам для вашей ниши. Анализ конкурентов и медиаплан — бесплатно.
          </p>
          <div className="audit__principles">
            <span><Icon.Check /> Бесплатный анализ конкурентов</span>
            <span><Icon.Check /> Медиаплан в подарок</span>
            <span><Icon.Check /> Прогноз по заявкам</span>
          </div>
        </Reveal>
        <Reveal delay={150} className="audit__form-card">
          <LeadForm
            id="direct-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 directStyles = document.createElement('style');
directStyles.textContent = `
/* Full-width dark case card */
.sub-case-dark-full__card {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: start;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 28px; padding: 48px;
}
@media (max-width: 800px) { .sub-case-dark-full__card { grid-template-columns: 1fr; gap: 32px; padding: 32px; } }
.sub-case-dark-full__metrics {
  display: flex; flex-direction: column; gap: 20px;
}
.sub-case-dark-full__metric {
  padding: 24px 28px;
  background: rgba(0,0,0,0.35);
  border-radius: 18px;
}
.sub-case-dark-full__metric.direct-highlight {
  background: rgba(255,47,0,0.1);
  border: 1px solid rgba(255,47,0,0.25);
}
.sub-case-dark-full__highlight-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand-orange);
  margin-bottom: 8px;
}
.sub-case-dark-full__highlight-text {
  font-size: 15px; color: rgba(255,255,255,0.85); line-height: 1.5;
}
`;
document.head.appendChild(directStyles);

Object.assign(window, {
  DirectHero, DirectWhy, DirectIncludes, DirectCase, DirectFaq, DirectFinalCta,
});