@props([
    'classes' => [],
    'currentClassId' => null,
    'title' => 'Related Classes'
])

@if(count($classes) > 0)
<section class="bg-gray-50 py-12">
  <div class="container">
    <h2 class="mb-8 text-center text-2xl font-bold text-blue-900">{{ $title }}</h2>
    
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
      @foreach($classes as $class)
        @if($class['id'] !== $currentClassId)
          <div class="group rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-all hover:border-blue-300 hover:shadow-md">
            <div class="mb-3">
              <img src="{{ asset($class['image']) }}" alt="{{ $class['alt'] }}"
                class="h-32 w-full rounded-lg object-cover">
            </div>
            
            <h3 class="mb-2 text-lg font-semibold text-blue-900 group-hover:text-blue-700">
              {{ $class['title'] }}
            </h3>
            
            <p class="mb-3 text-sm text-gray-600 line-clamp-2">
              {{ $class['description'] }}
            </p>
            
            <div class="flex items-center justify-between">
              <span class="text-xs text-gray-500">{{ $class['duration'] }}</span>
              
              @if(isset($class['url']) && $class['url'])
                <a href="{{ $class['url'] }}" 
                   class="rounded bg-blue-600 px-3 py-1 text-sm text-white transition-colors hover:bg-blue-700">
                  View Class
                </a>
              @else
                <span class="rounded bg-gray-400 px-3 py-1 text-sm text-white">
                  Coming Soon
                </span>
              @endif
            </div>
          </div>
        @endif
      @endforeach
    </div>
  </div>
</section>
@endif