/* ============================================================
   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" : (lang === "de" ? "de" : (lang === "es" ? "es" : (lang === "fr" ? "fr" : "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 { if (window.TBI18N) window.TBI18N.apply(l); } catch (e) {}
    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", de: "Start", es: "Inicio" },
  showroom: { cs: "Showroom", en: "Showroom", de: "Showroom", es: "Showroom" },
  options: { cs: "Možnosti výroby", en: "Build options", de: "Fertigungsoptionen", es: "Opciones de fabricación" },
  process: { cs: "Jak to funguje", en: "How it works", de: "So funktioniert es", es: "Cómo funciona" },
  inquiry: { cs: "Poptávka", en: "Inquiry", de: "Anfrage", es: "Solicitud" },
  cta: { cs: "Poptat case", en: "Request a case", de: "Case anfragen", es: "Solicitar case" },
  all: { cs: "Vše", en: "All", de: "Alle", es: "Todo" },
  sr_eyebrow: { cs: "Showroom · produkty", en: "Showroom · products", de: "Showroom · Produkte", es: "Showroom · productos" },
  sr_title: { cs: "Naše case systémy", en: "Our case systems", de: "Unsere Case-Systeme", es: "Nuestros sistemas de cases" },
  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.", de: "Wählen Sie den Lösungstyp. Jedes Case wird maßgefertigt — die Fotos zeigen Konstruktion und Möglichkeiten.", es: "Elija el tipo de solución. Cada case se fabrica a medida — las fotos ilustran la construcción y las opciones." },
  detail: { cs: "Detail", en: "Detail", de: "Detail", es: "Detalle" },
  specs: { cs: "Specifikace", en: "Specifications", de: "Spezifikationen", es: "Especificaciones" },
  related: { cs: "Související produkty", en: "Related products", de: "Verwandte Produkte", es: "Productos relacionados" },
  back: { cs: "Zpět na showroom", en: "Back to showroom", de: "Zurück zum Showroom", es: "Volver al showroom" },
  request_similar: { cs: "Poptat podobné řešení", en: "Request a similar build", de: "Ähnliche Lösung anfragen", es: "Solicitar una solución similar" },
  gallery: { cs: "Galerie", en: "Gallery", de: "Galerie", es: "Galería" },
  category: { cs: "Kategorie", en: "Category", de: "Kategorie", es: "Categoría" },
  not_found: { cs: "Produkt nenalezen", en: "Product not found", de: "Produkt nicht gefunden", es: "Producto no encontrado" },
  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.", de: "Maßgefertigte, robuste Transportcases und Koffer aus eigener Fertigung.", es: "Fabricación a medida de cases de transporte y maletines robustos." }
};

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);
  // Nabídka jazyků = jazyky zapnuté v CMS (panel „Jazyky & překlady").
  // Tato stránka má zatím obsah jen CS/EN — ostatní zapnuté jazyky jsou „brzy".
  const cmsEnabled = (() => {
    try {
      const pub = (window.TBStore && window.TBStore.published && window.TBStore.published()) || {};
      const arr = pub.languages && pub.languages.enabled;
      if (Array.isArray(arr) && arr.length) return arr;
    } catch (e) {}
    return ["cs", "en", "de", "es", "fr", "it", "pl", "sk", "ru"];
  })();
  const DISPLAY = TB_LANGS.map((l) => l.code).filter((c) => cmsEnabled.indexOf(c) >= 0);
  const ACTIVE = ["cs", "en", "de", "es", "fr"];
  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" : L === "de" ? "Maßgefertigte Transportcases · 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" : L === "de" ? "3D-Entwurf" : "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" : L === "de" ? "3D-Entwurf" : "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" : L === "de" ? "3D-Entwurf" : "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>{L === "cs" ? "Kontakt" : "Contact"}</h5>
              <a href="mailto:info@takebox.eu">info@takebox.eu</a>
              <a href="tel:+420777559558">+420 777 559 558</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 TAKECARS s.r.o. — TAKEBOX.eu · <span className="leg">IČO</span> 08077703 · <span className="leg">DIČ</span> CZ08077703</span>
          <span><a href={w("zasady-ochrany-osobnich-udaju.html")} style={{ color: "inherit" }}>{L === "cs" ? "Zásady ochrany osobních údajů" : "Privacy policy"}</a> · <a href={w("zasady-cookies.html")} data-cc-settings style={{ color: "inherit" }}>Cookies</a> · <a href={w("podminky-pouzivani.html")} style={{ color: "inherit" }}>{L === "cs" ? "Podmínky používání" : "Terms of use"}</a></span>
        </div>
      </div>
    </footer>
  );
}

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