const projects = [
  {
    id: '01',
    title: 'Pathfinder 2.0',
    desc: 'Real-time flow analytics platform on Kafka, ClickHouse, PostgreSQL, Flask, and D3.js — giving stakeholders CGNAT and CMTS utilization visibility.',
    tags: ['Kafka', 'ClickHouse', 'D3.js'],
    status: 'in production',
  },
  {
    id: '03',
    title: 'Capacity Forecasting Models',
    desc: 'Prophet-based time-series models predicting regional capacity needs, guiding an annual core baseline budget in the tens of millions.',
    tags: ['Prophet', 'Forecasting'],
    status: 'live',
  },
  {
    id: '04',
    title: 'Carrier-Transition Flap Detection',
    desc: 'Telemetry and SNMP pipeline for delta-based alerting across thousands of interfaces on Cisco IOS-XR and Juniper JunOS.',
    tags: ['SNMP', 'Telemetry'],
    status: 'live',
  },
]

export function renderProjects() {
  const cards = projects.map(p => `
    <article class="card reveal">
      <div class="card-top">
        <span class="card-id mono">${p.id}</span>
        <span class="tag tag-accent">${p.status}</span>
      </div>
      <h3 class="card-title">${p.title}</h3>
      <p class="card-desc">${p.desc}</p>
      <div class="card-tags">
        ${p.tags.map(t => `<span class="tag tag-outline">${t}</span>`).join('')}
      </div>
    </article>
  `).join('')

  return `
    <section class="projects" id="projects">
      <div class="container">
        <span class="section-kicker">Selected Work</span>
        <div class="card-grid">
          ${cards}
        </div>
      </div>
    </section>

    <style>
      .projects { padding: 64px 0; }
      .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
      }
      .card {
        background: var(--bg-card);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .card-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .card-id { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.08em; }
      .card-title { font-size: 1.1rem; }
      .card-desc { font-size: 0.85rem; color: var(--muted-2); line-height: 1.6; flex: 1; }
      .card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
    </style>
  `
}