/* ============ ШАБЛОН УСЛУГИ — Разблокировка счёта ============ */
const { useState: useSvcS } = React;

const CAUSES = [
  { ic: "pulse", h: "Транзитные операции", p: "Деньги быстро поступают и сразу уходят дальше — банк видит признак «транзита» по 375-П." },
  { ic: "doc", h: "Высокая доля наличных", p: "Снятие наличных свыше 30% оборота — один из ключевых критериев сомнительности." },
  { ic: "alert", h: "Несоответствие ОКВЭД", p: "Назначение платежей расходится с заявленными видами деятельности компании." },
  { ic: "layers", h: "Контрагенты из группы риска", p: "Платежи в адрес фирм с признаками технических компаний или из чёрного списка." },
];

const STEPS = [
  { n: "01", h: "Диагностика за 1 день", p: "Изучаем требование банка, выписку и основания блокировки. Определяем реальную причину и риск." },
  { n: "02", h: "Сбор документов", p: "Готовим пояснения, договоры, первичку и обоснование экономического смысла операций." },
  { n: "03", h: "Подача в банк", p: "Направляем пакет через ДБО и ведём переписку с комплаенс-подразделением банка." },
  { n: "04", h: "Контроль и эскалация", p: "Контролируем сроки. При отказе — жалоба в МВК ЦБ или обращение в суд." },
];

const PRICING = [
  { name: "Экспресс-ответ", price: "от 25 000 ₽", note: "Ответ на запрос документов", feats: ["Анализ требования банка", "Подготовка пояснений", "1 итерация переписки"], cta: "ghost" },
  { name: "Разблокировка", price: "от 60 000 ₽", note: "Полное сопровождение", feats: ["Всё из «Экспресс»", "Полный пакет документов", "Сопровождение до результата", "Жалоба в МВК ЦБ"], cta: "primary", best: true },
  { name: "Комплаенс", price: "от 40 000 ₽/мес", note: "Абонентское обслуживание", feats: ["Мониторинг риска ЗСК", "Проверка контрагентов", "Безлимит консультаций"], cta: "ghost" },
];

const SVC_FAQ = [
  ["Какова вероятность разблокировки?", "Зависит от причины и качества документов. По запросам документов — около 90%, по блокировкам — 70–80%. На консультации дадим честную оценку именно вашего случая."],
  ["Что нужно от меня?", "Требование банка, выписка по счёту и документы по операциям, которые вызвали вопросы. Остальное подготовим мы."],
  ["Вы гарантируете результат?", "Гарантировать решение банка не может никто. Но мы беремся только за перспективные дела и заранее говорим, если шансы низкие."],
];

