/* ============ SHARED SHELL — Footer, Breadcrumbs, CTA band, reveal ============ */

const PAGES = {
  home: "Главная.html",
  uikit: "UI-Kit.html",
  service: "Услуга.html",
  article: "Статья.html",
  bank: "Банк.html",
  caseP: "Кейс.html",
  problem: "Проблема.html",
  faq: "FAQ.html",
};

const FOOT = {
  "Проблемы": [["Блокировка счёта", PAGES.problem], ["Запрос документов", PAGES.problem], ["Высокий риск ЗСК", PAGES.problem], ["Чёрный список ЦБ", PAGES.problem], ["Все проблемы", PAGES.problem]],
  "Услуги": [["Разблокировка счёта", PAGES.service], ["Выход из перечня ЗСК", PAGES.service], ["Абонентский комплаенс", PAGES.service], ["Обжалование в МВК", PAGES.service], ["Все услуги", PAGES.service]],
  "Банки": [["Сбербанк", PAGES.bank], ["Т-Банк", PAGES.bank], ["Альфа-Банк", PAGES.bank], ["ВТБ", PAGES.bank], ["Все банки", PAGES.bank]],
  "Знания": [["115-ФЗ простыми словами", PAGES.article], ["Светофор ЗСК", PAGES.article], ["Кейсы клиентов", PAGES.caseP], ["Частые вопросы", PAGES.faq], ["UI-Kit", PAGES.uikit]],
};

function Footer() {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot__top">
          <div className="foot__brand">
            <Logo light />
            <p className="foot__tag">Цифровая платформа по 115-ФЗ, финансовому мониторингу и ЗСК. Возвращаем бизнесу доступ к деньгам.</p>
            <a className="btn btn--primary" href="#consult">Получить консультацию <Ic.arrow /></a>
          </div>
          <div className="foot__cols">
            {Object.entries(FOOT).map(([h, items]) => (
              <div className="foot__col" key={h}>
                <div className="foot__h">{h}</div>
                <ul>{items.map(([t, href], i) => <li key={i}><a href={href}>{t}</a></li>)}</ul>
              </div>
            ))}
          </div>
        </div>
        <div className="foot__bottom">
          <span>© 2026 SCHET115.RU · Платформа по 115-ФЗ</span>
          <div className="foot__legal">
            <a href="#">Политика конфиденциальности</a>
            <a href="#">Договор оферты</a>
            <a href="tel:+78001000115">8 800 100-01-15</a>
          </div>
        </div>
        <p className="foot__disc">Информация на сайте не является юридической консультацией или публичной офертой. SCHET115.RU не является кредитной организацией.</p>
      </div>
    </footer>
  );
}

function Breadcrumbs({ items }) {
  return (
    <nav className="crumbs" aria-label="Хлебные крошки">
      <div className="container crumbs__row">
        {items.map((it, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="crumbs__sep"><Ic.chevron /></span>}
            {it.href ? <a href={it.href}>{it.t}</a> : <span className="crumbs__cur">{it.t}</span>}
          </React.Fragment>
        ))}
      </div>
    </nav>
  );
}

/* Reusable mid-page CTA band */
function CtaBand({ title, text, cta = "Получить консультацию", href = "#consult" }) {
  return (
    <div className="ctaband">
      <div className="ctaband__inner">
        <div>
          <h3 className="ctaband__h">{title}</h3>
          <p className="ctaband__p">{text}</p>
        </div>
        <a className="btn btn--primary btn--lg" href={href}>{cta} <Ic.arrow /></a>
      </div>
    </div>
  );
}

/* scroll reveal hook — robust: reveals immediately what's near the viewport,
   observes the rest, and guarantees everything shows via a fallback timer */
function useReveal() {
  React.useEffect(() => {
    const els = Array.from(document.querySelectorAll(".reveal"));
    const showIfVisible = (el) => {
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.95) el.classList.add("in");
    };
    els.forEach(showIfVisible);
    const io = new IntersectionObserver((es) => {
      es.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.08, rootMargin: "0px 0px -5% 0px" });
    els.forEach(el => { if (!el.classList.contains("in")) io.observe(el); });
    const fallback = setTimeout(() => els.forEach(el => el.classList.add("in")), 1200);
    return () => { io.disconnect(); clearTimeout(fallback); };
  }, []);
}

Object.assign(window, { PAGES, Footer, Breadcrumbs, CtaBand, useReveal });