/* ============ ШАБЛОН ПРОБЛЕМЫ — Блокировка счёта по 115-ФЗ ============ */
const { useState: useProbS } = React;

const PROB_RISKS = [
  { ic: "lock", h: "Заморожены деньги", p: "Доступ к расчётному счёту приостановлен — платежи поставщикам и зарплаты под угрозой." },
  { ic: "clock", h: "Жёсткие сроки", p: "На ответ банку обычно 5–7 рабочих дней. Просрочка ухудшает позицию." },
  { ic: "flag", h: "Риск чёрного списка", p: "Неверный ответ может привести к отказу и попаданию в перечень ЦБ — закроются счета и в других банках." },
];

const PROB_STEPS = [
  "Запросите у банка точную причину и список документов.",
  "Не отправляйте пояснения сразу — продумайте формулировки.",
  "Соберите договоры, первичку и обоснование операций.",
  "Подайте пакет в срок и контролируйте рассмотрение.",
];

const PROB_FAQ = [
  ["Банк имеет право заблокировать счёт?", "Да, по 115-ФЗ банк обязан приостанавливать сомнительные операции. Но он должен сообщить причину и дать возможность предоставить документы."],
  ["Можно ли снять наличные с заблокированного счёта?", "Как правило, нет — приостановка касается расходных операций. Иногда доступны платежи в бюджет и по исполнительным листам."],
  ["Что будет, если не отвечать банку?", "Банк может отказать в обслуживании и внести компанию в перечень отказников ЦБ. Это закроет доступ к счетам в других банках."],
];

function Problem() {
  useReveal();
  return (
    <React.Fragment>
      <Nav />
      <Breadcrumbs items={[{ t: "Главная", href: PAGES.home }, { t: "Проблемы", href: PAGES.problem }, { t: "Блокировка счёта" }]} />

      <section className="thero thero--tint">
        <div className="container thero__inner">
          <div className="thero__chips">
            <span className="chip chip--risk"><Ic.lock style={{width:14,height:14}}/> Срочная ситуация</span>
            <span className="chip chip--ghost">115-ФЗ</span>
          </div>
          <h1>Банк заблокировал счёт по 115-ФЗ</h1>
          <p className="thero__lead">Спокойно. Это решаемо. Ниже — что произошло, какие риски и что делать прямо сейчас, чтобы вернуть доступ к деньгам и не усугубить ситуацию.</p>
          <div className="thero__actions">
            <a className="btn btn--primary btn--lg" href={PAGES.service + "#consult"}>Что делать в моём случае <Ic.arrow /></a>
            <a className="btn btn--ghost btn--lg" href={PAGES.home + "#inn"}>Проверить риск по ИНН</a>
          </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>Блокировка по 115-ФЗ — это приостановка операций, потому что банк счёл их подозрительными. Сам по себе факт не означает вину, но требует быстрой и грамотной реакции.</p>
              <div className="prob__risks">
                {PROB_RISKS.map((r, i) => { const I = Ic[r.ic]; return (
                  <div className="prob__risk" key={i}>
                    <span className="prob__risk-ic"><I /></span>
                    <b>{r.h}</b>
                    <p>{r.p}</p>
                  </div>
                ); })}
              </div>
            </section>

            <section className="reveal" style={{ marginTop: 44 }}>
              <h2>Что делать прямо сейчас</h2>
              <div className="checklist">
                {PROB_STEPS.map((s, i) => (
                  <div className="checkitem" key={i}>
                    <span className="checkitem__n">{i + 1}</span>
                    <p>{s}</p>
                  </div>
                ))}
              </div>
              <div className="callout callout--warn">
                <Ic.alert />
                <div><b>Чего нельзя делать</b>Снимать остаток через карты, дробить платежи, переводить деньги на физлиц «в обход». Это закрепит статус сомнительных операций.</div>
              </div>
            </section>

            <section className="reveal" style={{ marginTop: 44 }}>
              <h2>Частые вопросы</h2>
              <ProblemFaq />
            </section>
          </div>

          <aside className="taside">
            <div className="tcard" style={{ background: "linear-gradient(155deg,var(--navy-800),var(--navy-950))", border: "none" }}>
              <div className="tcard__h" style={{ color: "#fff" }}>Нужна помощь срочно?</div>
              <p className="tcard__p" style={{ color: "var(--slate-400)" }}>Перезвоним в течение 15 минут и подскажем первые шаги.</p>
              <a className="btn btn--primary" href={PAGES.service + "#consult"} style={{ width: "100%", marginBottom: 10 }}>Получить консультацию</a>
              <a className="btn btn--ghost-light" href="tel:+78001000115" style={{ width: "100%" }}><Ic.phone /> 8 800 100-01-15</a>
            </div>
            <div className="tcard">
              <div className="tcard__h" style={{ marginBottom: 12 }}>Связанные услуги</div>
              {[["Разблокировка счёта",PAGES.service],["Выход из перечня ЗСК",PAGES.service],["Обжалование в МВК ЦБ",PAGES.service]].map(([t,h],i)=>(
                <a key={i} href={h} className="aside__link"><Ic.scale style={{width:16,height:16}}/> {t}</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="Разберём вашу ситуацию и составим план разблокировки. Первая консультация — бесплатно." href={PAGES.service + "#consult"} />
      </div>
      <Footer />
    </React.Fragment>
  );
}

function ProblemFaq() {
  const [open, setOpen] = useProbS(0);
  return (
    <div className="faq__list">
      {PROB_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(<Problem />);