function Header() {
  const { lang, t, setLang } = useLang();
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const [active, setActive] = React.useState('home');

  const navItems = [
    { id: 'home', label: t.nav.home },
    { id: 'services', label: t.nav.services },
    { id: 'taboor', label: t.nav.taboor },
    { id: 'about', label: t.nav.about },
    { id: 'contact', label: t.nav.contact },
  ];

  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 24);
      // active section
      const sections = ['home', 'services', 'taboor', 'about', 'contact'];
      const offset = window.innerHeight * 0.4;
      let cur = 'home';
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top <= offset) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const goTo = (id) => {
    setOpen(false);
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 70;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  const toggleLang = () => setLang(lang === 'ar' ? 'en' : 'ar');

  return (
    <header
      className={`fixed top-0 inset-x-0 z-50 transition-all duration-500 ${scrolled ? 'py-3' : 'py-5'}`}
    >
      <div className={`mx-auto max-w-7xl px-5 lg:px-8 transition-all duration-500`}>
        <div className={`flex items-center justify-between gap-4 ${scrolled ? 'glass rounded-2xl px-4 py-2.5' : 'px-1'}`}>
          <button onClick={() => goTo('home')} className="shrink-0">
            <OfuqLogo height={28} />
          </button>

          {/* desktop nav */}
          <nav className="hidden lg:flex items-center gap-8">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => goTo(item.id)}
                className={`nav-link text-[13.5px] font-medium transition-colors ${active === item.id ? 'text-white active' : 'text-white/65 hover:text-white'}`}
              >
                {item.label}
              </button>
            ))}
          </nav>

          <div className="flex items-center gap-2">
            <button
              onClick={toggleLang}
              className="hidden sm:flex items-center gap-2 px-3.5 py-2 rounded-full glass text-[12px] font-medium text-white/85 hover:text-white hover:border-white/20 transition"
              aria-label="Toggle language"
            >
              <I.Globe2 size={14} />
              <span style={{ fontFamily: 'Inter, sans-serif', letterSpacing: '0.04em' }}>{t.langToggle}</span>
            </button>

            <ThemeToggle />

            <button
              onClick={() => goTo('contact')}
              className="hidden md:inline-flex items-center gap-2 px-4 py-2 rounded-full text-[12.5px] font-semibold text-white bg-white/8 border border-white/12 hover:bg-white/14 transition"
            >
              {t.contactCta}
            </button>

            <button
              onClick={() => setOpen(o => !o)}
              className="lg:hidden p-2 rounded-lg glass text-white"
              aria-label="Menu"
            >
              {open ? <I.Close /> : <I.Menu />}
            </button>
          </div>
        </div>

        {/* mobile menu */}
        <div className={`menu-enter lg:hidden mt-2 ${open ? 'open' : ''}`}>
          <div className="glass rounded-2xl p-4 flex flex-col">
            {navItems.map((item) => (
              <button
                key={item.id}
                onClick={() => goTo(item.id)}
                className={`text-start py-3 px-3 rounded-lg text-[14px] transition ${active === item.id ? 'text-white bg-white/5' : 'text-white/70 hover:text-white hover:bg-white/3'}`}
              >
                {item.label}
              </button>
            ))}
            <div className="h-px bg-white/8 my-2" />
            <button
              onClick={toggleLang}
              className="flex items-center gap-2 py-3 px-3 rounded-lg text-[13px] text-white/85 hover:bg-white/5"
            >
              <I.Globe2 size={14} />
              <span style={{ fontFamily: 'Inter, sans-serif' }}>{lang === 'ar' ? 'English' : 'العربية'}</span>
            </button>
            <div className="flex items-center justify-between py-3 px-3 rounded-lg text-[13px] text-white/85 hover:bg-white/5">
              <span style={{ fontFamily: lang === 'ar' ? 'Cairo' : 'Inter' }}>
                {useTheme().theme === 'light' ? (lang === 'ar' ? 'الوضع الليلي' : 'Dark Mode') : (lang === 'ar' ? 'الوضع النهاري' : 'Light Mode')}
              </span>
              <ThemeToggle />
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

window.Header = Header;