// ============= NAV =============
const USEFUL_HINTS = {
  features: { ru: "Как работает каждая функция", en: "How each feature works", uk: "Як працює кожна функція" },
  blog: { ru: "Гайды и кейсы по аутричу", en: "Outreach guides & cases", uk: "Гайди та кейси" },
  niches: { ru: "Топ-12 ниш для поиска", en: "Top-12 niches to target", uk: "Топ-12 ніш" },
  analyze: { ru: "Спрос и каналы по нише", en: "Demand & channels by niche", uk: "Попит і канали" },
  roi: { ru: "Посчитать выручку и прибыль", en: "Estimate revenue & profit", uk: "Порахувати виручку" },
  templates: { ru: "Готовые скрипты рассылки", en: "Ready outreach scripts", uk: "Готові скрипти" },
};
const USEFUL_NAV_ICO = { features: <IconGrid />, blog: <IconFile />, niches: <IconTrendUp />, analyze: <IconSearch />, roi: <IconGauge />, templates: <IconSend /> };

function Nav() {
  const { t, lang, setLang, theme, setTheme, setUsefulOpen, setFeaturesOpen, ctaHref, ctaLabel } = useApp();
  const [scrolled, setScrolled] = useState(false);
  const [langOpen, setLangOpen] = useState(false);
  const [megaOpen, setMegaOpen] = useState(false);
  const langTimer = useRef(null);
  const megaTimer = useRef(null);

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

  const hover = (timerRef, setter, val) => {
    clearTimeout(timerRef.current);
    if (val) setter(true);
    else timerRef.current = setTimeout(() => setter(false), 160);
  };

  const links = [
    ["video", "nav.video"],
    ["features", "nav.features"],
    ["pricing", "nav.pricing"],
  ];
  const langs = [["ru", "RU", "Русский"], ["en", "EN", "English"], ["uk", "UK", "Українська"]];
  const usefulTabs = (window.USEFUL[lang] || window.USEFUL.ru).tabs;

  const openUseful = (tabId) => { setMegaOpen(false); setUsefulOpen(tabId); };

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav__inner">
        <a href="#top" className="brand" aria-label="Outforge">
          <span className="brand__mark"><IconLogo /></span>
          <span>
            <span className="brand__name">Outforge</span>
            <span className="brand__tag">Lead Engine</span>
          </span>
        </a>

        <div className="nav__links">
          {links.map(([id, key]) => (
            <a key={id} href={`#${id}`} className="nav__link">{t(key)}</a>
          ))}

          {/* Полезное — hover mega menu */}
          <div className={`nav__group ${megaOpen ? "open" : ""}`}
            onMouseEnter={() => hover(megaTimer, setMegaOpen, true)}
            onMouseLeave={() => hover(megaTimer, setMegaOpen, false)}>
            <button className="nav__link" onClick={() => openUseful(true)} style={{ display: "inline-flex", alignItems: "center" }}>
              {t("nav.useful")}<IconChevD className="nav__caret" />
            </button>
            {megaOpen && (
              <div className="nav__mega">
                {usefulTabs.map((tb) => (
                  <button key={tb.id} className="nav__mega-item" onClick={() => openUseful(tb.id)}>
                    <span className="nav__mega-ico">{USEFUL_NAV_ICO[tb.id]}</span>
                    <span className="nav__mega-tx">
                      <span className="nav__mega-t">{tb.label}</span>
                      <span className="nav__mega-s">{(USEFUL_HINTS[tb.id] || {})[lang] || (USEFUL_HINTS[tb.id] || {}).ru}</span>
                    </span>
                    <IconChevR style={{ width: 15, height: 15, color: "var(--text-dim)", flex: "none" }} />
                  </button>
                ))}
              </div>
            )}
          </div>

          <button className="nav__link" onClick={() => setFeaturesOpen(true)}>{t("nav.features2")}</button>

          <a href="#reviews" className="nav__link">{t("nav.reviews")}</a>
        </div>

        <div className="nav__right">
          <button className="nav__icobtn" onClick={() => setTheme(theme === "dark" ? "light" : "dark")} aria-label="Theme" title="Тема">
            {theme === "dark" ? <IconSpark /> : <IconBoltFill />}
          </button>

          <div className="lang nav__group" style={{ position: "relative" }}
            onMouseEnter={() => hover(langTimer, setLangOpen, true)}
            onMouseLeave={() => hover(langTimer, setLangOpen, false)}>
            <button className="lang__btn" onClick={() => setLangOpen((v) => !v)} aria-label="Language">
              <IconGlobe />
              <span>{lang.toUpperCase()}</span>
              <IconChevD className="nav__caret" />
            </button>
            {langOpen && (
              <div className="lang__menu">
                {langs.map(([id, code, name]) => (
                  <button key={id} className={`lang__opt ${lang === id ? "active" : ""}`} onClick={() => { setLang(id); setLangOpen(false); }}>
                    <span className="lang__flag">{code}</span>{name}
                  </button>
                ))}
              </div>
            )}
          </div>

          <a href={ctaHref} className="btn btn--primary nav__cta">
            <span className="nav__cta-label">{ctaLabel("nav.cta")}</span>
            <IconArrUp style={{ transform: "rotate(45deg)" }} />
          </a>
        </div>
      </div>
    </nav>
  );
}

Object.assign(window, { Nav });