/* ============================================================
   STREAM WITH LIEN — Nav, Footer, Language toggle
   ============================================================ */

/* ---------- Language toggle ---------- */
function LangToggle({ lang, setLang, compact }) {
  return (
    <div className={"langtoggle" + (compact ? " langtoggle--compact" : "")} role="group" aria-label="Language">
      <button className={lang === "nl" ? "on" : ""} onClick={() => setLang("nl")}>NL</button>
      <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
    </div>
  );
}

/* ---------- Top navigation ---------- */
function Nav({ route, go, lang, setLang, live, ui, navItems, social }) {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const navTo = (id) => { go(id); setOpen(false); };

  return (
    <>
      <header className={"nav" + (scrolled ? " nav--scrolled" : "")}>
        <div className="nav__inner wrap">
          <button className="nav__brand" onClick={() => navTo("home")} aria-label="Stream with Lien — home">
            <img src={(window.__resources && window.__resources.logo) || "assets/logo-wordmark.png"} alt="Stream with Lien" />
          </button>

          <nav className="nav__links">
            {navItems.map(it => (
              <button key={it.id}
                className={"nav__link" + (route === it.id ? " active" : "")}
                onClick={() => navTo(it.id)}>
                {it.label}
              </button>
            ))}
          </nav>

          <div className="nav__right">
            <LangToggle lang={lang} setLang={setLang} compact />
            <button className="nav__shop" onClick={() => navTo("webshop")}>
              <Icon name="bag" size={18} />{ui.shop}
            </button>
            <a className="btn btn--primary btn--sm nav__live" href={social.twitch} target="_blank" rel="noopener noreferrer">
              <Icon name="twitch" size={18} />{ui.live}
            </a>
            <button className="nav__burger" onClick={() => setOpen(true)} aria-label={ui.menu}>
              <Icon name="menu" size={24} />
            </button>
          </div>
        </div>
      </header>

      {/* Mobile drawer */}
      <div className={"drawer" + (open ? " drawer--open" : "")} aria-hidden={!open}>
        <div className="drawer__panel">
          <div className="drawer__top">
            <LiveBadge live={live} ui={ui} />
            <button className="drawer__close" onClick={() => setOpen(false)} aria-label={ui.close}>
              <Icon name="close" size={24} />
            </button>
          </div>
          <nav className="drawer__links">
            {navItems.map(it => (
              <button key={it.id}
                className={"drawer__link" + (route === it.id ? " active" : "")}
                onClick={() => navTo(it.id)}>
                {it.label}<Icon name="arrowUpRight" size={20} />
              </button>
            ))}
          </nav>
          <div className="drawer__foot">
            <div className="flex" style={{ gap: 12, marginBottom: 18 }}>
              <a className="btn btn--primary" style={{ flex: 1, justifyContent: "center" }} href={social.twitch} target="_blank" rel="noopener noreferrer">
                <Icon name="twitch" size={18} />Twitch
              </a>
              <button className="btn" style={{ flex: 1, justifyContent: "center" }} onClick={() => navTo("webshop")}>
                <Icon name="bag" size={18} />{ui.shop}
              </button>
            </div>
            <div className="flex" style={{ justifyContent: "space-between", alignItems: "center" }}>
              <SocialRow social={social} />
              <LangToggle lang={lang} setLang={setLang} />
            </div>
          </div>
        </div>
        <div className="drawer__scrim" onClick={() => setOpen(false)}></div>
      </div>
    </>
  );
}

/* ---------- Footer ---------- */
function Footer({ go, lang, f, ui, navItems, social }) {
  return (
    <footer className="footer">
      <div className="wrap footer__inner">
        <div className="footer__brand">
          <img src={(window.__resources && window.__resources.logo) || "assets/logo-wordmark.png"} alt="Stream with Lien" className="footer__logo" />
          <p className="footer__tag">{f.tag}</p>
          <SocialRow social={social} big />
        </div>

        <div className="footer__col">
          <h4 className="footer__h">{f.explore}</h4>
          {navItems.map(it => (
            <button key={it.id} className="footer__link" onClick={() => go(it.id)}>{it.label}</button>
          ))}
        </div>

        <div className="footer__col">
          <h4 className="footer__h">{f.connect}</h4>
          <a className="footer__link" href={social.twitch} target="_blank" rel="noopener noreferrer">Twitch</a>
          <a className="footer__link" href={social.discord} target="_blank" rel="noopener noreferrer">Discord</a>
          <button className="footer__link" onClick={() => go("webshop")}>{ui.shop}</button>
          <a className="footer__link" href={social.youtube} target="_blank" rel="noopener noreferrer">YouTube</a>
        </div>

        <div className="footer__cta sticker">
          <h4 className="footer__cta-h">{ui.watchLive}</h4>
          <div className="flex" style={{ gap: 10, flexWrap: "wrap" }}>
            <Btn variant="primary" iconLeft="twitch" href={social.twitch}>Twitch</Btn>
            <Btn variant="ink" iconLeft="discord" href={social.discord}>Discord</Btn>
          </div>
        </div>
      </div>

      <div className="wrap footer__bottom">
        <span>{f.legal}</span>
        <button className="footer__top" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}>
          {f.backTop}<Icon name="arrowUp" size={16} />
        </button>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Footer, LangToggle });