@extends('layouts.public')

@section('content')
<!-- Celebrity Directory Section -->
<section class="bg-gray-50 py-12">
  <div class="container mx-auto px-4">
    <!-- Header -->
    <div class="text-center mb-12">
      <h2 class="text-3xl font-bold text-gray-900">Celebrity Directory</h2>
      <p class="text-gray-600 mt-2 max-w-2xl mx-auto">
        Explore our curated list of celebrities, influencers, and artists across various categories. Click on a profile to view contact information and more details.
      </p>
    </div>

  

    <!-- Celebrity Grid -->
    <div class="mx-auto max-w-7xl grid grid-cols-2 gap-8 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-4">
       
       @forelse($artists as $artist )
      <!-- Celebrity Card Example -->
      <div class="relative group bg-white rounded-lg overflow-hidden shadow hover:shadow-lg transition duration-300">
        <a href="{{secure_url('artist/'.$artist->slug)}}">
          <span class="absolute top-2 left-2 bg-indigo-600 text-white text-xs font-semibold px-2 py-1 rounded">Hip-Hop</span>
          <div class="relative">
            <img class="w-full h-32 md:h-64 object-cover transform group-hover:scale-105 transition duration-300" src="{{avatar_exists(secure_url('celebrity/' . $artist->avatar))}}" alt="{{$artist->name}}">
            <div class="absolute inset-0 bg-black bg-opacity-60 opacity-0 group-hover:opacity-100 transition duration-300 flex flex-col justify-center p-4">
              <h3 class="text-white text-lg font-bold mb-2">{{$artist->name}}</h3>
             
              <span class="text-indigo-400 text-sm font-semibold hover:underline">MORE &gt;</span>
              <button class="mt-2 bg-indigo-600 text-white text-sm px-3 py-2 rounded hover:bg-indigo-700 flex items-center">
                View contacts <i class="fa fa-long-arrow-right ml-1"></i>
              </button>
            </div>
          </div>
          <div class="p-4">
            <h3 class="text-gray-900 font-semibold text-lg">{{$artist->name}}</h3>
            <h5 class="text-gray-500 text-sm">Contact information</h5>
          </div>
        </a>
      </div>
      @empty
      
      @endforelse

     
      
    </div>

    <!-- Login CTA -->
    <div class="mt-8 text-center">
      <a href="{{route('auth.login')}}" class="text-indigo-600 font-semibold hover:underline">Login to View More</a>
    </div>
  </div>
</section>


@endsection