/* ============== Ведение магазинов sections ============== */

/* ===== Hero ===== */
function ShopsHero() {
  const ft = window.FormulaTheme || {};
  const chips = [
    { icon: <Icon.Doc />, text: 'До 5 000 объявлений без блокировок — полная автоматизация для большого каталога' },
    { icon: <Icon.Bot />, text: 'CRM-интеграция для отдела продаж — заявки попадают в систему автоматически' },
    { icon: <Icon.Chart />, text: 'Аналитика по каждому SKU — видим, что продаётся и откуда трафик' },
  ];
  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">B2B-канал продаж</span><br/>
              под ключ
            </h1>
            <p className="lead shero__lead">
              Для интернет-магазинов, оптовых продавцов и сетей. Настраиваем Авито-магазин как полноценный канал — с масспостингом, CRM-интеграцией и аналитикой по каждому SKU.
            </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="shops-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: 'catalog', label: 'Объём каталога', placeholder: 'Например, 500 SKU' },
                ]}
                button="Получить расчёт"
              />
              <div className="hero-form-card__guarantee">
                <Icon.Shield /> Принцип искренности: если формат не подойдёт — скажем прямо
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== Чем магазин отличается от обычного аккаунта ===== */
const SHOP_VS_ACCOUNT = [
  {
    icon: <Icon.Users />,
    title: 'Расширенный профиль, витрина и структурированные категории',
    text: 'Покупатель переходит на страницу вашего магазина и видит не одно объявление, а весь ассортимент — как в интернет-магазине. Логотип, обложка, разделы по категориям — это доверие и удобство, которые напрямую влияют на конверсию.',
  },
  {
    icon: <Icon.Doc />,
    title: 'Масспостинг большого каталога без ручного труда',
    text: 'Для каталогов от 100 товаров ручная загрузка нереальна. Мы автоматизируем публикацию, обновление цен и остатков через API или выгрузку из 1С. 5 000 объявлений — без блокировок и без ошибок.',
  },
  {
    icon: <Icon.Chart />,
    title: 'Аналитика по магазину: просмотры, продажи, конверсии в разрезе SKU',
    text: 'Видим, какие товары продаются лучше, откуда идёт трафик, как меняется CPL по категориям. Принимаем решения на основе данных: масштабируем успешные позиции, отключаем неэффективные.',
  },
];

