function groupByPhase(tools) {
    const groups = {};
    for (const tool of tools) {
        const list = groups[tool.phase];
        if (list) {
            list.push(tool);
        }
        else {
            groups[tool.phase] = [tool];
        }
    }
    return groups;
}
function renderTierBadge(tier) {
    const cls = tier === 'free' ? 'badge-free' : 'badge-pro';
    const label = tier === 'free' ? 'Free' : 'Pro';
    return `<span class="tier-badge ${cls}">${label}</span>`;
}
export function renderToolsCatalog(tools) {
    const freeCount = tools.filter((t) => t.tier === 'free').length;
    const proCount = tools.filter((t) => t.tier === 'pro').length;
    if (tools.length === 0) {
        return `<div class="tools-catalog">
  <div class="tools-summary">
    <p>Total: 0 | Free: 0 | Pro: 0</p>
  </div>
  <p class="empty">No tools found.</p>
</div>`;
    }
    const grouped = groupByPhase(tools);
    const sections = Object.entries(grouped)
        .map(([phase, phaseTools]) => {
        const cards = phaseTools
            .map((tool) => {
            const searchable = `${tool.name} ${tool.description}`.toLowerCase();
            return `    <div class="tool-card" data-searchable="${searchable}">
      <h3>${tool.name} ${renderTierBadge(tool.tier)}</h3>
      <p>${tool.description}</p>
    </div>`;
        })
            .join('\n');
        return `  <section class="tools-phase">
    <h2>${phase}</h2>
${cards}
  </section>`;
    })
        .join('\n');
    return `<div class="tools-catalog">
  <div class="tools-summary">
    <p>Total: ${String(tools.length)} | Free: ${String(freeCount)} | Pro: ${String(proCount)}</p>
  </div>
${sections}
</div>`;
}
//# sourceMappingURL=tools-renderer.js.map