@extends('layouts.app')
@section('title', 'Reviews — De Eventa')

@section('content')
<div class="pt-20">

<section class="py-20 bg-dark-800 text-center">
    <div class="max-w-4xl mx-auto px-4">
        <p class="section-subtitle">Client Feedback</p>
        <h1 class="section-title mb-4">What Our Clients Say</h1>
        <div class="gold-divider"></div>
    </div>
</section>

<section class="py-20 bg-dark-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            @forelse($reviews as $review)
            <div class="card-dark p-8">
                <div class="flex gap-1 mb-4">
                    @for($s = 1; $s <= 5; $s++)
                    <svg class="w-5 h-5 {{ $s <= $review->rating ? 'text-gold-500' : 'text-dark-600' }}"
                         fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                    @endfor
                </div>
                <p class="text-dark-100 italic leading-relaxed text-lg mb-6">"{{ $review->review }}"</p>
                <div class="flex items-center gap-4 pt-4 border-t border-dark-700">
                    @if($review->avatar)
                    <img src="{{ Storage::url($review->avatar) }}" alt="{{ $review->client_name }}"
                         class="w-12 h-12 rounded-full object-cover">
                    @else
                    <div class="w-12 h-12 rounded-full bg-gold-500/20 border border-gold-500/30 flex items-center justify-center">
                        <span class="text-gold-500 font-bold">{{ strtoupper(substr($review->client_name, 0, 1)) }}</span>
                    </div>
                    @endif
                    <div>
                        <p class="text-white font-semibold">{{ $review->client_name }}</p>
                        @if($review->event_type)
                        <p class="text-gold-500 text-xs uppercase tracking-wider">{{ ucfirst($review->event_type) }}</p>
                        @endif
                    </div>
                </div>
            </div>
            @empty
            <div class="md:col-span-2 text-center text-dark-400 py-20">
                Reviews coming soon.
            </div>
            @endforelse
        </div>

        <div class="mt-16 text-center">
            <h3 class="font-serif text-2xl text-white font-bold mb-4">Happy with our service?</h3>
            <p class="text-dark-300 mb-6">We'd love to hear about your experience.</p>
            <a href="{{ route('contact') }}" class="btn-gold">Share Your Story</a>
        </div>
    </div>
</section>

</div>
@endsection