<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: 'Compare Play Histories', href: '/tools/compare-histories', desc: 'Find songs A played that B has not' },
      { name: 'Player Playlist Gaps', href: '/tools/player-playlist-gaps', desc: 'Upload a playlist and find songs a player has not played' },
      { name: 'Player Head-to-Head', href: '/tools/player-headtohead', desc: 'Compare two players on the same map/difficulty' },
      { name: 'Playlist Discovery', href: '/tools/playlist-discovery', desc: 'Browse verified BeatSaver playlists sorted by recency' }
    ] 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>


