sozday-sayt-dlya-tsvetochnog/script.js

const BUKETS = [
  { id: "roses-royal", name: "Королевские розы", desc: "15 нежных роз с зеленью — классика к любому празднику.", price: "24 000 ₸", tag: "Хит", cat: "roses", pale: 1 },
  { id: "peony-parade", name: "Пионы «Парад»", desc: "10 пышных розовых пеонов — главный цветок начала лета.", price: "32 000 ₸", tag: "Сезон", cat: "peony", pale: 4 },
  { id: "lilac-cloud", name: "Сиреневое облако", desc: "Синие и фиолетовые розы с эвкалиптом — для спокойных, глубинных чувств.", price: "27 500 ₸", tag: "Новинка", cat: "lilac", pale: 2 },
  { id: "orange-mood", name: "Оранжевое настроение", desc: "Альстромерии и гортензия — для ярких дней и новых поводов.", price: "19 900 ₸", tag: "Хит", cat: "orange", pale: 1 },
  { id: "sunset-bouquet", name: "Закатный букет", desc: "Розовые ранункулюсы и розы в пастельной гамме — мягко, но не приторно.", price: "22 000 ₸", tag: "Сезон", cat: "sunset", pale: 3 },
  { id: "white-petal", name: "Снежные пионы", desc: "Белые пионы и розы на зелёном — свежо, чисто, легко.", price: "18 500 ₸", tag: "Хит", cat: "white", pale: 3 },
  { id: "spring-breeze", name: "Весенний бриз", desc: "Лавандовые и белые тона — для первого свидания или мира.", price: "21 000 ₸", tag: "Новинка", cat: "peony", pale: 4 },
  { id: "berry-tones", name: "Ягодные тона", desc: "Малиновые розы и ранункулюсы — плотный, насыщенный букет.", price: "26 500 ₸", tag: "Хит", cat: "roses", pale: 2 }
];

const CAT_LABELS = {
  all: "Все", roses: "Розы", peony: "Пионы", lilac: "Сиреневые",
  orange: "Оранжевые", sunset: "Закатные", white: "Белые и свежие"
};

function cardHtml(b) {
  const name = String(b.name).replace(/"/g, """);
  return (
    '<article class="fl-card" data-cat="' + b.cat + '">' +
      '<div class="fl-flower fl-flower--card fl-palette-' + b.pale + '"></div>' +
      '<div class="fl-card-head"><h3>' + name + '</h3><span class="kt-ai-chip">' + b.tag + '</span></div>' +
      '<p class="fl-card-desc">' + b.desc + '</p>' +
      '<div class="fl-card-foot">' +
        '<span class="fl-price">' + b.price + '</span>' +
        '<button type="button" class="kt-ai-btn" data-size="sm" data-variant="primary" data-order="' + b.id + '" data-name="' + name + '">Заказать</button>' +
      '</div>' +
    '</article>'
  );
}

function renderChips(active) {
  const order = ["all", "roses", "peony", "lilac", "orange", "sunset", "white"];
  const counts = { all: BUKETS.length };
  BUKETS.forEach(function (b) { counts[b.cat] = (counts[b.cat] || 0) + 1; });
  const el = document.getElementById("fl-chips");
  el.innerHTML = order
    .filter(function (c) { return c === "all" || counts[c]; })
    .map(function (c) {
      const label = c === "all" ? "Все" : CAT_LABELS[c] + " · " + counts[c];
      const sel = c === active;
      return (
        '<button type="button" class="kt-ai-chip" role="tab" data-cat-filter="' + c + '"' +
        ' aria-selected="' + sel + '"' +
        (sel ? ' style="font-weight:600;background:var(--kt-ai-primary-subtle);color:var(--kt-ai-fg)"' : "") +
        ">" + label + "</button>"
      );
    })
    .join("");
  el.querySelectorAll("[data-cat-filter]").forEach(function (btn) {
    btn.addEventListener("click", function () { applyFilter(btn.dataset.catFilter); });
  });
}

function applyFilter(cat) {
  renderChips(cat);
  document.querySelectorAll("#fl-catalog-grid .fl-card").forEach(function (el) {
    el.style.display = cat === "all" || el.dataset.cat === cat ? "" : "none";
  });
}

function mobileTabsHtml() {
  const items = [
    ["#catalog", "Каталог", "catalog"],
    ["#delivery", "Доставка", "package"],
    ["#contacts", "Контакты", "pin"],
    ["#support", "Поддержка", "help"],
    ["#about", "О нас", "users"]
  ];
  return items
    .map(function (it) {
      return (
        '<a class="fl-tab-link" href="' + it[0] + '" style="height:32px">' +
        '<svg class="kt-icon" aria-hidden="true"><use href="#' + it[2] + '"></use></svg>' + it[1] + "</a>"
      );
    })
    .join("");
}

function setActivePanel(hash) {
  const id = hash && hash.length > 1 ? hash : "#catalog";
  document.querySelectorAll(".fl-panel").forEach(function (p) {
    p.classList.toggle("is-open", p.id === id.slice(1));
  });
  document.querySelectorAll(".fl-tab-link").forEach(function (a) {
    a.classList.toggle("is-active", a.getAttribute("href") === id);
  });
}

function initTabs() {
  window.addEventListener("hashchange", function () { setActivePanel(location.hash); });
  setActivePanel(location.hash);

  document.body.addEventListener("click", function (e) {
    const a = e.target.closest(".fl-tab-link");
    if (!a) return;
    e.preventDefault();
    const href = a.getAttribute("href");
    history.replaceState(null, "", href);
    setActivePanel(href);
    window.scrollTo({ top: 0 });
  });

  const mob = document.querySelector(".fl-mobile-tabs");
  if (mob) mob.innerHTML = mobileTabsHtml();
}

function initOrder() {
  document.addEventListener("click", function (e) {
    const btn = e.target.closest("[data-order]");
    if (!btn || btn.dataset.busy) return;
    const name = btn.dataset.name || "букет";
    btn.dataset.busy = "1";
    btn.setAttribute("data-loading", "true");
    const originalText = btn.textContent;
    setTimeout(function () {
      btn.removeAttribute("data-loading");
      delete btn.dataset.busy;
      btn.textContent = originalText;
      window.location.href = "https://t.me/buketlab?text=" +
        encodeURIComponent("Здравствуйте! Хочу заказать: «" + name + "»");
    }, 600);
  });
}

function initFaq() {
  document.querySelectorAll(".fl-qa").forEach(function (qa) {
    qa.addEventListener("click", function (e) {
      const b = e.target.closest("[data-fl-qa]");
      if (!b) return;
      const wasOpen = qa.getAttribute("data-open") === "true";
      document.querySelectorAll(".fl-qa").forEach(function (o) { o.setAttribute("data-open", "false"); });
      if (!wasOpen) qa.setAttribute("data-open", "true");
    });
  });
}

document.addEventListener("DOMContentLoaded", function () {
  const grid = document.getElementById("fl-catalog-grid");
  if (grid) {
    grid.innerHTML = BUKETS.map(cardHtml).join("");
    renderChips("all");
  }
  initTabs();
  initOrder();
  initFaq();
});