// Section 4 — How it works (8 features zebra) + Section 5 — Trust

const FEATURES = [
  {
    k: "ПЯТЬ МИНУТ УТРОМ ВМЕСТО ЧАСА",
    h: ["Весь день руководителя — ", "в одной сводке", ""],
    lead: "Компас собирает сводку сам: 4 ключевые цифры, события за ночь, топ-5 должников, выполнение решений прошлой недели. PDF в почту в 8:30 или карточка в панели.",
    mech: [
      "Данные из 1С + банка + ЕФРСБ + арбитража",
      "PDF в почту в 8:30 или в панели руководителя",
      "Клик по событию — карточка с предлагаемыми решениями",
    ],
    Mock: () => <F1_MorningDigest />,
  },
  {
    k: "КОНТРОЛЬ 24/7 БЕЗ ВАШЕГО УЧАСТИЯ",
    h: ["Правила сами блокируют отгрузку должнику ", "прямо в 1С", ""],
    lead: "Конструктор без программирования: триггер + условие + действие. Меняется руководителем за 3 минуты, запускается в боевой 1С тем же вечером.",
    mech: [
      "Триггеры: просрочка, лимит, ЕФРСБ, скоринг, долги ФНС",
      "Действия: стоп проводки, претензия, эскалация, снижение лимита",
      "Средний клиент ведёт 34 активных правила",
    ],
    Mock: () => <F2_Rules />,
  },
  {
    k: "КОНТРОЛЬ 24/7 БЕЗ ВАШЕГО УЧАСТИЯ",
    h: ["Решение по новому контрагенту — ", "за 3 минуты", ""],
    lead: "Очередь СБ с авто-сборкой досье: финансы, арбитраж, ФССП, банкротство, смена директора, медиа. По активным контрагентам — круглосуточный мониторинг ЕФРСБ и kad.arbitr.",
    mech: [
      "Источники: Контур.Фокус, СПАРК, ЕФРСБ, kad.arbitr, ФССП, ЕГРЮЛ",
      "Рекомендация: одобрить / отказать / одобрить с лимитом",
      "Автоматический алерт при новом иске или смене директора",
    ],
    Mock: () => <F3_Dossier />,
  },
  {
    k: "КОНТРОЛЬ 24/7 И ПЯТЬ МИНУТ УТРОМ",
    h: ["Компас сам говорит, ", "что сделать первым", ""],
    lead: "Система не просто показывает «проблема есть» — она ранжирует проблемы и предлагает конкретное действие. «Позвонить сегодня», «отправить претензию», «запустить судебный приказ».",
    mech: [
      "Сигналы: пропущенные обещания, просрочка-тренды, смена директора, падение скоринга",
      "Движок рекомендаций на правилах и статистике клиента",
      "Одна кнопка — «утвердить действие», дальше Компас делает сам",
    ],
    Mock: () => <F4_Signals />,
  },
  {
    k: "ОТДЕЛ В 2–3 РАЗА ЭФФЕКТИВНЕЕ БЕЗ РОСТА ФОТ",
    h: ["Юрист перестаёт собирать пакеты — ", "он ведёт переговоры", ""],
    lead: "Компас собирает досудебную претензию и пакет для мирового судьи сам: договор, УПД, акты, расчёт неустойки по договору или ст. 395 ГК, сопроводительное письмо. Отправка — через Диадок с юридически значимой подписью.",
    mech: [
      "Шаблоны претензий и исковых",
      "Калькулятор неустойки с учётом условий конкретного договора",
      "PDF готов за 30 секунд, отправка в один клик",
    ],
    Mock: () => <F5_Claim />,
  },
  {
    k: "ОТДЕЛ В 2–3 РАЗА ЭФФЕКТИВНЕЕ",
    h: ["96% поступлений разносятся ", "автоматически", ""],
    lead: "Сверка через API СберБизнес, Т-Банк, ВТБ, Альфа. Сопоставление по сумме, ИНН, назначению платежа. Если клиент оплатил не по тому счёту — Компас подскажет.",
    mech: [
      "Прямое подключение к API банков",
      "Правила сопоставления: сумма + ИНН + назначение + окно дат",
      "Оставшиеся 4% — в очередь бухгалтера с предподсказкой",
    ],
    Mock: () => <F6_Reconcile />,
  },
  {
    k: "КОМПАНИЯ НЕ В ЗАЛОЖНИКАХ У ОДНОГО СОТРУДНИКА",
    h: ["Вся история по клиенту — ", "в одной карточке", ""],
    lead: "Переговоры, договорённости по рассрочкам, переписка в Диадок, звонки, документы, решения руководителя, системные события — всё в одной ленте. Новый сотрудник видит контекст за минуты, а не за недели.",
    mech: [
      "События: системные (Компас) + пользовательские (комментарии, решения)",
      "Фильтры по типу и дате",
      "Экспорт выписки по клиенту для юриста",
    ],
    Mock: () => <F7_Timeline />,
  },
  {
    k: "ПОДТВЕРЖДЕНИЕ РАБОТЫ",
    h: ["Вам не нужно верить на слово. ", "Компас считает сам", ""],
    lead: "Отдельный раздел, где в рублях и часах показано: вернули через автоматику, предотвратили отгрузок, сэкономили часов юриста, бухгалтера, СБ, сократили срок оплаты на 6–12 дней. Можно показать собственнику или совету директоров.",
    mech: [
      "Источники расчёта: журнал правил, сверки, претензии, сигналы",
      "Выгрузка в PDF для отчёта",
      "Сравнение «до Компаса / с Компасом»",
    ],
    Mock: () => <F8_Counter />,
  },
];

