// Base class for any catalog item
    class CatalogItem {
      constructor(name, description) {
        this.name = name;
        this.description = description;
      }
      render() {
        const el = document.createElement('div');
        el.className = 'product';
        el.innerHTML = `
${this.name}
${this.description}
`;
        return el;
      }
    }

    // Product class with price and ID
    class Product extends CatalogItem {
      constructor(name, description, price) {
        super(name, description);
        this.price = price;
        this.id = Product.generateId();
      }
      static generateId() {
        Product._lastId = (Product._lastId || 0) + 1;
        return Product._lastId;
      }
      render() {
        const el = super.render();
        const priceEl = document.createElement('p');
        priceEl.className = 'price';
        priceEl.textContent = `Price: $${this.price.toFixed(2)}`;
        el.appendChild(priceEl);
        return el;
      }
    }

    // Catalog class for managing products
    class Catalog {
      constructor() {
        this.items = [];
      }
      addItem(item) {
        if (item instanceof CatalogItem) {
          this.items.push(item);
        }
      }
      sortByPrice(asc = true) {
        this.items.sort((a, b) => asc ? a.price - b.price : b.price - a.price);
      }
      filterByPrice(maxPrice) {
        return this.items.filter(item => item.price < maxPrice);
      }
      render(containerId, items = null) {
        const container = document.getElementById(containerId);
        container.innerHTML = '';
        (items || this.items).forEach(item => container.appendChild(item.render()));
      }
    }