/* global React, Reveal, Spark, Eyebrow, Ethno, DividerMark, CTA, openProduct, openLead, PriceTag, AddToCartBtn */
const { useState: useStateCat } = React;
const PBASE = "assets/products2026/";

const PRODUCTS = [
  { img: "ball-flag.jpg", name: "Шар с флагом", kz: "Қазақстан туы", cat: "balls", hit: true,
    desc: "Хит коллекции. Государственный флаг Казахстана на выдувном стекле — символ гордости за страну под ёлкой каждой семьи." },

  // ── Фигурки ──
  { img: "barys.jpg", name: "Барыс", kz: "Снежный барс", cat: "figures", top: true,
    desc: "Символ свободы и силы. Снежный барс в золотом орнаменте qoshqar-muyiz." },
  { img: "ayaz-ata.jpg", name: "Аяз Ата", kz: "Дед Мороз", cat: "figures", top: true,
    desc: "Казахский Дед Мороз в национальном чапане с тонкой золотой росписью." },
  { img: "aqshaqar.jpg", name: "Ақшақар", kz: "Снегурочка", cat: "figures",
    desc: "Казахская Снегурочка — нежный образ зимней сказки в золоте." },
  { img: "snowman.jpg", name: "Снеговик", kz: "Аққар", cat: "figures",
    desc: "Праздничный снеговик в золотом жилете с национальным орнаментом." },
  { img: "horse-white.jpg", name: "Алтын ат", kz: "Золотой конь", cat: "figures",
    desc: "Конь — символ удачи и достатка в наступающем году." },
  { img: "horse-brown.jpg", name: "Гнедой конь", kz: "Qoñyr at", cat: "figures",
    desc: "Гнедой конь — сила, скорость и удача в новом году." },
  { img: "yurta.jpg", name: "Юрта", kz: "Символ дома", cat: "figures", top: true,
    desc: "Юрта — тепло родного дома и семейного очага." },
  { img: "tazy.jpg", name: "Тазы", kz: "Казахская борзая", cat: "figures",
    desc: "Тазы — верность и благородство, гордость казахских степей." },
  { img: "cat.jpg", name: "Котёнок", kz: "Mysyq", cat: "figures",
    desc: "Уютный котёнок в золотом орнаменте — символ домашнего тепла." },
  { img: "sheep.jpg", name: "Барашек", kz: "Qoı", cat: "figures",
    desc: "Пушистый барашек — символ достатка и доброго года." },
  { img: "lamb.jpg", name: "Ягнёнок", kz: "Qozy", cat: "figures", top: true,
    desc: "Маленький ягнёнок — нежность и тепло семейного очага." },
  { img: "matryoshka.jpg", name: "Матрёшка", kz: "Matreshka", cat: "figures",
    desc: "Матрёшка-неваляшка в казахском наряде — добрая улыбка праздника." },
  { img: "owl.jpg", name: "Филин", kz: "Úki", cat: "figures",
    desc: "Филин (үкі) — древний оберег, хранящий дом от бед." },
  { img: "rocket.jpg", name: "Ракета", kz: "Zymyran", cat: "figures",
    desc: "Ракета — мечта о космосе и большое будущее под ёлкой." },
  { img: "chocolate.jpg", name: "Шоколад", kz: "Shokolad", cat: "figures", top: true,
    desc: "Шоколадка-сувенир с национальным акцентом — сладкий символ праздника." },

  // ── Шары · серия «Ornament» ──
  { img: "ball-ornament-1.jpg", name: "Шар «Ornament» №1", kz: "Алтын · золото", cat: "balls",
    desc: "Серия «Ornament». Золотой шар ручной росписи со снежинкой, ø 80 мм." },
  { img: "ball-ornament-2.jpg", name: "Шар «Ornament» №2", kz: "Қызыл · красный", cat: "balls",
    desc: "Серия «Ornament». Красное стекло, золотой орнамент qoshqar-muyiz, ø 80 мм." },
  { img: "ball-ornament-3.jpg", name: "Шар «Ornament» №3", kz: "Қызыл · красный", cat: "balls",
    desc: "Серия «Ornament». Красное стекло, золотой орнамент с архаром, ø 80 мм." },

  // ── Шары · именные ──
  { img: "ball-yurt.jpg", name: "Шар «Юрта»", kz: "Kıız úı", cat: "balls",
    desc: "Стеклянный шар с зимней юртой внутри — тепло родного дома." },
  { img: "ball-map.jpg", name: "Шар «Қазақстан»", kz: "Qazaqstan", cat: "balls",
    desc: "Шар с картой Казахстана — гордость за свою страну." },
  { img: "ball-arkhar.jpg", name: "Шар «Архар»", kz: "Arqar", cat: "balls",
    desc: "Шар с архаром — благородство и сила степей." },
  { img: "ball-sheep.jpg", name: "Шар «Овечка»", kz: "Qoı share", cat: "balls",
    desc: "Шар с овечкой — мягкость и уют зимней сказки." },
];

