@props([
    'stars'           => 5,
    'text'            => '',
    'authorName'      => '',
    'authorRole'      => '',
    'authorInitials'  => '',
    'avatarUrl'       => null,
    'avatarGradient'  => 'from-primary to-secondary',
])

<div class="relative bg-dark/80 backdrop-blur-md border border-gray-light/20 rounded-2xl p-8 transition-all duration-300 hover:-translate-y-1 hover:border-primary/30 hover:shadow-md overflow-hidden">
    {{-- علامة اقتباس مائية --}}
    <div class="absolute top-4 left-4 text-7xl text-primary/10 font-serif leading-none">“</div>

    {{-- النجوم --}}
    <div class="flex gap-1 mb-5 relative z-10">
        @for ($i = 0; $i < 5; $i++)
            <span class="text-yellow-500 text-sm">{{ $i < $stars ? '★' : '☆' }}</span>
        @endfor
    </div>

    {{-- نص الشهادة --}}
    <p class="text-gray-light text-sm leading-relaxed mb-8 relative z-10 italic">"{{ $text }}"</p>

    {{-- معلومات العميل --}}
    <div class="flex items-center gap-4 relative z-10">
        @if($avatarUrl)
            <img src="{{ $avatarUrl }}" alt="{{ $authorName }}" class="w-12 h-12 rounded-full object-cover">
        @else
            <div class="w-12 h-12 rounded-full bg-gradient-to-br {{ $avatarGradient }} flex items-center justify-center text-white font-bold text-lg">
                {{ $authorInitials }}
            </div>
        @endif
        <div>
            <div class="font-bold text-white text-sm">{{ $authorName }}</div>
            <div class="text-gray-light text-xs">{{ $authorRole }}</div>
        </div>
    </div>
</div>