const TOOLS = [
  { id: '01', title: 'MarkItDown', desc: 'Convert any document to Markdown instantly — drop in a PDF, DOCX, PPTX, XLSX, HTML, or CSV and get clean output back.', tags: ['Python', 'FastAPI'], url: 'https://md.carloselugo.com' },
  { id: '02', title: 'IT Tools', desc: 'A self-hosted collection of developer utilities — CIDR calculator, JSON formatter, Base64, JWT decoder, cron parser, and more.', tags: ['Docker', 'DevTools'], url: 'https://tools.carloselugo.com' },
]

export function renderTools() {
  const cards = TOOLS.map(t => `
    <a class="card tool-card reveal" href="${t.url}" target="_blank" rel="noopener">
      <div class="card-top">
        <span class="card-id mono">${t.id}</span>
        <span class="tag tag-accent">live</span>
      </div>
      <h3 class="card-title">${t.title}</h3>
      <p class="card-desc">${t.desc}</p>
      <div class="tool-bottom">
        <div class="card-tags">
          ${t.tags.map(tag => `<span class="tag tag-outline">${tag}</span>`).join('')}
        </div>
        <span class="tool-open">open ↗</span>
      </div>
    </a>
  `).join('')

  return `
    <section class="tools" id="tools">
      <div class="container">
        <span class="section-kicker">Self-Built Tools</span>
        <div class="card-grid">
          ${cards}
        </div>
      </div>
    </section>

    <style>
      .tools { padding: 0 0 64px; }
      .tool-card { text-decoration: none; color: inherit; }
      .tool-bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: auto;
      }
      .tool-open { font-size: 0.75rem; color: var(--accent); }
    </style>
  `
}