var stores = [];
var currentFilter = "Все";

var ideas = [
  { title: "Скандинавский минимализм", desc: "Светлые стены, дерево и функциональная мебель. Идеален для однушек.", seed: "scandi", budget: "средний" },
  { title: "Современная классика", desc: "Белый + беж, молдинги, латунь. Спокойный стиль на годы.", seed: "classic", budget: "выше среднего" },
  { title: "Лофт", desc: "Кирпич, бетон, открытые трубы и тёмный металл. Для просторных квартир.", seed: "loft", budget: "выше среднего" },
  { title: "Светлый сканди-кухня", desc: "Белая кухня, кварцвинил под дерево, зональное освещение.", seed: "kitchen", budget: "средний" },
  { title: "Японский минимализм", desc: "Натуральные материалы, рассеянный свет, много воздуха.", seed: "japandi", budget: "средний" },
  { title: "Неоклассика с акцентом", desc: "Пастельные тона, аркообразные дверные проёмы, санузел с плиткой под мрамор.", seed: "neoclassic", budget: "выше среднего" }
];

function loadStores() {
  return fetch("data.json").then(r => r.json());
}

function renderFilters() {
  var cats = ["Все"];
  stores.forEach(function (s) {
    if (cats.indexOf(s.cat) === -1) cats.push(s.cat);
  });
  var box = document.getElementById("filters");
  box.innerHTML = cats.map(function (c, i) {
    var on = i === 0 ? " active" : "";
    return '<button class="chip' + on + '" data-cat="' + c + '">' + c + "</button>";
  }).join("");
  box.querySelectorAll(".chip").forEach(function (ch) {
    ch.addEventListener("click", function () {
      box.querySelectorAll(".chip").forEach(function (x) { x.classList.remove("active"); });
      ch.classList.add("active");
      currentFilter = ch.dataset.cat;
      currentFilter = currentFilter === "Все" ? "Все" : currentFilter;
      renderGrid();
    });
  });
}

function renderGrid() {
  var q = (document.getElementById("search").value || "").toLowerCase().trim();
  var grid = document.getElementById("storeGrid");
  var rows = stores.filter(function (s) {
    var okCat = currentFilter === "Все" || s.cat === currentFilter;
    var okQ = !q || (s.name + " " + s.brand + " " + s.desc + " " + s.districts).toLowerCase().indexOf(q) !== -1;
    return okCat && okQ;
  });
  if (!rows.length) {
    grid.innerHTML = '<p style="color:var(--kt-ai-fg-muted)">Ничего не найдено. Попробуйте другой запрос.</p>';
    return;
  }
  grid.className = "kt-ai-grid";
  grid.setAttribute("data-cols", "3");
  grid.style.marginTop = "var(--kt-ai-space-4)";
  grid.innerHTML = rows.map(function (s) {
    return '<article class="store-card reveal">' +
      '<span class="store-tag">' + s.cat + "</span>" +
      "<h3>" + s.name + "</h3>" +
      "<p>" + s.desc + "</p>" +
      "<p><strong>Адрес:</strong> " + s.address + "</p>" +
      "<p><strong>График:</strong> " + s.work + "</p>" +
      "</article>";
  }).join("");
  observeReveals();
}

function renderIdeas() {
  var box = document.getElementById("ideaGrid");
  box.innerHTML = ideas.map(function (it, i) {
    return '<article class="idea-card reveal">' +
      '<img loading="lazy" src="https://picsum.photos/seed/' + it.seed + '/600/400" alt="' + it.title + '">' +
      "<h3>" + it.title + "</h3>" +
      "<p>" + it.desc + "</p>" +
      '<span class="store-tag">бюджет: ' + it.budget + "</span>" +
      "</article>";
  }).join("");
  observeReveals();
}

var io = new IntersectionObserver(function (entries) {
  entries.forEach(function (e) { if (e.isIntersecting) e.target.classList.add("in"); });
}, { threshold: .15 });

function observeReveals() {
  document.querySelectorAll(".reveal:not(.in)").forEach(function (el) { io.observe(el); });
}

document.getElementById("search").addEventListener("input", renderGrid);

loadStores().then(function (data) {
  stores = data;
  renderFilters();
  renderGrid();
});

renderIdeas();