/* global React, Reveal, Spark, Eyebrow, Ethno, DividerMark, CTA, openProduct */
const { useState: useStateCat } = React;

const PRODUCTS = [
  { img: "ball-flag.png", name: "Шар с флагом", kz: "Қазақстан туы", cat: "balls", hit: true,
    desc: "Хит коллекции. Государственный флаг Казахстана на выдувном стекле — символ гордости за страну под ёлкой каждой семьи." },
  { img: "barys.png", name: "Барыс", kz: "Снежный барс", cat: "figures",
    desc: "Символ свободы и силы. Снежный барс в золотом орнаменте qoshqar-muyiz." },
  { img: "ayaz-ata.png", name: "Аяз Ата", kz: "Дед Мороз", cat: "figures",
    desc: "Казахский Дед Мороз в национальном чапане с тонкой золотой росписью." },
  { img: "aqshaqar.png", name: "Ақшақар", kz: "Снегурочка", cat: "figures",
    desc: "Казахская Снегурочка — нежный образ зимней сказки в золоте." },
  { img: "horse-white.png", name: "Алтын ат", kz: "Золотой конь", cat: "figures",
    desc: "Конь — символ удачи и достатка в наступающем году." },
  { img: "yurta.png", name: "Юрта", kz: "Символ дома", cat: "figures",
    desc: "Юрта — тепло родного дома и семейного очага." },
  { img: "tazy.png", name: "Тазы", kz: "Казахская борзая", cat: "figures",
    desc: "Тазы — верность и благородство, гордость казахских степей." },
  { img: "snowman.png", name: "Снеговик", kz: "Аққар", cat: "figures",
    desc: "Праздничный снеговик в золотом жилете с национальным орнаментом." },
  { img: "ball-hero-gold.png", name: "Золотой шар", kz: "Алтын шар", cat: "balls",
    desc: "Шар ручной росписи с орнаментом и пожеланием изобилия." },
  { img: "ball-horse.png", name: "Шар «Конь»", kz: "Ат шары", cat: "balls",
    desc: "Шар с золотым конём — пожелание силы и удачи в новом году." },
];

function ProductCardTile({ p, delay }) {
  const badge = p.hit;
  return React.createElement(Reveal, { delay, className: `lp-prod${p.hit ? " hit" : ""}`, onClick: () => openProduct(p), tag: "button" },
    badge && React.createElement("span", { className: "badge", style: { background: "var(--amber-500)", color: "var(--ink-900)" } }, React.createElement(Spark, { style: { width: 11, height: 11 } }), "Хит"),
    React.createElement("div", { className: "pic" }, React.createElement("img", { src: "assets/products/" + p.img, alt: p.name })),
    React.createElement("div", { className: "meta" },
      React.createElement("div", { className: "nm" }, p.name),
      React.createElement("div", { className: "sub" }, p.kz)),
    React.createElement("span", { className: "zoomcue", "aria-hidden": "true" }, "+"));
}