function ShopsVsAccount() {
  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}}>
            Обычный аккаунт — набор объявлений от продавца. Авито-магазин — это витрина вашего бизнеса с собственной страницей, разделами и SEO-оформлением. Для компаний с каталогом от 50 товаров это принципиально разные инструменты.
          </p>
        </Reveal>
        <div className="sub-cards-grid sub-cards-grid--3">
          {SHOP_VS_ACCOUNT.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 SHOPS_FOR_WHOM = [
  {
    n: '01',
    title: 'Интернет-магазины',
    text: 'Дополнительный канал на 60M+ аудитории без создания нового сайта. Особенно эффективен в категориях товаров для дома, электроники, детских товаров и стройматериалов.',
  },
  {
    n: '02',
    title: 'Оптовые продавцы',
    text: 'Авито — один из крупнейших B2B-источников в России. Настраиваем под оптовые запросы, работаем с разными регионами, привлекаем заявки от закупщиков и розничных сетей.',
  },
  {
    n: '03',
    title: 'Производители',
    text: 'Выстраиваем канал прямых продаж или поиска дилеров. Особенно актуально для стройматериалов, мебели, спецтехники — категорий, где Авито держит большой объём B2B-спроса.',
  },
  {
    n: '04',
    title: 'Сети и франшизы',
    text: 'Управляем несколькими региональными аккаунтами в рамках единой стратегии бренда. Каждый аккаунт ведётся отдельно, но контент, визуал и позиционирование — согласованы.',
  },
];

function ShopsForWhom() {
  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}}>
            Авито-магазин — инструмент не для всех. Если у вас каталог товаров, B2B-направление или сеть — это ваш инструмент.
          </p>
        </Reveal>
        <div className="sub-forwhom__grid">
          {SHOPS_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 SHOPS_INCLUDES = [
  { icon: <Icon.Star />, title: 'Оформление и настройка Авито-магазина', text: 'Логотип, обложка, разделы, SEO-описание компании под ключ' },
  { icon: <Icon.Doc />, title: 'Наполнение каталога', text: 'Создание и оптимизация карточек товаров с SEO-заголовками' },
  { icon: <Icon.Bot />, title: 'Масспостинг по всем SKU', text: 'Автоматизация публикации без риска блокировок — до 5 000 объявлений' },
  { icon: <Icon.Zap />, title: 'CRM-интеграция', text: 'Заявки из Авито автоматически попадают в AmoCRM, Битрикс24 или вашу систему' },
  { icon: <Icon.Chart />, title: 'Управление ценами и остатками', text: 'Синхронизация с вашей базой или 1С в реальном времени' },
  { icon: <Icon.Sparkles />, title: 'Аналитика по ключевым показателям', text: 'Какой товар продаётся, откуда трафик, CPL по категориям' },
  { icon: <Icon.Users />, title: 'Личный менеджер проекта', text: 'Еженедельные созвоны, оперативная связь, отчёты по KPI' },
];

function ShopsIncludes() {
  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">
          {SHOPS_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 ShopsCase() {
  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">Вся Доставка — 79 000 просмотров и 3 500 лидов</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">Безопасный масспостинг по всем позициям с уникализацией контента, региональная сегментация, CRM-интеграция для обработки входящих.</div>
            </div>
          </div>
          <div className="sub-single-case__metrics">
            <div>
              <div className="sub-single-case__metric-v">79 000</div>
              <div className="sub-single-case__metric-l">просмотров</div>
            </div>
            <div>
              <div className="sub-single-case__metric-v">5,1 ₽</div>
              <div className="sub-single-case__metric-l">за просмотр</div>
            </div>
            <div>
              <div className="sub-single-case__metric-v">3 500</div>
              <div className="sub-single-case__metric-l">заявок</div>
            </div>
            <div>
              <div className="sub-single-case__metric-v">115 ₽</div>
              <div className="sub-single-case__metric-l">стоимость лида</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== FAQ ===== */
const SHOPS_FAQ = [
  {
    q: 'Нужен ли платный бизнес-аккаунт Авито для магазина?',
    a: 'Да, Авито-магазин доступен на платных тарифах для бизнеса. Мы помогаем выбрать оптимальный тариф под ваш объём и нишу. Стоимость тарифа оплачивается отдельно — напрямую Авито, без наценки с нашей стороны.',
  },
  {
    q: 'Как интегрировать каталог из 1С или сайта в Авито?',
    a: 'Через API или XML-выгрузку — работает с большинством популярных платформ. Настраиваем интеграцию под вашу систему: цены и остатки обновляются автоматически, без ручного труда.',
  },
  {
    q: 'Сколько объявлений можно размещать без блокировок?',
    a: 'При правильном масспостинге — до 5 000 объявлений в месяц и выше. Ключ в уникализации: каждое объявление отличается от остальных в текстах, заголовках и фото. Это наша технология, отработанная за годы практики.',
  },
  {
    q: 'Работаете ли с региональными сетями и несколькими аккаунтами?',
    a: 'Да. Управляем несколькими аккаунтами параллельно — с единой стратегией и отдельной аналитикой по каждому региону или точке продаж.',
  },
];

function ShopsFaq() {
  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('shops-final')}>
            Задать свой вопрос <Icon.ArrowRight />
          </button>
        </Reveal>
        <div className="faq__list">
          {SHOPS_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 ShopsFinalCta() {
  return (
    <section id="shops-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="shops-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: 'catalog', label: 'Объём каталога', placeholder: 'Например, 500 SKU' },
            ]}
            button="Рассчитать стоимость"
          />
        </Reveal>
      </div>
    </section>
  );
}

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

Object.assign(window, {
  ShopsHero, ShopsVsAccount, ShopsForWhom, ShopsIncludes, ShopsCase, ShopsFaq, ShopsFinalCta,
});