// ============= NAV =============
const { useState: useStateN, useEffect: useEffectN, useRef: useRefN } = React;

function Logo() {
  return (
    <a href="#" className="brand" aria-label="Outforge">
      <span className="brand-mark" aria-hidden="true">
        <svg width="36" height="36" viewBox="0 0 36 36" fill="none">
          <defs>
            <linearGradient id="lg1" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stopColor="#ffb347" />
              <stop offset=".55" stopColor="#ff7a18" />
              <stop offset="1" stopColor="#ff3d00" />
            </linearGradient>
            <radialGradient id="lg2" cx=".5" cy=".5" r=".7">
              <stop offset="0" stopColor="#fff" stopOpacity=".65" />
              <stop offset="1" stopColor="#fff" stopOpacity="0" />
            </radialGradient>
          </defs>
          <rect x="1" y="1" width="34" height="34" rx="10" fill="url(#lg1)" />
          <rect x="1" y="1" width="34" height="34" rx="10" fill="url(#lg2)" />
          <path d="M11 23 18 9l7 14-7-4-7 4z" fill="#fff" fillOpacity=".95"/>
        </svg>
      </span>
      <span className="brand-text">
        <span className="brand-name">Outforge</span>
        <span className="brand-sub">LEAD ENGINE</span>
      </span>
    </a>
  );
}

function ThemeToggle() {
  const { theme, setTheme } = A.useApp();
  return (
    <button className="icon-btn" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
      aria-label="Toggle theme" title={theme === 'dark' ? 'Светлая тема' : 'Тёмная тема'}>
      {theme === 'dark' ? <A.Ico.sun /> : <A.Ico.moon />}
    </button>
  );
}

