// Top navigation
function LangToggle({ compact }) {
  const { lang, setLang, t } = useLang();
  const next = lang === 'en' ? 'zh' : 'en';
  return (
    <button
      type="button"
      className="lang-toggle"
      onClick={() => setLang(next)}
      aria-label={t('nav.toggle_aria')}
      title={t('nav.toggle_aria')}
    >
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="9"/>
        <path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/>
      </svg>
      <span>{lang === 'en' ? '中文' : 'EN'}</span>
    </button>
  );
}

function Nav() {
  const { t } = useLang();
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [ddOpen, setDdOpen] = React.useState(false);
  const [mobileSvcOpen, setMobileSvcOpen] = React.useState(false);
  const ddCloseTimer = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  // Lock body scroll when menu open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);
  const close = () => { setMenuOpen(false); setMobileSvcOpen(false); };
  // Dropdown hover handlers — small delay on close so user can move down into it
  const openDd = () => {
    if (ddCloseTimer.current) clearTimeout(ddCloseTimer.current);
    setDdOpen(true);
  };
  const scheduleCloseDd = () => {
    if (ddCloseTimer.current) clearTimeout(ddCloseTimer.current);
    ddCloseTimer.current = setTimeout(() => setDdOpen(false), 140);
  };
  const services = [
    { href: '/services-websites/', title: t('svc.1.title'), cn: t('svc.1.cn'), desc: t('nav.dd.1.desc'), icon: <Icon.globe style={{width:18,height:18}}/> },
    { href: '/services-web-apps/', title: t('svc.2.title'), cn: t('svc.2.cn'), desc: t('nav.dd.2.desc'), icon: <Icon.layers style={{width:18,height:18}}/> },
    { href: '/services-saas/',     title: t('svc.3.title'), cn: t('svc.3.cn'), desc: t('nav.dd.3.desc'), icon: <Icon.cloud style={{width:18,height:18}}/> },
  ];
  return (
    <React.Fragment>
      <nav className={'nav' + (scrolled ? ' scrolled' : '') + (menuOpen ? ' menu-open' : '')}>
        <div className="nav-inner">
          <a href="#top" className="nav-logo" onClick={close}>
            <img src="uploads/666-mark.png" alt="666" style={{height:32,width:'auto',objectFit:'contain',display:'block'}}/>
            <span>666<span style={{color:'var(--ink-mute)',fontWeight:400,marginLeft:6,fontSize:13,letterSpacing:'0.12em',textTransform:'uppercase'}}>Website Services</span></span>
          </a>
          <div className="nav-links">
            <div
              className={'nav-dd-wrap' + (ddOpen ? ' is-open' : '')}
              onMouseEnter={openDd}
              onMouseLeave={scheduleCloseDd}
            >
              <a
                className="nav-link nav-link-dd"
                href="#services"
                aria-haspopup="true"
                aria-expanded={ddOpen}
                onFocus={openDd}
                onBlur={scheduleCloseDd}
              >
                {t('nav.services')}
                <svg className="chev" viewBox="0 0 12 8" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M1 1l5 5 5-5"/>
                </svg>
              </a>
              <div className="nav-dd" role="menu" aria-hidden={!ddOpen}>
                <div className="nav-dd-arrow"></div>
                <div className="nav-dd-head">
                  <span>{t('nav.dd.head')}</span>
                  <span className="cn">{t('nav.dd.head.cn')}</span>
                </div>
                {services.map((s, i) => (
                  <a
                    key={s.href}
                    href={s.href}
                    role="menuitem"
                    className="nav-dd-item"
                    style={{ '--i': i }}
                    onClick={() => setDdOpen(false)}
                  >
                    <span className="ic">{s.icon}</span>
                    <span className="body">
                      <span className="t">{s.title} <span className="cn">{s.cn}</span></span>
                      <span className="d">{s.desc}</span>
                    </span>
                    <span className="arr">
                      <Icon.arrowUR style={{width:12,height:12}}/>
                    </span>
                  </a>
                ))}
                <a href="#services" className="nav-dd-foot" onClick={() => setDdOpen(false)}>
                  <span>{t('nav.dd.foot')}</span>
                  <Icon.arrow style={{width:13,height:13}}/>
                </a>
              </div>
            </div>
            <a className="nav-link" href="#process">{t('nav.process')}</a>
            <a className="nav-link" href="#work">{t('nav.work')}</a>
            <a className="nav-link" href="#pricing">{t('nav.pricing')}</a>
            <a className="nav-link" href="/insights/">{t('nav.insights')}</a>
            <a className="nav-link" href="#contact">{t('nav.contact')}</a>
          </div>
          <LangToggle/>
          <a href="/start-project/" className="nav-cta">
            {t('nav.start')}
            <Icon.arrow style={{width:14,height:14}}/>
          </a>
          <button
            type="button"
            className="nav-burger"
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </nav>

      {/* Mobile slide-down menu */}
      <div className={'mobile-menu' + (menuOpen ? ' is-open' : '')} aria-hidden={!menuOpen}>
        <div className="mobile-menu-inner">
          <div className={'mobile-svc' + (mobileSvcOpen ? ' is-open' : '')}>
            <button
              type="button"
              className="mobile-svc-trigger"
              aria-expanded={mobileSvcOpen}
              onClick={() => setMobileSvcOpen(o => !o)}
            >
              <span>{t('nav.services')}<span className="cn">服务</span></span>
              <svg className="chev" viewBox="0 0 12 8" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <path d="M1 1l5 5 5-5"/>
              </svg>
            </button>
            <div className="mobile-svc-list">
              {services.map(s => (
                <a key={s.href} href={s.href} onClick={close}>
                  <span className="ic">{s.icon}</span>
                  <span className="body">
                    <span className="t">{s.title}</span>
                    <span className="d">{s.desc}</span>
                  </span>
                </a>
              ))}
            </div>
          </div>
          <a href="#process" onClick={close}>{t('nav.process')}<span className="cn">流程</span></a>
          <a href="#work" onClick={close}>{t('nav.work')}<span className="cn">专长</span></a>
          <a href="#pricing" onClick={close}>{t('nav.pricing')}<span className="cn">价格</span></a>
          <a href="/insights/" onClick={close}>{t('nav.insights')}<span className="cn">见解</span></a>
          <a href="#contact" onClick={close}>{t('nav.contact')}<span className="cn">联系</span></a>
          <LangToggle/>
          <a href="/start-project/" className="mobile-cta" onClick={close}>
            {t('nav.start')}
            <Icon.arrow style={{width:16,height:16}}/>
          </a>
          <div className="mobile-menu-foot">
            <a href="mailto:666websitepro@gmail.com">666websitepro@gmail.com</a>
            <a href="https://api.whatsapp.com/send?phone=60164688686">WhatsApp +60 16-468 8686</a>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
window.Nav = Nav;
window.LangToggle = LangToggle;