/* ============== Реклама профиля sections ============== */

/* ===== Hero ===== */
function ProfileHero() {
  const ft = window.FormulaTheme || {};
  const chips = [
    { icon: <Icon.Chart />, text: '+20% конверсии — в среднем после профессионального оформления профиля' },
    { icon: <Icon.Star />, text: 'Рейтинг 4.8+ — в первые 30 дней — система сбора отзывов работает' },
    { icon: <Icon.Shield />, 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">Получить аудит профиля по 17 пунктам</div>
              <p className="hero-form-card__sub">Покажем конкретный список проблем и план устранения</p>
              <LeadForm
                id="profile-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' },
                ]}
                button="Запустить аудит"
              />
              <div className="hero-form-card__guarantee">
                <Icon.Shield /> Аудит за 24 часа. Без спама.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== Почему профиль важен ===== */
const PROFILE_WHY = [
  {
    icon: <Icon.Chart />,
    title: 'Рейтинг аккаунта влияет на видимость объявлений в поиске',
    text: 'Алгоритм Авито учитывает качество профиля при ранжировании объявлений. Верифицированный аккаунт с историей, высоким рейтингом и заполненными разделами получает дополнительный органический буст. Инвестиции в профиль окупаются на каждом объявлении.',
  },
  {
    icon: <Icon.Users />,
    title: 'Покупатели проверяют профиль перед первым звонком',
    text: 'Особенно в дорогих нишах — ремонт квартир, аренда спецтехники, недвижимость, автомобили. Клиент видит ваше объявление и обязательно переходит на профиль. Оформленный профиль снимает страх и переводит интерес в звонок.',
  },
  {
    icon: <Icon.Sparkles />,
    title: 'Оформленный магазин vs «голый» аккаунт — разница в конверсии',
    text: 'По нашей практике: наличие логотипа, профессиональной обложки и заполненного раздела «О компании» повышает конверсию обращений в среднем на 15–25%. Покупатель видит системность и серьёзность.',
  },
];

function ProfileWhy() {
  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">
          {PROFILE_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 PROFILE_INCLUDES = [
  { icon: <Icon.Star />, title: 'Профессиональное оформление Авито-магазина', text: 'Логотип, обложка, описание с ключевыми запросами — всё под ключ' },
  { icon: <Icon.Users />, title: 'Системный сбор первичного пула отзывов', text: 'От реальных клиентов, по регламенту Авито, без риска блокировки' },
  { icon: <Icon.Shield />, title: 'Работа с негативными отзывами', text: 'Грамотные ответы, которые повышают доверие, а не усиливают конфликт' },
  { icon: <Icon.Sparkles />, title: 'Брендирование объявлений', text: 'Единый стиль фото и инфографики — узнаваемость в ленте' },
  { icon: <Icon.Doc />, title: 'Настройка раздела «О компании»', text: 'Полное заполнение — влияет и на SEO, и на доверие' },
  { icon: <Icon.Zap />, title: 'Подключение бейджей и верификация', text: 'Статус «Официальный партнёр» и другие доверительные маркеры' },
];

function ProfileIncludes() {
  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">
          {PROFILE_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 ProfileCase() {
  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">и получил 1 578 обращений</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">Slav Motors — 1 578 лидов с нулевого аккаунта</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">Профессиональная обложка и логотип, развёрнутое описание с ключами, система получения первых отзывов, верификация аккаунта.</div>
            </div>
            <div className="sub-single-case__row">
              <div className="sub-single-case__row-label">Параллельно</div>
              <div className="sub-single-case__row-value">Сбор семантики и публикация SEO-оптимизированных объявлений.</div>
            </div>
          </div>
          <div className="sub-single-case__metrics">
            <div>
              <div className="sub-single-case__metric-v">1 578</div>
              <div className="sub-single-case__metric-l">заявок</div>
            </div>
            <div>
              <div className="sub-single-case__metric-v">254 ₽</div>
              <div className="sub-single-case__metric-l">стоимость лида</div>
            </div>
            <div>
              <div className="sub-single-case__metric-v">8 065</div>
              <div className="sub-single-case__metric-l">просмотров</div>
            </div>
            <div>
              <div className="sub-single-case__metric-v">0</div>
              <div className="sub-single-case__metric-l">блокировок</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== FAQ ===== */
const PROFILE_FAQ = [
  {
    q: 'Можно ли раскрутить профиль, если он новый и без истории?',
    a: 'Да — именно с этого мы и начинаем в большинстве проектов. Новый аккаунт получает стратегию «с нуля»: последовательный сбор отзывов, правильное оформление, выстраивание рейтинга. Кейс Slav Motors — тому подтверждение.',
  },
  {
    q: 'Как быстро появятся первые отзывы?',
    a: 'При системной работе — первые 5–10 отзывов за 14–21 день. Мы не используем сомнительные схемы — только реальные клиенты и грамотный запрос после сделки.',
  },
  {
    q: 'Входит ли ежедневное ведение аккаунта в эту услугу?',
    a: 'Реклама профиля — отдельная услуга, фокусируется на доверии и оформлении. Если нужно полное ведение аккаунта (объявления, аналитика, реклама), это наш тариф «Ведение Авито».',
  },
  {
    q: 'Нужен ли Авито-магазин или достаточно обычного профиля?',
    a: 'Зависит от масштаба. Обычному продавцу хватит качественно оформленного профиля. Компании с каталогом товаров и B2B-направлением — нужен полноценный магазин: витрина, разделы, SEO-описание.',
  },
];

function ProfileFaq() {
  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('profile-final')}>
            Задать свой вопрос <Icon.ArrowRight />
          </button>
        </Reveal>
        <div className="faq__list">
          {PROFILE_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 ProfileFinalCta() {
  return (
    <section id="profile-final" className="section audit">
      <div className="wrap audit__wrap">
        <Reveal className="audit__head">
          <h2 className="audit__title">Узнайте, что мешает клиентам<br/>вам доверять</h2>
          <p className="audit__lead">
            Оставьте заявку — проведём бесплатный аудит вашего профиля по 17 пунктам за 24 часа. Покажем конкретный список проблем и предложим план их устранения.
          </p>
          <div className="audit__principles">
            <span><Icon.Check /> Аудит за 24 часа</span>
            <span><Icon.Check /> Без спама</span>
            <span><Icon.Check /> Ответим в течение 2 часов</span>
          </div>
        </Reveal>
        <Reveal delay={150} className="audit__form-card">
          <LeadForm
            id="profile-final-form"
            columns={1}
            fields={[
              { key: 'name', label: 'Имя', validate: 'name', required: true, placeholder: 'Иван' },
              { key: 'phone', label: 'Телефон', validate: 'phone', required: true, placeholder: '+7 (___) ___-__-__', type: 'tel' },
            ]}
            button="Получить аудит профиля"
          />
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, {
  ProfileHero, ProfileWhy, ProfileIncludes, ProfileCase, ProfileFaq, ProfileFinalCta,
});