function LangSwitcher() {
  const { lang, setLang } = A.useApp();
  const [open, setOpen] = useStateN(false);
  const ref = useRefN(null);
  useEffectN(() => {
    const close = (e) => { if (!ref.current?.contains(e.target)) setOpen(false); };
    document.addEventListener('pointerdown', close);
    return () => document.removeEventListener('pointerdown', close);
  }, []);
  const langs = [
    { k: 'ru', l: 'RU', f: '🇷🇺' },
    { k: 'en', l: 'EN', f: '🇬🇧' },
    { k: 'uk', l: 'UA', f: '🇺🇦' },
  ];
  return (
    <div className="lang-wrap" ref={ref}>
      <button className="icon-btn lang-btn" onClick={() => setOpen(v => !v)} aria-haspopup="listbox" aria-expanded={open}>
        <A.Ico.globe />
        <span className="lang-cur">{langs.find(l => l.k === lang)?.l}</span>
        <A.Ico.chev style={{ width: 12, height: 12, opacity: .5 }} />
      </button>
      {open && (
        <div className="lang-menu" role="listbox">
          {langs.map(l => (
            <button key={l.k} className={`lang-item${lang === l.k ? ' is-on' : ''}`}
              onClick={() => { setLang(l.k); setOpen(false); }}>
              <span className="lang-flag">{l.f}</span>
              <span>{l.l}</span>
              {lang === l.k && <A.Ico.check style={{ marginLeft: 'auto', color: 'var(--orange-400)' }} />}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

const BLOG_POSTS = [
  { tag: 'Гайд',      title: 'Как найти 500 лидов за 1 день через YouTube',        date: '12 мая' },
  { tag: 'Кейс',      title: 'x8 ROI за месяц: фрилансер закрыл 14 клиентов',     date: '5 мая'  },
  { tag: 'Стратегия', title: 'Топ-5 ниш для холодного аутрича в 2026 году',        date: '28 апр' },
];

function NavMenu() {
  const { t, setToolsOpen, setReviewsOpen, setBlogOpen, setFeaturesOpen } = A.useApp();
  const [ddOpen, setDdOpen] = useStateN(false);
  const ddRef = useRefN(null);

  useEffectN(() => {
    const close = (e) => { if (!ddRef.current?.contains(e.target)) setDdOpen(false); };
    document.addEventListener('pointerdown', close);
    return () => document.removeEventListener('pointerdown', close);
  }, []);

  const ITEMS = [
    { type: 'features', icon: <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>, label: 'Обзор функций', sub: 'Гайды по каждой функции платформы' },
    { type: 'blog', icon: <A.Ico.bolt  style={{width:14,height:14}}/>, label: 'Блог',            sub: 'Гайды, кейсы и стратегии' },
    { type: 'tool', idx: 0, icon: <A.Ico.layers style={{width:14,height:14}}/>, label: 'Топ ниш',         sub: 'Лучшие ниши с метриками' },
    { type: 'tool', idx: 1, icon: <A.Ico.spark  style={{width:14,height:14}}/>, label: 'Калькулятор ROI',  sub: 'Посчитай доход и окупаемость' },
    { type: 'tool', idx: 2, icon: <A.Ico.ai     style={{width:14,height:14}}/>, label: 'Разбор ниши · AI', sub: 'Анализ за 10 секунд' },
  ];

  const handleItem = (item) => {
    setDdOpen(false);
    if (item.type === 'features') setFeaturesOpen(true);
    else if (item.type === 'blog') setBlogOpen(true);
    else setToolsOpen(item.idx);
  };

  return (
    <nav className="nav-menu" aria-label="Primary">
      <a href="#features" className="nav-link">{t('nav.features')}</a>
      <a href="#how" className="nav-link">{t('nav.howitworks')}</a>
      <a href="#pricing" className="nav-link">{t('nav.pricing')}</a>

      <div className="nav-dd" ref={ddRef}>
        <button
          className="nav-link nav-link-btn"
          onClick={() => setDdOpen(v => !v)}
          aria-expanded={ddOpen}
        >
          {t('nav.tools')}
          <A.Ico.chev style={{ width: 12, height: 12, opacity: .55, transition: 'transform .2s', transform: ddOpen ? 'rotate(180deg)' : 'none' }} />
        </button>
        {ddOpen && (
          <div className="dd-panel dd-single" role="menu">
            {ITEMS.map((item, i) => (
              <button key={i} className="dd-item dd-tool-item" role="menuitem" onClick={() => handleItem(item)}>
                <span className="dd-ico">{item.icon}</span>
                <span className="dd-t-wrap">
                  <span className="dd-t">{item.label}</span>
                  <span className="dd-t-sub">{item.sub}</span>
                </span>
              </button>
            ))}
          </div>
        )}
      </div>

      <a href="#testimonials" className="nav-link" onClick={e => { e.preventDefault(); setReviewsOpen(true); }}>{t('nav.reviews')}</a>
    </nav>
  );
}

function Nav() {
  const { t, handleCta, isAuthed, setToolsOpen, setReviewsOpen, setBlogOpen } = A.useApp();
  const [scrolled, setScrolled] = useStateN(false);
  const [mobile, setMobile] = useStateN(false);
  useEffectN(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header className={`nav${scrolled ? ' is-scrolled' : ''}${mobile ? ' is-open' : ''}`}>
      <div className="nav-inner wrap">
        <Logo />
        <NavMenu />
        <div className="nav-right">
          <ThemeToggle />
          <LangSwitcher />
          <button className="btn btn-primary btn-spark" onClick={handleCta}>
            {isAuthed ? 'Перейти в панель' : t('nav.cta')} <A.Ico.arrow />
          </button>
          <button className="burger" onClick={() => setMobile(v => !v)} aria-label="Menu">
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      {mobile && (
        <div className="mobile-menu">
          <a href="#features" onClick={() => setMobile(false)}>{t('nav.features')}</a>
          <a href="#how" onClick={() => setMobile(false)}>{t('nav.howitworks')}</a>
          <a href="#pricing" onClick={() => setMobile(false)}>{t('nav.pricing')}</a>
          <button className="btn btn-ghost" style={{justifyContent:'flex-start',padding:'12px 16px'}} onClick={() => { setMobile(false); setBlogOpen(true); }}>Блог</button>
          <button className="btn btn-ghost" style={{justifyContent:'flex-start',padding:'12px 16px'}} onClick={() => { setMobile(false); setToolsOpen(0); }}>{t('nav.tools')}</button>
          <a href="#testimonials" onClick={() => setMobile(false)}>{t('nav.reviews')}</a>
          <button className="btn btn-primary" onClick={() => { setMobile(false); handleCta(); }}>{t('nav.cta')}</button>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;