// ── Цены: РРЦ в ₸. Опт = РРЦ − 30% считается автоматически. Правьте ТОЛЬКО эти числа. ──
const RRP = {
  "ball-flag.jpg": 4900,
  "barys.jpg": 4900, "ayaz-ata.jpg": 4900, "aqshaqar.jpg": 4900, "snowman.jpg": 4900,
  "horse-white.jpg": 4900, "horse-brown.jpg": 4900, "yurta.jpg": 4900, "tazy.jpg": 4900,
  "cat.jpg": 4900, "sheep.jpg": 4900, "lamb.jpg": 4900, "matryoshka.jpg": 4900,
  "owl.jpg": 4900, "rocket.jpg": 4900, "chocolate.jpg": 4900,
  "ball-ornament-1.jpg": 2500, "ball-ornament-2.jpg": 2500, "ball-ornament-3.jpg": 2500,
  "ball-yurt.jpg": 4900, "ball-map.jpg": 2900, "ball-arkhar.jpg": 2800, "ball-sheep.jpg": 4900,
  "box-qe-1.jpg": 12500, "box-qe-2.jpg": 9500, "box-qe-3-cut.png": 16900,
  "box-orn.jpg": 7500, "box-qazaqstan.jpg": 7500,
};
PRODUCTS.forEach((p) => { p.rrp = RRP[p.img]; });

function ProductCardTile({ p, delay }) {
  const open = () => openProduct(p);
  return React.createElement(Reveal, { delay, className: `lp-prod${p.hit ? " hit" : ""}`, tag: "div", role: "button", tabIndex: 0,
      onClick: open, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(); } } },
    p.top && React.createElement("span", { className: "lp-prod-hit" }, React.createElement(Spark, { style: { width: 11, height: 11 } }), "Хит сезона"),
    React.createElement("div", { className: "pic" }, React.createElement("img", { src: PBASE + 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(PriceTag, { rrp: p.rrp }),
      React.createElement("div", { className: "lp-prod-cta" }, React.createElement(AddToCartBtn, { p }))),
    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: "Бокс «Qazaq Ertegi» №1", img: "box-qe-1.jpg", desc: "Набор фигурок в национальном этно-стиле — казахская легенда в подарочной коробке." },
    { tier: "Бокс «Qazaq Ertegi» №2", img: "box-qe-2.jpg", desc: "Праздничный набор фигурок — национальные образы под ёлку всей команде." },
    { tier: "Бокс «Qazaq Ertegi» №3", img: "box-qe-3-cut.png", desc: "Фигурки казахских легенд — юрта, Аяз Ата, Ақшақар и барашек. Самый большой набор коллекции.", feature: true, badge: "Топ продаж" },
    { tier: "Бокс «Ornament»", img: "box-orn.jpg", desc: "Стеклянные шары серии «Ornament» в подарочной коробке — лаконично и со вкусом." },
    { tier: "Бокс «Qazaqstan»", img: "box-qazaqstan.jpg", desc: "Шар с флагом Казахстана, золотой шар и шоколад — патриотичный набор-пожелание." },
  ];
  boxes.forEach((b) => { b.rrp = RRP[b.img]; });
  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: PBASE + "ball-flag-cut.png", alt: "Шар с флагом Казахстана", style: { position: "relative", maxHeight: 320, maxWidth: "70%", 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: 20 } }, React.createElement(PriceTag, { rrp: hit.rrp, onRed: true })),
              React.createElement("div", { style: { marginTop: 16, display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center" } },
                React.createElement(AddToCartBtn, { p: hit, block: false }),
                React.createElement(CTA, { variant: "glass", 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" : ""}` },
            b.badge && React.createElement("span", { className: "lp-box-badge" }, React.createElement(Spark, { style: { width: 11, height: 11 } }), b.badge),
            React.createElement("span", { className: "tier" }, b.tier),
            React.createElement("div", { className: "pic" }, React.createElement("img", { src: PBASE + b.img + "?v=2", alt: b.tier })),
            React.createElement("p", null, b.desc),
            React.createElement(PriceTag, { rrp: b.rrp, onRed: b.feature }),
            React.createElement("div", { className: "lp-box-cta" },
              React.createElement(AddToCartBtn, { p: b, variant: b.feature ? "amber" : "red" }),
              React.createElement("button", { type: "button", className: `lp-box-quote${b.feature ? " on-red" : ""}`, onClick: openLead },
                "Запросить расчёт", React.createElement(Spark, { style: { width: 12, height: 12 } }))))))
      )
    )
  );
}

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