/* ============== Sections A: WhyAvito, Pains, Founder ============== */

/* ===== Why Avito mini ===== */
function WhyAvito() {
  const cards = [
    {
      big: '50+ млн',
      title: 'пользователей в месяц',
      text: 'Готовы покупать — приходят с конкретным запросом, не «посмотреть»',
    },
    {
      big: 'в 2–7 раз',
      title: 'дешевле лид',
      text: 'От 2 до 7 раз дешевле, чем Яндекс.Директ или таргетированная реклама',
    },
    {
      big: 'B2B + B2C',
      title: 'работает во всех нишах',
      text: 'Товарные ниши, услуги, вакансии и другие сферы бизнеса',
    },
  ];

  return (
    <section className="section section-tight why-avito">
      <div className="wrap">
        <Reveal>
          <h2 className="why-avito__title">
            Авито сегодня — не барахолка,<br/>
            а <span className="text-red">канал продаж №1</span> для МСБ
          </h2>
        </Reveal>
        <div className="why-avito__grid">
          {cards.map((c, i) => (
            <Reveal key={i} delay={i * 80} className="why-avito__card">
              <div className="why-avito__big">{c.big}</div>
              <div className="why-avito__cap">{c.title}</div>
              <p className="why-avito__text">{c.text}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Pains ===== */
const PAINS = [
  { icon: '😤', text: 'Публикуете объявления — а звонков нет или слишком мало' },
  { icon: '⏱️', text: 'Рутина с Авито съедает время: размещение, редактирование, ответы' },
  { icon: '💸', text: 'Деньги на платное продвижение уходят, а качество заявок низкое' },
  { icon: '🚫', text: 'Объявления банят или уходят в теневой бан без предупреждения' },
  { icon: '📉', text: 'Просмотры есть — а в звонки почти не конвертируется' },
  { icon: '🔀', text: 'Нет системы: публикуете хаотично, поток заявок непредсказуем' },
  { icon: '📊', text: 'Непонятно, какие объявления работают, а какие сливают бюджет' },
  { icon: '📍', text: 'Конкуренты занимают весь топ — вас просто не видят' },
  { icon: '😞', text: 'Уже пробовали фрилансера — пропал или не дал результата' },
];

function Pains() {
  return (
    <section className="section pains">
      <div className="wrap">
        <Reveal className="pains__head">
          <div className="eyebrow">Узнаёте себя?</div>
          <h2 className="section-title">
            9 ситуаций, с которыми<br/>к нам приходят чаще всего
          </h2>
        </Reveal>
        <div className="pains__grid">
          {PAINS.map((p, i) => (
            <Reveal key={i} delay={i * 40} className="pains__card">
              <div className="pains__icon">{p.icon}</div>
              <div className="pains__text">{p.text}</div>
              <div className="pains__num">{String(i+1).padStart(2,'0')}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Founder block ===== */
function Founder() {
  return (
    <section id="founder" className="section section--dark founder">
      <div className="wrap">
        <div className="founder__grid">
          <div className="founder__media">
            <div className="founder__photo founder__photo--main">
              <div className="founder__photo-placeholder">
                <div className="founder__photo-label">
                  <span>Фото</span>
                  <strong>Антона Федина</strong>
                </div>
              </div>
              <img
                src="/image.png"
                alt="Антон Федин — основатель агентства «Формула Клиентов»"
                className="founder__photo-img"
                loading="lazy"
                onError={(e)=>{ e.currentTarget.style.display = 'none'; }}
              />
              <div className="founder__badge">
                <Icon.Star /> Результат года
              </div>
            </div>
            <div className="founder__photo founder__photo--award">
              <div className="founder__photo-placeholder dark">
                <div className="founder__photo-label">
                  <span>С наградой</span>
                  <strong>«Результат года»</strong>
                </div>
              </div>
            </div>
          </div>

          <div className="founder__content">
            <div className="eyebrow">Основатель</div>
            <h2 className="section-title founder__title">
              Стратегию строит тот,<br/>
              кто <span className="text-red">работал внутри Авито</span>
            </h2>

            <div className="founder__person">
              <div>
                <div className="founder__name">Антон Федин</div>
                <div className="founder__role">Основатель агентства «Формула Клиентов»</div>
              </div>
            </div>

            <div className="founder__regalia">
              <div className="founder__regalia-item">
                <Icon.Star />
                <div>Обладатель корпоративной награды Авито <strong>«Результат года»</strong></div>
              </div>
              <div className="founder__regalia-item">
                <Icon.Chart />
                <div><strong>4 года</strong> работы внутри Авито — управление рекламными бюджетами от <strong>1 000 000&nbsp;₽/мес</strong></div>
              </div>
              <div className="founder__regalia-item">
                <Icon.Users />
                <div>В портфеле клиентов: <strong>Сбербанк, Ашан, Бургер Кинг, Fix-Price, ВкусВилл</strong></div>
              </div>
            </div>

            <div className="founder__quote">
              «Мы строим стратегию на основе <span className="text-red">реальных алгоритмов площадки</span> — потому что основатель 4 года развивал крупнейших клиентов изнутри Авито. Это не маркетинговая фраза — это факт.»
            </div>
          </div>
        </div>

        <div className="founder__form-wrap">
          <div className="founder__form-card">
            <div className="founder__form-head">
              <div>
                <div className="eyebrow" style={{color: 'rgba(255,255,255,0.6)'}}>Бесплатная консультация</div>
                <h3 className="founder__form-title">
                  Ответим на ваши вопросы — найдём <span className="text-red">3 ошибки</span>, которые съедают конверсию
                </h3>
              </div>
            </div>
            <LeadForm
              id="founder-form"
              dark
              columns={3}
              fields={[
                { key: 'name', label: 'Имя', validate: 'name', required: true, placeholder: 'Иван' },
                { key: 'question', label: 'Ваш вопрос', placeholder: 'О чём хотите спросить?' },
                { key: 'phone', label: 'Телефон', validate: 'phone', required: true, placeholder: '+7 (___) ___-__-__', type: 'tel' },
              ]}
              button="Получить ответ и поднять конверсию"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Styles ---- */
const sectionsAStyles = document.createElement('style');
sectionsAStyles.textContent = `
/* Why Avito */
.why-avito { background: var(--surface); }
.why-avito__title {
  font-size: clamp(28px, 3.8vw, 48px);
  letter-spacing: -0.03em;
  max-width: 880px;
  margin-bottom: 56px;
  line-height: 1.05;
}
.why-avito__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
@media (max-width: 800px) { .why-avito__grid { grid-template-columns: 1fr; } }
.why-avito__card {
  padding: 32px 28px 32px 0;
  border-right: 1px solid var(--border);
}
.why-avito__card:last-child { border-right: none; }
@media (max-width: 800px) {
  .why-avito__card { border-right: none; border-bottom: 1px solid var(--border); padding: 24px 0; }
}
.why-avito__big {
  font-size: clamp(40px, 4.4vw, 60px);
  font-weight: 800;
  letter-spacing: -0.04em;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  line-height: 1;
}
.why-avito__cap {
  font-size: 18px; font-weight: 700;
  margin-top: 10px;
}
.why-avito__text {
  margin-top: 12px;
  color: var(--ink-60);
  font-size: 15px;
  max-width: 320px;
}
.why-avito__bridge {
  margin-top: 56px;
  padding: 24px 28px;
  background: var(--dark);
  color: #fff;
  border-radius: 18px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.why-avito__bridge span { color: rgba(255,255,255,0.5); }

/* Pains */
.pains { background: var(--bg); }
.pains__head { margin-bottom: 56px; max-width: 900px; }
.pains__head .eyebrow { margin-bottom: 18px; }
.pains__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .pains__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pains__grid { grid-template-columns: 1fr; } }

.pains__card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex; flex-direction: column;
  gap: 14px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  cursor: default;
  min-height: 156px;
}
.pains__card:hover {
  transform: translateY(-3px);
  border-color: var(--ink);
  box-shadow: var(--shadow);
}
.pains__icon { font-size: 30px; line-height: 1; }
.pains__text { font-size: 16px; font-weight: 600; line-height: 1.35; max-width: 320px; color: var(--ink); }
.pains__num {
  position: absolute; top: 18px; right: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-40);
  font-weight: 600;
}

/* Founder */
.founder { background: var(--dark); }
.founder__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 960px) { .founder__grid { grid-template-columns: 1fr; gap: 40px; } }
.founder__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.founder__photo {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.founder__photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.founder__photo--main { grid-column: 1 / -1; aspect-ratio: 4 / 3.2; }
.founder__photo-placeholder {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, #1A1A1A, #0E0E0E);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.1);
}
.founder__photo-placeholder.dark {
  background:
    repeating-linear-gradient(135deg, rgba(255, 47, 0, 0.06) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, #1A1410, #0E0A07);
}
.founder__photo-label {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.founder__photo-label strong { display: block; font-size: 16px; margin-top: 4px; color: rgba(255,255,255,0.75); }
.founder__badge {
  position: absolute; bottom: 14px; left: 14px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-red); color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.founder__title { margin: 18px 0 28px; }
.founder__person { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.founder__name {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
}
.founder__role { color: rgba(255,255,255,0.6); font-size: 14px; margin-top: 2px; }

.founder__regalia { display: flex; flex-direction: column; gap: 14px; }
.founder__regalia-item {
  display: flex; gap: 14px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  line-height: 1.4;
  font-size: 15px;
  color: rgba(255,255,255,0.85);
}
.founder__regalia-item > svg { color: var(--brand-orange); flex-shrink: 0; margin-top: 2px; }
.founder__regalia-item strong { color: #fff; font-weight: 700; }

.founder__quote {
  margin-top: 32px;
  padding: 24px 28px;
  border-left: 3px solid var(--brand-red);
  font-size: 18px;
  line-height: 1.45;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}

.founder__form-wrap { margin-top: 64px; }
.founder__form-card {
  background: linear-gradient(135deg, rgba(255, 47, 0, 0.08), rgba(255, 106, 0, 0.04));
  border: 1px solid rgba(255, 47, 0, 0.2);
  border-radius: 22px;
  padding: 36px;
}
.founder__form-head { margin-bottom: 24px; max-width: 700px; }
.founder__form-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 8px;
}
@media (max-width: 700px) {
  .founder__form-card { padding: 24px; }
}
`;
document.head.appendChild(sectionsAStyles);

Object.assign(window, { WhyAvito, Pains, Founder });