// Header with FR/EN switcher — lp-ac design: logo, 3 links, flag toggle,
// "Se connecter" text link, dark rectangular CTA.
const LANG_OPTIONS = [
  { code: "fr", flag: "🇫🇷" },
  { code: "en", flag: "🇬🇧" },
];

const Header = ({ t, lang, setLang }) => {
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "color-mix(in srgb, var(--bg) 90%, transparent)",
      backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)",
      borderBottom: "1px solid var(--line)",
    }}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 64 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 40 }}>
          <a href="#" style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <img src="assets/logo-type-black.png" alt="Shoptimize" style={{ height: 22, width: "auto", display: "block" }} />
          </a>
          <nav className="hide-mobile" style={{ display: "flex", gap: 24, fontSize: 14, color: "var(--fg)" }}>
            <a href="#services">{t.nav.services}</a>
            <a href="#platform">{t.nav.platform}</a>
            {window.SHOW_PRICING && <a href="#/tarifs">{t.nav.pricing}</a>}
          </nav>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          {/* Whole control is one button: clicking anywhere toggles the language */}
          <button
            onClick={() => setLang(lang === "fr" ? "en" : "fr")}
            aria-label={lang === "fr" ? "Switch to English" : "Passer en français"}
            title={lang === "fr" ? "Switch to English" : "Passer en français"}
            style={{
              display: "flex", alignItems: "center", padding: 0,
              border: "1px solid var(--line)", borderRadius: "var(--radius)",
              overflow: "hidden", background: "transparent",
            }}
          >
            {LANG_OPTIONS.map(({ code, flag }) => (
              <span key={code} style={{
                padding: "6px 10px",
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6,
                background: lang === code ? "var(--fg)" : "transparent",
                color: lang === code ? "var(--bg)" : "var(--muted)",
                fontFamily: "'Space Mono', monospace", fontSize: 11, letterSpacing: "0.08em",
                lineHeight: 1.4, width: 60, boxSizing: "border-box",
              }}>
                <span aria-hidden="true">{flag}</span>{code.toUpperCase()}
              </span>
            ))}
          </button>
          <a href="#login" className="hide-mobile" style={{ fontSize: 14, color: "var(--fg)", minWidth: 100, textAlign: "right", display: "inline-block" }}>{t.nav.login}</a>
          <a href="#contact" className="btn btn-dark" style={{ padding: "10px 16px", minWidth: 180 }}>{t.nav.cta} <IconArrow size={14}/></a>
        </div>
      </div>
    </header>
  );
};
window.Header = Header;