<script lang="ts">
  import Guestbook from '$lib/components/Guestbook.svelte';
</script>

<section class="grid items-center gap-10 py-12 md:py-20 lg:grid-cols-2">
  <div class="space-y-6">
    <h1 class="font-display text-4xl sm:text-5xl lg:text-6xl leading-tight">
      helper tools  for <span class="neon-text">Beat Saber</span>
    </h1>
    <p class="max-w-prose text-lg text-muted">
      Notes about how things work and utilities for finding maps to play.
    </p>
    <div class="flex flex-wrap gap-3">
      <a href="/tools" class="btn-neon">Explore Tools</a>
      <a href="/guides" class="inline-flex items-center gap-2 rounded-md border border-white/10 px-4 py-2 text-white/80 hover:text-white hover:border-white/30 transition">Read Guides</a>
    </div>
  </div>

  <div class="relative">
    <div class="absolute -inset-6 bg-gradient-to-tr from-neon/20 via-transparent to-neon-fuchsia/20 blur-2xl rounded-3xl"></div>
  <div class="relative card-surface p-6 sm:p-8">
    <div class="grid grid-cols-2 gap-4">
      <a href="/tools/compare-histories" class="rounded-lg bg-black/30 ring-1 ring-white/10 p-4 block hover:ring-white/20 transition">
        <div class="text-sm text-muted">Tool</div>
        <div class="mt-1 text-2xl font-mono">Player History Comparison</div>
        <div class="mt-1 text-sm text-muted">A vs B: songs A played that B has not</div>
      </a>
      <a href="/tools/playlist-discovery" class="rounded-lg bg-black/30 ring-1 ring-white/10 p-4 block hover:ring-white/20 transition">
        <div class="text-sm text-muted">Tool</div>
        <div class="mt-1 text-2xl font-mono">Playlist Discovery</div>
        <div class="mt-1 text-sm text-muted">Experimental UX for browsing new playlists on BeatSaver</div>
      </a>
    </div>
  </div>
  </div>
</section>

<section class="py-12">
  <div class="grid gap-10 xl:gap-14 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] items-start">
    <div class="space-y-6">
      <div class="prose prose-invert max-w-none">
        <h2 class="font-display tracking-widest">Latest Guides</h2>
      </div>
      <div class="not-prose grid gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
        <a href="/guides/finding-new-songs" class="card-surface p-5 block">
          <div class="text-sm text-muted">Guide</div>
          <h3 class="font-semibold mt-1">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>
        <a href="/guides/beatleader-auth" class="card-surface p-5 block">
          <div class="text-sm text-muted">Guide</div>
          <h3 class="font-semibold mt-1">BeatLeader Authentication</h3>
          <p class="mt-1 text-sm text-muted">Connect BeatLeader and enable unranked stars in tools.</p>
        </a>
      </div>
    </div>

    <Guestbook />
  </div>
</section>


