@extends('layouts.app')

@section('content')
  <div class="flex items-center justify-between mb-4">
    <h1 class="text-2xl font-semibold">Help & Guides</h1>
    <a href="{{ route('dashboard') }}" class="text-sm text-gray-500 hover:underline">Back to Dashboard</a>
  </div>

  <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
    @forelse($topics as $slug => $label)
      <a href="{{ route('help.show', $slug) }}"
         class="group block rounded border bg-white p-4 shadow-sm transition hover:shadow">
        <div class="flex items-center justify-between">
          <div class="font-medium">{{ $label }}</div>
          <svg class="h-4 w-4 text-gray-400 group-hover:text-gray-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707A1 1 0 118.707 5.293l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
          </svg>
        </div>
        <div class="mt-1 text-sm text-gray-500">Open guide</div>
      </a>
    @empty
      <p class="text-sm text-gray-500">No topics available yet.</p>
    @endforelse
  </div>
@endsection