/* TAKEBOX — Showroom (grid + category filter) */
const { useState: useStateS } = React;
const { useLang: useLangS, withLang: withLangS, UI: UIS, Header: HeaderS, Footer: FooterS } = window.TB;

/* all detail photos from img/ — shown in the Options carousel */
const DETAIL_PHOTOS = [
  "img/case-detail-tall.jpg", "img/case-foam.jpg", "img/case-foam-detail.jpg",
  "img/case-hardware.jpg", "img/case-slides.jpg", "img/case-dividers.jpg",
  "img/case-wheels.jpg", "img/case-cascade.jpg", "img/case-drawers-front.jpg",
  "img/case-closed.jpg"
];

function primaryMedia(p) {
  var ph = p.photos[0];
  if (ph.src) return <img src={ph.src} alt={p.name} />;
  return <image-slot id={ph.slot} style={{ width: "100%", height: "100%", display: "block" }} placeholder="+ foto"></image-slot>;
}

function ProductCard({ p, lang, catName }) {
  const [pi, setPi] = useStateS(0);
  const photos = p.photos.filter((x) => x.src).map((x) => x.src);
  const TH = (s) => (s ? s.replace("img/", "img/thumb/") : s);
  const href = withLangS("Produkt.html?id=" + p.id, lang);
  return (
    <article className="card">
      <a className="media" href={href} aria-label={p.name}>
        <img src={photos[pi] || photos[0]} alt={p.name} loading="lazy" decoding="async" />
      </a>
      {photos.length > 1 && (
        <div className="sr-thumbs">
          {photos.map((src, i) => (
            <button key={i} type="button" className={"sr-thumb" + (i === pi ? " on" : "")} onClick={() => setPi(i)} aria-label={p.name + " — foto " + (i + 1)}>
              <img src={TH(src)} alt="" loading="lazy" decoding="async" />
            </button>
          ))}
        </div>
      )}
      <a className="body" href={href}>
        <div>
          <span className="sr-cat">{catName(p.cat)}</span>
          <h3>{p.name}</h3>
          <p>{p.tag[lang]}</p>
        </div>
        <span className="go"><svg style={{ width: 16, height: 16 }}><use href="#i-arrow-ur" /></svg></span>
      </a>
    </article>
  );
}

