/* Top navigation — scroll-aware, language switch, mobile drawer */

function Nav({ lang, setLang, t }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const links = [
    ['#compare', t.nav.why],
    ['#services', t.nav.integrations],
    ['#partners', t.nav.partners],
    ['#pricing', t.nav.pricing],
    ['#faq', t.nav.faq],
  ];

  return (
    <nav className={"nav" + (scrolled ? " is-scrolled" : "") + (open ? " is-open" : "")}>
      <a href="#hero" className="nav-logo" aria-label="لمحة LAMHA" onClick={() => setOpen(false)}>
        <LamhaLogo height={38} kind="lockup" />
      </a>

      <div className="nav-actions">
        <button
          className="lang-switch"
          onClick={() => setLang(lang === 'ar' ? 'en' : 'ar')}
          aria-label="Switch language"
        >
          <span className={lang === 'ar' ? 'active' : ''}>AR</span>
          <span className="sep">/</span>
          <span className={lang === 'en' ? 'active' : ''}>EN</span>
        </button>
        <a href="https://app2.lamha.sa/" className="btn btn-ghost nav-login">{t.nav.login}</a>
        <a href="https://app2.lamha.sa/register" className="btn btn-primary nav-register">
          {t.nav.register}
          <span className="arrow">{Icons.arrowSm}</span>
        </a>
        <button
          className="nav-toggle"
          aria-label={t.nav.menu}
          aria-expanded={open}
          onClick={() => setOpen(!open)}
        >
          <span></span><span></span><span></span>
        </button>
      </div>

      {open && <div className="nav-drawer">
        <ul>
          {links.map(([href, label]) => (
            <li key={href}><a href={href} onClick={() => setOpen(false)}>{label}</a></li>
          ))}
        </ul>
        <div className="nav-drawer-actions">
          <a href="https://app2.lamha.sa/" className="btn btn-ghost">{t.nav.login}</a>
          <a href="https://app2.lamha.sa/register" className="btn btn-primary">
            {t.nav.register}
            <span className="arrow">{Icons.arrowSm}</span>
          </a>
        </div>
      </div>}
    </nav>
  );
}

window.Nav = Nav;