@extends('layouts.app')

@section('title', 'Client Testimonials')

@section('content')
<!-- Hero Section -->
<section class="relative py-20 bg-primary text-white">
    <div class="container mx-auto px-4">
        <div class="max-w-3xl">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">Client Testimonials</h1>
            <p class="text-xl opacity-90">Hear from our satisfied clients about their experience working with our financial consulting team.</p>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<section class="py-20">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @if($testimonials->count() > 0)
                @foreach($testimonials as $testimonial)
                <div class="card p-8">
                    <div class="flex items-center mb-6">
                        <img src="{{ asset('storage/' . $testimonial->photo) }}" alt="{{ $testimonial->client_name }}" class="w-16 h-16 rounded-full object-cover mr-4">
                        <div>
                            <h4 class="font-semibold text-lg">{{ $testimonial->client_name }}</h4>
                            <div class="text-yellow-400">
                                @for($i = 1; $i <= 5; $i++)
                                    @if($i <= $testimonial->rating)
                                        <i class="fas fa-star"></i>
                                    @else
                                        <i class="far fa-star"></i>
                                    @endif
                                @endfor
                            </div>
                        </div>
                    </div>
                    <p class="text-gray italic">"{{ $testimonial->comment }}"</p>
                </div>
                @endforeach
            @endif
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-20 bg-primary text-white">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-6">Join Our Satisfied Clients</h2>
        <p class="text-xl max-w-2xl mx-auto mb-10">Contact us today to learn how we can help you achieve your financial goals.</p>
        <a href="{{ route('contact') }}" class="btn btn-white text-primary">
            Get In Touch
        </a>
    </div>
</section>
@endsection