/* ============== Sections C: Calculator, Cases, Process, SEO, Audit, Footer ============== */

/* ===== Calculator form (between tariffs and cases) ===== */
function Calculator() {
  return (
    <section id="calc" className="section calc">
      <div className="wrap">
        <div className="calc__card">
          <div className="calc__head">
            <div className="eyebrow">Не уверены, какой пакет нужен?</div>
            <h2 className="section-title calc__title">
              Бесплатно проведём аудит ниши<br/>
              и предложим <span className="text-red">оптимальный формат</span>
            </h2>
            <p className="lead" style={{maxWidth: 620, marginTop: 16}}>
              Снижаем барьер: вместо «купи» — давайте посчитаем. Вы получите расчёт окупаемости с прогнозом лидов.
            </p>
          </div>
          <div className="calc__form">
            <LeadForm
              id="calc-form"
              columns={2}
              fields={[
                { key: 'name', label: 'Имя', validate: 'name', required: true, placeholder: 'Иван' },
                { key: 'phone', label: 'Телефон', validate: 'phone', required: true, placeholder: '+7 (___) ___-__-__', type: 'tel' },
                { key: 'niche', label: 'Ниша / тип бизнеса', placeholder: 'Например, нерудные материалы' },
                { key: 'cities', label: 'Города работы', placeholder: 'Москва, Новосибирск' },
              ]}
              button="Получить расчёт"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== Cases ===== */
const CASES = [
  {
    name: 'Геоникс',
    niche: 'Геология и Кадастр',
    state: 'Запуск с нуля',
    tasks: [
      'Запустить пустой аккаунт и вывести его в топ',
      'Занять позиции по геодезическим услугам в нескольких городах',
      'Снизить стоимость входящего обращения',
    ],
    metrics: [
      { num: 389, suffix: ' ₽', label: 'средняя стоимость одного обращения' },
      { num: 1578, suffix: '', label: 'целевых контактов за период' },
      { num: 1426, suffix: '', label: 'активных объявлений одновременно — без блокировок' },
      { num: 614779, suffix: ' ₽', label: 'общий бюджет на продвижение' },
    ],
  },
  {
    name: 'Вся Доставка',
    niche: 'Нерудные и сыпучие материалы',
    state: 'Запуск с нуля',
    tasks: [
      'Масштабировать объявления по всему ассортименту',
      'Захватить максимальный охват по регионам',
      'Автоматизировать обработку входящих обращений',
    ],
    metrics: [
      { num: 115, suffix: ' ₽', label: 'стоимость лида — в высококонкурентной нише' },
      { num: 3500, suffix: '', label: 'целевых контактов за период' },
      { num: 79000, suffix: '', label: 'просмотров объявлений' },
      { num: 5.1, suffix: ' ₽', label: 'стоимость просмотра — дешевле любого канала', isFloat: true },
    ],
  },
  {
    name: 'Slav Motors',
    niche: 'Автомастерская — ремонт и обслуживание',
    state: 'Запуск с нуля',
    tasks: [
      'Создать и оформить Авито-магазин с нуля',
      'Запустить стабильный поток обращений на ремонт',
      'Работа с репутацией и поведенческими факторами',
    ],
    metrics: [
      { num: 254, suffix: ' ₽', label: 'средняя стоимость лида в нише ремонта' },
      { num: 1578, suffix: '', label: 'целевых контактов (звонков и чатов) за год' },
      { num: 600000, suffix: ' ₽', label: 'рекламный бюджет за год' },
      { num: 8065, suffix: '', label: 'целевых просмотров объявлений' },
    ],
  },
];

function Cases() {
  return (
    <section id="cases" className="section section--surface cases">
      <div className="wrap">
        <Reveal className="cases__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="cases__list">
          {CASES.map((c, i) => (
            <Reveal key={i} delay={i*100} className="cases__item">
              <div className="cases__item-head">
                <div className="cases__item-num">КЕЙС {String(i+1).padStart(2,'0')}</div>
                <div className="cases__item-state">{c.state}</div>
              </div>

              <div className="cases__item-body">
                <div className="cases__item-info">
                  <h3 className="cases__item-name">{c.name}</h3>
                  <div className="cases__item-niche">{c.niche}</div>

                  <div className="cases__item-tasks">
                    <div className="cases__item-tasks-label">Задачи</div>
                    <ul>
                      {c.tasks.map((t, j) => (
                        <li key={j}>
                          <span className="cases__item-task-dot"></span>
                          {t}
                        </li>
                      ))}
                    </ul>
                  </div>

                  <button className="btn btn-primary btn-arrow cases__item-cta" onClick={() => scrollToId('audit')}>
                    Хочу такой же результат <Icon.ArrowRight />
                  </button>
                </div>

                <div className="cases__item-metrics">
                  {c.metrics.map((m, j) => (
                    <div key={j} className="cases__metric">
                      <div className="cases__metric-num">
                        {m.isFloat ? (
                          <>{m.num.toLocaleString('ru-RU', {minimumFractionDigits:1, maximumFractionDigits:1})}</>
                        ) : (
                          <AnimNumber value={m.num} />
                        )}
                        <span className="cases__metric-suffix">{m.suffix}</span>
                      </div>
                      <div className="cases__metric-label">{m.label}</div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Process ===== */
const STEPS = [
  {
    n: '01',
    title: 'Диагностика и стратегия',
    body: 'Анализ ниши, конкурентов и спроса. Формирование ключевого ядра и плана публикаций. Прогноз лидов.',
    time: '1–2 рабочих дня',
  },
  {
    n: '02',
    title: 'Создание «магнита»',
    body: 'Копирайтеры пишут тексты под боли ЦА. Дизайнеры создают инфографику для высокой кликабельности. Уникализация фото.',
    time: '3–5 дней',
  },
  {
    n: '03',
    title: 'Масштабирование',
    body: 'Публикация объявлений по направлениям. Настройка автозагрузки. Первые входящие обращения.',
    time: 'с 3–5 дня',
  },
  {
    n: '04',
    title: 'Оптимизация',
    body: 'А/Б тесты, настройка ИИ-автоответчика, перепубликация неэффективных объявлений. Управление бюджетом.',
    time: 'еженедельно',
  },
];

function Process() {
  return (
    <section className="section section--dark process">
      <div className="wrap">
        <Reveal className="process__head">
          <div className="eyebrow">Порядок работы</div>
          <h2 className="section-title">
            Цикл «Анализ — Упаковка —<br/>
            <span className="text-red">Продвижение</span> — Оптимизация»
          </h2>
        </Reveal>

        <div className="process__steps">
          {STEPS.map((s, i) => (
            <Reveal key={i} delay={i*100} className="process__step">
              <div className="process__step-top">
                <div className="process__step-num">{s.n}</div>
                {i < STEPS.length - 1 && <div className="process__step-line"></div>}
              </div>
              <h3 className="h3 process__step-title">{s.title}</h3>
              <p className="process__step-body">{s.body}</p>
              <div className="process__step-time">{s.time}</div>
            </Reveal>
          ))}
        </div>

        <Reveal className="process__split">
          <div className="process__split-card process__split-card--you">
            <div className="process__split-label">Вы делаете</div>
            <div className="process__split-text">
              Принимаете звонки и считаете прибыль <span style={{fontSize: 26}}>📲</span>
            </div>
          </div>
          <div className="process__split-card process__split-card--us">
            <div className="process__split-label">Мы делаем</div>
            <div className="process__split-text">
              Объявления, тексты, аналитика, оптимизация, ИИ-автоответчик, отчётность
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== Audit (lead magnet, brand color BG) ===== */
function Audit() {
  return (
    <section id="audit" className="section audit">
      <div className="wrap audit__wrap">
        <Reveal className="audit__head">
          <h2 className="audit__title">
            Не уверены, что Авито<br/>подойдёт вашему бизнесу?
          </h2>
          <p className="audit__lead">
            Бесплатно проведём аудит вашей ниши: конкуренты, объём спроса, реальный потенциал. Вы получите <strong>таблицу с цифрами</strong> — и честный ответ.
          </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="audit-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: 'Ниша / сфера бизнеса', required: true, placeholder: 'Например, ремонт авто' },
            ]}
            button="Получить бесплатный аудит"
          />
        </Reveal>
      </div>
    </section>
  );
}

/* ===== SEO block (text-only, low visual weight) ===== */
function SeoBlock() {
  return (
    <section className="section seo">
      <div className="wrap">
        <details className="seo__details">
          <summary>
            <span>Продвижение бизнеса на Авито под ключ</span>
            <span className="seo__chevron">+</span>
          </summary>
          <div className="seo__content">
            <p><strong>Авито</strong> — крупнейший российский классифайд с ежемесячной аудиторией более 50 миллионов пользователей. Пользователи приходят с чётко сформированным запросом и готовностью к сделке.</p>
            <h4>Агентство «Формула Клиентов» — что это?</h4>
            <p>«Формула Клиентов» — специализированное агентство по системному управлению трафиком на Авито. Основатель агентства Антон Федин проработал 4 года внутри компании Авито, где развивал крупнейших корпоративных клиентов: Сбербанк, Ашан, Бургер Кинг. Мы выстраиваем полноценную маркетинговую систему: от анализа ниши до масштабирования и автоматизации.</p>
            <h4>Как работает продвижение на Авито под ключ?</h4>
            <p>Эффективное продвижение на Авито — комплекс мер: оптимизация объявлений под алгоритмы площадки, создание продающих текстов и инфографики, управление репутацией, внедрение ИИ-автоответчиков и сквозная аналитика. Наша методология позволяет снизить стоимость лида на 25–40% и увеличить охват в 5–10 раз.</p>
          </div>
        </details>
      </div>
    </section>
  );
}

/* ===== Footer ===== */
const FT_HOME = (window.FormulaTheme && window.FormulaTheme.homeUrl) || '/';
const FT_USLUGI = (window.FormulaTheme && window.FormulaTheme.urls && window.FormulaTheme.urls.services) || '/uslugi/';
const FOOTER_SERVICES = [
  ['avitolog', 'Услуги авитолога'],
  ['prodvizhenie-obyavleniy', 'Продвижение объявлений'],
  ['vedenie-avito', 'Ведение Авито'],
  ['seo-prodvizhenie', 'SEO продвижение'],
  ['vedenie-magazinov', 'Ведение магазинов'],
  ['otzyvy-i-reputaciya', 'Отзывы и репутация'],
];

function Footer() {
  return (
    <footer id="footer" className="footer">
      <div className="wrap footer__wrap">
        <div className="footer__top">
          <div className="footer__brand">
            <img src={(window.FormulaTheme || {}).logoUrl || '/assets/images/logo.png'} alt="Формула Клиентов" style={{height: 48, filter: 'brightness(0) invert(1)', opacity: 0.95}}/>
            <p>Агентство по продвижению<br/>бизнеса на Авито</p>
          </div>

          <div className="footer__contacts">
            <a href="tel:+74952041065" className="footer__phone">+7 (495) 204-10-65</a>
            <div className="footer__phone-cap">звонки, Пн–Пт 9:00–20:00</div>
            <a href="tel:+79253859910" className="footer__phone footer__phone--alt">+7 (925) 385-99-10</a>
            <div className="footer__phone-cap">WhatsApp, Telegram</div>
            <a href="mailto:mail@clientformula.ru" className="footer__mail">mail@clientformula.ru</a>
            <div className="footer__phone-cap">Работаем удалённо по всей России</div>
          </div>

          <div className="footer__col">
            <div className="footer__col-title">Услуги</div>
            <ul>
              {FOOTER_SERVICES.map(([slug, name]) => (
                <li key={slug}><a href={`${FT_USLUGI}${slug}/`}>{name}</a></li>
              ))}
            </ul>
          </div>

          <div className="footer__col">
            <div className="footer__col-title">Навигация</div>
            <ul>
              <li><a href="#founder" onClick={(e)=>{e.preventDefault(); scrollToId('founder');}}>О нас и основателе</a></li>
              <li><a href="#tariffs" onClick={(e)=>{e.preventDefault(); scrollToId('tariffs');}}>Тарифы</a></li>
              <li><a href="#cases" onClick={(e)=>{e.preventDefault(); scrollToId('cases');}}>Кейсы</a></li>
              <li><a href={FT_HOME + 'blog/'}>Блог</a></li>
              <li><a href="#footer" onClick={(e)=>{e.preventDefault(); scrollToId('footer');}}>Контакты</a></li>
            </ul>
          </div>
        </div>

        <div className="footer__bottom">
          <div className="footer__legal">
            © 2020–2026 «Формула Клиентов» · clientformula.ru<br/>
            Часть группы компаний ИндигоМ
          </div>
          <div className="footer__legal-links">
            <a href="/privacy-policy/">Политика конфиденциальности</a>
            <a href="/privacy-policy/">Согласие на обработку данных</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---- Styles ---- */
const sectionsCStyles = document.createElement('style');
sectionsCStyles.textContent = `
/* Calculator */
.calc { background: var(--bg); padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.calc__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) { .calc__card { grid-template-columns: 1fr; gap: 32px; } }
.calc__head .eyebrow { margin-bottom: 16px; }
.calc__title { margin-bottom: 8px; font-size: clamp(28px, 3.4vw, 44px); }

/* Cases */
.cases__head { margin-bottom: 56px; max-width: 800px; }
.cases__head .eyebrow { margin-bottom: 18px; }
.cases__list { display: flex; flex-direction: column; gap: 18px; }
.cases__item {
  background: var(--bg);
  border-radius: 24px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.cases__item-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px;
  background: var(--ink); color: #fff;
}
.cases__item-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--brand-orange); font-weight: 700;
  letter-spacing: 0.08em;
}
.cases__item-state {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}

.cases__item-body {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 0;
}
@media (max-width: 900px) { .cases__item-body { grid-template-columns: 1fr; } }

.cases__item-info { padding: 36px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 900px) { .cases__item-info { border-right: none; border-bottom: 1px solid var(--border); } }
.cases__item-name { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.cases__item-niche { color: var(--ink-60); font-weight: 600; font-size: 15px; }
.cases__item-tasks {}
.cases__item-tasks-label { font-size: 11px; color: var(--ink-60); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 12px; }
.cases__item-tasks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cases__item-tasks li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15px; line-height: 1.4;
}
.cases__item-task-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-red); margin-top: 8px; flex-shrink: 0;
}
.cases__item-cta { align-self: flex-start; margin-top: auto; }

.cases__item-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.cases__metric {
  padding: 32px 28px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cases__metric:nth-child(2n) { border-right: none; }
.cases__metric:nth-last-child(-n+2) { border-bottom: none; }
.cases__metric-num {
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-flex;
  align-items: baseline;
}
.cases__metric-suffix {
  font-size: 0.55em;
  color: var(--ink);
  background: none; -webkit-text-fill-color: var(--ink);
  font-weight: 700;
  margin-left: 2px;
}
.cases__metric-label {
  font-size: 13px; color: var(--ink-60); font-weight: 600;
  margin-top: 8px; line-height: 1.35;
  max-width: 240px;
}

/* Process */
.process__head { margin-bottom: 56px; max-width: 880px; }
.process__head .eyebrow { margin-bottom: 18px; }
.process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .process__steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process__steps { grid-template-columns: 1fr; } }
.process__step {
  display: flex; flex-direction: column; gap: 14px;
}
.process__step-top { display: flex; align-items: center; gap: 14px; }
.process__step-num {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--brand-red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
  flex-shrink: 0;
}
.process__step-line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0));
}
.process__step-title { color: #fff; letter-spacing: -0.02em; }
.process__step-body { color: rgba(255,255,255,0.7); font-size: 15px; line-height: 1.45; }
.process__step-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--brand-orange);
  background: rgba(255, 106, 0, 0.1);
  padding: 4px 10px;
  border-radius: 8px;
  align-self: flex-start;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.process__split {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
}
@media (max-width: 700px) { .process__split { grid-template-columns: 1fr; } }
.process__split-card {
  padding: 28px;
  border-radius: 18px;
}
.process__split-card--you {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.process__split-card--us {
  background: var(--brand-red);
}
.process__split-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700;
  opacity: 0.7;
  margin-bottom: 10px;
}
.process__split-text {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* Audit */
.audit {
  background: var(--brand-red);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.audit::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(700px 400px at 90% 10%, rgba(255, 106, 0, 0.5), transparent 60%),
    radial-gradient(500px 400px at 5% 95%, rgba(255,255,255,0.08), transparent 60%);
  pointer-events: none;
}
.audit__wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) { .audit__wrap { grid-template-columns: 1fr; gap: 32px; } }
.audit__title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.audit__lead {
  font-size: clamp(17px, 1.6vw, 22px);
  margin-top: 24px;
  color: rgba(255,255,255,0.95);
  max-width: 540px;
  line-height: 1.45;
}
.audit__principles {
  margin-top: 28px;
  display: flex; gap: 20px; flex-wrap: wrap;
}
.audit__principles span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600;
}
.audit__principles svg { background: #fff; color: var(--brand-red); border-radius: 50%; padding: 2px; width: 18px; height: 18px; }

.audit__form-card {
  background: #fff;
  color: var(--ink);
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
}

/* SEO collapsible */
.seo { padding: 48px 0; background: var(--bg); border-top: 1px solid var(--border); }
.seo__details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 4px 8px;
}
.seo__details summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 24px;
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}
.seo__details summary::-webkit-details-marker { display: none; }
.seo__chevron { font-size: 24px; color: var(--brand-red); transition: transform .2s; }
.seo__details[open] .seo__chevron { transform: rotate(45deg); }
.seo__content { padding: 0 24px 24px; color: var(--ink-60); font-size: 14px; line-height: 1.55; }
.seo__content h4 { color: var(--ink); margin-top: 20px; margin-bottom: 8px; font-size: 15px; font-weight: 800; }
.seo__content p { margin-bottom: 8px; }

/* Footer */
.footer {
  background: var(--dark);
  color: rgba(255,255,255,0.7);
  padding: 64px 0 32px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }
.footer__brand p { margin-top: 16px; font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.4; }
.footer__contacts { display: flex; flex-direction: column; gap: 2px; }
.footer__phone {
  font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.01em;
}
.footer__phone--alt { font-size: 17px; margin-top: 14px; color: rgba(255,255,255,0.9); }
.footer__phone-cap { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
.footer__mail { color: #fff; font-weight: 600; margin-top: 14px; display: block; }
.footer__col-title {
  color: #fff; font-weight: 800;
  font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { color: rgba(255,255,255,0.6); font-size: 14px; }
.footer__col a:hover { color: #fff; }

.footer__bottom {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.footer__legal { line-height: 1.5; }
.footer__legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legal-links a { color: rgba(255,255,255,0.55); }
.footer__legal-links a:hover { color: #fff; }
`;
document.head.appendChild(sectionsCStyles);

/* Theme variable reset — runs last so it wins over any Gutenberg overrides */
(function() {
  var s = document.createElement('style');
  s.id = 'formula-theme-reset';
  s.textContent =
    ':root{' +
      '--ink:#0A0A0A;--ink-80:rgba(10,10,10,.8);--ink-60:rgba(10,10,10,.6);--ink-08:rgba(10,10,10,.08);' +
      '--bg:#FAF9F9;--surface:#fff;--surface-2:#F2F1F0;--border:#E2E1E1;' +
      '--dark:#0A0A0A;--brand-red:#FF2F00;--brand-orange:#FF6A00;' +
    '}' +
    'body{background:#FAF9F9!important;color:#0A0A0A!important;}' +
    'h1,h2,h3,h4,h5,h6{font-family:"Manrope",-apple-system,system-ui,sans-serif!important;color:#0A0A0A!important;}' +
    '.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,' +
    '.section--dark h5,.section--dark h6,.section--dark p,' +
    '.hero h1,.hero h2,.hero p,.shero h1,.shero h2{color:#fff!important;}' +
    '.text-red{color:#FF2F00!important;}';
  document.head.appendChild(s);

  /* Inline !important beats any stylesheet !important — nuclear override for Gutenberg */
  var de = document.documentElement;
  var db = document.body;
  de.style.setProperty('background', '#FAF9F9', 'important');
  de.style.setProperty('--bg', '#FAF9F9');
  de.style.setProperty('--surface', '#ffffff');
  de.style.setProperty('--surface-2', '#F2F1F0');
  de.style.setProperty('--dark', '#0A0A0A');
  de.style.setProperty('--ink', '#0A0A0A');
  de.style.setProperty('--brand-red', '#FF2F00');
  db.style.setProperty('background', '#FAF9F9', 'important');
  db.style.setProperty('color', '#0A0A0A', 'important');
})();

Object.assign(window, { Calculator, Cases, Process, Audit, SeoBlock, Footer });