---
import SimplePageHeader from '../components/SimplePageHeader.astro';
import BaseLayout from '../layouts/BaseLayout.astro';
import { getRoadmapsByTag } from '../lib/roadmap';

const roleRoadmaps = await getRoadmapsByTag('role-roadmap');
const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
---

<BaseLayout title="Roadmap">
  <SimplePageHeader
    title="Developer Roadmaps"
    description="Step by step guides and paths to learn different tools or technologies"
    showYouTubeAlert={true}
  />

  <div class="bg-gray-100 pt-4 pb-14 sm:pt-8 sm:pb-16">
    <div class="container">
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-0.5 sm:gap-3">
        <h1>{ roleRoadmaps.length }</h1>
        <h1>{ skillRoadmaps.length }</h1>
      </div>
    </div>
  </div>
</BaseLayout>