// HeaderAlt.jsx — sticky header with mobile burger + full-screen overlay menu

const altHeaderStyles = {
  wrap: {
    position: "sticky", top: 0, zIndex: 50,
    background: "rgba(255,255,255,0.86)",
    backdropFilter: "blur(14px)",
    WebkitBackdropFilter: "blur(14px)",
    borderBottom: "1px solid var(--border)",
  },
  inner: { height: 84, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 },
  left: { display: "flex", alignItems: "center", gap: 36, minWidth: 0 },
  logo: { height: 44, width: "auto" },
  logoMobile: { height: 32, width: "auto" },
  nav: { display: "flex", gap: 36, alignItems: "center" },
  navLink: (active) => ({
    fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 13,
    color: active ? "var(--gol-navy-800)" : "var(--fg-muted)",
    padding: "8px 0",
    position: "relative",
    transition: "color 140ms",
  }),
  navUnderline: { position: "absolute", bottom: 0, left: 0, right: 0, height: 1.5, background: "var(--gol-gold-500)" },
  right: { display: "flex", alignItems: "center", gap: 10 },
  langChipButton: (active) => ({
    background: "none",
    border: "none",
    padding: 0,
    cursor: "pointer",
    color: active ? "var(--gol-navy-800)" : "var(--fg-muted)",
    fontFamily: "var(--font-mono)",
    fontSize: 11,
    fontWeight: active ? 600 : 400,
    letterSpacing: "0.08em",
  }),
  langChip: {
    display: "flex", alignItems: "center", gap: 6,
    padding: "5px 10px", border: "1px solid var(--border)", borderRadius: 8,
    fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-muted)",
    letterSpacing: "0.08em",
  },
  burger: {
    width: 44, height: 44,
    background: "transparent",
    border: "1px solid var(--slate-300)",
    borderRadius: 10,
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    cursor: "pointer",
    color: "var(--fg)",
  },

  /* Mobile overlay */
  overlay: (open) => ({
    position: "fixed", inset: 0, zIndex: 100,
    background: "var(--gol-navy-950)",
    color: "#fff",
    display: "flex", flexDirection: "column",
    transform: open ? "translateX(0)" : "translateX(100%)",
    transition: "transform 320ms cubic-bezier(0.22,1,0.36,1)",
    overflowY: "auto",
  }),
  overlayTop: {
    display: "flex", alignItems: "center", justifyContent: "space-between",
    padding: "20px 24px",
    borderBottom: "1px solid rgba(255,255,255,0.08)",
  },
  overlayClose: {
    width: 44, height: 44,
    background: "transparent",
    border: "1px solid rgba(255,255,255,0.16)",
    borderRadius: 10,
    color: "#fff",
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    cursor: "pointer",
  },
  overlayNav: {
    display: "flex", flexDirection: "column",
    padding: "16px 24px 24px",
  },
  overlayLink: (active) => ({
    display: "flex", alignItems: "center", justifyContent: "space-between",
    padding: "20px 0",
    fontFamily: "var(--font-display)", fontWeight: 500,
    fontSize: 26,
    letterSpacing: "-0.01em",
    color: active ? "var(--gol-gold-400)" : "#fff",
    borderBottom: "1px solid rgba(255,255,255,0.08)",
    textAlign: "left",
    background: "transparent", border: "none",
    cursor: "pointer",
    width: "100%",
  }),
  overlayLinkArrow: { color: "rgba(255,255,255,0.4)" },
  overlayFooter: {
    marginTop: "auto",
    padding: "24px",
    borderTop: "1px solid rgba(255,255,255,0.08)",
    display: "flex", flexDirection: "column", gap: 14,
  },
  overlayLangRow: {
    display: "flex", gap: 8,
    fontFamily: "var(--font-mono)", fontSize: 13,
    color: "rgba(255,255,255,0.55)",
    letterSpacing: "0.08em",
  },
};

