// Section components — blocks 1–13
// Depends on window.Icon, Wordmark, Eyebrow, BrandLogo, mockups.

const HERO_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroH1Prefix": "Все процессы компании",
  "heroH1Accent": "в одном месте",
  "heroH1Suffix": "",
  "heroSubtitle": "THData объединяет задачи, документы, CRM, отпуска, коммуникации и аналитику. Команда работает в единой системе, а автоматизация и ИИ забирают рутину.",
  "heroPrimaryCta": "Получить бесплатный аудит",
  "heroSecondaryCta": "Смотреть модули",
  "heroMicro": "Запуск от 2 недель · Интеграция с 1С · Данные в РФ"
}/*EDITMODE-END*/;

// ────────── Header ──────────
function SiteHeader() {
  const [open, setOpen] = React.useState(false);
  const items = [
    { l: "Решения", h: "#solutions" },
    { l: "Модули", h: "#modules" },
    { l: "Экономика", h: "#economics" },
    { l: "Кейсы", h: "#cases" },
    { l: "Тарифы", h: "#pricing" },
    { l: "FAQ", h: "#faq" },
  ];
  return (
    <header className="site-header">
      <div className="container-th">
        <a href="#top" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <Wordmark size={22} />
          <span style={{ display: "inline-block", padding: "2px 8px", borderRadius: 6, background: "rgba(68,153,12,0.1)", color: "#44990C", fontSize: 10, fontWeight: 700, letterSpacing: "0.08em" }}>ПОРТАЛ</span>
        </a>
        <nav>
          {items.map((i) => <a key={i.l} href={i.h}>{i.l}</a>)}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <a href="#" style={{ display: "none", fontSize: 13, fontWeight: 500, color: "#384142" }} className="hide-mobile">Войти</a>
          <a href="#final-cta" className="btn btn-primary btn-sm">Получить аудит <Icon name="ArrowRight" size={14} color="white" /></a>
        </div>
      </div>
    </header>
  );
}

