<section class="py-8">
  <h1 class="font-display text-3xl sm:text-4xl">Tools</h1>
  <p class="mt-2 text-muted">A suite of utilities for Beat Saber players. More coming soon.</p>

  <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    {#each [
      { name: 'BeatLeader Compare Players', href: '/tools/beatleader-compare', desc: 'Find songs A played that B has not' },
      { name: 'BeatLeader Playlist Gap', href: '/tools/beatleader-playlist-gap', desc: 'Upload a playlist and find songs a player has not played' }
    ] as tool}
      <a href={tool.href} class="card-surface p-5 block">
        <div class="font-semibold">{tool.name}</div>
        <div class="mt-1 text-sm text-muted">{tool.desc}</div>
      </a>
    {/each}
  </div>

  
</section>