const FeatureRow = ({ idx, f }) => {
  const num = String(idx+1).padStart(2, "0");
  const reverse = idx % 2 === 1;
  const zebraBg = idx % 2 === 0 ? "bg-background" : "bg-muted/40";
  const [ref, inView] = useReveal();
  return (
    <div className={`${zebraBg} border-b border-border`} ref={ref}>
      <div className="mx-auto max-w-7xl px-6 lg:px-10 py-20 md:py-28">
        <div className={`grid lg:grid-cols-2 gap-12 lg:gap-20 items-center ${reverse ? "lg:[&>div:first-child]:order-2" : ""}`}>
          <div className={`reveal ${inView?"in":""}`}>
            <div className="flex items-center gap-3">
              <span className="font-display text-[13px] font-semibold tracking-[0.14em] tabular text-primary">{num}</span>
              <span className="h-px w-8 bg-primary/60" />
              <span className="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">{f.k}</span>
            </div>
            <h3 className="mt-5 font-display text-[32px] md:text-[40px] leading-[1.05] font-semibold tracking-tight text-balance">
              {f.h[0]}
              <span className="text-primary">{f.h[1]}</span>
              {f.h[2]}
            </h3>
            <p className="mt-5 text-[15px] text-muted-foreground leading-relaxed text-pretty max-w-xl">{f.lead}</p>
            <ul className="mt-6 mech-list space-y-2.5 max-w-xl">
              {f.mech.map((m,i)=>(
                <li key={i} className="flex items-start gap-2.5 text-[14px]">
                  <I.ArrowRight size={14} className="arrow-marker mt-1 flex-shrink-0" />
                  <span>{m}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className={`reveal ${inView?"in":""}`} style={{transitionDelay: ".15s"}}>
            <f.Mock />
          </div>
        </div>
      </div>
    </div>
  );
};

const FeaturesSection = () => (
  <section id="features" aria-labelledby="features-h" className="border-b border-border">
    <div className="mx-auto max-w-7xl px-6 lg:px-10 pt-24 md:pt-32 pb-4 text-center">
      <Badge icon={I.Radar}>Как это работает</Badge>
      <h2 id="features-h" className="mt-5 font-display text-4xl md:text-5xl font-semibold tracking-tight text-balance max-w-3xl mx-auto">
        Восемь механик, которые закрывают{" "}
        <span className="text-primary">весь цикл дебиторки</span>
      </h2>
      <p className="mt-5 text-base md:text-lg text-muted-foreground mx-auto max-w-2xl leading-relaxed">
        От первой отгрузки до подачи в суд. Каждая механика показана живым экраном продукта, а не обещанием.
      </p>
    </div>
    <div className="mt-16">
      {FEATURES.map((f, i) => <FeatureRow key={i} idx={i} f={f} />)}
    </div>
  </section>
);

// ---------- TRUST (Section 5) ----------
const TrustCard = ({ icon: IconCmp, title, body }) => (
  <div className="rounded-xl border border-border bg-card p-7 transition-colors hover:border-primary/40">
    <div className="grid h-11 w-11 place-items-center rounded-lg bg-primary/10 text-primary">
      <IconCmp size={20} />
    </div>
    <div className="mt-5 text-[17px] font-semibold">{title}</div>
    <p className="mt-2 text-[13.5px] text-muted-foreground leading-relaxed text-pretty">{body}</p>
  </div>
);

const TrustSection = () => (
  <section id="security" aria-labelledby="sec-h" className="border-b border-border">
    <div className="mx-auto max-w-7xl px-6 lg:px-10 py-24 md:py-32">
      <div className="text-center">
        <Badge icon={I.Lock}>Безопасность и интеграции</Badge>
        <h2 id="sec-h" className="mt-5 font-display text-4xl md:text-5xl font-semibold tracking-tight text-balance max-w-3xl mx-auto">
          Ваши данные — в вашем периметре
        </h2>
        <p className="mt-5 text-base md:text-lg text-muted-foreground mx-auto max-w-2xl leading-relaxed">
          Компас работает внутри вашей инфраструктуры и читает вашу 1С как есть. Никаких облаков, никакой доработки конфигурации.
        </p>
      </div>

      {/* Perimeter diagram */}
      <Reveal className="mt-14">
        <div className="relative rounded-2xl border border-border bg-card/60 backdrop-blur p-6 md:p-10 overflow-hidden">
          <div className="absolute inset-0 hero-grid opacity-40 pointer-events-none" aria-hidden="true"/>
          <div className="relative">
            <PerimeterDiagram />
          </div>
          <div className="relative mt-4 grid grid-cols-2 md:grid-cols-4 gap-3 text-center">
            {[
              ["ЕДО",      "Диадок · СБИС · 1С-ЭДО"],
              ["Банки",    "Сбер · Т-Банк · ВТБ · Альфа"],
              ["Скоринг",  "Контур.Фокус · СПАРК · Rusprofile"],
              ["Госреестры","ЕГРЮЛ · ЕФРСБ · ФССП · kad.arbitr"],
            ].map(([k,v])=>(
              <div key={k} className="rounded-lg border border-border bg-background/50 px-3 py-2.5">
                <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-primary">{k}</div>
                <div className="mt-1 text-[12px] tabular text-muted-foreground leading-tight">{v}</div>
              </div>
            ))}
          </div>
        </div>
      </Reveal>

      <Reveal className="mt-10 grid md:grid-cols-3 gap-4" stagger>
        <TrustCard icon={I.Server} title="В вашей инфраструктуре"
          body="Компас разворачивается на ваших серверах. Данные 1С, банковские выгрузки и переписка Диадок остаются в вашем периметре — к нам они не передаются и не реплицируются." />
        <TrustCard icon={I.Plug} title="Читает 1С без доработки"
          body="Коннекторы ко всем типовым конфигурациям: УТ, Бухгалтерия, УНФ, ERP, Фреш. Кастомные — с индивидуальным маппингом. Сама 1С не трогается." />
        <TrustCard icon={I.Lock} title="30+ интеграций из коробки"
          body="ЕДО (Диадок, СБИС, 1С-ЭДО), банки (Сбер, Т-Банк, ВТБ, Альфа), скоринг (Контур.Фокус, СПАРК, Rusprofile), госреестры (ЕГРЮЛ, ЕФРСБ, ФССП, kad.arbitr), телефония, мессенджеры." />
      </Reveal>
      <div className="hidden" aria-hidden="true" id="cert-plaque-placeholder" />
    </div>
  </section>
);

Object.assign(window, { FeaturesSection, TrustSection });