function Nav() {
  const { t } = useLang();
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  const links = [
    { href: '#features',  label: t.nav.features },
    { href: '#community', label: t.nav.community },
    { href: '#rewards',   label: t.nav.rewards },
    { href: '#ai',        label: t.nav.ai },
    { href: '#pricing',   label: t.nav.pricing },
  ];

  return (
    <header className={cx(
      'sticky top-0 z-40 transition-all duration-300',
      scrolled ? 'bg-white/85 backdrop-blur-md border-b border-ink-100' : 'bg-white/0 border-b border-transparent'
    )}>
      <div className="max-w-[1200px] mx-auto px-6 md:px-10 h-16 flex items-center justify-between gap-4">
        <a href="#top" className="flex items-center gap-2.5 focus-ring rounded-md">
          <IconLogo size={30}/>
          <div className="leading-tight">
            <div className="text-[15px] font-extrabold text-ink-900 tracking-tight">스마트 캠퍼스 봇</div>
            <div className="text-[10px] font-semibold uppercase tracking-[0.14em] text-ink-400">Smart Campus Bot</div>
          </div>
        </a>

        <nav className="hidden lg:flex items-center gap-1">
          {links.map(l => (
            <a key={l.href} href={l.href}
               className="px-3 h-9 inline-flex items-center rounded-md text-[13.5px] font-semibold text-ink-600 hover:text-hanyang-700 hover:bg-hanyang-50 transition-colors">
              {l.label}
            </a>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <div className="hidden md:block"><LangToggle /></div>
          <a href="https://hanyang-smart-auto-bot.vercel.app/" target="_blank" rel="noopener" className="hidden sm:inline-flex">
            <Button variant="ghost" size="sm">{t.nav.login}</Button>
          </a>
          <a href="https://hanyang-smart-auto-bot.vercel.app/" target="_blank" rel="noopener" className="hidden sm:inline-flex">
            <Button variant="default" size="sm">
              {t.nav.cta}
              <IconArrow size={14}/>
            </Button>
          </a>
          <button
            onClick={() => setOpen(o => !o)}
            className="lg:hidden inline-flex items-center justify-center h-10 w-10 rounded-md border border-ink-200 text-ink-700 hover:bg-ink-50">
            {open ? <IconClose/> : <IconMenu/>}
          </button>
        </div>
      </div>

      {open && (
        <div className="lg:hidden border-t border-ink-100 bg-white">
          <div className="px-6 py-4 flex flex-col gap-1">
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={() => setOpen(false)}
                 className="px-3 h-11 inline-flex items-center rounded-md text-[15px] font-semibold text-ink-700 hover:bg-hanyang-50 hover:text-hanyang-700">
                {l.label}
              </a>
            ))}
            <div className="mt-3 flex items-center justify-between">
              <LangToggle />
              <a href="https://hanyang-smart-auto-bot.vercel.app/" target="_blank" rel="noopener">
                <Button variant="default" size="sm">{t.nav.cta}<IconArrow size={14}/></Button>
              </a>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}

Object.assign(window, { Nav });