@extends('layouts.app')
@section('title', 'Student Testimonials — 500+ Japan Success Stories | Soyogi')

@section('content')
<div class="page-header">
    <div class="section-badge"><i class="fas fa-quote-left"></i> Testimonials</div>
    <span class="jp-sub">生徒の声</span>
    <h1>Real Stories From Our Students</h1>
    <p>500+ students have fulfilled their Japan dream with Soyogi. Here are their words.</p>
    <div class="breadcrumb">
        <a href="{{ route('home') }}">Home</a>
        <i class="fas fa-chevron-right" style="font-size:10px;"></i>
        <span class="current">Testimonials</span>
    </div>
</div>

<section class="section">
    <div class="section-inner">
        <!-- Stats -->
        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:64px;" data-aos="fade-up">
            @foreach([['500+','Success Stories'],['4.9/5','Average Rating'],['200+','Video Reviews'],['98%','Recommend Us']] as $s)
            <div style="background:white;border-radius:16px;padding:28px;text-align:center;border:1px solid var(--gray-200);">
                <div style="font-size:36px;font-weight:900;color:var(--red);margin-bottom:6px;">{{ $s[0] }}</div>
                <div style="font-size:13px;color:var(--gray-600);">{{ $s[1] }}</div>
            </div>
            @endforeach
        </div>

        <!-- Testimonials Grid -->
        @php $colors = ['var(--red)','var(--navy)','#7c3aed','var(--gold)','#dc2626','#059669']; @endphp
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:24px;">
            @forelse($testimonials as $t)
            @php $stars = str_repeat('★', $t->rating) . str_repeat('☆', 5 - $t->rating); @endphp
            <div style="background:white;border-radius:16px;padding:28px;border:1px solid var(--gray-200);transition:all 0.3s;" data-aos="fade-up" data-aos-delay="{{ $loop->index * 50 }}" onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 16px 40px rgba(0,0,0,0.08)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;">
                    <div style="font-size:13px;color:var(--gold);">{{ $stars }}</div>
                    @if($t->course)<span style="background:rgba(220,38,38,0.1);color:var(--red);font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;">{{ $t->course }}</span>@endif
                </div>
                <p style="color:var(--gray-600);font-size:14px;line-height:1.75;margin-bottom:20px;font-style:italic;">"{{ $t->content }}"</p>
                <div style="display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--gray-100);">
                    @if($t->photo)
                    <img src="{{ $t->photoUrl() }}" style="width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;" alt="{{ $t->name }}">
                    @else
                    <div style="width:44px;height:44px;border-radius:50%;background:{{ $colors[$loop->index % 6] }};display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:14px;flex-shrink:0;">{{ strtoupper(substr($t->name,0,2)) }}</div>
                    @endif
                    <div>
                        <div style="font-weight:700;color:var(--navy);font-size:14px;">{{ $t->name }}</div>
                        <div style="font-size:12px;color:var(--gray-600);">{{ $t->designation }}</div>
                    </div>
                </div>
            </div>
            @empty
            {{-- Fallback when no testimonials in DB --}}
            @foreach([['Rahul Sharma','Software Engineer, Tokyo','RS','N2','Soyogi didn\'t just teach me Japanese — they gave me a new life in Japan.','★★★★★'],['Priya Mehta','Student, Kyoto University','PM','N1','I cleared N1 on the first attempt. Now I\'m at Kyoto University on a scholarship.','★★★★★'],['Amit Verma','Chef, Kyoto Restaurant','AV','N3','Soyogi taught restaurant culture and kitchen etiquette too. Best decision of my life.','★★★★★']] as $i=>$t)
            <div style="background:white;border-radius:16px;padding:28px;border:1px solid var(--gray-200);" data-aos="fade-up">
                <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;">
                    <div style="font-size:13px;color:var(--gold);">{{ $t[5] }}</div>
                    <span style="background:rgba(220,38,38,0.1);color:var(--red);font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;">JLPT {{ $t[3] }}</span>
                </div>
                <p style="color:var(--gray-600);font-size:14px;line-height:1.75;margin-bottom:20px;font-style:italic;">"{{ $t[4] }}"</p>
                <div style="display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--gray-100);">
                    <div style="width:44px;height:44px;border-radius:50%;background:{{ $colors[$i % 6] }};display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:14px;flex-shrink:0;">{{ $t[2] }}</div>
                    <div><div style="font-weight:700;color:var(--navy);font-size:14px;">{{ $t[0] }}</div><div style="font-size:12px;color:var(--gray-600);">{{ $t[1] }}</div></div>
                </div>
            </div>
            @endforeach
            @endforelse
        </div>

        <!-- CTA -->
        <div style="text-align:center;margin-top:60px;padding:48px;background:linear-gradient(135deg,var(--navy),#1e3a5f);border-radius:24px;" data-aos="fade-up">
            <h2 style="font-size:30px;font-weight:800;color:white;margin-bottom:12px;">Your Story Could Be Next</h2>
            <p style="color:rgba(255,255,255,0.65);font-size:15px;margin-bottom:28px;">Join Soyogi today and start building your own Japan success story.</p>
            <div style="display:flex;gap:14px;justify-content:center;flex-wrap:wrap;">
                <a href="#" onclick="openModal();return false;" class="btn-primary">Start My Journey</a>
                <a href="{{ route('courses.index') }}" class="btn-secondary">Explore Courses</a>
            </div>
        </div>
    </div>
</section>
@endsection