@extends('layouts.public')

@section('public-content')
    {{-- Hero --}}
    <section class="relative bg-primary-700 text-white">
        <div class="mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8 text-center">
            <h1 class="font-display text-4xl md:text-5xl font-bold">{{ $school->name }}</h1>
            @if($settings['motto'] ?? false)
                <p class="mt-4 text-lg text-primary-100 italic">"{{ $settings['motto'] }}"</p>
            @endif
            <p class="mt-6 text-lg text-primary-200">{{ $settings['about'] ?? 'Nurturing Excellence, Building Futures' }}</p>
            <div class="mt-8 flex justify-center gap-4">
                <a href="{{ route('public.about', $school->id) }}" class="rounded-lg bg-white px-6 py-3 text-sm font-semibold text-primary-700 shadow hover:bg-gray-50">About Us</a>
                <a href="{{ route('school.login', $school->id) }}" class="rounded-lg border border-white/30 px-6 py-3 text-sm font-semibold text-white hover:bg-white/10">Parent/Student Portal</a>
            </div>
        </div>
    </section>

    {{-- Quick Info --}}
    <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div class="rounded-xl bg-white p-6 text-center shadow-sm ring-1 ring-gray-900/5">
                <p class="text-3xl font-bold text-primary-600">{{ $school->studentModels()->count() }}</p>
                <p class="mt-1 text-sm text-gray-600">Students</p>
            </div>
            <div class="rounded-xl bg-white p-6 text-center shadow-sm ring-1 ring-gray-900/5">
                <p class="text-3xl font-bold text-primary-600">{{ $school->teacherModels()->count() }}</p>
                <p class="mt-1 text-sm text-gray-600">Teachers</p>
            </div>
            <div class="rounded-xl bg-white p-6 text-center shadow-sm ring-1 ring-gray-900/5">
                <p class="text-3xl font-bold text-primary-600">{{ $school->classrooms()->count() }}</p>
                <p class="mt-1 text-sm text-gray-600">Classes</p>
            </div>
            <div class="rounded-xl bg-white p-6 text-center shadow-sm ring-1 ring-gray-900/5">
                <p class="text-3xl font-bold text-primary-600">{{ $school->subjects()->count() }}</p>
                <p class="mt-1 text-sm text-gray-600">Subjects</p>
            </div>
        </div>
    </section>

    {{-- Latest News --}}
    @if($news->count())
    <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <h2 class="font-display text-2xl font-bold text-gray-900 mb-6">Latest News</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach($news as $article)
                <a href="{{ route('public.news-article', [$school->id, $article->slug]) }}" class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-5 hover:ring-primary-500 hover:shadow-md transition-all">
                    <p class="text-xs text-gray-500">{{ $article->created_at->format('d M Y') }}</p>
                    <h3 class="mt-2 font-display font-semibold text-gray-900 hover:text-primary-600">{{ $article->title }}</h3>
                    <p class="mt-2 text-sm text-gray-600 line-clamp-2">{{ Str::limit(strip_tags($article->content), 120) }}</p>
                </a>
            @endforeach
        </div>
        <div class="mt-6 text-center"><a href="{{ route('public.news', $school->id) }}" class="text-sm font-semibold text-primary-600 hover:text-primary-700">View All News &rarr;</a></div>
    </section>
    @endif

    {{-- Upcoming Events --}}
    @if($events->count())
    <section class="bg-white py-12">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <h2 class="font-display text-2xl font-bold text-gray-900 mb-6">Upcoming Events</h2>
            <div class="space-y-4">
                @foreach($events as $event)
                    <div class="flex items-center gap-4 rounded-lg border border-gray-200 p-4">
                        <div class="flex h-14 w-14 flex-col items-center justify-center rounded-lg bg-primary-50 text-primary-700 shrink-0">
                            <span class="text-xs font-semibold uppercase">{{ $event->event_date->format('M') }}</span>
                            <span class="text-lg font-bold leading-none">{{ $event->event_date->format('d') }}</span>
                        </div>
                        <div>
                            <h3 class="font-medium text-gray-900">{{ $event->title }}</h3>
                            <p class="text-sm text-gray-500">{{ $event->location ?? '' }} {{ $event->event_time ? 'at ' . $event->event_time : '' }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="mt-6 text-center"><a href="{{ route('public.events', $school->id) }}" class="text-sm font-semibold text-primary-600 hover:text-primary-700">All Events &rarr;</a></div>
        </div>
    </section>
    @endif

    {{-- Testimonials --}}
    @if($testimonials->count())
    <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <h2 class="font-display text-2xl font-bold text-gray-900 mb-6">What People Say</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach($testimonials as $t)
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
                    <div class="flex gap-0.5 text-yellow-400 mb-3">
                        @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>
                    <p class="text-sm text-gray-600 italic">"{{ $t->message }}"</p>
                    <p class="mt-4 text-sm font-medium text-gray-900">{{ $t->name }}<span class="text-gray-500 font-normal"> &middot; {{ $t->role }}</span></p>
                </div>
            @endforeach
        </div>
    </section>
    @endif
@endsection