// ────────── Block 1 — Hero ──────────
function Hero({ tweaks }) {
  // «14 дней бесплатно · Без привязки карты · Отмена в один клик» → 3 chip'а с галочкой
  const microItems = (tweaks.heroMicro || "").split("·").map(s => s.trim()).filter(Boolean);

  return (
    <section id="top" className="hero-section" style={{
      position: "relative",
      background: "linear-gradient(180deg, #FFFFFF 0%, #F5F9F2 100%)",
      overflow: "hidden",
    }}>
      <div className="container-th hero-container" style={{ position: "relative", zIndex: 1 }}>
        <div className="hero-grid">
          {/* LEFT: текст + CTA + микро-доверие */}
          <div className="hero-left">
            <div style={{ marginBottom: 18 }}>
              <Eyebrow>ПЛАТФОРМА ДЛЯ УПРАВЛЕНИЯ БИЗНЕСОМ</Eyebrow>
            </div>
            <h1 className="th-hero" style={{ marginBottom: 20 }}>
              {tweaks.heroH1Prefix} <span className="text-gradient">{tweaks.heroH1Accent}</span> {tweaks.heroH1Suffix}
            </h1>
            <p className="p-lead" style={{ marginBottom: 32, maxWidth: 560 }}>{tweaks.heroSubtitle}</p>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 28 }}>
              <a href="#final-cta" className="btn btn-primary btn-lg">{tweaks.heroPrimaryCta} <Icon name="ArrowRight" size={18} color="white" /></a>
              <a href="#modules" className="btn btn-outline btn-lg">{tweaks.heroSecondaryCta}</a>
            </div>
            {microItems.length > 0 && (
              <div style={{ display: "flex", gap: 22, flexWrap: "wrap" }}>
                {microItems.map(m => (
                  <div key={m} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ width: 22, height: 22, borderRadius: "50%", background: "rgba(68,153,12,0.12)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#44990C", flexShrink: 0 }}>
                      <Icon name="Check" size={13} color="#44990C" strokeWidth={2.8} />
                    </span>
                    <span style={{ fontSize: 13, fontWeight: 500, color: "#384142" }}>{m}</span>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* RIGHT: реальный скриншот портала, без browser-chrome */}
          <div className="hero-right">
            <div style={{ position: "relative" }}>
              <div className="mockup-frame" style={{ position: "relative", aspectRatio: "auto", lineHeight: 0 }}>
                <img
                  src="assets/portal-dashboard-real.png"
                  alt="Интерфейс корпоративного портала THData — главная страница пользователя"
                  style={{ width: "100%", height: "auto", display: "block" }}
                  loading="eager"
                />
              </div>
              <div className="hero-metric hero-metric-a">
                <span>−42%</span>
                <small>IT-расходы после консолидации сервисов</small>
              </div>
              <div className="hero-metric hero-metric-b">
                <span>2 сек</span>
                <small>ответ AI-ассистента по базе знаний</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────── Block 2 — Pain ──────────
function PainBlock() {
  const issues = [
    { ok: false, t: "≥ 150 000 ₽/мес уходит на SaaS-подписки" },
    { ok: false, t: "Данные разбросаны по 10+ системам — нет единой картины" },
    { ok: false, t: "Процессы живут в головах, а не в системе" },
    { ok: false, t: "Сотрудники делают то, что мог бы делать ИИ" },
    { ok: false, t: "Нет контроля, кто чем занят и где узкое место" },
  ];
  return (
    <section className="section section-white reveal">
      <div className="container-th eq-grid two-col" style={{ gap: 64 }}>
        {/* Left — chaos collage */}
        <div className="mobile-hide"><ChaosMapMockup /></div>
        {/* Right */}
        <div>
          <div style={{ marginBottom: 14 }}><Eyebrow>ПРОБЛЕМА</Eyebrow></div>
          <h2 className="th-section" style={{ marginBottom: 20 }}>
            Ваш бизнес платит <span className="text-gradient">дважды</span>: за десяток сервисов и за ручную работу сотрудников
          </h2>
          <p className="p-lead" style={{ marginBottom: 28, fontSize: 17 }}>
            Когда задачи, документы, переписка и отчётность живут отдельно, руководителю приходится собирать картину вручную. Портал убирает лишние переключения и показывает, где теряются сроки, деньги и ответственность.
          </p>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
            {issues.map(i => (
              <li key={i.t} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <span style={{ flexShrink: 0, width: 22, height: 22, borderRadius: "50%", background: "rgba(239,68,68,0.12)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#EF4444", marginTop: 1 }}>
                  <Icon name="X" size={13} color="currentColor" strokeWidth={2.5} />
                </span>
                <span style={{ fontSize: 15, color: "#384142", lineHeight: 1.55 }}>{i.t}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ────────── Block 3 — Three directions (tabs, image right) ──────────
function SolutionsBlock() {
  const [tab, setTab] = React.useState(0);
  const tabs = [
    { num: "01", title: "Корпоративная система", h3: "Один портал вместо десятка сервисов",
      text: "Заменяем Bitrix, Trello, Notion, мессенджеры и файлохранилища одним порталом. Сокращаем расходы на SaaS до 80%.", link: "/solutions/corporate-portal" },
    { num: "02", title: "Автоматизация процессов", h3: "Убираем ручную рутину",
      text: "Документооборот, финучёт, HR, отчётность — автоматизируем всё, что сейчас делается руками в Excel и по почте.", link: "/solutions/automation" },
    { num: "03", title: "Искусственный интеллект", h3: "Заменяем рутинные функции сотрудников",
      text: "AI-поддержка, AI-обработка почты, AI-генерация документов, AI-рекрутер. Считаем ROI по сравнению с ФОТ.", link: "/solutions/ai" },
  ];
  const active = tabs[tab];
  return (
    <section id="solutions" className="section section-pale reveal">
      <div className="container-th eq-grid two-col" style={{ gap: 64 }}>
        <div>
          <div style={{ marginBottom: 14 }}><Eyebrow>РЕШЕНИЕ</Eyebrow></div>
          <h2 className="th-section" style={{ marginBottom: 16 }}>
            Сначала собираем основу, затем добавляем <span className="text-gradient">автоматизацию</span> и ИИ
          </h2>
          <p className="p-lead" style={{ marginBottom: 32 }}>
            Не предлагаем “ещё один сервис”. Собираем рабочий контур: единый портал, процессы без ручных пересылок и AI-сценарии, которые окупаются в цифрах.
          </p>
          <ul className="tabs-list" role="tablist">
            {tabs.map((t, i) => (
              <li key={t.title}>
                <button className={`tab-btn ${i === tab ? "active" : ""}`} role="tab" aria-selected={i === tab} onClick={() => setTab(i)}>
                  <span className="tab-num">{t.num}</span>
                  <span style={{ flex: 1 }}>
                    <div className="tab-title">{t.title}</div>
                    {i === tab && (
                      <>
                        <div className="tab-desc" style={{ marginTop: 8 }}>{t.text}</div>
                        <a href={t.link} style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "#44990C", fontSize: 13, fontWeight: 600, marginTop: 10 }}>
                          Подробнее <Icon name="ArrowRight" size={14} color="#44990C" />
                        </a>
                      </>
                    )}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </div>
        <div className="mobile-hide">
          <div key={tab}>
            <SolutionStackMockup active={tab} />
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────── Block 4 — Modules (tabs, image left) ──────────
function ModulesBlock() {
  const [tab, setTab] = React.useState(0);
  const cats = [
    { label: "Работа с клиентами", tiles: [
      {l: "CRM", i: "Users", d: "Сделки, воронки, задачи"},
      {l: "Чат с клиентом", i: "MessageCircle", d: "WhatsApp, Telegram, сайт"},
      {l: "База знаний", i: "BookOpen", d: "Статьи и FAQ для клиентов"},
      {l: "Email-рассылки", i: "Mail", d: "Сегменты и триггеры"},
      {l: "Встречи", i: "Calendar", d: "Календарь + видео"},
      {l: "Формы и опросы", i: "ClipboardList", d: "Без программиста"},
    ]},
    { label: "Документы и процессы", tiles: [
      {l: "Документооборот", i: "FileCheck", d: "Согласования и подписи"},
      {l: "Совместные документы", i: "FileText", d: "Редактор в реальном времени"},
      {l: "Файлохранилище", i: "FolderOpen", d: "Версии и права доступа"},
      {l: "Отчётность", i: "BarChart3", d: "Дашборды и выгрузки"},
      {l: "Договоры", i: "FileSignature", d: "Шаблоны + ЭДО"},
      {l: "Процессы", i: "GitBranch", d: "Конструктор BPM"},
    ]},
    { label: "Команда", tiles: [
      {l: "HR и отпуска", i: "Calendar", d: "Заявки и календарь"},
      {l: "Пользователи", i: "Users", d: "Роли и права"},
      {l: "Чат команды", i: "MessageSquare", d: "Каналы, треды, звонки"},
      {l: "Push-уведомления", i: "Bell", d: "Настраиваемые сценарии"},
      {l: "База сотрудников", i: "IdCard", d: "Карточки и orgchart"},
      {l: "Задачи", i: "CheckSquare", d: "Канбан и списки"},
    ]},
    { label: "AI и аналитика", tiles: [
      {l: "Дашборды", i: "BarChart3", d: "Метрики в реальном времени"},
      {l: "AI-ассистент", i: "Bot", d: "Отвечает как ваш сотрудник"},
      {l: "AI-поиск по документам", i: "Search", d: "Ищет смыслы, не слова"},
      {l: "AI-обработка почты", i: "MailOpen", d: "Сортировка и ответы"},
      {l: "AI-генерация документов", i: "Sparkles", d: "КП, акты, договоры"},
      {l: "AI-рекрутер", i: "UserSearch", d: "Скрининг резюме"},
    ]},
  ];
  return (
    <section id="modules" className="section section-white reveal">
      <div className="container-th">
        <div className="eq-grid two-col" style={{ gap: 64 }}>
          <div className="mobile-hide">
            <ModuleTilesMockup tiles={cats[tab].tiles.slice(0, 6)} highlight={tab} />
          </div>
          <div>
            <div style={{ marginBottom: 14 }}><Eyebrow>ЧТО ВНУТРИ ПОРТАЛА</Eyebrow></div>
            <h2 className="th-section" style={{ marginBottom: 20 }}>
              <span className="text-gradient">12+ модулей</span>, которые закрывают 90% задач компании
            </h2>
            <p className="p-lead" style={{ marginBottom: 24 }}>
              Включайте только нужное. Платите за то, что реально используют ваши сотрудники.
            </p>
            <div className="module-tabs-wrap">
              <div className="module-tabs-label">Выберите категорию модулей</div>
              <div className="tabs-h">
                {cats.map((c, i) => (
                  <button key={c.label} className={i === tab ? "active" : ""} onClick={() => setTab(i)}>{c.label}</button>
                ))}
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10, marginBottom: 22 }}>
              {cats[tab].tiles.map(t => (
                <div key={t.l} style={{ background: "#F5F9F2", border: "1px solid #C0DDAE", borderRadius: 12, padding: 14, display: "flex", gap: 10, alignItems: "flex-start", cursor: "pointer", transition: "all 150ms" }}
                     onMouseEnter={e => { e.currentTarget.style.borderColor = "#44990C"; e.currentTarget.style.background = "white"; }}
                     onMouseLeave={e => { e.currentTarget.style.borderColor = "#C0DDAE"; e.currentTarget.style.background = "#F5F9F2"; }}>
                  <div style={{ flexShrink: 0, width: 32, height: 32, borderRadius: 8, background: "rgba(68,153,12,0.12)", display: "flex", alignItems: "center", justifyContent: "center", color: "#44990C" }}>
                    <Icon name={t.i} size={16} color="#44990C" />
                  </div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600, color: "#384142", marginBottom: 2 }}>{t.l}</div>
                    <div style={{ fontSize: 11, color: "#6B7280" }}>{t.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────── Block 5 — Economics (calculator, image right) ──────────
function EconomicsBlock() {
  const [emp, setEmp] = React.useState(8);
  const [checked, setChecked] = React.useState({bitrix: true, notion: true, slack: true, gw: false, docs: true});
  const toggle = k => setChecked(c => ({...c, [k]: !c[k]}));

  // naive model — plausible numbers. Прогноз /10 от прежнего достигается
  // через /10 на сотрудников (emp); цены за SaaS и руч. труд оставлены
  // как были — итоговый total получается как раз /10 от старого.
  const saasPerMonth = (checked.bitrix?1500:0) + (checked.notion?500:0) + (checked.slack?900:0) + (checked.gw?1800:0);
  const saasSave = saasPerMonth * emp * 12; // руб
  const docsSave = checked.docs ? emp * 3500 * 12 : 0;
  const total = Math.round(saasSave + docsSave);
  const fmt = n => n.toLocaleString("ru-RU").replace(/,/g, " ");

  const options = [
    {k: "bitrix", l: "Bitrix"},
    {k: "notion", l: "AmoCRM"},
    {k: "slack", l: "1С"},
    {k: "gw", l: "Яндекс 360"},
    {k: "docs", l: "Ручной документооборот"},
  ];

  return (
    <section id="economics" className="section section-pale reveal">
      <div className="container-th eq-grid two-col" style={{ gap: 64 }}>
        <div>
          <div style={{ marginBottom: 14 }}><Eyebrow>СЧИТАЕМ В ДЕНЬГАХ</Eyebrow></div>
          <h2 className="th-section" style={{ marginBottom: 20 }}>
            Сколько вы сэкономите за <span className="text-gradient">12 месяцев</span>
          </h2>
          <p className="p-lead" style={{ marginBottom: 28 }}>
            Калькулятор использует среднерыночные цены SaaS-подписок и стоимость ручной работы по открытым данным HH.ru.
          </p>

          <div style={{ background: "white", border: "1px solid #C0DDAE", borderRadius: 16, padding: 24 }}>
            <div style={{ marginBottom: 20 }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
                <label style={{ fontSize: 13, fontWeight: 600, color: "#384142" }}>Сотрудников в компании</label>
                <span style={{ fontSize: 14, fontWeight: 700, color: "#44990C" }}>{emp}</span>
              </div>
              <input type="range" className="th-slider" min="1" max="50" step="1" value={emp} onChange={e => setEmp(Number(e.target.value))} />
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11, color: "#9CA3AF", marginTop: 6 }}>
                <span>1</span><span>50</span>
              </div>
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: "#384142", marginBottom: 10 }}>Что хотите заменить</div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {options.map(o => (
                  <button key={o.k} className={`check-chip ${checked[o.k] ? "checked" : ""}`} onClick={() => toggle(o.k)}>
                    <span className="box">{checked[o.k] && <Icon name="Check" size={11} color="white" strokeWidth={3} />}</span>
                    {o.l}
                  </button>
                ))}
              </div>
            </div>
            <hr className="hr-soft" style={{ margin: "22px 0" }} />
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
              <div>
                <div style={{ fontSize: 11, color: "#6B7280", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }}>Прогноз экономии</div>
                <div style={{ fontSize: 34, fontWeight: 700, color: "#44990C", letterSpacing: "-0.02em" }}>
                  ≈ {fmt(total)} ₽ <span style={{ fontSize: 16, color: "#6B7280", fontWeight: 500 }}>/ год</span>
                </div>
              </div>
              <a href="/pricing/calculator" className="btn btn-primary btn-md">
                Точный расчёт <Icon name="ArrowRight" size={14} color="white" />
              </a>
            </div>
          </div>
        </div>
        <div className="mobile-hide">
          <SavingsMockup />
        </div>
      </div>
    </section>
  );
}

// ────────── Block 6 — Cases ──────────
function CasesBlock() {
  const [tab, setTab] = React.useState("Все");
  const cases = [
    { ind: "Производство", title: "Производственная компания: −42% расходов на IT за 4 месяца",
      metrics: [{v: "−11", l: "сервисов"}, {v: "−3", l: "сотрудника"}, {v: "+24%", l: "скорость"}],
      slug: "proizvodstvo-1" },
    { ind: "Ритейл", title: "Сеть магазинов: единая CRM вместо 5 отдельных систем",
      metrics: [{v: "×2.4", l: "конверсия"}, {v: "−38%", l: "отток"}, {v: "12 дн.", l: "внедрение"}],
      slug: "retail-1" },
    { ind: "Услуги", title: "Юридическая фирма: AI-ассистент закрывает 60% первичных обращений",
      metrics: [{v: "−6", l: "часов/нед"}, {v: "+140", l: "заявок/мес"}, {v: "4 нед.", l: "запуск"}],
      slug: "uslugi-1" },
    { ind: "B2B SaaS", title: "B2B SaaS: автоматизация онбординга клиентов",
      metrics: [{v: "−70%", l: "ручных задач"}, {v: "+18%", l: "retention"}, {v: "3 нед.", l: "запуск"}],
      slug: "saas-1" },
    { ind: "Производство", title: "Завод металлоконструкций: единый документооборот с 1С",
      metrics: [{v: "−55%", l: "потерь док-в"}, {v: "×3", l: "скорость согл."}, {v: "6 нед.", l: "внедрение"}],
      slug: "proizvodstvo-2" },
    { ind: "Ритейл", title: "FMCG-дистрибьютор: AI-прогноз поставок на 14 дней",
      metrics: [{v: "−31%", l: "дефицит"}, {v: "−19%", l: "overstock"}, {v: "8 нед.", l: "запуск"}],
      slug: "retail-2" },
  ];
  const industries = ["Все", "Производство", "Ритейл", "Услуги", "B2B SaaS"];
  const filtered = tab === "Все" ? cases : cases.filter(c => c.ind === tab);
  return (
    <section id="cases" className="section section-white reveal">
      <div className="container-th">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 40px" }}>
          <div style={{ marginBottom: 14 }}><Eyebrow>КЕЙСЫ</Eyebrow></div>
          <h2 className="th-section" style={{ marginBottom: 16 }}>
            Результаты, которых мы добились для <span className="text-gradient">клиентов</span>
          </h2>
          <p className="p-lead">Реальные цифры из проектов, где внедрён наш портал и автоматизация.</p>
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 40 }}>
          <div className="tabs-h">
            {industries.map(ind => (
              <button key={ind} className={ind === tab ? "active" : ""} onClick={() => setTab(ind)}>{ind}</button>
            ))}
          </div>
        </div>
        <div className="case-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 24 }}>
          {filtered.map(c => (
            <div key={c.slug} className="card-th case-card" style={{ display: "flex", flexDirection: "column" }}>
              <CasePreviewMockup industry={c.ind} slug={c.slug} />
              <h3 className="th-card" style={{ marginBottom: 16, fontSize: 17, lineHeight: 1.35 }}>{c.title}</h3>
              <div style={{ display: "flex", gap: 20, marginBottom: 20 }}>
                {c.metrics.map(m => (
                  <div key={m.l}>
                    <div style={{ fontSize: 18, fontWeight: 700, color: "#44990C" }}>{m.v}</div>
                    <div style={{ fontSize: 11, color: "#6B7280" }}>{m.l}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CookieNotice() {
  const [visible, setVisible] = React.useState(() => {
    try { return localStorage.getItem("thdata-cookie-choice") !== "set"; }
    catch (e) { return true; }
  });
  const close = choice => {
    try { localStorage.setItem("thdata-cookie-choice", "set"); }
    catch (e) {}
    setVisible(false);
  };
  if (!visible) return null;
  return (
    <div className="cookie-notice" role="dialog" aria-label="Уведомление о cookies">
      <div className="cookie-title">Cookies на сайте</div>
      <p>Мы используем cookies, чтобы сайт работал корректно и был удобнее.</p>
      <div className="cookie-actions">
        <button type="button" className="cookie-allow" onClick={() => close("allow")}>ОК</button>
        <button type="button" className="cookie-decline" onClick={() => close("decline")}>Не надо</button>
      </div>
    </div>
  );
}

// ────────── Block 7 — Process ──────────
function ProcessBlock() {
  const steps = [
    { n: "01", t: "Аудит (1 неделя)", d: "Разбираем текущие процессы и сервисы, считаем, где вы теряете деньги.", tag: "Бесплатно" },
    { n: "02", t: "План и смета (3–5 дней)", d: "Показываем, что внедрим, в какой срок и за сколько. Без скрытых платежей." },
    { n: "03", t: "Внедрение (2–8 недель)", d: "Разворачиваем портал, настраиваем модули, переносим данные, интегрируем с 1С/банками/почтой." },
    { n: "04", t: "Обучение и сопровождение", d: "Обучаем команду, отвечаем на вопросы, развиваем систему под ваши новые задачи." },
  ];
  return (
    <section className="section section-pale reveal">
      <div className="container-th eq-grid two-col" style={{ gap: 64 }}>
        <div className="mobile-hide"><ProcessMockup /></div>
        <div>
          <div style={{ marginBottom: 14 }}><Eyebrow>ПРОЦЕСС</Eyebrow></div>
          <h2 className="th-section" style={{ marginBottom: 36 }}>
            От аудита до результата — <span className="text-gradient">4 шага</span>
          </h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            {steps.map(s => (
              <div key={s.n} style={{ display: "flex", gap: 18, alignItems: "flex-start" }}>
                <div style={{ flexShrink: 0, fontSize: 26, fontWeight: 800, color: "#44990C", letterSpacing: "-0.02em", width: 42 }}>{s.n}</div>
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
                    <h3 className="th-card" style={{ fontSize: 18 }}>{s.t}</h3>
                    {s.tag && <span style={{ background: "#44990C", color: "white", fontSize: 10, fontWeight: 700, padding: "2px 8px", borderRadius: 9999 }}>{s.tag}</span>}
                  </div>
                  <p className="p-muted" style={{ fontSize: 14 }}>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
          <a href="#final-cta" className="btn btn-primary btn-lg" style={{ marginTop: 32 }}>
            Запросить аудит <Icon name="ArrowRight" size={18} color="white" />
          </a>
        </div>
      </div>
    </section>
  );
}

// ────────── Block 8 — Numbers (dark) ──────────
function NumbersBlock() {
  const nums = [
    { v: "12+", l: "внедрённых корпоративных порталов" },
    { v: "3 400+", l: "пользователей на нашей системе" },
    { v: "42%", l: "средняя экономия на IT-расходах" },
    { v: "1.8 млн ₽", l: "среднегодовая экономия клиента" },
  ];
  return (
    <section className="section section-dark reveal" style={{ padding: "88px 0" }}>
      <div className="container-th">
        <div className="num-strip">
          {nums.map(n => (
            <div key={n.l} style={{ textAlign: "center" }}>
              <div className="big">{n.v}</div>
              <div style={{ fontSize: 14, color: "#C0DDAE", marginTop: 10, fontWeight: 400 }}>{n.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────── Block 9 — Testimonials ──────────
function TestimonialsBlock() {
  const items = [
    { q: "Самое большое открытие — мы перестали переплачивать за десяток сервисов, которыми пользовались в лучшем случае на 20%. Сейчас у нас один портал и одна команда поддержки.",
      a: "Елена Марченко", r: "Операционный директор", c: "Производственная компания" },
    { q: "Документооборот был нашей головной болью. Через 6 недель после старта мы ушли от ручных согласований по почте — всё в портале, и это реально быстрее.",
      a: "Дмитрий Седов", r: "ИТ-директор", c: "Ритейл, 220 магазинов" },
    { q: "AI-ассистент закрывает 60% входящих обращений без человека. Команда наконец занимается сложными кейсами, а не шаблонными ответами.",
      a: "Ольга Лаврова", r: "Руководитель клиентского сервиса", c: "Юридическая фирма" },
    { q: "Аудит прошёл бесплатно и честно. Внедрение уложилось в смету день в день — это большая редкость на рынке.",
      a: "Игорь Ткачёв", r: "Генеральный директор", c: "B2B SaaS, 80 человек" },
  ];
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % items.length), 6000);
    return () => clearInterval(id);
  }, []);
  const cur = items[idx];
  return (
    <section className="section section-white reveal">
      <div className="container-th eq-grid two-col" style={{ gap: 64 }}>
        <div className="mobile-hide">
          <div style={{ maxWidth: 360, margin: "0 auto", position: "relative" }}>
            <TestimonialVisual />
            {/* quote mark */}
            <div style={{ position: "absolute", top: -18, left: -18, width: 56, height: 56, borderRadius: 8, background: "#44990C", display: "flex", alignItems: "center", justifyContent: "center", color: "white", fontSize: 36, fontWeight: 800, lineHeight: 1, paddingBottom: 8, fontFamily: "Georgia, serif" }}>&ldquo;</div>
          </div>
        </div>
        <div>
          <div style={{ marginBottom: 14 }}><Eyebrow>ОТЗЫВЫ</Eyebrow></div>
          <h2 className="th-section" style={{ marginBottom: 32 }}>
            Что говорят наши <span className="text-gradient">клиенты</span>
          </h2>
          <blockquote key={idx} style={{ margin: 0, fontSize: 22, lineHeight: 1.5, fontWeight: 400, fontStyle: "italic", color: "#384142", marginBottom: 28, animation: "fadeIn 400ms ease" }}>
            «{cur.q}»
          </blockquote>
          <div style={{ marginBottom: 28 }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: "#384142" }}>{cur.a}</div>
            <div style={{ fontSize: 13, color: "#6B7280" }}>{cur.r} · {cur.c}</div>
          </div>
          <div className="dots-nav">
            {items.map((_, i) => (
              <button key={i} className={i === idx ? "active" : ""} onClick={() => setIdx(i)} aria-label={`Отзыв ${i+1}`}></button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────── Block 10 — Pricing ──────────
function PricingBlock() {
  // Все CTA-кнопки тарифов ведут на форму внизу страницы — клиент
  // оставляет заявку с указанием интересующего плана (поле topic).
  const plans = [
    { name: "Облако", price: "от 7 900 ₽", unit: "/ мес",
      limits: "Облачная версия портала до 15 пользователей",
      features: ["Быстрый запуск без сервера", "Задачи, файлы и документы", "CRM и коммуникации", "Обновления и резервные копии"],
      cta: "Попробовать облако", href: "#final-cta", variant: "outline-green" },
    { name: "На ваш сервер", price: "89 900 ₽", unit: "разовая оплата",
      limits: "Установка портала в вашем контуре",
      features: ["Развёртывание на вашем сервере", "Базовая настройка модулей", "Интеграция с 1С", "Обучение администратора"],
      cta: "Заказать установку", href: "#final-cta", variant: "primary", featured: true },
    { name: "Индивидуальная разработка", price: "по запросу", unit: " ",
      limits: "Портал под ваши процессы",
      features: ["Проектирование бизнес-логики", "Кастомные модули и интеграции", "AI-сценарии под отделы", "SLA и выделенная команда"],
      cta: "Обсудить проект", href: "#final-cta", variant: "outline-green" },
  ];
  return (
    <section id="pricing" className="section section-pale reveal">
      <div className="container-th">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 48px" }}>
          <div style={{ marginBottom: 14 }}><Eyebrow>ТАРИФЫ</Eyebrow></div>
          <h2 className="th-section" style={{ marginBottom: 16 }}>
            Выберите формат: <span className="text-gradient">облако</span>, сервер или разработка под ключ
          </h2>
          <p className="p-lead">Можно стартовать в облаке, установить портал в вашем контуре или собрать систему под уникальные процессы.</p>
        </div>
        <div className="pricing-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 24, maxWidth: 1080, margin: "0 auto" }}>
          {plans.map(p => (
            <div key={p.name} className={`plan ${p.featured ? "featured" : ""}`}>
              {p.featured && <div className="plan-badge">Популярный</div>}
              <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: "0.1em", color: "#44990C", textTransform: "uppercase", marginBottom: 12 }}>{p.name}</div>
              <div style={{ fontSize: 30, fontWeight: 700, color: "#384142", letterSpacing: "-0.02em", lineHeight: 1.1 }}>{p.price}</div>
              <div style={{ fontSize: 13, color: "#6B7280", marginBottom: 14, marginTop: 4 }}>{p.unit}</div>
              <div style={{ fontSize: 13, color: "#384142", fontWeight: 500, paddingBottom: 18, marginBottom: 18, borderBottom: "1px solid #C0DDAE" }}>{p.limits}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: "0 0 28px", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
                {p.features.map(f => (
                  <li key={f} style={{ display: "flex", gap: 10, fontSize: 14, color: "#384142" }}>
                    <span style={{ flexShrink: 0, marginTop: 2 }}><Icon name="Check" size={16} color="#44990C" strokeWidth={2.5} /></span>
                    {f}
                  </li>
                ))}
              </ul>
              <a href={p.href} className={`btn btn-${p.variant} btn-md`} style={{ width: "100%" }}>{p.cta}</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────── Block 11 — FAQ ──────────
function FaqBlock() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "Сколько стоит внедрение и как формируется цена?", a: "Цена складывается из лицензий портала и стоимости внедрения. На этапе бесплатного аудита мы даём фиксированную смету — в ней указаны все модули, работы и сроки. Скрытых платежей нет." },
    { q: "Сколько времени занимает внедрение?", a: "От 2 до 8 недель в зависимости от размера компании и числа интеграций. Стандартный проект для компании 50 человек — 4–5 недель, включая перенос данных и обучение." },
    { q: "Что делать, если у нас уже есть 1С / Bitrix / другая CRM?", a: "Мы не заставляем отказываться от существующих систем. Портал интегрируется с 1С по API, данные из Bitrix можно мигрировать за 2–3 дня. Всё решается на этапе плана." },
    { q: "Где хранятся данные? Соответствует ли 152-ФЗ?", a: "Данные хранятся на серверах в РФ. У нас есть лицензия на работу с персональными данными, соответствие 152-ФЗ подтверждено. Для Enterprise доступен on-premise." },
    { q: "Можно ли купить портал на свой сервер (on-premise)?", a: "Да, в тарифе Enterprise. Мы разворачиваем портал в вашем контуре, передаём исходники и обучаем вашу ИТ-команду сопровождению." },
    { q: "Что входит в поддержку?", a: "Во все тарифы включено обновление системы, резервные копии и базовая поддержка по email. В Business и Enterprise — выделенный менеджер и SLA по времени реакции." },
    { q: "Можно ли отключить ненужные модули и не платить за них?", a: "Да. Вы платите только за активные модули. В любой момент в админке можно отключить модуль — счёт пересчитывается в следующем месяце." },
    { q: "Есть ли бесплатный период и как его получить?", a: "Да, 14 дней бесплатно без привязки карты. Регистрация занимает 2 минуты. По окончании пробного периода — сами решаете, продолжать или нет." },
  ];
  return (
    <section id="faq" className="section section-white reveal">
      <div className="container-th">
        <div style={{ maxWidth: 780, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 40 }}>
            <div style={{ marginBottom: 14 }}><Eyebrow>FAQ</Eyebrow></div>
            <h2 className="th-section">Частые <span className="text-gradient">вопросы</span></h2>
          </div>
          <div>
            {items.map((it, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  {it.q}
                  <span className="faq-icon"><Icon name="Plus" size={14} color="currentColor" strokeWidth={2.5} /></span>
                </button>
                <div className="faq-a">{it.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────── Block 12 — Final CTA ──────────
// Маска телефона: вводим что угодно → +7(XXX)XXX-XX-XX.
// 8 в начале → +7. Любая первая не-7 цифра → префикс 7.
function formatRuPhone(input) {
  let digits = (input || "").replace(/\D/g, "");
  if (digits.startsWith("8")) digits = "7" + digits.slice(1);
  if (digits.length > 0 && !digits.startsWith("7")) digits = "7" + digits;
  digits = digits.slice(0, 11);
  if (digits.length === 0) return "";
  let r = "+7";
  if (digits.length > 1) r += "(" + digits.slice(1, 4);
  if (digits.length >= 4) r += ")";
  if (digits.length >= 5) r += digits.slice(4, 7);
  if (digits.length >= 8) r += "-" + digits.slice(7, 9);
  if (digits.length >= 10) r += "-" + digits.slice(9, 11);
  return r;
}

function FinalCta() {
  const [name, setName] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [email, setEmail] = React.useState("");
  // honeypot — скрытое от человека поле; боты заполняют все поля и палятся
  const [website, setWebsite] = React.useState("");
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error
  const [errorMsg, setErrorMsg] = React.useState("");
  // Время загрузки формы — на сервере проверяем, что заявка не моментальная
  const formMountedAt = React.useRef(Date.now());

  const phoneValid = /^\+7\(\d{3}\)\d{3}-\d{2}-\d{2}$/.test(phone);
  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  const nameValid = name.trim().length >= 2;
  const formValid = nameValid && phoneValid && emailValid;

  async function submit(e) {
    e.preventDefault();
    if (!formValid || status === "sending") return;
    setStatus("sending");
    setErrorMsg("");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: name.trim(),
          phone,
          email: email.trim(),
          source: "landing-portal:final-cta",
          topic: "Запрос аудита с лендинга /landing-portal",
          website, // honeypot — должен быть пустым
          ts: formMountedAt.current,
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) {
        setStatus("sent");
      } else {
        setStatus("error");
        setErrorMsg(data.error || "Не удалось отправить. Попробуйте позже или напишите на contact@thdata.ru");
      }
    } catch {
      setStatus("error");
      setErrorMsg("Проблема с сетью. Попробуйте ещё раз.");
    }
  }

  return (
    <section id="final-cta" className="section section-green reveal" style={{ padding: "88px 0", position: "relative", overflow: "hidden" }}>
      {/* soft light */}
      <div style={{ position: "absolute", top: "-40%", left: "-20%", width: 600, height: 600, borderRadius: "50%", background: "radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%)", pointerEvents: "none" }}></div>
      <div style={{ position: "absolute", bottom: "-40%", right: "-20%", width: 600, height: 600, borderRadius: "50%", background: "radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%)", pointerEvents: "none" }}></div>
      <div className="container-th" style={{ position: "relative", textAlign: "center", maxWidth: 1080 }}>
        <h2 style={{ fontSize: "clamp(30px, 4vw, 46px)", fontWeight: 700, color: "white", letterSpacing: "-0.02em", margin: "0 0 16px", lineHeight: 1.15 }}>
          Начните экономить уже в <span style={{ color: "#F5F9F2", borderBottom: "3px solid rgba(255,255,255,0.6)" }}>этом месяце</span>
        </h2>
        <p style={{ fontSize: 18, color: "rgba(255,255,255,0.88)", margin: "0 auto 36px", maxWidth: 620, lineHeight: 1.6 }}>
          Оставьте заявку — проведём бесплатный аудит и покажем, где именно ваша компания теряет деньги
        </p>
        {status === "sent" ? (
          <div style={{ background: "rgba(255,255,255,0.15)", border: "1px solid rgba(255,255,255,0.3)", borderRadius: 14, padding: "20px 28px", display: "inline-flex", alignItems: "center", gap: 12, color: "white" }}>
            <Icon name="CheckCircle2" size={24} color="white" />
            <span style={{ fontSize: 16, fontWeight: 600 }}>Спасибо! Свяжемся с вами в течение дня.</span>
          </div>
        ) : (
          <form onSubmit={submit} className="audit-form" noValidate>
            {/* Honeypot: невидимая ловушка для ботов. Скрыта CSS-классом honeypot,
                aria-hidden + tabIndex=-1 + autocomplete=off — реальные люди сюда
                не попадут даже клавиатурой, а боты-краулеры заполняют все поля. */}
            <input
              type="text"
              name="website"
              tabIndex={-1}
              autoComplete="off"
              aria-hidden="true"
              className="honeypot"
              value={website}
              onChange={e => setWebsite(e.target.value)}
            />
            <input
              type="text" required minLength={2} placeholder="Ваше имя"
              value={name} onChange={e => setName(e.target.value)}
              autoComplete="name" aria-label="Ваше имя"
              className={`audit-input ${name && !nameValid ? "is-invalid" : ""}`}
            />
            <input
              type="tel" required placeholder="+7(___)___-__-__"
              value={phone}
              onChange={e => setPhone(formatRuPhone(e.target.value))}
              onPaste={e => {
                e.preventDefault();
                const t = (e.clipboardData || window.clipboardData).getData("text");
                setPhone(formatRuPhone(t));
              }}
              inputMode="tel"
              autoComplete="tel"
              aria-label="Телефон"
              className={`audit-input ${phone && !phoneValid ? "is-invalid" : ""}`}
            />
            <input
              type="email" required placeholder="Ваш email"
              value={email} onChange={e => setEmail(e.target.value)}
              autoComplete="email" aria-label="Ваш email"
              className={`audit-input ${email && !emailValid ? "is-invalid" : ""}`}
            />
            <button
              type="submit"
              className="btn btn-white btn-lg"
              disabled={!formValid || status === "sending"}
            >
              {status === "sending" ? "Отправляем..." : <>Запросить аудит <Icon name="ArrowRight" size={18} color="#44990C" /></>}
            </button>
          </form>
        )}
        {status === "error" && errorMsg && (
          <div style={{ marginTop: 14, color: "#FFE3E3", fontSize: 14, fontWeight: 500 }}>
            {errorMsg}
          </div>
        )}
        <div style={{ marginTop: 18, color: "rgba(255,255,255,0.85)", fontSize: 14 }}>
          или позвоните по телефону: <a href="tel:+79263542894" style={{ color: "white", fontWeight: 600, borderBottom: "1px solid rgba(255,255,255,0.4)" }}>+7 (926) 354-28-94</a>
        </div>
      </div>
    </section>
  );
}

// ────────── Block 13 — Footer ──────────
function SiteFooter() {
  const cols = [
    { title: "Решения", links: ["Корпоративный портал", "Автоматизация", "Искусственный интеллект", "Отраслевые решения"] },
    { title: "Продукты", links: ["CRM", "Документооборот", "AI-ассистент", "Все модули →"] },
    { title: "Компания", links: ["О нас", "Кейсы", "Блог", "Контакты", "Партнёрам"] },
  ];
  return (
    <footer style={{ background: "#384142", color: "#C0DDAE", padding: "72px 0 0" }}>
      <div className="container-th">
        <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "1.3fr repeat(3, 1fr)", gap: 48, marginBottom: 48 }}>
          <div>
            <div style={{ marginBottom: 16 }}><Wordmark dark size={24} /></div>
            <p style={{ fontSize: 14, lineHeight: 1.6, margin: "0 0 20px", color: "#C0DDAE" }}>
              Корпоративная система, автоматизация и ИИ — в одном портале для среднего и крупного бизнеса.
            </p>
            <div style={{ display: "flex", gap: 8 }}>
              {["Send", "MessageCircle", "Linkedin"].map(i => (
                <a key={i} style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(192,221,174,0.12)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#C0DDAE", transition: "all 150ms", cursor: "pointer" }}
                   onMouseEnter={e => { e.currentTarget.style.background = "#44990C"; e.currentTarget.style.color = "white"; }}
                   onMouseLeave={e => { e.currentTarget.style.background = "rgba(192,221,174,0.12)"; e.currentTarget.style.color = "#C0DDAE"; }}>
                  <Icon name={i} size={16} color="currentColor" />
                </a>
              ))}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.title}>
              <h4 style={{ fontSize: 13, fontWeight: 700, color: "white", margin: "0 0 16px", letterSpacing: "0.08em", textTransform: "uppercase" }}>{c.title}</h4>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.links.map(l => <li key={l}><a style={{ fontSize: 14, color: "#C0DDAE", cursor: "pointer", transition: "color 150ms" }} onMouseEnter={e => e.currentTarget.style.color = "white"} onMouseLeave={e => e.currentTarget.style.color = "#C0DDAE"}>{l}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ paddingTop: 28, paddingBottom: 28, borderTop: "1px solid rgba(192,221,174,0.2)", display: "flex", flexWrap: "wrap", justifyContent: "space-between", gap: 18, alignItems: "center" }}>
          <div style={{ fontSize: 13, color: "rgba(192,221,174,0.6)" }}>© 2026 THData. Все права защищены.</div>
          <div style={{ display: "flex", gap: 20 }}>
            <a style={{ fontSize: 13, color: "rgba(192,221,174,0.8)", cursor: "pointer" }}>Политика конфиденциальности</a>
            <a style={{ fontSize: 13, color: "rgba(192,221,174,0.8)", cursor: "pointer" }}>Публичная оферта</a>
          </div>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            {["152-ФЗ", "ISO 27001", "SSL"].map(b => (
              <span key={b} style={{ fontSize: 11, padding: "4px 10px", border: "1px solid rgba(192,221,174,0.3)", borderRadius: 6, color: "rgba(192,221,174,0.8)", fontWeight: 600, letterSpacing: "0.04em" }}>{b}</span>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  HERO_DEFAULTS, SiteHeader, Hero, PainBlock, SolutionsBlock, ModulesBlock,
  EconomicsBlock, CasesBlock, ProcessBlock, NumbersBlock, TestimonialsBlock,
  PricingBlock, FaqBlock, FinalCta, SiteFooter,
  CookieNotice,
});