/* Top Nav — sticky pill, persistent across the site */

const TopNav = ({ lang, theme, onTheme, onLang, onCTA }) => {
  const isAR = lang === "ar";
  const [scrolled, setScrolled] = React.useState(false);

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

  const links = isAR ? [
  ["#problem", "المشكلة"],
  ["#what", "ما نفعله"],
  ["#tryit", "جرّب"],
  ["#proof", "نتائج"],
  ["#pricing", "الأسعار"],
  ["#faq", "أسئلة"]] :
  [
  ["#problem", "Problem"],
  ["#what", "What we do"],
  ["#tryit", "Try it"],
  ["#proof", "Proof"],
  ["#pricing", "Pricing"],
  ["#faq", "FAQ"]];


  return (
    <nav className={`topnav ${scrolled ? "scrolled" : ""}`}>
      <div className="topnav-logo">
        <Wordmark size={24} gap={9} />
      </div>

      <div className="topnav-links">
        {links.map(([href, label]) =>
        <a key={href} href={href}>{label}</a>
        )}
      </div>

      <div className="topnav-right">
        <button className="nav-icon-btn" onClick={() => onLang(lang === "en" ? "ar" : "en")} aria-label="Toggle language">
          {lang === "en" ? "AR" : "EN"}
        </button>
        <button className="nav-icon-btn" onClick={() => onTheme(theme === "light" ? "dark" : "light")} aria-label="Toggle theme">
          {theme === "light" ? "◐" : "◑"}
        </button>
        <button className="nav-cta" onClick={onCTA}>
          <span className="dot"></span>
          {isAR ? "احجز مكالمة" : "Book a call"}
        </button>
      </div>
    </nav>);

};

window.TopNav = TopNav;