@extends('layouts.portal')

@section('content')
<section class="section">
    <div style="max-width: 1100px; margin: 0 auto; padding-top: 4rem;">
        <h1 class="section-title">Client <span>Testimonials</span></h1>
        <p class="section-subtitle">Real experiences shared by clients who transformed their lives with our support.</p>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 3rem;">
            @if(isset($testimonials) && count($testimonials) > 0)
                @foreach($testimonials as $item)
                    <div style="background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 2rem;">
                        <p style="color: var(--text-main); font-style: italic; margin-bottom: 1.5rem;">"{{ $item->content ?? $item->feedback }}"</p>
                        <h4 style="color: var(--primary-light); margin-bottom: 0.2rem;">{{ $item->name ?? 'Verified Client' }}</h4>
                        <span style="color: var(--text-muted); font-size: 0.85rem;">{{ $item->role ?? 'Client' }}</span>
                    </div>
                @endforeach
            @else
                <div style="background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 2rem;">
                    <p style="color: var(--text-main); font-style: italic; margin-bottom: 1.5rem;">"The sessions helped me navigate stress and anxiety with clarity. Truly life-changing care!"</p>
                    <h4 style="color: var(--primary-light); margin-bottom: 0.2rem;">Priya Sharma</h4>
                    <span style="color: var(--text-muted); font-size: 0.85rem;">Verified Client</span>
                </div>
                <div style="background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 2rem;">
                    <p style="color: var(--text-main); font-style: italic; margin-bottom: 1.5rem;">"Extremely compassionate and professional. Booking online via Video Call was seamless."</p>
                    <h4 style="color: var(--primary-light); margin-bottom: 0.2rem;">Rahul Mehta</h4>
                    <span style="color: var(--text-muted); font-size: 0.85rem;">Verified Client</span>
                </div>
                <div style="background: rgba(17, 24, 39, 0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 2rem;">
                    <p style="color: var(--text-main); font-style: italic; margin-bottom: 1.5rem;">"Felt safe and listened to from session one. Highly recommended therapy services."</p>
                    <h4 style="color: var(--primary-light); margin-bottom: 0.2rem;">Ananya Patel</h4>
                    <span style="color: var(--text-muted); font-size: 0.85rem;">Verified Client</span>
                </div>
            @endif
        </div>
    </div>
</section>
@endsection