(function runStarterShowcase() {
  const data = globalThis.__ZENITYX_SHOWCASE_DATA__;
  const buildProductPresentation = globalThis.ZenityXShowcaseFilter?.buildProductPresentation;
  if (!data || !buildProductPresentation) return;

  const grid = document.querySelector("#product-grid");
  const count = document.querySelector("#result-count");

  function starterCard(product) {
    const card = document.createElement("article");
    card.className = "product-card product-card-starter";
    const mission = { id: data.meta.selected_mission, ...data.missions[data.meta.selected_mission] };
    const presentation = buildProductPresentation(product, data.media, mission);
    if (presentation.media.length) {
      const gallery = document.createElement("div");
      gallery.className = "product-media-gallery";
      for (const approvedMedia of presentation.media) {
        const figure = document.createElement("figure");
        figure.className = "product-media";
        const image = document.createElement("img");
        image.src = `./media/${approvedMedia.file_name}`;
        image.alt = approvedMedia.alt_th;
        figure.append(image);
        gallery.append(figure);
      }
      card.append(gallery);
    } else {
      const placeholder = document.createElement("div");
      placeholder.className = "product-placeholder";
      placeholder.setAttribute("aria-hidden", "true");
      const stone = document.createElement("span");
      stone.className = "stone-shape";
      stone.textContent = product.shape.slice(0, 1);
      placeholder.append(stone);
      card.append(placeholder);
    }
    const body = document.createElement("div");
    body.className = "product-body";
    const id = document.createElement("span");
    id.className = "product-id";
    id.textContent = product.product_id;
    const heading = document.createElement("h3");
    heading.textContent = product.name;
    const trace = document.createElement("p");
    trace.className = "product-story";
    trace.textContent = "Rendered from generated data.js — learner adds search, filters and QA states.";
    const cta = document.createElement("p");
    cta.className = "card-cta";
    cta.textContent = presentation.cta;
    body.append(id, heading, trace, cta);
    card.append(body);
    return card;
  }

  const visibleProducts = data.products.slice(0, 6);
  grid.replaceChildren(...visibleProducts.map(starterCard));
  count.textContent = `Starter preview ${visibleProducts.length} / ${data.products.length}`;
})();
