@extends('layouts.app')
@section('title', 'Profil Sekolah - ' . ($setting->nama_sekolah ?? 'Nama Sekolah'))
@section('content')
    <!-- Banner Profil -->
    <section class="relative bg-cover bg-center h-[60vh] flex items-center justify-center"
        style="background-image: url('{{ $profil->banner ? asset('storage/' . $profil->banner) : 'https://sph.edu/wp-content/uploads/2023/06/overview-SC-landscape_1.jpg' }}');">
        <div class="absolute inset-0 bg-black/50"></div>
        <div class="relative z-10 text-center text-white" data-aos="fade-up">
            <h1 class="text-4xl md:text-5xl font-extrabold mb-2">Profil Sekolah</h1>
            <p class="text-lg text-gray-200">Mengenal lebih dekat {{ $setting->nama_sekolah ?? 'Nama Sekolah' }}</p>
        </div>
    </section>

    <!-- Sejarah Sekolah -->
    <section class="py-20 bg-gray-50 px-6" data-aos="fade-up">
        <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 items-center">
            <img src="{{ optional($profil)->front_image ? asset('storage/' . optional($profil)->front_image) : 'https://smkpgri1giri.wordpress.com/wp-content/uploads/2014/12/cropped-img_2537.jpg' }}"
                alt="Sejarah Sekolah" class="rounded-2xl shadow-lg w-full object-cover" data-aos="zoom-in">
            <div>
                <h2 class="text-3xl font-bold text-blue-700 mb-4">Sejarah Singkat</h2>
                <p class="text-gray-700 leading-relaxed mb-4 text-justify">
                    <strong>{{ $setting->nama_sekolah ?? 'Nama Sekolah' }}</strong>
                    {!! $profil->sejarah ?? 'Sejarah Sekolah' !!}
                </p>
            </div>
        </div>
    </section>

    <!-- Visi dan Misi -->
    <section class="bg-white py-20 px-6" data-aos="fade-up">
        <div class="max-w-6xl mx-auto text-center">
            <h2 class="text-3xl font-bold text-blue-700 mb-10">Visi & Misi Sekolah</h2>
            <div class="grid md:grid-cols-2 gap-12 text-left">
                <div data-aos="fade-right">
                    <h3 class="text-2xl font-semibold mb-3 text-gray-800">Visi</h3>
                    <p class="text-gray-700 leading-relaxed italic">
                        “{{ $profil->visi ?? 'Visi Sekolah' }}”
                    </p>
                </div>
                <div data-aos="fade-left">
                    <h3 class="text-2xl font-semibold mb-3 text-gray-800">Misi</h3>
                    <ul class="list-disc list-inside text-gray-700 space-y-2 text-justify">
                        @foreach (explode('<br>', $profil->misi ?? '') as $item)
                            @if (trim($item) != '')
                                <li>{!! trim($item) !!}</li>
                            @endif
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Struktur Organisasi -->
    <section class="bg-gray-100 py-20 px-6" data-aos="fade-up">
        <div class="max-w-6xl mx-auto text-center">
            <h2 class="text-3xl font-bold text-blue-700 mb-10">Struktur Organisasi</h2>
            <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-10">
                @forelse ($profil->structures as $index => $person)
                    <div data-aos="zoom-in" data-aos-delay="{{ 100 * $index }}">
                        <img src="{{ $person->photo ? asset('storage/' . $person->photo) : 'https://via.placeholder.com/400x400?text=No+Image' }}"
                            alt="{{ $person->position }}"
                            class="rounded-full mx-auto mb-4 w-40 h-40 object-cover shadow-lg">
                        <h3 class="text-lg font-semibold text-gray-800">{{ $person->name }}</h3>
                        <p class="text-sm text-gray-600">{{ $person->position }}</p>
                    </div>
                @empty
                    <p class="col-span-full text-center text-gray-500">Belum ada data struktur organisasi.</p>
                @endforelse

            </div>
        </div>
    </section>
@endsection