/* ============================================================
   TAKEBOX — shared bits for Showroom.html / Produkt.html
   Exposes window.TB = { useLang, withLang, UI, Header, Footer }
   ============================================================ */
const { useState, useEffect } = React;

/* language registry — mirrors lang.js (cs+en translated; rest fall back to EN) */
const TB_LANGS = [
  { code: "cs", label: "Čeština" }, { code: "en", label: "English" },
  { code: "de", label: "Deutsch" }, { code: "es", label: "Español" }, { code: "fr", label: "Français" },
  { code: "it", label: "Italiano" }, { code: "pl", label: "Polski" }, { code: "pt", label: "Português" },
  { code: "ru", label: "Русский" }, { code: "uk", label: "Українська" }, { code: "zh", label: "中文" }, { code: "ar", label: "العربية", rtl: true }
];
const TB_BYCODE = {}; TB_LANGS.forEach((l) => { TB_BYCODE[l.code] = l; });
const TB_RTL = { ar: 1 };
function dl(lang) { return lang === "cs" ? "cs" : "en"; }  // display dictionary lang

function tbEnabled() {
  try {
    var pub = (window.TBStore && window.TBStore.published && window.TBStore.published()) || {};
    var arr = pub.languages && pub.languages.enabled;
    if (Array.isArray(arr) && arr.length) {
      var out = arr.filter((c) => TB_BYCODE[c]);
      if (out.indexOf("cs") < 0) out.unshift("cs");
      return out;
    }
  } catch (e) {}
  return ["cs", "en"];
}
function tbDetect() {
  var en = tbEnabled(), pref = [];
  try { pref = (navigator.languages && navigator.languages.length) ? navigator.languages : [navigator.language || ""]; } catch (e) {}
  for (var i = 0; i < pref.length; i++) {
    var c = (pref[i] || "").toLowerCase().split("-")[0];
    if (TB_BYCODE[c] && en.indexOf(c) >= 0) return c;
  }
  return en.indexOf("en") >= 0 ? "en" : "cs";
}

function readLang() {
  try {
    var q = new URLSearchParams(location.search).get("lang");
    if (q && TB_BYCODE[q]) return q;
    var ls = localStorage.getItem("tb-lang");
    if (ls && TB_BYCODE[ls]) return ls;
  } catch (e) {}
  return tbDetect();
}

function useLang() {
  const [lang, set] = useState(readLang());
  useEffect(() => {
    document.documentElement.lang = lang;
    document.documentElement.dir = TB_RTL[lang] ? "rtl" : "ltr";
  }, [lang]);
  function setLang(l) {
    if (!TB_BYCODE[l]) l = "cs";
    set(l);
    try { localStorage.setItem("tb-lang", l); } catch (e) {}
    try { var u = new URL(location.href); u.searchParams.set("lang", l); history.replaceState(null, "", u); } catch (e) {}
  }
  return [lang, setLang];
}

function withLang(href, lang) {
  var hash = "", h = href.indexOf("#");
  if (h >= 0) { hash = href.slice(h); href = href.slice(0, h); }
  return href + (href.indexOf("?") >= 0 ? "&" : "?") + "lang=" + lang + hash;
}

const UI = {
  home: { cs: "Domů", en: "Home" },
  showroom: { cs: "Showroom", en: "Showroom" },
  options: { cs: "Možnosti výroby", en: "Build options" },
  process: { cs: "Jak to funguje", en: "How it works" },
  inquiry: { cs: "Poptávka", en: "Inquiry" },
  cta: { cs: "Poptat case", en: "Request a case" },
  all: { cs: "Vše", en: "All" },
  sr_eyebrow: { cs: "Showroom · produkty", en: "Showroom · products" },
  sr_title: { cs: "Naše case systémy", en: "Our case systems" },
  sr_lead: { cs: "Vyberte typ řešení. Každý case vyrábíme na míru — fotky slouží jako ukázka konstrukce a možností.", en: "Pick a type of solution. Every case is custom-built — photos illustrate the construction and options." },
  detail: { cs: "Detail", en: "Detail" },
  specs: { cs: "Specifikace", en: "Specifications" },
  related: { cs: "Související produkty", en: "Related products" },
  back: { cs: "Zpět na showroom", en: "Back to showroom" },
  request_similar: { cs: "Poptat podobné řešení", en: "Request a similar build" },
  gallery: { cs: "Galerie", en: "Gallery" },
  category: { cs: "Kategorie", en: "Category" },
  not_found: { cs: "Produkt nenalezen", en: "Product not found" },
  foot_tag: { cs: "Zakázková výroba odolných transportních case a kufrů na míru.", en: "Custom manufacture of rugged transport cases and trunks, made to measure." }
};

function ArrowUR() {
  return <svg style={{ width: 16, height: 16 }}><use href="#i-arrow-ur" /></svg>;
}
function ArrowR() {
  return <svg style={{ width: 17, height: 17 }}><use href="#i-arrow-right" /></svg>;
}

