@extends('frontend.layouts.app')

@section('title', 'Testimonials — ' . ($settings->company_name ?? 'PT. Gemilang Inti Teknologi'))

@section('content')

{{-- Header --}}
<section class="page-header relative overflow-hidden" style="background:linear-gradient(145deg,#ffffff 0%,#fff5f5 100%);">
    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
        <div class="absolute -top-32 -right-32 w-96 h-96 rounded-full" style="background:radial-gradient(circle,rgba(204,21,18,.06),transparent 65%);"></div>
    </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative text-center" data-aos="fade-up">
        <div class="badge-primary mb-4 justify-center">Client Reviews</div>
        <h1 class="text-4xl md:text-5xl font-black text-neutral-900 mb-4" style="font-family:'Sora',sans-serif;">Client Testimonials</h1>
        <p class="text-neutral-500 max-w-2xl mx-auto">See what our clients have to say about working with us.</p>
    </div>
    <svg viewBox="0 0 1440 48" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" class="w-full block" style="height:48px;display:block;margin-top:3rem;margin-bottom:-1px;">
        <path d="M0,0 C360,48 1080,48 1440,0 L1440,48 L0,48 Z" fill="#ffffff"/>
    </svg>
</section>

{{-- Testimonials Grid --}}
<section class="py-14 bg-white" style="margin-top:-1px;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
            @forelse($testimonials as $index => $testimonial)
            <div class="bg-white rounded-2xl p-7 border border-neutral-200 hover:border-red-200 hover:shadow-xl transition-all flex flex-col hover:-translate-y-1 duration-300"
                 data-aos="fade-up" data-aos-delay="{{ min(($index%3)*60,150) }}">

                {{-- Stars --}}
                <div class="flex items-center gap-0.5 mb-4">
                    @for($i=0;$i<5;$i++)
                    <svg class="w-4 h-4 {{ $i<($testimonial->rating??5)?'text-amber-400':'text-neutral-200' }}" 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>

                {{-- Quote mark --}}
                <svg class="w-7 h-7 text-red-200 mb-3 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>

                <blockquote class="text-neutral-600 text-sm leading-relaxed mb-5 flex-1">"{{ $testimonial->content }}"</blockquote>

                <div class="flex items-center gap-3 pt-4 border-t border-neutral-100">
                    @if($testimonial->client_photo_url)
                        <img src="{{ $testimonial->client_photo_url }}" alt="{{ $testimonial->client_name }}" class="w-11 h-11 rounded-full object-cover ring-2 ring-red-100 flex-shrink-0">
                    @else
                        <div class="w-11 h-11 rounded-full gradient-primary flex items-center justify-center flex-shrink-0 shadow-md">
                            <span class="text-white font-black text-sm">{{ strtoupper(substr($testimonial->client_name,0,1)) }}</span>
                        </div>
                    @endif
                    <div class="min-w-0">
                        <p class="font-bold text-neutral-900 text-sm truncate">{{ $testimonial->client_name }}</p>
                        <p class="text-neutral-400 text-xs truncate">{{ $testimonial->client_position }}{{ $testimonial->client_company?', '.$testimonial->client_company:'' }}</p>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-span-full py-16 text-center">
                <p class="text-neutral-400">No testimonials yet.</p>
            </div>
            @endforelse
        </div>
    </div>
</section>

@endsection