@extends('layouts.public')

@section('public-content')
<section class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">

    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 sm:p-8">
        <h1 class="font-display text-3xl font-bold text-gray-900">About {{ $school->name }}</h1>

        @if($settings['about'] ?? false)
            <div class="mt-4 text-gray-700 leading-relaxed text-sm whitespace-pre-line">{{ $settings['about'] }}</div>
        @endif

        @if($settings['motto'] ?? false)
            <p class="mt-4 italic text-gray-500">"{{ $settings['motto'] }}"</p>
        @endif

        <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
            @if($settings['phone'] ?? false)
                <div class="rounded-lg bg-gray-50 p-4 ring-1 ring-gray-900/5">
                    <span class="font-medium text-gray-900">Phone:</span>
                    <span class="text-gray-600">{{ $settings['phone'] }}</span>
                </div>
            @endif
            @if($settings['email'] ?? false)
                <div class="rounded-lg bg-gray-50 p-4 ring-1 ring-gray-900/5">
                    <span class="font-medium text-gray-900">Email:</span>
                    <span class="text-gray-600">{{ $settings['email'] }}</span>
                </div>
            @endif
            @if($settings['address'] ?? false)
                <div class="rounded-lg bg-gray-50 p-4 ring-1 ring-gray-900/5 sm:col-span-2">
                    <span class="font-medium text-gray-900">Address:</span>
                    <span class="text-gray-600">{{ $settings['address'] }}</span>
                </div>
            @endif
        </div>
    </div>

    @if($faqs->count())
        <div class="mt-10 rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 sm:p-8">
            <h2 class="font-display text-xl font-bold text-gray-900 mb-6">Frequently Asked Questions</h2>
            <div class="space-y-3">
                @foreach($faqs as $faq)
                    <details class="group rounded-lg ring-1 ring-gray-900/5">
                        <summary class="flex cursor-pointer items-center justify-between p-4 text-sm font-medium text-gray-900 select-none">
                            <span>{{ $faq->question }}</span>
                            <svg class="h-5 w-5 text-gray-500 group-open:rotate-180 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                        </summary>
                        <div class="px-4 pb-4 text-sm text-gray-600">{{ $faq->answer }}</div>
                    </details>
                @endforeach
            </div>
        </div>
    @endif

    @if($testimonials->count())
        <div class="mt-10 rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6 sm:p-8">
            <h2 class="font-display text-xl font-bold text-gray-900 mb-6">Testimonials</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                @foreach($testimonials as $t)
                    <div class="rounded-lg bg-gray-50 p-5 ring-1 ring-gray-900/5">
                        @if($t->rating)
                            <div class="flex gap-0.5 text-yellow-400 mb-2">
                                @for($i = 0; $i < $t->rating; $i++)
                                    <svg class="h-4 w-4 fill-current" 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>
                        @endif
                        <p class="text-sm text-gray-600 italic">"{{ $t->message }}"</p>
                        <p class="mt-3 text-sm font-medium text-gray-900">{{ $t->name }}<span class="text-gray-500 font-normal"> &middot; {{ $t->role }}</span></p>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

</section>
@endsection