/* ============ NAV — header, mega menu, mobile drawer ============ */
const { useState, useEffect, useRef } = React;

function Logo({ light }) {
  return (
    <a href="Главная.html" className="logo" aria-label="SCHET115.RU">
      <span className="logo__mark" aria-hidden="true">
        <svg viewBox="0 0 32 32" width="30" height="30">
          <rect width="32" height="32" rx="9" fill={light ? "#fff" : "var(--navy-900)"} />
          <path d="M16 6l8 3.2v5c0 5.1-3.4 8.6-8 10-4.6-1.4-8-4.9-8-10v-5L16 6z"
            fill="none" stroke={light ? "var(--navy-900)" : "#fff"} strokeWidth="1.6" />
          <path d="M12.5 16l2.4 2.4 4.6-4.8" fill="none" stroke="var(--blue-500)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
      <span className="logo__txt" style={light ? { color: "#fff" } : null}>
        SCHET<b>115</b><i>.ru</i>
      </span>
    </a>
  );
}

const MENU = {
  "Проблемы": {
    icon: "alert", href: "Проблема.html",
    cols: [
      { h: "Блокировки и отказы", items: ["Блокировка счёта по 115-ФЗ", "Отказ в проведении операции", "Отказ в открытии счёта", "Расторжение договора банком"] },
      { h: "Документы и проверки", items: ["Запрос документов по 115-ФЗ", "Блокировка дистанционного банка", "Ограничение по карте физлица", "Попадание в чёрный список ЦБ"] },
    ],
    promo: { h: "Высокий риск ЗСК?", p: "Проверьте свой статус в Платформе ЗСК за 30 секунд.", cta: "Проверить по ИНН" }
  },
  "Банки": {
    icon: "bank", href: "Банк.html",
    cols: [
      { h: "Крупнейшие банки", items: ["Сбербанк", "Т-Банк", "Альфа-Банк", "ВТБ", "Точка"] },
      { h: "Ещё банки", items: ["Озон Банк", "Модульбанк", "Райффайзенбанк", "Совкомбанк", "Все 40 банков →"] },
    ],
    promo: { h: "Светофор ЗСК", p: "Как банк присваивает уровень риска и что это значит.", cta: "Разобраться" }
  },
  "Услуги": {
    icon: "scale", href: "Услуга.html",
    cols: [
      { h: "Разблокировка", items: ["Разблокировка счёта", "Снятие из перечня ЗСК", "Подготовка документов", "Сопровождение проверки"] },
      { h: "Защита", items: ["Абонентский комплаенс", "Аудит рисков 115-ФЗ", "Обжалование в МВК ЦБ", "Судебное обжалование"] },
    ],
    promo: { h: "Бесплатная диагностика", p: "Оценим перспективы разблокировки за 1 рабочий день.", cta: "Оставить заявку" }
  },
  "База знаний": {
    icon: "book", href: "Статья.html",
    cols: [
      { h: "Гайды", items: ["115-ФЗ простыми словами", "Как ответить на запрос банка", "Что такое ЗСК и светофор", "Реабилитация через МВК"] },
      { h: "Разборы", items: ["Признаки сомнительных операций", "Критерии ЦБ 375-П", "Как снизить риск блокировки", "Все статьи →"] },
    ],
    promo: { h: "Кейсы клиентов", p: "186 разблокированных счетов. Реальные суммы и сроки.", cta: "Смотреть кейсы" }
  },
};

function MegaPanel({ data }) {
  const Icon = Ic[data.icon];
  return (
    <div className="mega">
      <div className="mega__cols">
        {data.cols.map((c, i) => (
          <div className="mega__col" key={i}>
            <div className="mega__h">{c.h}</div>
            <ul>
              {c.items.map((it, j) => (
                <li key={j}><a href={data.href}>{it}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div className="mega__promo">
        <span className="mega__promo-ic"><Icon /></span>
        <div className="mega__promo-h">{data.promo.h}</div>
        <p>{data.promo.p}</p>
        <a className="mega__promo-cta" href={data.href}>{data.promo.cta} <Ic.arrow /></a>
      </div>
    </div>
  );
}

function Nav() {
  const [open, setOpen] = useState(null);
  const [scrolled, setScrolled] = useState(false);
  const [mobile, setMobile] = useState(false);
  const closeT = useRef(null);

  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 12);
    f(); window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);

  const enter = (k) => { clearTimeout(closeT.current); setOpen(k); };
  const leave = () => { closeT.current = setTimeout(() => setOpen(null), 120); };

  return (
    <header className={"nav" + (scrolled ? " nav--scrolled" : "")} id="top">
      <div className="nav__bar container">
        <Logo />
        <nav className="nav__links" onMouseLeave={leave}>
          {Object.keys(MENU).map((k) => (
            <div key={k} className="nav__item" onMouseEnter={() => enter(k)}>
              <button className={"nav__link" + (open === k ? " is-open" : "")}>
                {k} <Ic.chevron className="nav__caret" />
              </button>
              {open === k && (
                <div className="nav__panel" onMouseEnter={() => enter(k)}>
                  <MegaPanel data={MENU[k]} />
                </div>
              )}
            </div>
          ))}
          <a className="nav__link nav__link--plain" href="Кейс.html">Кейсы</a>
        </nav>
        <div className="nav__cta">
          <a className="nav__phone" href="tel:+78001000115"><Ic.phone /> 8 800 100-01-15</a>
          <a className="btn btn--primary nav__cta-btn" href="#consult">Консультация</a>
          <button className="nav__burger" onClick={() => setMobile(true)} aria-label="Меню"><Ic.menu /></button>
        </div>
      </div>
      {mobile && <MobileMenu onClose={() => setMobile(false)} />}
    </header>
  );
}

function MobileMenu({ onClose }) {
  const [acc, setAcc] = useState(null);
  return (
    <div className="mob">
      <div className="mob__top container">
        <Logo />
        <button className="mob__x" onClick={onClose} aria-label="Закрыть"><Ic.close /></button>
      </div>
      <div className="mob__body">
        {Object.keys(MENU).map((k) => (
          <div className="mob__group" key={k}>
            <button className="mob__head" onClick={() => setAcc(acc === k ? null : k)}>
              {k} <Ic.chevron style={{ transform: acc === k ? "rotate(90deg)" : "none", transition: ".2s" }} />
            </button>
            {acc === k && (
              <div className="mob__sub">
                {MENU[k].cols.flatMap(c => c.items).map((it, i) => (
                  <a href={MENU[k].href} key={i} onClick={onClose}>{it}</a>
                ))}
              </div>
            )}
          </div>
        ))}
        <a className="mob__head" href="Кейс.html" onClick={onClose}>Кейсы</a>
      </div>
      <div className="mob__foot">
        <a className="btn btn--primary btn--lg" href="#consult" onClick={onClose} style={{ width: "100%" }}>Получить консультацию</a>
        <a className="mob__phone" href="tel:+78001000115"><Ic.phone /> 8 800 100-01-15</a>
      </div>
    </div>
  );
}

window.Nav = Nav;
window.Logo = Logo;