/* ============== Ведение Авито-аккаунта sections ============== */

/* ===== Hero ===== */
function VedenieAvitoHero() {
  const ft = window.FormulaTheme || {};
  const chips = [
    { icon: <Icon.Zap />, text: 'Ежедневное поднятие и обновление — объявления не тонут в выдаче' },
    { icon: <Icon.Bot />, text: 'Отвечаем покупателям за вас — от первого сообщения до записи на встречу' },
    { icon: <Icon.Chart />, 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">
              Публикуем, обновляем и поднимаем объявления, отвечаем на сообщения и звонки, следим за отзывами. Вы получаете заявки — мы берём на себя всё остальное.
            </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="vedenie-avito-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 VEDENIE_VS_SELF = [
  {
    icon: <Icon.Doc />,
    title: 'Объявления не устаревают и не тонут в выдаче',
    text: 'Авито поднимает свежие объявления выше. Без регулярного обновления даже хорошее объявление за 2-3 дня уходит на дальние страницы. Мы поднимаем и обновляем по графику — вручную или через платное продвижение, где это оправдано.',
  },
  {
    icon: <Icon.Bot />,
    title: 'Ни одно сообщение и звонки не остаётся без ответа',
    text: 'Покупатель на Авито уходит к конкуренту, если ответ задержался на час. Мы отвечаем в рабочее время в течение 5-15 минут, отрабатываем возражения по вашим скриптам и доводим до записи или звонка.',
  },
  {
    icon: <Icon.Chart />,
    title: 'Еженедельная отчётность вместо догадок',
    text: 'Вы получаете отчёт: сколько просмотров, сообщений, звонков и заявок принесло каждое объявление, во сколько обошёлся лид. Решения по бюджету и ассортименту объявлений принимаются на основе цифр, а не ощущений.',
  },
];

function VedenieAvitoVsSelf() {
  return (
    <section className="section sub-cards-section">
      <div className="wrap">
        <Reveal className="sub-section-head">
          <div className="eyebrow">Ведение vs разовое размещение</div>
          <h2 className="section-title">
            Почему объявление нужно вести,<br/>
            <span className="text-red">а не просто один раз опубликовать</span>
          </h2>
          <p className="lead" style={{maxWidth: 660, marginTop: 18}}>
            Разовая публикация даёт всплеск просмотров на 2-3 дня и тишину дальше. Ведение аккаунта — это ежедневная работа, которая держит объявления в топе и не даёт покупателям уйти без ответа.
          </p>
        </Reveal>
        <div className="sub-cards-grid sub-cards-grid--3">
          {VEDENIE_VS_SELF.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 VEDENIE_FOR_WHOM = [
  {
    n: '01',
    title: 'Частные мастера и специалисты',
    text: 'Ремонт, клининг, репетиторство, услуги на дому. У вас нет времени сидеть в приложении весь день между заказами — мы отвечаем клиентам, пока вы работаете.',
  },
  {
    n: '02',
    title: 'Локальный сервисный бизнес',
    text: 'Автосервисы, салоны красоты, ателье. Ведём несколько объявлений по направлениям услуг, следим за загрузкой записи и сезонными пиками спроса.',
  },
  {
    n: '03',
    title: 'Риелторы и агенты',
    text: 'Десятки объявлений с быстро меняющимся статусом (сдано/продано/актуально). Снимаем неактуальные, поднимаем активные, отвечаем на типовые вопросы по объектам.',
  },
  {
    n: '04',
    title: 'Малый бизнес без отдела маркетинга',
    text: 'Когда Авито — не единственная, но важная часть потока заявок, а нанимать отдельного сотрудника под него нерентабельно. Отдаёте эту функцию нам целиком.',
  },
];

function VedenieAvitoForWhom() {
  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">
          {VEDENIE_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 VEDENIE_INCLUDES = [
  { icon: <Icon.Star />, title: 'Публикация и оформление объявлений', text: 'Фото, заголовки, описания и категории — по каждому объявлению из вашей ниши' },
  { icon: <Icon.Doc />, title: 'Ежедневное обновление и поднятие', text: 'По графику или через платное продвижение — там, где это окупается' },
  { icon: <Icon.Bot />, title: 'Ответы на сообщения и звонки', text: 'В рабочее время, по вашим скриптам, с доводом до записи или сделки' },
  { icon: <Icon.Zap />, title: 'Работа с отзывами', text: 'Просим оставить отзыв после сделки, отрабатываем негативнацесму расчетуку и изменения ассортимента' },
  { icon: <Icon.Chart />, title: 'Еженедельная отчётность', text: 'Просмотры, заявки, стоимость лида по каждому объявления' },
  { icon: <Icon.Sparkles />, title: 'Актуализация ассортимента', text: 'Снимаем неактуальные объявления, добавляем новые под изменившийся спрос' },
  { icon: <Icon.Users />, title: 'Личный менеджер проекта', text: 'На связи в рабочее время, еженедельный созвон по результатам' },
];

function VedenieAvitoIncludes() {
  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">с вашим аккаунтом каждый день</span>
          </h2>
        </Reveal>
        <div className="sub-dark-includes__grid">
          {VEDENIE_INCLUDES.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 VedenieAvitoCase() {
  return (
    <section className="section sub-single-case">
      <div className="wrap">
        <Reveal className="sub-section-head">
          <div className="eyebrow">Кейс</div>
          <h2 className="section-title">
            Как мастер по ремонту квартир<br/>
            <span className="text-red">перестал терять клиентов из-за задержки ответа</span>
          </h2>
        </Reveal>
        <Reveal delay={120} className="sub-single-case__card">
          <div>
            <div className="sub-single-case__tag">Ремонт квартир</div>
            <div className="sub-single-case__title">Частный мастер — с 6 до 41 заявки в месяц за 60 дней</div>
            <div className="sub-single-case__row">
              <div className="sub-single-case__row-label">Ситуация</div>
              <div className="sub-single-case__row-value">Объявления были размещены год назад и не обновлялись. Отвечал сам, вечером после смен — большая часть покупателей уже нашла других мастеров.</div>
            </div>
            <div className="sub-single-case__row">
              <div className="sub-single-case__row-label">Что сделали</div>
              <div className="sub-single-case__row-value">Переупаковали 5 объявлений по видам работ, настроили ежедневное поднятие, взяли на себя ответы на сообщения в течение 15 минут в рабочее время.</div>
            </div>
          </div>
          <div className="sub-single-case__metrics">
            <div>
              <div className="sub-single-case__metric-v">41</div>
              <div className="sub-single-case__metric-l">заявка в месяц</div>
            </div>
            <div>
              <div className="sub-single-case__metric-v">12 мин</div>
              <div className="sub-single-case__metric-l">среднее время ответа</div>
            </div>
            <div>
              <div className="sub-single-case__metric-v">×7</div>
              <div className="sub-single-case__metric-l">рост заявок</div>
            </div>
            <div>
              <div className="sub-single-case__metric-v">190 ₽</div>
              <div className="sub-single-case__metric-l">стоимость лида</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== FAQ ===== */
const VEDENIE_FAQ = [
  {
    q: 'Чем ведение отличается от продвижения объявлений?',
    a: 'Продвижение — это разовая или циклическая работа над видимостью конкретных объявлений (SEO, платные поднятия). Ведение — это постоянное сопровождение: публикация, обновление, ответы на сообщения и звонки, отчётность. Часто заказывают обе услуги вместе.',
  },
  {
    q: 'Кто отвечает клиентам — робот или человек?',
    a: 'Живой оператор по вашим скриптам и FAQ. Мы согласуем с вами типовые ответы на частые вопросы заранее, а по нестандартным ситуациям уточняем у вас или передаём диалог напрямую.',
  },
  {
    q: 'Что если клиент звонит, а не пишет?',
    a: 'Подключаем переадресацию или колл-центр — обсуждаем формат на старте, исходя из объёма звонков в вашей нише.',
  },
  {
    q: 'Можно ли начать с малого — 1-2 объявлений?',
    a: 'Да, минимальный пакет — от 3 объявлений. Дальше масштабируем по мере роста заявок и вашей загрузки.',
  },
];

function VedenieAvitoFaq() {
  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('vedenie-avito-final')}>
            Задать свой вопрос <Icon.ArrowRight />
          </button>
        </Reveal>
        <div className="faq__list">
          {VEDENIE_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 VedenieAvitoFinalCta() {
  return (
    <section id="vedenie-avito-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 /> Расчёт стоимости за 1 день</span>
            <span><Icon.Check /> Без обязательств</span>
          </div>
        </Reveal>
        <Reveal delay={150} className="audit__form-card">
          <LeadForm
            id="vedenie-avito-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>
  );
}

/* vedenie-avito-sections.jsx has no page-specific CSS beyond what seo-sections.jsx provides */

Object.assign(window, {
  VedenieAvitoHero, VedenieAvitoVsSelf, VedenieAvitoForWhom, VedenieAvitoIncludes, VedenieAvitoCase, VedenieAvitoFaq, VedenieAvitoFinalCta,
});