// Mobile slide-in menu — mirrors the desktop nav structure: Shop with the
// Anlass entries (Layer 1) under it, then the content pages. Geschmackswelten
// (Layer 2) live on the Collection page itself as the round boxes, so the
// menu stays scannable. Language toggle at the bottom.
function MobileMenu({ open, onClose, onNav, onSearch }) {
  const go = (v, opts) => { onClose(); onNav(v, opts); };
  return (
    <div className={`mmenu${open ? " open" : ""}`} aria-hidden={!open}>
      <div className="mmenu__top">
        <div className="hdr__logo" onClick={() => go("home")} role="button" aria-label="Zur Startseite">
          <Logo className="mmenu__logo-mark" />
        </div>
        <button className="iconbtn" onClick={onClose} aria-label="Schliessen"><Icon name="x" size={22} /></button>
      </div>
      <nav>
        <span className="mmenu__group">{t("nav.shop")}</span>
        <a onClick={() => go("collection")}>{t("mega.all")}</a>
        {TAXONOMY.anlass.map((a) => (
          <a key={a.key} className="mmenu__sub" onClick={() => go("collection", { anlass: a.key })}>
            {taxLabel("anlass", a.key)}
          </a>
        ))}
        <span className="mmenu__group">{t("mega.more")}</span>
        <a onClick={() => go("produzenten")}>{t("nav.producers")}</a>
        <a onClick={() => go("stories")}>{t("nav.stories")}</a>
        <a onClick={() => go("about")}>{t("nav.about")}</a>
        <a onClick={() => go("geschaeftskunden")}>{t("announce.b2b")}</a>
        <a onClick={() => go("account")}>{t("nav.account")}</a>
      </nav>
      <div className="mmenu__foot">
        <div className="lang-switch lang-switch--menu" role="group" aria-label="Sprache">
          <button className={window.AG_LANG === "de" ? "on" : ""} onClick={() => window.setLang("de")}>DE</button>
          <span aria-hidden="true">/</span>
          <button className={window.AG_LANG === "en" ? "on" : ""} onClick={() => window.setLang("en")}>EN</button>
        </div>
        <Button variant="secondary" size="md" block onClick={() => { onClose(); onSearch(); }}>
          <Icon name="search" size={18} /> {t("nav.search")}
        </Button>
      </div>
    </div>
  );
}
Object.assign(window, { MobileMenu });