function Service() {
  useReveal();
  const [sent, setSent] = useSvcS(false);
  return (
    <React.Fragment>
      <Nav />
      <Breadcrumbs items={[{ t: "Главная", href: PAGES.home }, { t: "Услуги", href: PAGES.service }, { 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}}/> 115-ФЗ</span>
            <span className="chip chip--ghost">Разблокировка счёта</span>
          </div>
          <h1>Разблокировка расчётного счёта по 115-ФЗ</h1>
          <p className="thero__lead">Банк приостановил операции и заморозил деньги? Подготовим документы, ответим на требование и вернём доступ к счёту. Работаем со всеми банками РФ.</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>
      </section>

      <div className="container" style={{ paddingBlock: "clamp(40px,5vw,64px)" }}>
        <div className="tlayout">
          <div className="prose" style={{ maxWidth: "none" }}>

            <section className="reveal">
              <h2>Почему банк заблокировал счёт</h2>
              <p>Блокировка по 115-ФЗ — это не наказание, а сработавший риск-фильтр банка. Чаще всего причина в одном из четырёх факторов. Понять её — половина решения.</p>
              <div className="svc__causes">
                {CAUSES.map((c, i) => { const I = Ic[c.ic]; return (
                  <div className="svc__cause" key={i}>
                    <span className="svc__cause-ic"><I /></span>
                    <div><b>{c.h}</b><p>{c.p}</p></div>
                  </div>
                ); })}
              </div>
            </section>

            <section className="reveal" style={{ marginTop: 48 }}>
              <h2>Алгоритм действий</h2>
              <p>Прозрачный процесс с фиксированными сроками. Вы видите каждый шаг и понимаете, что происходит с вашим делом.</p>
              <div className="svc__steps">
                {STEPS.map((s, i) => (
                  <div className="svc__step" key={i}>
                    <div className="svc__step-n">{s.n}</div>
                    <div><b>{s.h}</b><p>{s.p}</p></div>
                  </div>
                ))}
              </div>
              <div className="callout callout--warn">
                <Ic.alert />
                <div><b>Не отвечайте банку «на эмоциях»</b>Одна неточная формулировка в пояснении может закрепить статус сомнительной операции и привести к отказу. Сначала — стратегия.</div>
              </div>
            </section>

            <section className="reveal" style={{ marginTop: 48 }} id="pricing">
              <h2>Стоимость</h2>
              <p>Фиксированная цена известна до начала работы. Первичная диагностика — бесплатно.</p>
              <div className="svc__pricing">
                {PRICING.map((p, i) => (
                  <div className={"svc__plan" + (p.best ? " svc__plan--best" : "")} key={i}>
                    {p.best && <span className="svc__plan-badge">Популярно</span>}
                    <div className="svc__plan-name">{p.name}</div>
                    <div className="svc__plan-note">{p.note}</div>
                    <div className="svc__plan-price">{p.price}</div>
                    <ul className="svc__plan-feats">
                      {p.feats.map((f, j) => <li key={j}><Ic.check /> {f}</li>)}
                    </ul>
                    <a className={"btn btn--" + (p.cta === "primary" ? "primary" : "ghost")} href="#consult" style={{ width: "100%" }}>Выбрать</a>
                  </div>
                ))}
              </div>
            </section>

            <section className="reveal" style={{ marginTop: 48 }}>
              <h2>Кейсы по разблокировке</h2>
              <div className="svc__cases">
                {[["Сбербанк","₽14,2 млн","11 дней"],["Альфа-Банк","₽31,5 млн","6 дней"]].map((c,i)=>(
                  <a className="svc__case" href={PAGES.caseP} key={i}>
                    <span className="chip chip--safe">Решено</span>
                    <div className="svc__case-bank">{c[0]}</div>
                    <div className="svc__case-row"><b>{c[1]}</b><span>возвращено за {c[2]}</span></div>
                  </a>
                ))}
              </div>
            </section>

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

          </div>

          <aside className="taside">
            <div className="tcard" id="consult">
              <div className="tcard__h">Бесплатная диагностика</div>
              <p className="tcard__p">Оценим перспективы за 1 рабочий день. Перезвоним в течение 15 минут.</p>
              {sent ? (
                <div style={{ textAlign: "center", padding: "12px 0" }}>
                  <span className="consult__sent-ic" style={{ width: 48, height: 48 }}><Ic.check /></span>
                  <p style={{ marginTop: 10, fontWeight: 600, color: "var(--navy-900)" }}>Заявка принята</p>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} className="svc__form">
                  <input className="kinput" placeholder="Ваше имя" required />
                  <input className="kinput" type="tel" placeholder="+7 (___) ___-__-__" required />
                  <button className="btn btn--primary" type="submit" style={{ width: "100%" }}>Получить консультацию</button>
                  <p style={{ fontSize: 11, color: "var(--slate-400)", textAlign: "center", margin: 0 }}>Конфиденциально, под NDA</p>
                </form>
              )}
            </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>
            <div className="tcard">
              <div className="tcard__h" style={{ marginBottom: 12 }}>Связанные статьи</div>
              {["115-ФЗ простыми словами","Как ответить на запрос банка","Светофор ЗСК"].map((b,i)=>(
                <a key={i} href={PAGES.article} className="aside__link"><Ic.doc style={{width:16,height:16}}/> {b}</a>
              ))}
            </div>
          </aside>
        </div>

        <CtaBand title="Не уверены, что делать дальше?" text="Оставьте заявку — специалист по 115-ФЗ разберёт вашу ситуацию и предложит план действий бесплатно." />
      </div>
      <Footer />
    </React.Fragment>
  );
}

function ServiceFaq() {
  const [open, setOpen] = useSvcS(0);
  return (
    <div className="faq__list">
      {SVC_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(<Service />);