/* ============ ШАБЛОН БАНКА — Сбербанк ============ */
const { useState: useBankS } = React;

const BANK_STATS = [
  ["34", "решённых кейсов"],
  ["11 дней", "средний срок"],
  ["₽14,2 млн", "макс. возврат"],
  ["Средний", "уровень риска"],
];

const BANK_TRIGGERS = [
  { h: "Снятие наличных через бизнес-карту", p: "Сбербанк особенно внимателен к снятию наличных через корпоративные карты свыше лимитов." },
  { h: "Платежи самозанятым и физлицам", p: "Массовые переводы физлицам без явного экономического смысла попадают под контроль." },
  { h: "Резкий рост оборота", p: "Кратный рост поступлений за короткий срок — частая причина запроса документов." },
];

const BANK_FAQ = [
  ["Как Сбербанк уведомляет о блокировке?", "Обычно через СберБизнес: приходит уведомление о приостановке ДБО и требование предоставить документы в течение 5–7 рабочих дней."],
  ["Какие документы запрашивает Сбербанк?", "Договоры с контрагентами, акты, счета-фактуры, налоговую отчётность и пояснения по экономическому смыслу операций."],
  ["Сколько занимает разблокировка в Сбербанке?", "В среднем 11 дней при полном пакете документов. По нашей практике — от 7 до 18 дней."],
];

function Bank() {
  useReveal();
  const [tab, setTab] = useBankS(0);
  return (
    <React.Fragment>
      <Nav />
      <Breadcrumbs items={[{ t: "Главная", href: PAGES.home }, { t: "Банки", href: PAGES.bank }, { t: "Сбербанк" }]} />

      <section className="thero thero--tint">
        <div className="container">
          <div className="bankhero">
            <span className="bankhero__logo" style={{ background: "#21A038" }}>С</span>
            <div className="bankhero__main">
              <div className="thero__chips">
                <span className="chip chip--warn"><Ic.alert style={{width:13,height:13}}/> Средний риск блокировок</span>
                <span className="chip chip--ghost">Системно значимый банк</span>
              </div>
              <h1>Блокировки счетов в Сбербанке по 115-ФЗ</h1>
              <p className="thero__lead">Как Сбербанк применяет 115-ФЗ, какие операции вызывают вопросы и как вернуть доступ к счёту. Практика разблокировки на основе 34 решённых дел.</p>
              <div className="thero__actions">
                <a className="btn btn--primary btn--lg" href="#consult">Разблокировать счёт <Ic.arrow /></a>
                <a className="btn btn--ghost btn--lg" href={PAGES.home + "#inn"}>Проверить риск по ИНН</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="container" style={{ paddingTop: 32 }}>
        <div className="bankstats">
          {BANK_STATS.map(([v, l], i) => (
            <div className="bankstat" key={i}>
              <div className="bankstat__v">{v}</div>
              <div className="bankstat__l">{l}</div>
            </div>
          ))}
        </div>
      </section>

      <div className="container" style={{ paddingBlock: "clamp(36px,4vw,56px)" }}>
        <div className="tlayout">
          <div className="prose" style={{ maxWidth: "none" }}>
            <section className="reveal">
              <h2>Как Сбербанк блокирует счета</h2>
              <p>Сбербанк — системно значимый банк с одной из самых развитых систем финмониторинга. Блокировки чаще происходят автоматически по сигналам скоринга, а не по решению конкретного сотрудника.</p>
              <div className="callout callout--info">
                <Ic.shieldCheck />
                <div><b>Особенность Сбербанка</b>Решения принимаются централизованно. Личный менеджер часто не может повлиять — важно работать с комплаенс-подразделением через правильно оформленные документы.</div>
              </div>
            </section>

            <section className="reveal" style={{ marginTop: 44 }}>
              <h2>Что вызывает вопросы у банка</h2>
              <div className="banktriggers">
                {BANK_TRIGGERS.map((t, i) => (
                  <div className="banktrigger" key={i}>
                    <span className="banktrigger__n">{i + 1}</span>
                    <div><b>{t.h}</b><p>{t.p}</p></div>
                  </div>
                ))}
              </div>
            </section>

            <section className="reveal" style={{ marginTop: 44 }}>
              <h2>Сроки разблокировки</h2>
              <div className="ktabs" style={{ marginBottom: 18 }}>
                {["Запрос документов", "Блокировка ДБО", "Отказ"].map((x, i) => (
                  <button key={i} className={"ktab" + (tab === i ? " is-active" : "")} onClick={() => setTab(i)}>{x}</button>
                ))}
              </div>
              <p>{["Ответ на запрос документов в Сбербанке закрывается в среднем за 7 дней при полном пакете. Это самый быстрый сценарий.", "Восстановление дистанционного банковского обслуживания занимает 10–14 дней и требует личного визита в отделение.", "Оспаривание отказа сложнее: потребуется жалоба в МВК ЦБ, срок — до 20 рабочих дней."][tab]}</p>
            </section>

            <section className="reveal" style={{ marginTop: 44 }}>
              <h2>Частые вопросы по Сбербанку</h2>
              <BankFaq />
            </section>
          </div>

          <aside className="taside">
            <div className="tcard" id="consult">
              <div className="tcard__h">Заблокировал Сбербанк?</div>
              <p className="tcard__p">Бесплатно оценим перспективы разблокировки именно в Сбербанке.</p>
              <a className="btn btn--primary" href={PAGES.service + "#consult"} style={{ width: "100%", marginBottom: 10 }}>Получить консультацию</a>
              <a className="btn btn--ghost" href="tel:+78001000115" style={{ width: "100%" }}><Ic.phone /> 8 800 100-01-15</a>
            </div>
            <div className="tcard">
              <div className="tcard__h" style={{ marginBottom: 4 }}>Кейсы по Сбербанку</div>
              {[["₽14,2 млн","11 дней"],["₽3,1 млн","8 дней"]].map((c,i)=>(
                <a key={i} href={PAGES.caseP} className="bankcase">
                  <div className="bankcase__amt">{c[0]}</div>
                  <span className="chip chip--safe">за {c[1]}</span>
                </a>
              ))}
            </div>
            <div className="tcard">
              <div className="tcard__h" style={{ marginBottom: 12 }}>Другие банки</div>
              {["Т-Банк","Альфа-Банк","ВТБ","Точка"].map((b,i)=>(
                <a key={i} href={PAGES.bank} className="aside__link"><Ic.bank style={{width:16,height:16}}/> {b}</a>
              ))}
            </div>
          </aside>
        </div>

        <CtaBand title="Вернём доступ к счёту в Сбербанке" text="Подготовим документы и пройдём проверку вместе с вами. Первичная диагностика — бесплатно." cta="Разблокировать счёт" href={PAGES.service + "#consult"} />
      </div>
      <Footer />
    </React.Fragment>
  );
}

function BankFaq() {
  const [open, setOpen] = useBankS(0);
  return (
    <div className="faq__list">
      {BANK_FAQ.map((f, i) => (
        <div className={"faq__item" + (open === i ? " is-open" : "")} key={i}>
          <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{f[0]}</span><span className="faq__plus"><Ic.chevron /></span>
          </button>
          <div className="faq__a-wrap"><p className="faq__a">{f[1]}</p></div>
        </div>
      ))}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Bank />);