/* ============ ШАБЛОН КЕЙСА — Разблокировка счёта оптовой компании ============ */

const CASE_TIMELINE = [
  { d: "День 1", h: "Обращение и диагностика", p: "Клиент получил приостановку ДБО в Сбербанке по транзитным операциям. В тот же день разобрали выписку и требование банка." },
  { d: "День 2–4", h: "Сбор и подготовка документов", p: "Собрали договоры с 12 контрагентами, акты, счета-фактуры. Подготовили пояснительную записку с экономическим обоснованием." },
  { d: "День 5", h: "Подача в банк", p: "Направили полный пакет через СберБизнес и сопроводительное письмо в комплаенс-подразделение." },
  { d: "День 11", h: "Счёт разблокирован", p: "Банк снял ограничения. Компания вернулась к работе, доступ к ₽14,2 млн восстановлен." },
];

function CaseStudy() {
  useReveal();
  return (
    <React.Fragment>
      <Nav />
      <Breadcrumbs items={[{ t: "Главная", href: PAGES.home }, { t: "Кейсы", href: PAGES.caseP }, { t: "Разблокировка оптовой компании" }]} />

      <section className="thero">
        <div className="container thero__inner" style={{ maxWidth: 820 }}>
          <div className="thero__chips">
            <span className="chip chip--safe"><Ic.check style={{width:13,height:13}}/> Решено</span>
            <span className="chip chip--ghost">Сбербанк</span>
            <span className="chip chip--ghost">115-ФЗ · транзит</span>
          </div>
          <h1>Разблокировка счёта оптовой компании за 11 дней</h1>
          <p className="thero__lead">Сбербанк приостановил операции по счёту торговой компании из-за признаков транзита. Подготовили документы и вернули доступ к ₽14,2 млн без потери контрактов.</p>
        </div>
      </section>

      <section className="container">
        <div className="casemetrics">
          {[["₽14,2 млн","возвращено клиенту","safe"],["11 дней","срок решения","blue"],["12","контрагентов в пакете","ink"],["0","потерянных контрактов","safe"]].map((m,i)=>(
            <div className="casemetric" key={i}>
              <div className={"casemetric__v casemetric__v--" + m[2]}>{m[0]}</div>
              <div className="casemetric__l">{m[1]}</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>К нам обратился собственник оптовой компании в сфере FMCG. Утром бизнес не смог провести платёж поставщику — Сбербанк приостановил дистанционное обслуживание и запросил документы по операциям за последние 3 месяца.</p>
              <div className="callout callout--warn">
                <Ic.alert />
                <div><b>Риск</b>На счёте было заморожено ₽14,2 млн, а через 4 дня — срок оплаты по двум крупным контрактам. Промедление грозило срывом поставок и неустойками.</div>
              </div>
            </section>

            <section className="reveal" style={{ marginTop: 44 }}>
              <h2>Что мы сделали</h2>
              <div className="timeline">
                {CASE_TIMELINE.map((t, i) => (
                  <div className="tl" key={i}>
                    <div className="tl__marker"><span className="tl__dot" />{i < CASE_TIMELINE.length - 1 && <span className="tl__line" />}</div>
                    <div className="tl__body">
                      <span className="tl__day">{t.d}</span>
                      <b>{t.h}</b>
                      <p>{t.p}</p>
                    </div>
                  </div>
                ))}
              </div>
            </section>

            <section className="reveal" style={{ marginTop: 44 }}>
              <h2>Результат</h2>
              <p>На 11-й день Сбербанк снял ограничения. Компания провела все платежи в срок, сохранила контракты и репутацию у поставщиков. Дополнительно мы подключили абонентский комплаенс, чтобы исключить повторные блокировки.</p>
              <blockquote className="quote">
                <Ic.quote />
                <p>«Думали, потеряем поставщиков и попадём на неустойки. Ребята за день разобрались и чётко вели нас по шагам. Счёт открыли вовремя — спасли сделки».</p>
                <footer><b>Финансовый директор</b> · оптовая компания, FMCG</footer>
              </blockquote>
            </section>
          </div>

          <aside className="taside">
            <div className="tcard">
              <div className="tcard__h" style={{ marginBottom: 12 }}>Детали кейса</div>
              {[["Банк","Сбербанк"],["Проблема","Блокировка по 115-ФЗ"],["Отрасль","Оптовая торговля"],["Сумма","₽14,2 млн"],["Срок","11 дней"],["Услуга","Разблокировка счёта"]].map(([k,v],i)=>(
                <div className="kv" key={i}><span>{k}</span><b>{v}</b></div>
              ))}
            </div>
            <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)" }}>Разберём ваш случай и оценим шансы бесплатно.</p>
              <a className="btn btn--primary" href={PAGES.service + "#consult"} style={{ width: "100%" }}>Получить консультацию</a>
            </div>
          </aside>
        </div>

        <section className="reveal" style={{ marginTop: 16 }}>
          <h2 style={{ fontSize: "var(--fs-h3)", marginBottom: 18 }}>Другие кейсы</h2>
          <div className="related">
            {[["ВТБ","Выход из чёрного списка ЦБ","₽6,8 млн · 23 дня"],
              ["Альфа-Банк","Ответ на требование по 35 операциям","₽31,5 млн · 6 дней"],
              ["Т-Банк","Снятие высокого риска ЗСК","₽9,4 млн · 14 дней"]].map((c,i)=>(
              <a className="related__card" href={PAGES.caseP} key={i}>
                <span className="chip chip--ghost">{c[0]}</span>
                <h4>{c[1]}</h4>
                <span className="related__meta"><Ic.check style={{width:14,height:14}}/> {c[2]}</span>
              </a>
            ))}
          </div>
        </section>
      </div>
      <Footer />
    </React.Fragment>
  );
}

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