@props(['faculty'])

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1 group">
    <div class="p-8">
        <div class="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center mb-6 group-hover:bg-blue-600 transition-colors duration-300">
            <svg class="w-6 h-6 text-blue-600 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
            </svg>
        </div>
        
        <h3 class="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors duration-300">
            {{ $faculty->name }}
        </h3>
        
        <p class="text-gray-600 leading-relaxed mb-6 line-clamp-3">
            {{ $faculty->description ?? "Pas de description disponible pour cette faculté." }}
        </p>
        
        <div class="flex items-center justify-between mt-auto">
            <span class="text-sm font-medium text-gray-400">
                {{ $faculty->departments_count ?? 0 }} Départements
            </span>
            
            <a href="{{ route('faculties.show', $faculty->id) }}" class="inline-flex items-center text-sm font-semibold text-blue-600 hover:text-blue-700">
                Explorer
                <svg class="w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </a>
        </div>
    </div>
</div>