function Header({ lang, setLang }) {
  const L = dl(lang);
  const w = (h) => withLang(h, lang);
  const [langOpen, setLangOpen] = React.useState(false);
  // Base state: CS + EN active, the rest "brzy" (soon) until translations exist.
  const DISPLAY = ["cs", "en", "de", "es", "it", "ru"];
  const ACTIVE = ["cs", "en"];
  React.useEffect(() => {
    if (!langOpen) return;
    const close = () => setLangOpen(false);
    document.addEventListener("click", close);
    return () => document.removeEventListener("click", close);
  }, [langOpen]);
  return (
    <React.Fragment>
      <div className="utility">
        <div className="wrap">
          <div className="uleft">
            <span className="udot">●</span>
            <span className="hide-sm">{L === "en" ? "Custom-built transport cases · CZ & EU" : "Zakázková výroba transportních case · ČR & EU"}</span>
          </div>
          <div className="uright">
            <a href="tel:+420777559558">+420 777 559 558</a>
            <a href="mailto:info@takebox.eu" className="hide-sm">info@takebox.eu</a>
            <div className="u-langs" data-open={langOpen ? "true" : "false"} aria-label="Language">
              <button type="button" className="u-lang-trigger" aria-haspopup="true" aria-expanded={langOpen}
                onClick={(e) => { e.stopPropagation(); setLangOpen(!langOpen); }}>
                <span className="u-lang-cur">{lang.toUpperCase()}</span>
                <svg viewBox="0 0 24 24" className="u-lang-caret" aria-hidden="true"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </button>
              <div className="u-lang-menu" role="menu">
                {DISPLAY.map((c) => {
                  const on = ACTIVE.indexOf(c) >= 0;
                  return (
                    <button key={c} type="button" disabled={!on}
                      className={"u-lang-opt" + (lang === c ? " active" : "") + (on ? "" : " soon")}
                      onClick={on ? () => { setLang(c); setLangOpen(false); } : undefined}>
                      <span>{(TB_BYCODE[c] || {}).label || c}</span>
                      {on ? <span className="u-lang-code">{c.toUpperCase()}</span> : <span className="u-lang-soon">brzy</span>}
                    </button>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    <header className="header">
      <div className="wrap">
        <a className="brand" href={w("index.html")}><img className="mark" src="img/logo-black.svg" alt="TAKEBOX" />TAKEBOX<span className="tld">.eu</span></a>
        <nav className="nav">
          <a href={w("Showroom.html")}>{UI.showroom[L]}</a>
          <a href={w("3D-navrh.html")}>{L === "en" ? "3D design" : "3D návrh"}</a>
          <a href={w("index.html#proces")}>{UI.process[L]}</a>
          <a href={w("index.html#poptavka")}>{UI.inquiry[L]}</a>
        </nav>
        <div className="header-cta">
          <a className="btn btn-primary" href={w("index.html#poptavka")}>{UI.cta[L]} <ArrowR /></a>
          <button className="burger" aria-label="Menu" onClick={() => document.body.classList.toggle("menu-open")}><span></span><span></span><span></span></button>
        </div>
      </div>
    </header>
    <div className="mobile-menu" onClick={() => document.body.classList.remove("menu-open")}>
      <a href={w("Showroom.html")}><span>{UI.showroom[L]}</span><span className="idx">01</span></a>
      <a href={w("3D-navrh.html")}><span>{L === "en" ? "3D design" : "3D návrh"}</span><span className="idx">02</span></a>
      <a href={w("index.html#proces")}><span>{UI.process[L]}</span><span className="idx">03</span></a>
      <a href={w("index.html#poptavka")}><span>{UI.inquiry[L]}</span><span className="idx">04</span></a>
    </div>
    </React.Fragment>
  );
}

function Footer({ lang }) {
  const L = dl(lang);
  const w = (h) => withLang(h, lang);
  return (
    <footer className="section footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <a href={w("index.html")} className="brand"><img className="mark" src="img/logo-black.svg" alt="TAKEBOX" />TAKEBOX<span className="tld">.eu</span></a>
            <p className="tagline">{UI.foot_tag[L]}</p>
          </div>
          <div className="footer-cols">
            <div className="footer-col">
              <h5>{L === "cs" ? "Web" : "Site"}</h5>
              <a href={w("Showroom.html")}>{UI.showroom[L]}</a>
              <a href={w("3D-navrh.html")}>{L === "en" ? "3D design" : "3D návrh"}</a>
              <a href={w("index.html#proces")}>{UI.process[L]}</a>
              <a href={w("index.html#poptavka")}>{UI.inquiry[L]}</a>
            </div>
            <div className="footer-col">
              <h5>{UI.inquiry[L]}</h5>
              <a href={w("index.html#poptavka")}>{UI.inquiry[L]}</a>
              <a href="mailto:info@takebox.eu">info@takebox.eu</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 TAKEBOX.eu — {L === "cs" ? "všechna práva vyhrazena" : "all rights reserved"}</span>
          <span>BUILT-TO-SPEC / CZ · EU</span>
        </div>
      </div>
    </footer>
  );
}

window.TB = { useLang, withLang, UI, Header, Footer, ArrowUR, ArrowR, dl };