@extends('layouts.app')

@section('title', 'About Us | Angel Care Institute')

@section('content')
<main class="bg-white">
    <section class="relative pt-32 pb-20 overflow-hidden">
        <div class="absolute inset-0" style="background:#027fc5;"></div>
        <div class="relative z-10 container mx-auto px-4 lg:px-8 text-white">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div>
                    <nav class="flex items-center gap-2 text-sm text-white/70 mb-6">
                        <a href="{{ route('home') }}" class="hover:text-white">Home</a>
                        <i class="fas fa-chevron-right text-xs"></i>
                        <span class="text-white">About</span>
                    </nav>
                    <span class="inline-flex items-center px-4 py-2 bg-white/15 border border-white/20 rounded-full text-sm font-semibold mb-5">
                        <i class="fas fa-heartbeat mr-2"></i>About Angel Care
                    </span>
                    <h1 class="text-4xl lg:text-6xl font-extrabold leading-tight mb-5">Training caregivers for global careers</h1>
                    <p class="text-lg lg:text-xl text-blue-100 leading-relaxed">Angel Care Institute helps students build practical caregiving skills, prepare for international standards, and take confident steps toward employment abroad.</p>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-white/10 border border-white/20 rounded-2xl p-6 backdrop-blur-sm">
                        <div class="text-4xl font-extrabold">{{ $courses->count() }}+</div>
                        <div class="text-sm text-blue-100 mt-1">Active Courses</div>
                    </div>
                    <div class="bg-white/10 border border-white/20 rounded-2xl p-6 backdrop-blur-sm">
                        <div class="text-4xl font-extrabold">{{ $countries->count() }}+</div>
                        <div class="text-sm text-blue-100 mt-1">Destinations</div>
                    </div>
                    <div class="bg-white/10 border border-white/20 rounded-2xl p-6 backdrop-blur-sm">
                        <div class="text-4xl font-extrabold">8K+</div>
                        <div class="text-sm text-blue-100 mt-1">Graduates Guided</div>
                    </div>
                    <div class="bg-white/10 border border-white/20 rounded-2xl p-6 backdrop-blur-sm">
                        <div class="text-4xl font-extrabold">97%</div>
                        <div class="text-sm text-blue-100 mt-1">Visa Success</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-4 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div class="lg:col-span-1">
                    <span class="inline-flex items-center px-4 py-2 bg-primary-100 text-primary-600 text-sm font-semibold rounded-full mb-4">
                        <i class="fas fa-bullseye mr-2"></i>Our Purpose
                    </span>
                    <h2 class="text-3xl lg:text-4xl font-extrabold text-gray-900 leading-tight">Practical training, honest counseling, and career-focused support.</h2>
                </div>
                <div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
                        <i class="fas fa-user-nurse text-3xl text-primary-500 mb-4"></i>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">Hands-on Care Training</h3>
                        <p class="text-gray-600 leading-relaxed">Students learn caregiving fundamentals, patient support, elderly care, communication, and workplace readiness through practical instruction.</p>
                    </div>
                    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
                        <i class="fas fa-globe text-3xl text-primary-500 mb-4"></i>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">International Pathways</h3>
                        <p class="text-gray-600 leading-relaxed">Our team guides learners through destination options, documentation expectations, interviews, and preparation for overseas opportunities.</p>
                    </div>
                    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
                        <i class="fas fa-certificate text-3xl text-primary-500 mb-4"></i>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">Recognized Certification</h3>
                        <p class="text-gray-600 leading-relaxed">Programs are structured around career-relevant skills and certificates that support professional caregiving applications.</p>
                    </div>
                    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
                        <i class="fas fa-headset text-3xl text-primary-500 mb-4"></i>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">Student Support</h3>
                        <p class="text-gray-600 leading-relaxed">From course selection to application follow-up, students receive guidance from a team focused on clear next steps.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if($testimonials->isNotEmpty())
    <section class="py-20 bg-white">
        <div class="container mx-auto px-4 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-12">
                <span class="inline-flex items-center px-4 py-2 bg-primary-100 text-primary-600 text-sm font-semibold rounded-full mb-4">
                    <i class="fas fa-star mr-2"></i>Student Voices
                </span>
                <h2 class="text-3xl lg:text-5xl font-extrabold text-gray-900">Trusted by future caregivers</h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                @foreach($testimonials as $testimonial)
                <div class="bg-gray-50 rounded-2xl border border-gray-100 p-6">
                    <div class="text-yellow-400 mb-4">
                        @for($i = 0; $i < 5; $i++)<i class="fas fa-star"></i>@endfor
                    </div>
                    <p class="text-gray-600 leading-relaxed mb-5">{{ $testimonial->quote }}</p>
                    <div class="font-bold text-gray-900">{{ $testimonial->name }}</div>
                    @if($testimonial->role)<div class="text-sm text-gray-500">{{ $testimonial->role }}</div>@endif
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

</main>
@endsection