// Header — floating blurred nav pill, centered
const LANGS = [
  { code: "en",  label: "EN"  },
  { code: "fr",  label: "FR"  },
  { code: "dar", label: "DAR" },
  { code: "ar",  label: "AR"  },
];

const NAV_ITEMS = [
  { key: "services", section: "ag-section-services" },
  { key: "about",    section: "ag-section-about"    },
  { key: "love",     section: "ag-section-reviews", heart: true },
  { key: "process",  section: "ag-section-how"      },
  { key: "works",    section: "ag-section-works"    },
  { key: "pricing",  section: "ag-section-pricing"  },
  { key: "blog",     href: "https://blog.wablan.com/blog" },
];

const HeartIcon = () => (
  <svg viewBox="0 0 16 16" width="12" height="12" fill="#f97316" aria-hidden="true" style={{ flexShrink: 0 }}>
    <path d="M8 13.7C7.6 13.4 1 9.2 1 5.5 1 3.6 2.6 2 4.5 2c1 0 2 .5 2.7 1.3L8 4.2l.8-.9C9.5 2.5 10.5 2 11.5 2 13.4 2 15 3.6 15 5.5c0 3.7-6.6 7.9-7 8.2z"/>
  </svg>
);

const Header = ({ onCTA, onNavigate = () => {}, lang = "en", setLang = () => {} }) => {
  const [active,      setActive]      = React.useState("");
  const [langOpen,    setLangOpen]    = React.useState(false);

  // close dropdown on outside click
  React.useEffect(() => {
    if (!langOpen) return;
    const close = (e) => {
      if (!e.target.closest(".ag-header__lang")) setLangOpen(false);
    };
    document.addEventListener("mousedown", close);
    return () => document.removeEventListener("mousedown", close);
  }, [langOpen]);

  return (
    <header className="ag-header" id="ag-top">
      <nav className="ag-header__inner">
        <a
          className="ag-header__logo"
          onClick={() => {
            setActive("Home");
            document.getElementById("ag-section-home")?.scrollIntoView({ behavior: "smooth", block: "start" });
          }}
        >
          <img src="assets/logo-mark.png" alt="Aigocy" className="ag-header__logo-img" />
        </a>

        <ul className="ag-header__menu">
          {NAV_ITEMS.map((it) => (
            <li key={it.key}>
              <a
                className={"ag-header__link" + (active === it.key ? " is-active" : "")}
                onClick={(e) => {
                  e.preventDefault();
                  setActive(it.key);
                  if (it.href) { window.open(it.href, '_blank'); }
                  else if (it.page) { onNavigate(it.page); }
                  else { document.getElementById(it.section)?.scrollIntoView({ behavior: "smooth", block: "start" }); }
                }}
                style={{ display: "inline-flex", alignItems: "center", gap: 5 }}
              >
                {it.heart && <HeartIcon />}
                {t('navbar.' + it.key, lang)}
              </a>
            </li>
          ))}
        </ul>

        <div className="ag-header__actions">
          {/* Language switcher */}
          <div className="ag-header__lang">
            <button
              type="button"
              className="ag-header__lang-btn"
              onClick={() => setLangOpen(!langOpen)}
              aria-expanded={langOpen}
              aria-label="Change language"
            >
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <circle cx="12" cy="12" r="10"/>
                <line x1="2" y1="12" x2="22" y2="12"/>
                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
              </svg>
              <span className="ag-header__lang-current">{lang.toUpperCase()}</span>
              <svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ transition: "transform 160ms ease", transform: langOpen ? "rotate(180deg)" : "rotate(0deg)" }}>
                <polyline points="6,9 12,15 18,9"/>
              </svg>
            </button>
            {langOpen && (
              <div className="ag-header__lang-dropdown" role="listbox" aria-label="Select language">
                {LANGS.map((l) => (
                  <button
                    key={l.code}
                    type="button"
                    role="option"
                    aria-selected={lang === l.code}
                    className={"ag-header__lang-opt" + (lang === l.code ? " is-active" : "")}
                    onClick={() => { window.analytics?.languageSwitch(l.code); setLang(l.code); setLangOpen(false); }}
                  >
                    {l.label === "DAR" ? "دارجة" : l.label === "FR" ? "Français" : l.label === "AR" ? "العربية" : "English"}
                    <span className="ag-header__lang-code">{l.label}</span>
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* Login — always visible; login.html auto-redirects if already signed in */}
          <Button variant="light" onClick={() => window.location.href = 'login.html'}>{t('navbar.login', lang)}</Button>

          {/* Book a call */}
          <Button variant="dark" onClick={onCTA}>{t('navbar.bookCall', lang)}</Button>
        </div>
      </nav>
    </header>
  );
};

window.Header = Header;