privet/script.js

const places = [
  {
    id: 1,
    title: "Медеу",
    category: "mountain",
    catName: "Горы",
    description: "Высокогорный каток на высоте 1691 м. Самое высокое здание в мире среди спортивных сооружений такого типа. Зимой — катание на коньках, летом — прогулки с видом на горы.",
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Medeu_skating_rink.jpg/600px-Medeu_skating_rink.jpg"
  },
  {
    id: 2,
    title: "Шымбулак",
    category: "mountain",
    catName: "Горы",
    description: "Горнолыжный курорт в Заилийском Алатау. Трассы для любого уровня, канатная дорога до 3200 м. Летом — хайкинг и потрясающие виды.",
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Shymbulak_ski_resort.jpg/600px-Shymbulak_ski_resort.jpg"
  },
  {
    id: 3,
    title: "Панфиловский парк",
    category: "park",
    catName: "Парки",
    description: "Сердце города с Вознесенским собором — одним из самых высоких деревянных зданий в мире. Аллея памяти, вечный огонь и уютные скамейки.",
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Ascension_Cathedral_in_Almaty.jpg/600px-Ascension_Cathedral_in_Almaty.jpg"
  },
  {
    id: 4,
    title: "Кок-Тобе",
    category: "mountain",
    catName: "Горы",
    description: "Гора в центре города с телебашней. Канатная дорога, колесо обозрения, смотровые площадки с панорамой Алматы. Идеально для заката.",
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Kok-Tobe_TV_Tower.jpg/600px-Kok-Tobe_TV_Tower.jpg"
  },
  {
    id: 5,
    title: "Зелёный базар",
    category: "street",
    catName: "Улицы",
    description: "Легендарный рынок с восточным колоритом. Свежие фрукты, орехи, специи, курт. Обязательно попробовать самсу и баурсаки.",
    img: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Green_Bazaar_in_Almaty.jpg/600px-Green_Bazaar_in_Almaty.jpg"
  },
  {
    id: 6,
    title: "Кафе «Мухаббат»",
    category: "cafe",
    catName: "Кафе",
    description: "Культовое место с советским интерьером и современной кухней. Блюдо дня, домашняя атмосфера и доступные цены.",
    img: "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=600&h=400&fit=crop"
  },
  {
    id: 7,
    title: "Центральный музей РК",
    category: "museum",
    catName: "Музеи",
    description: "История Казахстана от древности до современности. Золотой человек, юрты, этнографическая экспозиция.",
    img: "https://images.unsplash.com/photo-1563820257896-d07a74896d27?w=600&h=400&fit=crop"
  },
  {
    id: 8,
    title: "Арасанские бани",
    category: "street",
    catName: "Улицы",
    description: "Исторические бани в центре города. Архитектурный памятник 1970-х, сочетание традиций и современного сервиса.",
    img: "https://images.unsplash.com/photo-1543489822-c49534f3271f?w=600&h=400&fit=crop"
  },
  {
    id: 9,
    title: "Парк имени Горького",
    category: "park",
    catName: "Парки",
    description: "Старейший парк города с аттракционами, озёрами и аллеями. Зимой — каток, летом — лодочная станция.",
    img: "https://images.unsplash.com/photo-1588668214407-6ea9e6d8c274?w=600&h=400&fit=crop"
  },
  {
    id: 10,
    title: "Кафе «Старый Баку»",
    category: "cafe",
    catName: "Кафе",
    description: "Азербайджанская кухня в уютном интерьере. Плов, кутабы, шурпа. Порции щедрые, цены демократичные.",
    img: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=600&h=400&fit=crop"
  },
  {
    id: 11,
    title: "Арт-пространство «Точка Кипения»",
    category: "museum",
    catName: "Музеи",
    description: "Современная площадка для встреч, выставок и лекций. Индустриальный дизайн, коворкинг, события каждый день.",
    img: "https://images.unsplash.com/photo-1531058020387-3be344556be6?w=600&h=400&fit=crop"
  },
  {
    id: 12,
    title: "Улица Желтоксан",
    category: "street",
    catName: "Улицы",
    description: "Пешеходная улица с кафе, магазинами и стрит-артом. Место прогулок и встреч молодёжи.",
    img: "https://images.unsplash.com/photo-1577083288073-40892c0860a4?w=600&h=400&fit=crop"
  },
  {
    id: 13,
    title: "Большой Алматинский пик",
    category: "mountain",
    catName: "Горы",
    description: "Верблюд на хребте Заилийского Алатау. Подъём на 20-30 минут, вид на Большое Алматинское озеро и пики до 5000 м.",
    img: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=600&h=400&fit=crop"
  },
  {
    id: 14,
    title: "Кафе «Нахари»",
    category: "cafe",
    catName: "Кафе",
    description: "Узбекская кухня: лагман, манты, шашлык. Тандыр на виду, живая музыка по вечерам.",
    img: "https://images.unsplash.com/photo-1552566626-52f8b828add9?w=600&h=400&fit=crop"
  },
  {
    id: 15,
    title: "Дендропарк",
    category: "park",
    catName: "Парки",
    description: "Ботанический сад с коллекцией растений со всего мира. Тихие аллеи, пруды, оранжереи. Идеально для спокойных прогулок.",
    img: "https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=600&h=400&fit=crop"
  }
];

const categories = {
  all: "Все места",
  park: "🌳 Парки",
  cafe: "☕ Кафе",
  mountain: "🏔 Горы",
  museum: "🏛 Музеи",
  street: "🚶 Улицы"
};

function render(filter = "all") {
  const container = document.getElementById("places");
  const filtered = filter === "all" ? places : places.filter(p => p.category === filter);
  
  container.innerHTML = filtered.map(place => `
    <article class="place-card">
      <img src="${place.img}" alt="${place.title}" class="place-img" loading="lazy">
      <div class="place-info">
        <div class="place-cat">${place.catName}</div>
        <h3 class="place-title">${place.title}</h3>
        <p class="place-desc">${place.desc}</p>
      </div>
    </article>
  `).join("");
}

document.querySelectorAll(".cat-btn").forEach(btn => {
  btn.addEventListener("click", () => {
    document.querySelectorAll(".cat-btn").forEach(b => b.classList.remove("active"));
    btn.classList.add("active");
    render(btn.dataset.cat);
  });
});

render();