/* ============ ШАБЛОН FAQ — База вопросов ============ */
const { useState: useFaqS, useMemo: useFaqM } = React;

const FAQ_CATS = ["Все", "Блокировка", "Документы", "ЗСК", "Стоимость", "Сроки"];

const FAQ_DATA = [
  { c: "Блокировка", q: "Банк имеет право заблокировать счёт без объяснения?", a: "Банк обязан приостанавливать сомнительные операции по 115-ФЗ, но должен сообщить причину и запросить документы. Полное молчание банка — нарушение." },
  { c: "Блокировка", q: "Можно ли снять деньги с заблокированного счёта?", a: "Расходные операции приостановлены. Иногда доступны платежи в бюджет, по зарплате и исполнительным листам — зависит от характера ограничения." },
  { c: "Документы", q: "Какие документы запрашивает банк?", a: "Договоры с контрагентами, акты, счета-фактуры, налоговую отчётность и пояснения по экономическому смыслу операций. Точный список — в требовании банка." },
  { c: "Документы", q: "В какой срок нужно ответить банку?", a: "Обычно 5–7 рабочих дней с даты требования. По возможности отвечайте раньше — это улучшает позицию." },
  { c: "ЗСК", q: "Что такое Платформа ЗСК и «светофор»?", a: "Сервис ЦБ, присваивающий компаниям уровень риска: зелёный, жёлтый, красный. Красная зона фактически блокирует операции." },
  { c: "ЗСК", q: "Как выйти из красной зоны ЗСК?", a: "Автоматически — никак. Нужно обращение в межведомственную комиссию (МВК) при ЦБ с обоснованием. Срок рассмотрения — до 20 рабочих дней." },
  { c: "Стоимость", q: "Сколько стоит разблокировка счёта?", a: "Первичная диагностика бесплатна. Сопровождение — от 60 000 ₽ фиксированно или абонентский комплаенс от 40 000 ₽/мес. Цену называем до начала работы." },
  { c: "Стоимость", q: "Берёте ли вы предоплату?", a: "Диагностика и оценка перспектив — бесплатно и без обязательств. Оплата — только после согласования объёма работ." },
  { c: "Сроки", q: "Сколько времени занимает разблокировка?", a: "От 3 до 30 дней в зависимости от банка и причины. Запрос документов закрывается быстрее, реабилитация через МВК — дольше." },
  { c: "Блокировка", q: "Что будет, если просто не реагировать?", a: "Банк может отказать в обслуживании и внести компанию в перечень отказников ЦБ, что закроет счета в других банках." },
];

function FaqHub() {
  useReveal();
  const [cat, setCat] = useFaqS("Все");
  const [q, setQ] = useFaqS("");
  const [open, setOpen] = useFaqS(0);

  const filtered = useFaqM(() => FAQ_DATA.filter(f =>
    (cat === "Все" || f.c === cat) &&
    (q === "" || (f.q + f.a).toLowerCase().includes(q.toLowerCase()))
  ), [cat, q]);

  return (
    <React.Fragment>
      <Nav />
      <Breadcrumbs items={[{ t: "Главная", href: PAGES.home }, { t: "Частые вопросы" }]} />

      <section className="thero thero--tint">
        <div className="container thero__inner" style={{ maxWidth: 720 }}>
          <span className="eyebrow">FAQ</span>
          <h1 style={{ marginTop: 14 }}>Вопросы и ответы по 115-ФЗ</h1>
          <p className="thero__lead">Собрали ответы на самые частые вопросы о блокировках, ЗСК, документах и стоимости. Не нашли свой — задайте на бесплатной консультации.</p>
          <div className="faqsearch">
            <Ic.search />
            <input placeholder="Поиск по вопросам…" value={q} onChange={(e) => setQ(e.target.value)} />
          </div>
        </div>
      </section>

      <div className="container" style={{ paddingBlock: "clamp(32px,4vw,52px)" }}>
        <div className="faqcats">
          {FAQ_CATS.map(c => (
            <button key={c} className={"faqcat" + (cat === c ? " is-active" : "")} onClick={() => { setCat(c); setOpen(-1); }}>{c}</button>
          ))}
        </div>

        <div className="faqhub">
          <div className="faq__list">
            {filtered.length === 0 && <p style={{ color: "var(--slate-500)", padding: "20px 0" }}>Ничего не нашлось. Попробуйте изменить запрос или задайте вопрос напрямую.</p>}
            {filtered.map((f, i) => (
              <div className={"faq__item" + (open === i ? " is-open" : "")} key={i}>
                <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span><span className="faqtag">{f.c}</span> {f.q}</span>
                  <span className="faq__plus"><Ic.chevron /></span>
                </button>
                <div className="faq__a-wrap"><p className="faq__a">{f.a}</p></div>
              </div>
            ))}
          </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)" }}>Задайте вопрос специалисту по 115-ФЗ — ответим бесплатно.</p>
              <a className="btn btn--primary" href={PAGES.service + "#consult"} style={{ width: "100%" }}>Задать вопрос</a>
            </div>
            <div className="tcard">
              <div className="tcard__h" style={{ marginBottom: 12 }}>Полезные материалы</div>
              {[["115-ФЗ простыми словами",PAGES.article],["Светофор ЗСК",PAGES.article],["Как ответить банку",PAGES.article]].map(([t,h],i)=>(
                <a key={i} href={h} className="aside__link"><Ic.doc style={{width:16,height:16}}/> {t}</a>
              ))}
            </div>
          </aside>
        </div>
      </div>
      <Footer />
    </React.Fragment>
  );
}

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