/* ============== Калькулятор лидов и инфографика (08.09.2026) ============== */
const ROI_NICHES = [
  { key: 'goods', name: 'Товары, стройматериалы, сыпучие', lo: 115, hi: 250, note: 'кейс «Вся Доставка»: 115 ₽ за контакт' },
  { key: 'auto', name: 'Автосервис, ремонт, услуги', lo: 200, hi: 300, note: 'кейс Slav Motors: 254 ₽ за контакт' },
  { key: 'b2b', name: 'B2B, геодезия, спецтехника', lo: 300, hi: 390, note: 'кейс «Геоникс»: 389,6 ₽ за контакт' },
  { key: 'other', name: 'Другая ниша', lo: 200, hi: 350, note: 'средний диапазон по проектам' },
];
const ROI_TARIFFS = [{ name: 'Начальный', price: 50000 }, { name: 'Стандарт', price: 85000 }, { name: 'Профессиональный', price: 150000 }];
const roiFmt = (n) => Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
function RoiCalc() {
  const [budget, setBudget] = useState(300000);
  const [niche, setNiche] = useState('goods');
  const [tariff, setTariff] = useState(1);
  const n = ROI_NICHES.find(x => x.key === niche); const t = ROI_TARIFFS[tariff];
  const leadsLo = Math.round(budget / n.hi), leadsHi = Math.round(budget / n.lo);
  const total = budget + t.price; const cplLo = total / leadsHi, cplHi = total / leadsLo;
  const frLeads = Math.round(leadsLo / 4); const frCpl = (budget + 25000) / Math.max(frLeads, 1);
  const summary = `Калькулятор: бюджет ${roiFmt(budget)} ₽, ниша «${n.name}», тариф «${t.name}» → ${leadsLo}–${leadsHi} лидов/мес, ${roiFmt(cplLo)}–${roiFmt(cplHi)} ₽ за лид`;
  const go = () => { window.FormulaCalc = summary; const me = document.getElementById('roi'); const forms = [...document.querySelectorAll('form.lead-form')]; const below = forms.find(f => f.getBoundingClientRect().top > (me ? me.getBoundingClientRect().top : 0)); const f = below || forms[forms.length - 1]; if (f) window.scrollTo({ top: f.getBoundingClientRect().top + window.scrollY - 120, behavior: 'smooth' }); };
  return (
    <section id="roi" className="section roi">
      <div className="wrap">
        <div className="eyebrow">Калькулятор</div>
        <h2 className="section-title">Сколько лидов даст ваш бюджет на Авито</h2>
        <p className="lead" style={{maxWidth: 680, marginTop: 12}}>Прогноз по стоимости контакта из наших кейсов. Точный расчёт под вашу категорию и город — в бесплатном аудите ниши.</p>
        <div className="roi__grid">
          <div className="roi__form">
            <label className="roi__label">Рекламный бюджет на Авито: <b>{roiFmt(budget)} ₽/мес</b></label>
            <input type="range" min="50000" max="1000000" step="10000" value={budget} onChange={e => setBudget(+e.target.value)} className="roi__range" />
            <label className="roi__label">Ниша</label>
            <div className="roi__pills">{ROI_NICHES.map(x => <button type="button" key={x.key} className={`roi__pill ${niche === x.key ? 'active' : ''}`} onClick={() => setNiche(x.key)}>{x.name}</button>)}</div>
            <label className="roi__label">Тариф ведения</label>
            <div className="roi__pills">{ROI_TARIFFS.map((x, i) => <button type="button" key={x.name} className={`roi__pill ${tariff === i ? 'active' : ''}`} onClick={() => setTariff(i)}>{x.name} · {roiFmt(x.price)} ₽</button>)}</div>
            <p className="roi__note">{n.note}. Бюджет площадки оплачивается напрямую в кабинет Авито.</p>
          </div>
          <div className="roi__result">
            <div className="roi__big">{leadsLo}–{leadsHi}<span>целевых контактов в месяц</span></div>
            <div className="roi__rows">
              <div><span>Стоимость лида с учётом тарифа</span><b>{roiFmt(cplLo)}–{roiFmt(cplHi)} ₽</b></div>
              <div><span>Всего в месяц: бюджет + ведение</span><b>{roiFmt(total)} ₽</b></div>
              <div><span>Фрилансер за 25 000 ₽ при том же бюджете</span><b>~{frLeads} лидов по {roiFmt(frCpl)} ₽</b></div>
            </div>
            <button type="button" className="btn btn-primary roi__cta" onClick={go}>Получить точный расчёт бесплатно</button>
            <p className="roi__small">Считаем от диапазона CPL в кейсах и пропорции «фрилансер : система = 1 : 4» из нашей экономики при бюджете 300 000 ₽.</p>
          </div>
        </div>
      </div>
      <style>{`
        .roi { padding: 72px 0; }
        .roi__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; margin-top: 32px; }
        @media (max-width: 900px) { .roi__grid { grid-template-columns: 1fr; } }
        .roi__form { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; }
        .roi__label { display: block; font-weight: 700; margin: 14px 0 8px; }
        .roi__range { width: 100%; accent-color: var(--brand-red); }
        .roi__pills { display: flex; flex-wrap: wrap; gap: 8px; }
        .roi__pill { padding: 9px 14px; border: 1px solid var(--border); border-radius: 100px; background: var(--bg); font: inherit; font-size: 14px; cursor: pointer; color: var(--ink-80); }
        .roi__pill.active { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
        .roi__note { font-size: 13px; color: var(--ink-60); margin-top: 16px; }
        .roi__result { background: var(--dark); color: #fff; border-radius: 16px; padding: 28px; }
        .roi__big { font-size: 44px; font-weight: 800; color: var(--brand-orange); line-height: 1; }
        .roi__big span { display: block; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.7); margin-top: 8px; }
        .roi__rows { margin: 22px 0; display: grid; gap: 10px; }
        .roi__rows div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 10px; font-size: 14px; }
        .roi__rows b { color: #fff; white-space: nowrap; }
        .roi__cta { width: 100%; }
        .roi__small { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 12px; }
        .info-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 32px 0 0; }
        .info-strip figure { margin: 0; }
        .info-strip img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); display: block; }
        .info-strip figcaption { font-size: 13px; color: var(--ink-60); margin-top: 8px; }
      `}</style>
    </section>
  );
}
const INFO_IMGS = {
  cikl: ['cikl-5-etapov', 'Цикл работы: анализ, упаковка, масштабирование, удержание, контроль', 'Пять этапов от диагностики до отчётности'],
  tarify: ['tarify-avito', 'Три тарифа ведения аккаунта на Авито: 50 000, 85 000 и 150 000 ₽ в месяц', 'Состав тарифов'],
  roi: ['roi-300k-frilanser-vs-my', 'Бюджет 300 000 ₽: 200 лидов у фрилансера против 800 у системы', 'Экономика при одинаковом бюджете'],
  cpl: ['keysy-cpl', 'Стоимость контакта в кейсах: 115, 254 и 390 ₽', 'Цена лида в трёх нишах'],
  vs: ['frilanser-konveyer-butik', 'Сравнение: фрилансер, конвейер и бутик', 'Чем отличается системный подход'],
  problems: ['problemy-kotorye-reshaem', 'Какие проблемы на Авито решаем', 'Боли и решения'],
  garantii: ['garantii-v-dogovore', 'Гарантии в договоре', 'Что фиксируем юридически'],
};
function InfoStrip({ keys, title }) {
  return (
    <section className="section">
      <div className="wrap">
        {title ? <h2 className="section-title" style={{marginBottom: 8}}>{title}</h2> : null}
        <div className="info-strip">
          {keys.map(k => { const [f, alt, cap] = INFO_IMGS[k]; return (
            <figure key={k}><img src={`/wp-content/themes/formula-clientov/assets/img/info/${f}.png`} alt={alt} width="1200" height="675" loading="lazy" /><figcaption>{cap}</figcaption></figure>
          ); })}
        </div>
      </div>
    </section>
  );
}