function HeaderAlt({ route, setRoute }) {
  const isMobile = window.useMobile ? window.useMobile(760) : false;
  const [lang, setLang] = window.useLang();
  const [open, setOpen] = React.useState(false);

  // Lock body scroll while overlay is open
  React.useEffect(() => {
    if (open) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  // Close overlay when route changes
  const navigate = (id) => { setRoute && setRoute(id); setOpen(false); };

  const navItems = [
    [t("О компании", "Компания туралы"), "about"],
    [t("Контакты", "Байланыс"), "contacts"],
  ];

  const scrollToConsultation = () => {
    window.open("https://wa.me/77089098810", "_blank", "noopener,noreferrer");
    setOpen(false);
  };

  return (
    <>
      <header style={altHeaderStyles.wrap}>
        <div className="container" style={altHeaderStyles.inner}>
          <div style={altHeaderStyles.left}>
            <a href="#" style={{ display: "flex" }} onClick={(e) => { e.preventDefault(); navigate("main"); }}>
              <img src="assets/GOL-Blue.svg" alt="Gold Orient Logistics" style={isMobile ? altHeaderStyles.logoMobile : altHeaderStyles.logo} />
            </a>
            {!isMobile && (
              <nav style={altHeaderStyles.nav}>
                {navItems.map(([label, id]) => (
                  <a key={id} href={`#${id}`}
                     style={altHeaderStyles.navLink(route === id)}
                     onClick={(e) => { e.preventDefault(); navigate(id); }}>
                    {label}
                    {route === id && <span style={altHeaderStyles.navUnderline} />}
                  </a>
                ))}
              </nav>
            )}
          </div>
          <div style={altHeaderStyles.right}>
            {!isMobile && (
              <>
                <span style={altHeaderStyles.langChip}>
                  <button style={altHeaderStyles.langChipButton(lang === "ru")} onClick={() => setLang("ru")}>RU</button>
                  <span style={{ opacity: 0.4 }}>·</span>
                  <button style={altHeaderStyles.langChipButton(lang === "kz")} onClick={() => setLang("kz")}>KZ</button>
                </span>
                <button
                  className="btn btn--primary btn--sm"
                  onClick={scrollToConsultation}
                >
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347Z" />
                    <path d="M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.892c0 2.096.549 4.14 1.595 5.945L0 24l6.335-1.652a11.882 11.882 0 0 0 5.71 1.447h.006c6.585 0 11.946-5.336 11.949-11.896 0-3.176-1.24-6.165-3.495-8.411m-8.475 18.297h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.978 1.005-3.638-.235-.374a9.86 9.86 0 0 1-1.516-5.27c0-5.455 4.454-9.89 9.93-9.89a9.86 9.86 0 0 1 7.022 2.9 9.83 9.83 0 0 1 2.909 6.998c-.002 5.456-4.455 9.89-9.931 9.89" />
                  </svg>
                  {t("Связаться с нами", "Бізбен байланысу")}
                </button>
              </>
            )}
            {isMobile && (
              <button
                style={altHeaderStyles.burger}
                onClick={() => setOpen(true)}
                aria-label="Меню"
              >
                <Icon name="menu" size={22} strokeWidth={1.75} />
              </button>
            )}
          </div>
        </div>
      </header>

      {/* Full-screen mobile overlay */}
      {isMobile && (
        <div style={altHeaderStyles.overlay(open)} aria-hidden={!open}>
          <div style={altHeaderStyles.overlayTop}>
            <img src="assets/GOL-White.svg" alt="Gold Orient Logistics" style={{ height: 32 }} />
            <button
              style={altHeaderStyles.overlayClose}
              onClick={() => setOpen(false)}
              aria-label="Закрыть меню"
            >
              <Icon name="x" size={22} strokeWidth={2} />
            </button>
          </div>

          <nav style={altHeaderStyles.overlayNav}>
            <button style={altHeaderStyles.overlayLink(route === "main")} onClick={() => navigate("main")}>
              {t("Главная", "Басты бет")}
              <span style={altHeaderStyles.overlayLinkArrow}><Icon name="arrow-up-right" size={20} /></span>
            </button>
            {navItems.map(([label, id]) => (
              <button key={id} style={altHeaderStyles.overlayLink(route === id)} onClick={() => navigate(id)}>
                {label}
                <span style={altHeaderStyles.overlayLinkArrow}><Icon name="arrow-up-right" size={20} /></span>
              </button>
            ))}
          </nav>

          <div style={altHeaderStyles.overlayFooter}>
            <button className="btn btn--gold btn--lg" onClick={scrollToConsultation} style={{ justifyContent: "center", width: "100%" }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347Z" />
                <path d="M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.892c0 2.096.549 4.14 1.595 5.945L0 24l6.335-1.652a11.882 11.882 0 0 0 5.71 1.447h.006c6.585 0 11.946-5.336 11.949-11.896 0-3.176-1.24-6.165-3.495-8.411m-8.475 18.297h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.978 1.005-3.638-.235-.374a9.86 9.86 0 0 1-1.516-5.27c0-5.455 4.454-9.89 9.93-9.89a9.86 9.86 0 0 1 7.022 2.9 9.83 9.83 0 0 1 2.909 6.998c-.002 5.456-4.455 9.89-9.931 9.89" />
              </svg>
              {t("Связаться с нами", "Бізбен байланысу")}
            </button>
            <div style={altHeaderStyles.overlayLangRow}>
              <button style={altHeaderStyles.langChipButton(lang === "ru")} onClick={() => setLang("ru")}>RU</button>
              <span style={{ opacity: 0.4 }}>·</span>
              <button style={altHeaderStyles.langChipButton(lang === "kz")} onClick={() => setLang("kz")}>KZ</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

window.HeaderAlt = HeaderAlt;