// Blog list + article detail — redesigned with 5-category navigation.
(function () {
  if (typeof React === "undefined") return;
  const DS = window.VElaStvNajmanDesignSystem_bc3fc2;
  const { Photo, Button } = DS;
  const Icon = window.VNIcon;

  const PER_PAGE = 6;

  const CAT_ICONS = {
    zacatky:    "bee",
    introdukce: "hexagon",
    rozvoj:     "hive",
    genetika:   "rosette",
  };

  /* ── Blog list ─────────────────────────────────────────────────── */
  function Blog({ go }) {
    const D = window.SHOP_DATA;
    const [activeCat, setActiveCat] = React.useState(D.blogCats[0].id);
    const [page, setPage]           = React.useState(1);
    const [fading, setFading]       = React.useState(false);
    const tabsRef = React.useRef(null);

    // Center a tab in the scrollable bar using getBoundingClientRect for
    // pixel-perfect positioning. animate=false for instant (on mount),
    // animate=true for smooth scroll (on tap).
    function centerTab(id, animate) {
      const container = tabsRef.current;
      if (!container) return;
      const btn = container.querySelector('[data-cat="' + id + '"]');
      if (!btn) return;
      const cRect = container.getBoundingClientRect();
      const bRect = btn.getBoundingClientRect();
      const to = container.scrollLeft + bRect.left - cRect.left - cRect.width / 2 + bRect.width / 2;
      if (animate) {
        container.scrollTo({ left: to, behavior: 'smooth' });
      } else {
        container.scrollLeft = to;
      }
    }

    // Instantly center the initial active tab before first paint
    React.useLayoutEffect(() => { centerTab(activeCat, false); }, []);

    const catPosts     = D.posts.filter(p => p.cat === activeCat);
    const totalPages   = Math.ceil(catPosts.length / PER_PAGE);
    const pagePosts    = catPosts.slice((page - 1) * PER_PAGE, page * PER_PAGE);
    const activeCatObj = D.blogCats.find(c => c.id === activeCat) || D.blogCats[0];

    function fade(fn) {
      setFading(true);
      setTimeout(() => { fn(); setFading(false); }, 180);
    }

    function switchCat(id) {
      if (id === activeCat) return;
      centerTab(id, true);
      fade(() => { setActiveCat(id); setPage(1); });
    }

    function switchPage(n) {
      if (n === page) return;
      fade(() => setPage(n));
    }

    const gridStyle = {
      opacity:    fading ? 0 : 1,
      transform:  fading ? "translateY(10px)" : "none",
      transition: "opacity 180ms ease, transform 180ms ease",
    };

    return (
      <main className="kit">

        {/* ── Hero ───────────────────────────────────────────────── */}
        <div className="kit-shell kit-bloghead2">
          <span className="vn-eyebrow" style={{ justifyContent: "center" }}>Blog o chovu</span>
          <h1>Čtení o chovu a včelách</h1>
          <p>Od prvních úlů po vlastní chov. Praktické rady pro začátečníky, chov a introdukci matek, zakládání včelstev z oddělků i genetiku a šlechtění.</p>
        </div>

        {/* ── Category tabs ──────────────────────────────────────── */}
        <div className="kit-bcats-wrap">
          <div className="kit-shell">
            <div className="kit-bcats" role="tablist" ref={tabsRef}>
              {D.blogCats.map(cat => (
                <button
                  key={cat.id}
                  role="tab"
                  data-cat={cat.id}
                  aria-selected={cat.id === activeCat}
                  className={"kit-bcat" + (cat.id === activeCat ? " kit-bcat--active" : "")}
                  onClick={() => switchCat(cat.id)}
                >
                  <span className="kit-bcat__ic">
                    <Icon name={CAT_ICONS[cat.id]} size={16} strokeWidth={1.6} />
                  </span>
                  <span className="kit-bcat__label">{cat.label}</span>
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* ── Articles ───────────────────────────────────────────── */}
        <div className="kit-shell kit-blog-body">

          <div className="kit-bgrid2-hd">
            <div>
              <span className="vn-eyebrow" style={{ marginBottom: 6 }}>{activeCatObj.label}</span>
              <h2 style={{ margin: 0 }}>Nejnovější články</h2>
            </div>
            <span className="kit-bgrid2-count">{catPosts.length} článků</span>
          </div>

          <div className="kit-bgrid2" style={gridStyle}>
            {pagePosts.map(p => (
              <a
                key={p.id}
                className="kit-bcard2"
                href="#"
                onClick={e => { e.preventDefault(); go("article", p.id); }}
              >
                <div className="kit-bcard2__media">
                  <Photo src={p.image} ratio="3 / 2" label="Náhled článku" />
                  <span className="kit-bcard2__badge">{p.tag}</span>
                </div>
                <div className="kit-bcard2__body">
                  <div className="kit-bcard2__meta">
                    <span>{p.date}</span>
                    <span className="kit-bcard2__dot">·</span>
                    <span>{p.read} čtení</span>
                  </div>
                  <h3 className="kit-bcard2__title">{p.title}</h3>
                  <p className="kit-bcard2__excerpt">{p.excerpt}</p>
                  <span className="kit-bcard2__more">
                    Číst dál <Icon name="arrowRight" size={14} />
                  </span>
                </div>
              </a>
            ))}
          </div>

          {/* ── Pagination ─────────────────────────────────────── */}
          <div className="kit-bpagi" style={gridStyle}>
            <button
              className="kit-bpagi__arrow"
              disabled={page <= 1}
              onClick={() => page > 1 && switchPage(page - 1)}
              aria-label="Předchozí strana"
            >
              <Icon name="arrowLeft" size={16} />
            </button>

            {Array.from({ length: totalPages }, (_, i) => i + 1).map(n => (
              <button
                key={n}
                className={"kit-bpagi__num" + (n === page ? " kit-bpagi__num--active" : "")}
                onClick={() => switchPage(n)}
                aria-current={n === page ? "page" : undefined}
              >{n}</button>
            ))}

            <button
              className="kit-bpagi__arrow"
              disabled={page >= totalPages}
              onClick={() => page < totalPages && switchPage(page + 1)}
              aria-label="Další strana"
            >
              <Icon name="arrowRight" size={16} />
            </button>
          </div>

        </div>
      </main>
    );
  }

  /* ── Article detail ────────────────────────────────────────────── */
  function Article({ go, postId }) {
    const D = window.SHOP_DATA;
    const p = D.posts.find(x => x.id === postId) || D.posts[0];
    return (
      <main className="kit">
        <article className="kit-shell kit-article">
          <nav className="kit-breadcrumb">
            <a href="#" onClick={e => { e.preventDefault(); go("blog"); }}>Blog</a>
            <Icon name="chevronRight" size={13} />
            <span className="kit-breadcrumb__here">{p.title}</span>
          </nav>
          <h1>{p.title}</h1>
          <div className="kit-article__meta">
            <span>{p.date}</span><span>·</span>
            <span>{p.read} čtení</span><span>·</span>
            <span style={{ color: "var(--accent-secondary)", fontWeight: 600 }}>{p.tag}</span>
          </div>
          <div className="kit-article__hero">
            <Photo src={p.image} ratio="16 / 9" label="Foto k článku" />
          </div>
          <div className="kit-prose">
            <p style={{ fontSize: "var(--text-lead)", color: "var(--text-body)" }}>{p.excerpt}</p>
            <p>Dobrý chov stojí na trpělivém pozorování a poctivých záznamech. V tomhle článku shrnujeme to nejdůležitější tak, jak to děláme přímo u nás na chovné stanici v Hostivicích.</p>
            <h2>Na čem záleží</h2>
            <p>Základ je výběr. Z včelstev sledujeme mírnost, plodnost, zimování a hygienické chování — a teprve z těch nejlepších chováme dál. Genetika rozhoduje o tom, jak se vám bude u úlu pracovat celou sezónu.</p>
            <blockquote>Mírná, zdravá a nerojívá včelstva nejsou náhoda — jsou výsledkem cílené práce s liniemi.</blockquote>
            <p>U inseminovaných matek řídíme i otcovskou stranu, takže víte přesně, z jaké linie potomstvo pochází. Právě tahle dohledatelnost je pro chovatele největší jistota.</p>
            <h2>Jak to děláme my</h2>
            <p>Matky odchováváme sami, oplozujeme na vlastním stanovišti a předáváme osobně nebo posíláme v klíckách. Nepočítáme matky na tisíce — záleží nám na kvalitě každé z nich.</p>
          </div>
          <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Button variant="secondary" onClick={() => go("blog")} iconStart={<Icon name="arrowLeft" size={16} />}>Zpět na blog</Button>
            <Button variant="primary" onClick={() => go("category")} iconEnd={<Icon name="arrowRight" size={16} />}>Prohlédnout nabídku</Button>
          </div>
        </article>
      </main>
    );
  }

  window.VNBlog    = Blog;
  window.VNArticle = Article;
})();