function ShowroomApp() {
  const [lang, setLang] = useLangS();
  const [cat, setCat] = useStateS("all");
  const [di, setDi] = useStateS(0);
  const cats = window.TB_CATALOG.cats;
  const LANG = window.TB.dl(lang);
  const products = window.TB_CATALOG.products.filter((p) => cat === "all" || p.cat === cat);
  const catName = (id) => { var c = cats.find((x) => x.id === id); return c ? c[LANG] : id; };

  return (
    <React.Fragment>
      <HeaderS lang={lang} setLang={setLang} />
      <main>
        <section className="section invert pad">
          <div className="wrap">
            <div className="sec-head">
              <p className="eyebrow">{UIS.sr_eyebrow[LANG]}</p>
              <h1 className="h2" style={{ marginTop: 18 }}>{UIS.sr_title[LANG]}</h1>
              <p className="lead" style={{ marginTop: 18 }}>{UIS.sr_lead[LANG]}</p>
            </div>

            <div className="sr-filter">
              <button className={"chip" + (cat === "all" ? " on" : "")} onClick={() => setCat("all")}>{UIS.all[LANG]}</button>
              {cats.map((c) => (
                <button key={c.id} className={"chip" + (cat === c.id ? " on" : "")} onClick={() => setCat(c.id)}>{c[LANG]}</button>
              ))}
            </div>

            <div className="showroom-grid sr-grid">
              {products.map((p) => (
                <ProductCard key={p.id} p={p} lang={LANG} catName={catName} />
              ))}
            </div>
          </div>
        </section>

        {/* ===== Možnosti výroby (přesunuto z úvodní stránky) ===== */}
        <section className="section pad" id="sr-moznosti">
          <div className="wrap">
            <div className="sec-head" style={{ marginBottom: 44 }}>
              <p className="eyebrow">Možnosti výroby</p>
              <h2 className="h2" style={{ marginTop: 18 }}>Přizpůsobíme každý detail</h2>
              <p className="lead" style={{ marginTop: 20 }}>Správný case není jen pevná krabice. Důležitá je konstrukce, ergonomie manipulace, ochrana obsahu, servisní přístup a celková organizace prostoru.</p>
            </div>
            <div className="options-grid">
              <div className="options-figure ticks">
                <span className="tick-bl"></span><span className="tick-br"></span>
                <img src={DETAIL_PHOTOS[di]} alt="Detail provedení case na míru" />
                <button type="button" className="hc-nav hc-prev" aria-label="Předchozí" onClick={() => setDi((di - 1 + DETAIL_PHOTOS.length) % DETAIL_PHOTOS.length)}><svg><use href="#i-arrow-right" /></svg></button>
                <button type="button" className="hc-nav hc-next" aria-label="Další" onClick={() => setDi((di + 1) % DETAIL_PHOTOS.length)}><svg><use href="#i-arrow-right" /></svg></button>
                <span className="hc-counter">{String(di + 1).padStart(2, "0")} / {String(DETAIL_PHOTOS.length).padStart(2, "0")}</span>
              </div>
              <div className="options-list">
                  <div className="option"><div className="top"><svg className="icon"><use href="#i-lock" /></svg><span className="pn">OPT-01</span></div><h3>Zámky</h3><p>Motýlkové, západkové nebo uzamykatelné.</p></div>
                  <div className="option"><div className="top"><svg className="icon"><use href="#i-grip" /></svg><span className="pn">OPT-02</span></div><h3>Madla</h3><p>Zapuštěná, sklopná nebo ergonomická.</p></div>
                  <div className="option"><div className="top"><svg className="icon"><use href="#i-wheel" /></svg><span className="pn">OPT-03</span></div><h3>Kolečka</h3><p>Otočná, s brzdou nebo s vyšší nosností.</p></div>
                  <div className="option"><div className="top"><svg className="icon"><use href="#i-archive" /></svg><span className="pn">OPT-04</span></div><h3>Zásuvky</h3><p>Plnovýsuvné pojezdy a individuální dělení.</p></div>
                  <div className="option"><div className="top"><svg className="icon"><use href="#i-layers" /></svg><span className="pn">OPT-05</span></div><h3>Police</h3><p>Pevné nebo nastavitelné police a přepážky.</p></div>
                  <div className="option"><div className="top"><svg className="icon"><use href="#i-scan" /></svg><span className="pn">OPT-06</span></div><h3>Pěnové výplně</h3><p>Přesné výřezy pro maximální ochranu.</p></div>
                  <div className="option"><div className="top"><svg className="icon"><use href="#i-badge" /></svg><span className="pn">OPT-07</span></div><h3>Logo a popisy</h3><p>Gravírování, štítky, potisk nebo označení.</p></div>
                  <div className="option"><div className="top"><svg className="icon"><use href="#i-ruler" /></svg><span className="pn">OPT-08</span></div><h3>Rozměry na míru</h3><p>Vyrobíme přesně podle vašich požadavků.</p></div>
                </div>
            </div>
          </div>
        </section>
      </main>
      <FooterS lang={lang} />
    </React.Fragment>
  );
}

function mountShowroom() {
  var ORIG = JSON.stringify(window.TB_CATALOG);
  var root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<ShowroomApp />);
  window.__tbApplyPreview = function () {
    try { window.TB_CATALOG = JSON.parse(ORIG); window.TBStore.applyCatalog(window.TB_CATALOG); } catch (e) {}
    root.render(<ShowroomApp />);
  };
}
mountShowroom();