@extends('layouts.public')

@section('title', 'About Us | CEPI Pakistan')

@section('content')
<section class="bg-[linear-gradient(135deg,#0f172a_0%,#161950_55%,#1d4ed8_100%)] py-20 text-white">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <p class="text-sm font-semibold uppercase tracking-[0.3em] text-amber-300">About CEPI</p>
        <h1 class="mt-5 max-w-4xl text-4xl font-extrabold leading-tight sm:text-5xl">Shaping aspirants into exam-ready achievers.</h1>
        <p class="mt-6 max-w-3xl text-lg leading-8 text-white/75">
            Competitive Exams Preparatory Institute is built around disciplined exam preparation, strong mentorship, and subject-focused teaching for serious aspirants across Pakistan.
        </p>
    </div>
</section>

<section class="bg-white py-20">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="grid gap-8 md:grid-cols-2 xl:grid-cols-4">
            @foreach ($aboutStats as $stat)
                <div class="rounded-[28px] border border-slate-200 bg-slate-50 p-6 text-center shadow-theme-xs">
                    <p class="text-4xl font-extrabold text-slate-900">{{ $stat['value'] }}</p>
                    <p class="mt-3 text-sm text-slate-500">{{ $stat['label'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="bg-slate-50 py-20">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="grid gap-6 lg:grid-cols-2">
            @foreach ($aboutHighlights as $highlight)
                <article class="rounded-[30px] border border-slate-200 bg-white p-8 shadow-theme-xs">
                    <p class="text-sm font-semibold uppercase tracking-[0.24em] text-brand-600">{{ $highlight['title'] }}</p>
                    <p class="mt-5 text-base leading-8 text-slate-600">{{ $highlight['body'] }}</p>
                </article>
            @endforeach
        </div>
    </div>
</section>

<section class="bg-white py-20">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-[0.24em] text-brand-600">Faculty Highlights</p>
                <h2 class="mt-3 text-3xl font-extrabold tracking-tight text-slate-900 sm:text-4xl">Mentors and specialists guiding CEPI learners.</h2>
            </div>
            <a href="{{ route('contact') }}" class="inline-flex items-center rounded-2xl border border-slate-200 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">Talk to CEPI</a>
        </div>

        <div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            @foreach ($teamMembers as $member)
                <article class="rounded-[30px] border border-slate-200 bg-slate-50 p-6 shadow-theme-xs">
                    <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-brand-50 text-xl font-bold text-brand-700">
                        {{ strtoupper(substr($member['name'], 0, 1)) }}
                    </div>
                    <h3 class="mt-5 text-xl font-bold text-slate-900">{{ $member['name'] }}</h3>
                    <p class="mt-2 text-sm font-semibold uppercase tracking-[0.18em] text-slate-400">{{ $member['role'] }}</p>
                    <p class="mt-4 text-sm leading-7 text-slate-600">{{ $member['summary'] }}</p>
                </article>
            @endforeach
        </div>
    </div>
</section>
@endsection