<script lang="ts">
  import { dev } from '$app/environment';
</script>

<section class="py-8 prose prose-invert max-w-none">
  <h1 class="font-display tracking-widest">Guides</h1>
  <p>Community-written tips and guides for improving your Beat Saber game. Contributions welcome.</p>

  <div class="not-prose grid gap-4 sm:grid-cols-2 lg:grid-cols-3 mt-6">
    {#if dev}
      <a href="/guides/beatleader-auth" class="card-surface p-5 block">
        <h3 class="font-semibold">BeatLeader Authentication</h3>
        <p class="mt-1 text-sm text-muted">Connect BeatLeader to enhance tools like Compare Players.</p>
      </a>
    {/if}
    <a href="/guides/finding-new-songs" class="card-surface p-5 block">
      <h3 class="font-semibold">Finding New Songs (BeatLeader)</h3>
      <p class="mt-1 text-sm text-muted">Month-by-month search using unranked stars, tech rating, and friend filters.</p>
    </a>
  </div>
</section>


