function LangSwitcher() {
  const isEn = window.location.pathname.startsWith('/en');
  return (
    <a
      href={isEn ? '/' : '/en/'}
      style={{
        fontFamily: "var(--font-sans)",
        fontSize: 12,
        letterSpacing: "0.18em",
        textTransform: "uppercase",
        color: "var(--text-muted)",
        textDecoration: "none",
        padding: "4px 0",
        borderBottom: "1px solid transparent",
        transition: "border-color .3s, color .3s",
      }}
      onMouseEnter={(e) => { e.currentTarget.style.borderBottomColor = "var(--coffee)"; e.currentTarget.style.color = "var(--coffee)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.borderBottomColor = "transparent"; e.currentTarget.style.color = "var(--text-muted)"; }}
    >
      {isEn ? 'ES' : 'EN'}
    </a>
  );
}

// Top navigation — minimal, sticky, with subtle scroll behavior
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  // Lock body scroll when the mobile menu is open
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  // Close menu on resize back to desktop
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 768) setOpen(false); };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  const links = [
    ["About", "about"],
    ["Bridal Makeup", "bridal-makeup"],
    ["Makeup Team", "makeup-team"],
    ["Masterclasses", "masterclasses"],
  ];

  const go = (id) => {
    setOpen(false);
    requestAnimationFrame(() => {
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    });
  };

  return (
    <>
      <header style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
        background: scrolled || open ? "rgba(244,242,236,0.92)" : "transparent",
        backdropFilter: scrolled || open ? "blur(12px) saturate(120%)" : "none",
        WebkitBackdropFilter: scrolled || open ? "blur(12px) saturate(120%)" : "none",
        borderBottom: scrolled || open ? "1px solid var(--marfil)" : "1px solid transparent",
        transition: "all .4s ease",
      }}>
        <div className="container" style={{
          display: "grid",
          gridTemplateColumns: "1fr auto 1fr",
          alignItems: "center",
          padding: scrolled ? "14px 0" : "22px 0",
          transition: "padding .4s ease",
        }}>
          <nav className="nav-left" style={{ display: "flex", gap: 28, fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--coffee)", fontWeight: 300 }}>
            {/* Mobile hamburger lives here so it sits to the LEFT of the centered logo */}
            <button
              type="button"
              aria-label={open ? t('menuClose') : t('menuOpen')}
              aria-expanded={open}
              aria-controls="mobile-nav"
              className="mobile-menu-toggle"
              onClick={() => setOpen(o => !o)}
              style={{
                display: "none",
                width: 44, height: 44,
                alignItems: "center", justifyContent: "center",
                color: "var(--coffee)",
                marginLeft: -8,
              }}
            >
              <span aria-hidden="true" style={{ position: "relative", width: 22, height: 14, display: "block" }}>
                <span style={{ position: "absolute", left: 0, right: 0, top: 0, height: 1, background: "currentColor", transform: open ? "translateY(6.5px) rotate(45deg)" : "none", transition: "transform .3s ease" }} />
                <span style={{ position: "absolute", left: 0, right: 0, top: 6.5, height: 1, background: "currentColor", opacity: open ? 0 : 1, transition: "opacity .2s ease" }} />
                <span style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: 1, background: "currentColor", transform: open ? "translateY(-6.5px) rotate(-45deg)" : "none", transition: "transform .3s ease" }} />
              </span>
            </button>

            {links.slice(0, 2).map(([l, id]) => (
              <button key={id} onClick={() => go(id)} className="nav-link"
                style={{ color: "inherit", fontFamily: "var(--sans)", padding: "4px 0", borderBottom: "1px solid transparent", transition: "border-color .3s, color .3s" }}
                onMouseEnter={(e)=>{ e.currentTarget.style.borderBottomColor="var(--coffee)"; }}
                onMouseLeave={(e)=>{ e.currentTarget.style.borderBottomColor="transparent"; }}>
                {l}
              </button>
            ))}
          </nav>

          <button onClick={() => go("hero")} aria-label="Ana Paula Celis · Inicio" style={{ display: "flex", alignItems: "center", gap: 12, justifyContent: "center" }}>
            <img
              src={assetBase + "assets/logo/logo-main-2-nav.png"}
              alt="Ana Paula Celis logo"
              style={{ width: 240, height: 70, objectFit: "contain" }}
            />
          </button>

          <nav className="nav-right" style={{ display: "flex", gap: 28, justifyContent: "flex-end", alignItems: "center", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--coffee)", fontWeight: 300 }}>
            {links.slice(2).map(([l, id]) => (
              <button key={id} onClick={() => go(id)}
                style={{ color: "inherit", fontFamily: "var(--sans)", padding: "4px 0", borderBottom: "1px solid transparent", transition: "border-color .3s" }}
                onMouseEnter={(e)=>{ e.currentTarget.style.borderBottomColor="var(--coffee)"; }}
                onMouseLeave={(e)=>{ e.currentTarget.style.borderBottomColor="transparent"; }}>
                {l}
              </button>
            ))}
            <LangSwitcher />
          </nav>

          {/* Compact CTA shown only on mobile, lives in the right column slot */}
          <a
            href="https://wa.me/523320126620"
            target="_blank"
            rel="noreferrer"
            className="mobile-menu-cta"
            style={{
              display: "none",
              justifySelf: "end",
              fontFamily: "var(--font-sans)",
              fontSize: 11,
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              color: "var(--color-ivory)",
              background: "var(--accent)",
              padding: "10px 16px",
              minHeight: 40,
              alignItems: "center",
            }}
          >
            {t('book')}
          </a>
        </div>
      </header>

      {/* Mobile fullscreen menu overlay */}
      <div
        id="mobile-nav"
        role="dialog"
        aria-modal="true"
        aria-hidden={!open}
        style={{
          position: "fixed",
          inset: 0,
          zIndex: 49,
          background: "rgba(244,242,236,0.98)",
          backdropFilter: "blur(20px) saturate(140%)",
          WebkitBackdropFilter: "blur(20px) saturate(140%)",
          transform: open ? "translateY(0)" : "translateY(-100%)",
          opacity: open ? 1 : 0,
          pointerEvents: open ? "auto" : "none",
          transition: "transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s ease",
          display: "flex",
          flexDirection: "column",
          paddingTop: "calc(86px + env(safe-area-inset-top, 0px))",
          paddingLeft: "max(24px, env(safe-area-inset-left, 0px))",
          paddingRight: "max(24px, env(safe-area-inset-right, 0px))",
          paddingBottom: "calc(40px + env(safe-area-inset-bottom, 0px))",
        }}
      >
        <nav style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 24 }}>
          {links.map(([l, id], i) => (
            <button
              key={id}
              onClick={() => go(id)}
              style={{
                textAlign: "left",
                padding: "18px 0",
                fontFamily: "var(--font-display)",
                fontSize: "clamp(34px, 9vw, 48px)",
                fontStyle: i % 2 === 1 ? "italic" : "normal",
                color: i % 2 === 1 ? "var(--rose)" : "var(--coffee)",
                lineHeight: 1.05,
                borderBottom: "1px solid var(--marfil)",
                transform: open ? "translateY(0)" : "translateY(12px)",
                opacity: open ? 1 : 0,
                transition: `transform .5s cubic-bezier(.2,.7,.2,1) ${0.08 * i + 0.1}s, opacity .4s ease ${0.08 * i + 0.1}s`,
              }}
            >
              {l}
            </button>
          ))}
        </nav>

        <div style={{ marginTop: "auto", display: "grid", gap: 16 }}>
          <a
            href="https://wa.me/523320126620"
            target="_blank"
            rel="noreferrer"
            className="btn btn-primary"
            onClick={() => setOpen(false)}
            style={{ width: "100%" }}
          >
            {t('bookWhatsApp')}
          </a>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <p style={{
              margin: 0,
              fontFamily: "var(--font-sans)",
              fontSize: 11,
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              color: "var(--text-muted)",
            }}>
              {t('navLocation')}
            </p>
            <LangSwitcher />
          </div>
        </div>
      </div>
    </>
  );
}

window.Nav = Nav;