/* CategoryScreen — select specific product category within a folder */
const CategoryScreen = ({ lang, folder, onSelectCategory, onBack }) => {
  if (!folder) return null;
  
  const categories = folder.categories || [];
  const catalog = window.CATALOG || {};
  
  const getCategoryInfo = (catId) => {
    const cat = catalog.categories && catalog.categories[catId];
    const products = catalog.getProductsByCategory(catId) || [];
    return { ...cat, productCount: products.length };
  };

  return (
    <section className="categories" data-screen-label="categories">
      <header className="screen-head">
        <h2>{lang === 'el' ? folder.label_el : folder.label_en}</h2>
      </header>

      <div className="category-grid">
        {categories.map(catId => {
          const info = getCategoryInfo(catId);
          const label = lang === 'el' ? info.label_el : info.label_en;
          const count = info.productCount || 0;
          const isPlaceholder = info.placeholder;

          return (
            <button
              key={catId}
              className={`category-tile category-tile--${catId} ${isPlaceholder ? 'is-placeholder' : ''}`}
              onClick={() => !isPlaceholder && onSelectCategory(catId)}
              disabled={isPlaceholder}
            >
              <div className="category-tile-icon">
                <Icon name={info.icon || 'box-m'} size={info.icon === 'yoga-cat' ? 40 : 56} />
              </div>
              <div className="category-tile-text">
                <h3>{label}</h3>
                <span className="category-tile-count">
                  {isPlaceholder
                    ? t('no_products', lang)
                    : `${count} ${count === 1 ? t('products_count_one', lang) : t('products_count_many', lang)}`}
                </span>
              </div>
            </button>
          );
        })}
      </div>
    </section>
  );
};
window.CategoryScreen = CategoryScreen;