function Catalog() {
  const [tab, setTab] = useStateCat("all");
  const tabs = [["all", "Все"], ["figures", "Фигурки"], ["balls", "Шары"]];
  const hit = PRODUCTS.find((p) => p.hit);
  const rest = PRODUCTS.filter((p) => !p.hit);
  const shown = rest.filter((p) => tab === "all" || p.cat === tab);
  const boxes = [
    { tier: "Набор «Шары»", img: "box-balls.png", desc: "Премиальные шары ручной росписи в подарочной коробке. Лаконичный и доступный старт." },
    { tier: "Набор «Qazaq Ertegi»", img: "box-qazaq.png", desc: "Фигурки казахских легенд и шар-пожелание «изобилие и богатство».", feature: true },
    { tier: "Премиум / под ключ", img: "ball-hero-gold.png", desc: "Эксклюзивная коллекция и брендирование под ваш бюджет и масштаб." },
  ];
  return React.createElement("section", { className: "lp-section lp-cream-alt", id: "katalog",
    style: { scrollMarginTop: 96, position: "relative", overflow: "hidden" } },
    React.createElement(Ethno, { color: "var(--red-800)", variant: "faint", parallax: 0.05 }),
    React.createElement("div", { className: "lp-inner lp-pad-lg" },
      React.createElement("div", { style: { maxWidth: 680 } },
        React.createElement(Reveal, null, React.createElement(Eyebrow, null, "Каталог · пик коллекции")),
        React.createElement(Reveal, { tag: "h2", className: "lp-h2", delay: 1, style: { marginTop: 16 } },
          "Игрушки, на которые хочется ", React.createElement("span", { className: "lp-red-ink" }, "смотреть")),
        React.createElement(Reveal, { tag: "p", className: "lp-lead", delay: 2, style: { marginTop: 16 } },
          "Выдувное стекло, ручная роспись золотом, национальные образы. Нажмите на любую игрушку, чтобы рассмотреть ближе.")),

      // Featured HIT
      React.createElement(Reveal, { delay: 1, style: { marginTop: 44 } },
        React.createElement("div", { className: "lp-card lp-glare", style: { background: "var(--gradient-red)", borderColor: "transparent", borderRadius: "var(--radius-xl)", cursor: "pointer", display: "grid", gridTemplateColumns: "1fr", overflow: "hidden" }, onClick: () => openProduct(hit) },
          React.createElement("div", { className: "lp-hit-inner" },
            React.createElement("div", { style: { position: "relative", minHeight: 300, display: "flex", alignItems: "center", justifyContent: "center", padding: 30 } },
              React.createElement("div", { className: "lp-glow", style: { width: "70%", height: "70%", background: "radial-gradient(circle, rgba(255,225,180,0.55), rgba(255,225,180,0))", opacity: 0.8 } }),
              React.createElement("img", { src: "assets/products/ball-flag.png", alt: "Шар с флагом Казахстана", style: { position: "relative", maxHeight: 320, maxWidth: "78%", objectFit: "contain", filter: "drop-shadow(0 24px 36px rgba(0,0,0,0.4))" } })),
            React.createElement("div", { style: { padding: "10px 34px 40px", color: "#fff" } },
              React.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 13px", borderRadius: 999, background: "var(--amber-500)", color: "var(--ink-900)", fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 12, letterSpacing: "0.04em", textTransform: "uppercase" } }, React.createElement(Spark, { style: { width: 11, height: 11 } }), "Хит сезона"),
              React.createElement("h3", { style: { fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(1.8rem,4vw,2.6rem)", color: "#fff", margin: "14px 0 0", lineHeight: 1.1 } }, "Шар с флагом Казахстана"),
              React.createElement("p", { style: { color: "rgba(255,238,228,0.9)", fontSize: "1.05rem", lineHeight: 1.55, margin: "12px 0 0", maxWidth: "44ch" } }, "Символ гордости за страну — на выдувном стекле под ёлкой каждой семьи. Самая желанная игрушка коллекции."),
              React.createElement("div", { style: { marginTop: 22 } }, React.createElement(CTA, { variant: "amber", size: "sm" }, "Рассмотреть ближе", React.createElement(Spark, { style: { width: 13, height: 13 } })))))
        )),

      // Tabs + grid
      React.createElement(Reveal, { className: "lp-cat-tabs", delay: 1, style: { marginTop: 40, justifyContent: "center" } },
        tabs.map(([k, t]) => React.createElement("button", { key: k, className: `lp-tab ${tab === k ? "active" : ""}`, onClick: () => setTab(k) }, t))),
      React.createElement("div", { className: "lp-prodgrid", style: { marginTop: 28 } },
        shown.map((p, i) => React.createElement(ProductCardTile, { key: p.img, p, delay: (i % 4) + 1 }))),

      // Ready boxes
      React.createElement(Reveal, { style: { marginTop: 70 } }, React.createElement(DividerMark)),
      React.createElement("div", { style: { maxWidth: 680, marginTop: 44 } },
        React.createElement(Reveal, null, React.createElement(Eyebrow, null, "Готовые боксы")),
        React.createElement(Reveal, { tag: "h2", className: "lp-h2", delay: 1, style: { marginTop: 16 } }, "Под разные бюджеты"),
        React.createElement(Reveal, { tag: "p", className: "lp-lead", delay: 2, style: { marginTop: 16 } },
          "Готовые подарочные наборы — от лаконичного до премиального. Соберём под численность и бюджет вашей команды.")),
      React.createElement("div", { className: "lp-boxgrid", style: { marginTop: 36 } },
        boxes.map((b, i) => React.createElement(Reveal, { key: b.tier, delay: (i % 3) + 1 },
          React.createElement("div", { className: `lp-box lp-glare ${b.feature ? "feature" : ""}`, onClick: () => { window.dispatchEvent(new CustomEvent("mereke:lead")); } },
            React.createElement("span", { className: "tier" }, b.tier),
            React.createElement("div", { className: "pic" }, React.createElement("img", { src: "assets/products/" + b.img, alt: b.tier })),
            React.createElement("p", null, b.desc),
            React.createElement("div", { style: { marginTop: 18, display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 14, color: b.feature ? "var(--amber-300)" : "var(--text-accent)" } },
              "Запросить расчёт", React.createElement(Spark, { style: { width: 12, height: 12 } })))))
      )
    )
  );
}

Object.assign(window, { Catalog, PRODUCTS });